Træt af kedelig, almindelig HTML og evigt lang CSS? Mød Skeleton, den perfekte, lette CSS-tilføjelse til resten af den boilerplate-kode, som du allerede medtager som udgangspunkt for ethvert projekt.
Boilerplate-kode er enhver gentagende kode, der dukker op igen og igen for at opnå et resultat, der ser ud til at skulle være meget enklere. Og simpel, grundlæggende styling af HTML burde være meget enklere.
De fleste front-end stylingbiblioteker eller frameworks fungerer ved at sætte stilarter på klasser, der kræver, at brugeren skal huske klassebetegnelser for at tilføje stil til HTML-elementer. Skeleton fungerer ved at anvende størstedelen af styling direkte på HTML-tags. Tabeller, formularer, lister, knapper, du kan sige hvad du vil, og de giver det stil.
Kom i gang
Skeleton anbefaler, at du går til deres websted og downloader den bekvemt noterede, uminificerede, færdige CSS-fil, så du selv kan tage et kig under motorhjelmen. Skeleton er i alt på mindre end 400 linjer kode! Der er også et praktisk CDN-link til en endnu hurtigere opsætning, når tilpasningen ikke er afgørende for dit projekt. Uanset hvordan du vælger at inkludere det, så er du klar til at gå i gang, når du først har stylesheetet linket i hovedet af dit dokument!
Det 12-kolonnede gitter
Skeletons succes ligger i at tage de attributter, som andre CSS-rammer giver, og gøre det død enkelt. Ved at bruge grid-systemet forbliver layoutet i din browser flydende og tilpasser sig automatisk til vinduets størrelse. Hvis du vil udnytte kolonnerne, skal du bruge et nummer og en klasse som “column” eller “columns” eller en kortfattet metode som “one-third”, “one-half” osv.
Skeleton sætter max-bredde til 960px, hvilket automatisk passer til store, små og mellemstore skærme. Hvis du ønsker det, kan du ændre max-width med én linje CSS, og alle kolonner vil ændre størrelsen i overensstemmelse hermed!
Typografi
Type i Skeleton er indstillet til rems for at være responsivt dimensioneret baseret på en enkelt <html> font-size-egenskab. Fontbasen er Raleway, der er indstillet til 15rem over en linjehøjde på 1,6 (henholdsvis 15px og 24px).
Overskrifter har deres særskilte størrelse med specifik bogstavafstand, linjehøjde og marginer.
Knapper findes i to muligheder. Standardknapstyling findes i sagens natur for <button>-tagget (og andre relevante formularelementer), mens den anden, mere levende knapindstilling kan anvendes med en ‘.button-primary’-klasse.
Hvornår skal jeg bruge Skeleton?
Skeleton er et letvægts, responsivt og meget tilpasseligt CSS-bibliotek, der er bygget med mobilen i tankerne. Der er ingen kompilering eller installation nødvendig, og det fungerer godt sammen med yderligere CSS-stilsark og front-end frameworks. Brug skeleton til hurtig og velfungerende CSS, der er fantastisk til demoer eller MVP’er. Og da den er mindre end 12 kb for den minificerede version, er den også perfekt, når hastigheden betyder mest. Husk, at Skeleton i sin kerne er et skelet af rene komponenter og styling. Med blot ét link kan du forvandle kedelig HTML til en fuldt stylet side uden at skulle ofre hastighed eller huske et bibliotek af klassebetegnelser.
