Müde von langweiligem, einfachem HTML und ewig langem CSS? Lernen Sie Skeleton kennen, die perfekte, leichtgewichtige CSS-Ergänzung zum Rest des Boilerplate-Codes, den Sie bereits als Ausgangspunkt für jedes Projekt verwenden.
Boilerplate-Code ist jeder sich wiederholende Code, der immer wieder auftaucht, um ein Ergebnis zu erzielen, das eigentlich viel einfacher sein müsste. Und einfach, Basis-Styling von HTML sollte viel einfacher sein.
Die meisten Front-End-Styling-Bibliotheken oder -Frameworks arbeiten, indem sie Stile auf Klassen setzen, die vom Benutzer verlangen, sich an Klassennamen zu erinnern, um HTML-Elementen Stil hinzuzufügen. Skeleton wendet den Großteil der Stile direkt auf HTML-Tags an. Tabellen, Formulare, Listen, Schaltflächen, was immer Sie wollen, es wird gestaltet.
Einstieg
Skeleton empfiehlt Ihnen, auf seine Website zu gehen und die bequem notierte, unminierte, fertige CSS-Datei herunterzuladen, damit Sie selbst einen Blick unter die Haube werfen können. Skeleton umfasst insgesamt weniger als 400 Zeilen Code! Es gibt auch einen praktischen CDN-Link für eine noch schnellere Einrichtung, wenn Anpassungen für Ihr Projekt nicht entscheidend sind. Wie auch immer Sie es einbinden, sobald Sie das Stylesheet im Kopf Ihres Dokuments verlinkt haben, können Sie loslegen!
Das 12-Spalten-Raster
Der Erfolg von Skeleton liegt darin, dass es die Attribute, die andere CSS-Frameworks bieten, aufgreift und verdammt einfach macht. Durch die Verwendung des Rastersystems bleibt das Layout Ihres Browsers flüssig und passt sich automatisch der Fenstergröße an. Um die Spalten zu nutzen, verwenden Sie eine Nummer und die Klasse „column“ oder „columns“ oder eine Kurzform von „one-third“, „one-half“ usw.
Skeleton setzt die maximale Breite auf 960px, was automatisch für große, kleine und mittlere Bildschirme passt. Falls gewünscht, können Sie die maximale Breite mit einer CSS-Zeile ändern, und alle Spalten werden entsprechend angepasst!
Typografie
Die Schrift in Skeleton ist auf rems eingestellt, um basierend auf einer einzigen <html>-Schriftgrößen-Eigenschaft reaktionsfähig zu sein. Die Basisschriftart ist Raleway, die auf 15rem bei einer Zeilenhöhe von 1,6 (15px bzw. 24px) eingestellt ist.
Überschriften haben ihre eigene Größe mit spezifischen Buchstabenabständen, Zeilenhöhen und Rändern.
Buttons gibt es in zwei Varianten. Das Standard-Button-Styling existiert von Haus aus für das <button>-Tag (und alle anderen geeigneten Formularelemente), während die zweite, lebhaftere Button-Option mit einer ‚.button-primary‘-Klasse angewendet werden kann.
Wann sollte ich Skeleton verwenden?
Skeleton ist eine leichtgewichtige, reaktionsfähige und hochgradig anpassbare CSS-Bibliothek, die speziell für mobile Geräte entwickelt wurde. Sie muss nicht kompiliert oder installiert werden und funktioniert gut mit zusätzlichen CSS-Stylesheets und Frontend-Frameworks. Verwenden Sie Skeleton für schnelles, lauffähiges CSS, das sich hervorragend für Demos oder MVPs eignet. Und da es in der Minified-Version weniger als 12 KB groß ist, ist es auch perfekt, wenn es auf Geschwindigkeit ankommt. Denken Sie daran, dass Skeleton im Kern ein Skelett aus reinen Komponenten und Styling ist. Mit nur einem Link können Sie langweiliges HTML in eine vollständig gestylte Seite verwandeln, ohne dass Sie Abstriche bei der Geschwindigkeit machen oder sich eine Bibliothek von Klassennamen merken müssen.
