Verveeld van saaie, platte HTML en eeuwig lange CSS? Maak kennis met Skeleton, de perfecte, lichtgewicht, CSS toevoeging aan de rest van de boilerplate code die je al opneemt als startpunt van elk project.
Boilerplate code is alle repeterende code die steeds weer opduikt om een resultaat te krijgen dat veel simpeler lijkt te moeten zijn. En eenvoudige, basis styling van HTML zou veel eenvoudiger moeten zijn.
De meeste front-end styling bibliotheken of frameworks werken door stijlen op klassen in te stellen waarbij de gebruiker class namen moet onthouden om stijl aan HTML elementen toe te voegen. Skeleton werkt door het merendeel van de styling direct op HTML-tags toe te passen. Tabellen, Formulieren, Lijsten, Knoppen, noem maar op, zij stylen het.
Aan de slag
Skeleton raadt u aan naar hun website te gaan en het handig genoteerde, ongeminimaliseerde, kant-en-klare CSS-bestand te downloaden, zodat u zelf eens onder de motorkap kunt kijken. Skeleton bevat in totaal minder dan 400 regels code! Er is ook een handige CDN link voor een nog snellere installatie wanneer aanpassing niet essentieel is voor uw project. Hoe je het ook opneemt, zodra je het stylesheet in de head van je document hebt staan, ben je klaar om te gaan!
The 12-Column Grid
Skeleton’s succes ligt in het nemen van de attributen die andere CSS frameworks bieden en het doodsimpel te maken. Door het rastersysteem te gebruiken, blijft de layout van je browser vloeiend en past zich automatisch aan aan de venstergrootte. Om de kolommen te gebruiken, gebruik je een nummer en klasse van ‘column’ of ‘columns’, of een steno methode van ‘one-third,’ ‘one-half,’ etc.
Skeleton stelt de max-width in op 960px, wat automatisch past voor grote, kleine en middelgrote schermen. Desgewenst kunt u de max-width wijzigen met één regel CSS, en alle kolommen worden dienovereenkomstig aangepast!
Typography
Type in Skeleton is ingesteld op rems om responsief te worden verkleind op basis van een enkele <html> font-size eigenschap. De basis van het lettertype is Raleway, ingesteld op 15rem over een regelhoogte van 1,6 (respectievelijk 15px en 24px).
Koppen hebben hun eigen formaat met specifieke letterspacing, regelhoogte en marges.
Knoppen zijn er in twee varianten. De standaard button-styling is inherent aan de <button> tag (en andere geschikte formulierelementen), terwijl de tweede, meer levendige, button-optie kan worden toegepast met een ‘.button-primary’ class.
Wanneer moet ik Skeleton gebruiken?
Skeleton is een lichtgewicht, responsieve en zeer aanpasbare CSS-bibliotheek die is gebouwd met mobiel in het achterhoofd. Compileren of installeren is niet nodig, en het werkt goed met aanvullende CSS stylesheets en front-end Frameworks. Gebruik skeleton voor snelle, up-and-running CSS die geweldig is voor demo’s of MVP’s. En omdat het minder dan 12kb is voor de geminificeerde versie, is het ook perfect voor wanneer snelheid het belangrijkst is. Onthoud, Skeleton is in de kern een skelet van pure componenten en styling. Met slechts één koppeling kunt u saaie HTML omzetten in een volledig opgemaakte pagina zonder dat u snelheid hoeft op te offeren of een bibliotheek met class-namen uit het hoofd hoeft te leren.
