Trött på tråkig, vanlig HTML och evigt lång CSS? Möt Skeleton, det perfekta, lätta CSS-tillägget till resten av den boilerplate-kod som du redan har med som utgångspunkt för varje projekt.
Boilerplate-kod är en upprepad kod som dyker upp om och om igen för att få ett resultat som verkar som om det borde vara mycket enklare. Och enkel, grundläggande styling av HTML borde vara mycket enklare.
De flesta stylingbibliotek eller ramverk för frontend fungerar genom att ställa in stilar på klasser som kräver att användaren kommer ihåg klassnamn för att lägga till stil på HTML-element. Skeleton fungerar genom att tillämpa majoriteten av stilen direkt på HTML-taggar. Tabeller, formulär, listor, knappar, du kan säga vad du vill, de skapar stil för det.
För att komma igång
Skeleton rekommenderar att du går in på deras hemsida och laddar ner den bekvämt noterade, ominifierade, färdiga CSS-filen så att du själv kan ta en titt under huven. Skeleton har totalt färre än 400 rader kod! Det finns också en praktisk CDN-länk för ännu snabbare installation när anpassningen inte är avgörande för ditt projekt. Hur du än väljer att inkludera det, när du väl har formatmallarna länkade i huvudet på ditt dokument är du redo att sätta igång!
The 12-Column Grid
Skeletons framgång ligger i att ta de attribut som andra CSS-ramverk tillhandahåller och göra det dödligt enkelt. Genom att använda rutnätssystemet förblir layouten i din webbläsare flytande och anpassar sig automatiskt till fönsterstorleken. För att använda kolumnerna använder du ett nummer och en klass som ”column” eller ”columns”, eller en kortfattad metod som ”one-third”, ”one-half” etc.
Skeleton ställer in max-bredd till 960px, vilket automatiskt passar stora, små och medelstora skärmar. Om du vill kan du ändra max-width med en rad CSS och alla kolumner kommer att ändra storlek i enlighet med detta!
Typografi
Typ i Skeleton är inställd på rems för att vara responsivt storleksanpassad baserat på en enda <html> font-size egenskap. Typsnittsbasen är Raleway, inställd på 15rem över en radhöjd på 1,6 (15px respektive 24px).
Överskriften har sin egen storlek med specifika bokstavsavstånd, radhöjd och marginaler.
Knappar finns i två alternativ. Standardknappstil finns i sig för <button>-taggen (och andra lämpliga formulärelement), medan det andra, mer levande knappalternativet kan tillämpas med en ’.button-primary’-klass.
När ska jag använda Skeleton?
Skeleton är ett lättviktigt, responsivt och mycket anpassningsbart CSS-bibliotek som byggts med mobilen i åtanke. Det behövs ingen kompilering eller installation och det fungerar bra med ytterligare CSS-stilblad och ramverk för front-end. Använd skeleton för snabb, fungerande CSS som är utmärkt för demos eller MVP:er. Och eftersom den är mindre än 12 kb för den minifierade versionen är den också perfekt när hastigheten är viktigast. Kom ihåg att Skeleton i grund och botten är ett skelett av rena komponenter och styling. Med bara en länk kan du förvandla tråkig HTML till en fullt stylad sida utan att behöva offra hastighet eller memorera ett bibliotek med klassnamn.
