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 notificationklassen 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-warningog is-dangermodifikatorer, hvilket resulterer i følgende:

Den notificationklasse 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-halfmodifikatoren 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 heroog is-infogiver 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-mediumselve 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.