Aflați Bulma CSS în 5 minute – Un tutorial pentru începători

Bulma este un cadru CSS simplu, elegant și modern, pe care mulți dezvoltatori îl preferă decât Bootstrap. Personal, cred că Bulma are un design mai bun în mod implicit și, de asemenea, se simte mai ușor.

În acest tutorial, vă voi oferi o introducere foarte rapidă în bibliotecă.

De asemenea, am creat un curs gratuit Bulma. Faceți clic aici pentru a verifica!

Pregatirea

Configurarea Bulma este foarte ușoară și o puteți face în mai multe moduri diferite, indiferent dacă preferați NPM, descărcându-l direct din docs, sau folosind un CDN. Vom face doar legătura către un CDN din fișierul nostru HTML, astfel:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">

Acest lucru ne va oferi acces la cursurile Bulma. Și asta este de fapt tot Bulma – o colecție de clase.

Modificatori

Primul lucru pe care ar trebui să-l învățați despre Bulma este clasele de modificatori. Acestea vă permit să setați stiluri alternative la aproape toate elementele Bulma. Toți încep cu is-* sau has-*, și apoi înlocuiți * cu stilul dorit.

Pentru a înțelege corect acest concept, să începem prin a ne uita la butoane.

Butoane

Pentru a transforma un buton normal într-un buton Bulma, îi vom da pur și simplu clasa de button.

<button class="button">Click here</button>

Care are ca rezultat următorul stil:

După cum puteți vedea, are un design plat frumos în mod implicit. Pentru a schimba stilul, vom folosi modificatori Bulma. Să începem făcând butonul mai mare, verde și cu colțuri rotunjite:

<button class="button **is-large is-success is-rounded**">Click here</button>

Acest rezultat este un buton cu aspect plăcut:

De asemenea, puteți utiliza modificatori pentru a controla starea butoanelor. Să, de exemplu, să adăugăm clasa is-focused, care adaugă o margine în jurul său:

În cele din urmă, să folosim și unul dintre has-* modificatori. Acestea controlează de obicei ce este în interiorul elementului. În cazul nostru, textul. Să adăugăm has-text-weight-bold.

Iată rezultatul:

Vă recomandăm să jucați cu combinații ale diferitelor clase pentru a înțelege cât de flexibil este acest sistem. Combinațiile sunt aproape interminabile. Verificați secțiunea butoane în documente pentru mai multe informații.

Coloane

La baza oricărui cadru CSS se află modul în care acestea rezolvă coloanele, deoarece acest lucru este relevant pentru aproape fiecare site web pe care îl veți construi vreodată. Bulma se bazează pe Flexbox, deci este foarte simplu să creați coloane. Să creăm un rând cu patru coloane.

<div class="columns">  
  <div class="column">First column</div>
  <div class="column">Second column</div>
  <div class="column">Third column</div>
  <div class="column">Fourth column</div>
</div>

În primul rând, creăm un container <div> cu o clasă de columns, și apoi le oferim fiecărui copil o clasă de column. Rezultă următoarele:

Am adăugat, de asemenea, o margine în jurul coloanelor pentru a le face mai evidente.

Rețineți că puteți adăuga câte coloane doriți. Flexbox are grijă să împartă spațiul în mod egal între ele.

Pentru a da coloanelor culori, putem înlocui textul din interiorul lor cu un <p> eticheta și dă-i notification clasa și un is-* modificator. De exemplu, așa:

Prima coloană

Să facem acest lucru folosind is-info, is-success, is-warning și is-danger modificatori, care are ca rezultat următoarele:

notification class este de fapt menit să avertizeze utilizatorii despre ceva, deoarece vă permite să umpleți fundalul cu o culoare folosind is-* modificatori. Aici funcționează bine pentru separarea coloanelor.

De asemenea, putem controla cu ușurință lățimea unei coloane. Să adăugăm is-half modificator la coloana verde.

<div class="column is-half">    

Ceea ce duce la a doua coloană care ocupă acum jumătate din lățime, în timp ce celelalte trei ocupă o treime din jumătatea rămasă fiecare.

Iată opțiunile pe care le puteți utiliza pentru controlul lățimii coloanelor:

• 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

Erou

În cele din urmă, să învățăm și cum să creăm un erou în Bulma. Vom folosi semanticul <section>, și acordați-i o clasă de hero și is-info pentru a-i da ceva culoare. De asemenea, trebuie să adăugăm un <div> copil cu clasa hero-body.

<section class="hero is-success">  

Pentru a face acest erou să facă ceva semnificativ, vom adăuga un element container în interiorul corpului și vom adăuga un titlu și un subtitlu.

<div class="container">
  <h1 class="title">Primary title</h1>
  <h2 class="subtitle">Primary subtitle</h2>
</div>

Acum începe să arate bine! Dacă vrem să fie mai mare, putem adăuga is-medium pe <section> etichetați-vă.

<section class="hero is-info is-medium">  ...</section>

Si asta e!

Acum ați obținut un gust de bază despre modul în care funcționează Bulma. Și cea mai bună parte este că restul bibliotecii este la fel de intuitiv și ușor ca conceptele pe care le-ați văzut până acum. Deci, dacă înțelegeți acest lucru, veți înțelege restul fără probleme.

Asigurați-vă că verificați curs gratuit Bulma pe Scrimba dacă vrei să afli mai multe!

Mulțumesc pentru lectură! Numele meu este Per Borgen, sunt cofondatorul Scrimba – cel mai simplu mod de a învăța să codezi. Ar trebui să verificați bootcamp de design web receptiv dacă doriți să învățați să construiți un site web modern la nivel profesional.