TEHNILINE ANALÜÜS

BULMA CSS

Esitaja 1

Lauri Vosmi


Tarkvaraarendaja
ITA 24

Esitaja 2

Cristopher Alapert


Tarkvaraarendaja
ITA 24

01 / 10

Mis asi on Bulma?

"Modernne, Javascripti-vaba CSS raamistik, mis põhineb Flexboxil."

Flexbox

Moodne paigutus, mis kohandub ekraaniga.

No JS

Ainult stiilid. Ei vaja töötamiseks skripte.

Mobile-First

100% responsiivne igas seadmes.

Näide päris veebist

Infinity Search – privaatsusele suunatud otsingumootori esileht, mis on kujundatud Bulma abil ja on välja toodud Bulma Expo galeriis.

bulma.io/expo – „Made with Bulma“ näited

02 / 10

Ajalugu

  • 2016
    Loodud Jeremy Thomase poolt alternatiivina Bootstrapile.
  • Open Source
    Üle 45 000 tärni GitHubis ja suur kogukond.

Disainifilosoofia

✓ Lihtsus: Ingliskeelsed ja loetavad klassinimed.

✓ Puhtus: Minimalistlik ja moodne välimus.

✓ Modulaarsus: Impordi ainult see, mida vajad.

03 / 10

Kuidas see töötab?

SASS Muutujad

Kogu disaini saab muuta paari reaga:

$primary: #8c67ef;
$family-sans-serif: "Nunito", sans-serif;
@import "bulma";

Märkus: kasutame esitlusel Bulma CDN-i versiooni 0.9.4 (versions.bulma.io). Klassikaline @import "bulma" töötab siin hästi, kuid uuemates Sass-projektides soovitab nii Sass kui Bulma dokumentatsioon kasutada moodulipõhist süntaksit @use "bulma/sass" with (...).

Loetavad klassid

Klassinimed kirjeldavad täpselt sisu:

is-primary is-light is-rounded is-loading

04 / 10

Veerusüsteem (Grid)

Lihtsaim viis asju paigutada (12 veergu).

Auto
Auto
Auto
is-two-thirds (66%)
Auto (33%)

05 / 10

Komponendid

Nimi Kirjeldus Olek
Modal Hüpikaken info kuvamiseks Vajab JS
Navbar Responsiivne menüü (burger) Burger JS
Hero Suur päis (nagu see slaid) Ainult CSS

06 / 10

Miks valida Bulma?

Kiire

Lihtne õppida ja kasutusele võtta.

Ühilduv

Ideaalne Reacti ja Vue projektidele.

Modulaarne

Kasuta ainult seda, mida vajad.

Hea valik järgmist tüüpi projektidele:

  • Kooliprojektid ja õppematerjalid
  • Kiired prototüübid ja hackathonid
  • SaaS-i või start-up’i maandumislehed
  • Admin-paneelid ja dashboard’id
  • Blogid ja lihtsamad sisulehed

07 / 10

Puudused

  • Puudub JavaScript:
    Interaktiivsus (nt menüüd) tuleb ise kirjutada.
  • Faili suurus:
    Täispikk CSS on suur. Soovitatav kasutada Sassi.
  • Äratuntav disain:
    Vaikimisi välimus on väga levinud ja vajab kohandamist.

08 / 10

Näited veebilehtedest

Bulma Templates

Kogumik tasuta Bulma põhiseid malle: blogid, maandumislehed, admin-paneelid jpm.

  • Landing – tootega maandumisleht
  • Admin – dashboard / haldusliides
  • Blog – lihtne blogimall

bulmatemplates.github.io

Versioonide demod

Lehel versions.bulma.io on iga Bulma versiooni demo- ja dokumentatsioonilehed (nt v0.7.0, v0.6.2) – head näited dokumentatsiooni- ja blogistiilis veebidest.

versions.bulma.io

09 / 10

AITÄH!

Kasutatud Allikad:

2025 / Bulma Esitlus

10 / 10