Lær Bulma CSS på 5 minutter - En tutorial til begyndere
Bulma er en enkel, elegant og moderne CSS-ramme, som mange udviklere foretrækker frem for Bootstrap. Personligt synes jeg Bulma har et bedre design som standard, og det føles også mere let.
I denne vejledning giver jeg dig en super hurtig introduktion til biblioteket.
Vi har også oprettet et gratis Bulma-kursus. Klik her for at tjekke det ud!

Opsætningen
Opsætning af Bulma er super let, og du kan gøre det på flere forskellige måder, uanset om du foretrækker NPM, downloader det direkte fra dokumenterne eller bruger et CDN. Vi skal bare linke til en CDN fra vores HTML-fil som denne:
Dette giver os adgang til Bulma-klasser. Og det er faktisk alt, hvad Bulma er - en samling af klasser.
Modifikatorer
Den første ting du skal lære om Bulma er modifikationsklasser. Disse giver dig mulighed for at indstille alternative stilarter til næsten alle Bulma-elementerne. De starter alle med is-*
eller has-*
, og derefter erstatter du den *
med den stil, du ønsker.
For at forstå dette koncept ordentligt, lad os starte med at se på knapper.
Knapper
For at gøre en normal knap til en Bulma-knap, giver vi den bare klassen af button
.
Click here
Hvilket resulterer i følgende stil:

Som du kan se, har det et flot fladt design som standard. For at ændre styling bruger vi Bulma-modifikatorer. Lad os starte med at gøre knappen større, grøn og med afrundede hjørner:
Click here
Dette resultat er en behagelig knap:

Du kan også bruge modifikatorer til at kontrollere tilstanden af knapper. Lad os for eksempel tilføje klassen is-focused
, som tilføjer en kant omkring den:

Lad os endelig også bruge en af has-*
modifikatorerne. Disse styrer typisk, hvad der er inde i elementet. I vores tilfælde er teksten. Lad os tilføje has-text-weight-bold
.
Her er resultatet:

Jeg vil anbefale dig at lege med kombinationer af de forskellige klasser for at forstå, hvor fleksibelt dette system er. Kombinationerne er næsten uendelige. Se afsnittet knapper i dokumentationen for mere info.
Kolonner
Kernen i enhver CSS-ramme er, hvordan de løser kolonner, da det er relevant for næsten alle websteder, du nogensinde vil opbygge. Bulma er baseret på Flexbox, så det er virkelig nemt at oprette kolonner. Lad os oprette en række med fire kolonner.
First column Second column Third column Fourth column
Først opretter vi en container med en klasse af
columns
, og derefter giver vi hver af børnene en klasse af column
. Det resulterer i følgende:

Jeg har også tilføjet en kant omkring kolonnerne for at gøre dem mere tydelige.
Bemærk, at du kan tilføje så mange kolonner, som du vil. Flexbox sørger for at opdele rummet lige op mellem dem.
For at give kolonnerne farver kan vi erstatte teksten inde i dem med en
tag, og giv det notification
klassen og en is-*
modifikator. Som dette for eksempel:
Første kolonne
Lad os gøre dette ved hjælp af is-info
, is-success
, is-warning
og is-danger
modifikatorer, hvilket resulterer i følgende:

Den notification
klasse er faktisk beregnet til at advare brugerne om noget, da det giver dig mulighed for at fylde baggrunden med en farve ved hjælp af is-*
modifikatorer. Her fungerer det godt til at adskille kolonnerne.
Vi kan også let styre bredden af en søjle. Lad os tilføje is-half
modifikatoren til den grønne kolonne.
Hvilket resulterer i, at den anden kolonne nu optager halvdelen af bredden, mens de tre andre optager en tredjedel af den resterende halvdel hver.

Her er de muligheder, du kan bruge til at kontrollere bredden af kolonner:
is-three-quarters
is-two-thirds
is-half
is-one-third
is-one-quarter
is-four-fifths
is-three-fifths
is-two-fifths
is-one-fifth
Helt
Lad os endelig også lære at skabe en helt i Bulma. Vi bruger semantikken og giver den en klasse af
hero
og is-info
giver den lidt farve. Vi har også brug for at tilføje et barn med klassen
hero-body
.

For at få denne helt til at gøre noget meningsfuldt, tilføjer vi et containerelement inde i kroppen og tilføjer en titel og undertekst.
Primary title
Primary subtitle

Nu begynder det at se godt ud! Hvis vi ønsker, at den skal være større, kan vi blot tilføje is-medium
selve tagget.
...

Og det er det!
Du har nu fået en grundlæggende smag af, hvordan Bulma fungerer. Og det bedste er, at resten af biblioteket er lige så intuitivt og let som de koncepter, du har set indtil nu. Så hvis du forstår dette, vil du forstå resten af det uden problemer.
Sørg for at tjekke det gratis Bulma-kursus på Scrimba, hvis du vil lære mere!
Tak for læsningen! Mit navn er Per Borgen, jeg er medstifter af Scrimba - den nemmeste måde at lære at kode på. Du bør tjekke vores responsive webdesign bootcamp, hvis du vil lære at opbygge et moderne websted på et professionelt niveau.
