1) Wprowadzenie

Bulma to nowoczesny, lekki i w pełni responsywny framework CSS oparty na Flexboxie. Na platformie Bitfun jest on głównym komponentem UI wykorzystywanym do projektowania layoutów, paneli, formularzy, nawigacji oraz elementów interfejsu w minigramach.

Cechy Bulmy idealnie pasują do Bitfun:

• brak JavaScript — pełna kompatybilność z naszym własnym JS,

• minimalistyczny, ale elastyczny system klas,

• szybkie prototypowanie UI,

• gotowe komponenty zgodne z nowoczesnym stylem platformy.

https://bulma.io/

2) Instalacja i integracja Bulmy

W projekcie Bitfun korzystamy z Bulmy poprzez CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">

Framework jest dodany globalnie na wszystkich stronach platformy i minigier, dzięki czemu możemy korzystać z klas Bulmy w każdym komponencie.

3) Gdzie wykorzystujemy Bulmę

3.1) Główna platforma

• układ dashboardu użytkownika,

• layout panelu logowania i rejestracji,

• formularze zgłoszeń do pomocy technicznej,

• karty z informacjami o minigrach.

3.2) Minigry Bitfun

• okna dialogowe i popupy,

• przyciski do rozpoczęcia gry, akcji, potwierdzeń,

• system powiadomień (klasy notification),

• layouty paneli wyników oraz podsumowań.

3.3) Komponenty Email

W połączeniu z PHPMailer tworzymy czytelne, responsywne maile z wykorzystaniem uproszczonych stylów opartych na Bulmie:

• potwierdzenie aktywacji konta,

• zgłoszenie do pomocy technicznej.

4) Struktura projektu z Bulmą

W Bitfun stosujemy prosty system układu treści oparty na kontenerach:

5) Najczęściej używane komponenty Bulmy

5.1) Przyciski

5.2) Formularze

5.3) Karty

5.4) Powiadomienia

5.5) Tabele

6) Dobre praktyki

• używamy jak najmniej niestandardowego CSS — preferowane klasy Bulmy,

• stosujemy is-fullwidth, is-flex, is-align-items-center dla responsywności,

• unifikujemy kolory poprzez klasy is-primary, is-link, is-info,

• każda minigra korzysta z jednego wspólnego layoutu bazowego.

7) Jak dalej rozwijać Bulmę w Bitfun

Możliwości rozbudowy:

• tworzenie własnych komponentów na bazie klas Bulmy,

• custom themes na potrzeby trybu nocnego i neonowej stylistyki Bitfun,

• API komponentów do współpracy z naszym systemem JS,

• modułowe importowanie klas Bulmy tylko tam gdzie potrzebne,

• integracja z systemem motywów minigier.

8) Screeny kodu