Bulma je jednostavan, elegantan i moderan CSS okvir koji mnogi programeri preferiraju ispred Bootstrapa. Osobno mislim da Bulma prema zadanim postavkama ima bolji dizajn, a također se osjeća i lakše.

U ovom uputstvu dat ću vam super brzi uvod u knjižnicu.

Također smo kreirali besplatni tečaj Bulma. Kliknite ovdje da biste to provjerili!

Postava

Postavljanje Bulme vrlo je jednostavno i to možete učiniti na nekoliko različitih načina, bilo da više volite NPM, preuzimajući ga izravno iz dokumenata ili koristeći CDN. Samo ćemo se povezati na CDN iz naše HTML datoteke, ovako:

To će nam omogućiti pristup tečajevima Bulme. I to je zapravo sve što je Bulma - zbirka predavanja.

Modifikatori

Prvo što biste trebali naučiti o Bulmi su klase modifikatora. Oni vam omogućuju postavljanje alternativnih stilova na gotovo sve Bulma elemente. Svi počinju sa is-*ili has-*, a zatim zamjenjujete *stilom koji želite.

Da bismo pravilno razumjeli ovaj koncept, krenimo od gledanja gumba.

Gumbi

Da bismo normalni gumb pretvorili u Bulma, jednostavno ćemo mu dati klasu button.

Click here 

Što rezultira sljedećim stilom:

Kao što vidite, prema zadanim postavkama ima lijep ravni dizajn. Da bismo promijenili stil, koristit ćemo Bulma modifikatore. Krenimo od toga da gumb učinimo većim, zelenim i zaobljenim kutovima:

Click here 

Ovaj je rezultat gumba ugodnog izgleda:

Također možete koristiti modifikatore za kontrolu stanja gumba. Dodamo, na primjer, klasu is-focusedkoja oko nje dodaje obrub:

Napokon, upotrijebimo i jedan od has-*modifikatora. Oni obično kontroliraju što se nalazi u elementu. U našem slučaju, tekst. Dodajmo has-text-weight-bold.

Evo rezultata:

Preporučio bih vam da se poigrate s kombinacijama različitih klasa kako biste shvatili koliko je ovaj sustav fleksibilan. Kombinacija je gotovo bezbrojnih. Više informacija potražite u odjeljku s gumbima u dokumentima.

Stupci

U osnovi svakog CSS okvira je način na koji rješavaju stupce, jer je to relevantno za gotovo svaku web stranicu koju ćete ikada izgraditi. Bulma se temelji na Flexboxu, tako da je stvarno jednostavno stvoriti stupce. Stvorimo red s četiri stupca.

 First column Second column Third column Fourth column 

Prvo stvaramo spremnik s razredom columns, a zatim svakom od djece dajemo razred column. Rezultat je slijedeće:

Dodao sam i obrub oko stupaca kako bi bili vidljiviji.

Imajte na umu da možete dodati koliko god želite stupaca. Flexbox se brine za podjelu prostora na jednak način.

Da bismo kolonama dali boje, tekst u njima možemo zamijeniti s

tag i dajte mu notificationklasu i is-*modifikator. Ovako na primjer:

Prva kolona

Učinimo to pomoću is-info, is-success, is-warningi is-dangermodifikatori, što rezultira u nastavku:

Predavanje notificationje zapravo namijenjeno upozorenju korisnika na nešto, jer vam omogućuje da ispunite pozadinu bojom pomoću is-*modifikatora. Ovdje dobro djeluje za odvajanje stupaca.

Također možemo lako kontrolirati širinu stupca. Dodajmo is-halfmodifikator u zeleni stupac.

Što rezultira time da drugi stupac sada zauzima polovinu širine, dok tri druga zauzimaju po trećinu preostale polovice.

Evo opcija koje možete koristiti za kontrolu širine stupaca:

• 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

Junak

Napokon, naučimo i kako stvoriti heroja u Bulmi. Upotrijebit ćemo semantiku i dati joj klasu heroi is-infodati joj boju. Također moramo dodati dijete s razredom hero-body.

Kako bi ovaj junak učinio nešto smisleno, dodati ćemo element spremnika unutar tijela i dodati naslov i podnaslov.

Primary title
Primary subtitle

Sad počinje izgledati dobro! Ako želimo da bude veća, možemo jednostavno dodati is-mediumsamu oznaku.

 ... 

I to je to!

Sad ste stekli osnovni okus kako Bulma djeluje. A najbolji dio je što je ostatak knjižnice jednako intuitivan i lagan kao i koncepti koje ste do sada vidjeli. Dakle, ako ovo razumijete, ostatak ćete razumjeti bez problema.

Svakako pogledajte besplatni tečaj Bulma o Scrimbi ako želite naučiti više!

Hvala na čitanju! Zovem se Per Borgen, suosnivač sam Scrimbe - najlakšeg načina da naučim kodirati. Trebali biste provjeriti naš responzivni bootcamp za web dizajn ako želite naučiti graditi moderne web stranice na profesionalnoj razini.