Wstęp
Czym jest BULMA ?? Bulma to darmowy framework CSS3 oparty o Flexbox. Jest bardzo mały i lekki a zarazem posiada wiele różnych elementów i co najważniejsze jest jeszcze w wersji rozwojowej więc z pewnością pojawi się jeszcze sporo nowych modułów. Skąd więc pobrać Bulmę i jak ją zainstalować ?
W chwili obecnej dostępna jest wersja v0.0.14 alpha którą można pobrać z repozytorium GitHub:
https://github.com/jgthms/bulma/archive/0.0.14.zip
Dokumentacja w języku angielskim znajduje się tutaj: http://bulma.io/documentation/overview/start/
Opis działania kolumn oparty na felxbox znajdziecie tutaj: http://bulma.io/documentation/grid/
Jak skorzystać z tego framework ?
To proste. I możemy to zrobić na 2 sposoby. Pierwszym jest pobranie paczki zip do której link podaliśmy powyżej. Można tak naprawdę pobrać wersję bulma.min.css ze strony GitHub:
https://github.com/jgthms/bulma/tree/master/css
Można również dodać framework bezpośrednio z cdnjs.com CDN:
https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.14/css/bulma.min.css
Pamiętajmy żeby dodać również bibliotekę Font Awesome, jeśli chcemy używać ikon w guzikach czy innych elementach naszej strony.
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Dlaczego Bulma ?
W internecie możemy spotkać dziesiątki darmowych przykładów frameworków jak np. świetny Milligram w wersji 1.1.0, czy najbardziej popularny w internecie Bootstrap, który niebawem ukaże się w wersji 4.0. Bluma naszym zdaniem jest bardzo prosta w obsłudze, i dzięki zastosowaniu flexbox można bardzo dobrze kontrolować kolumny. Posiada też wiele gotowych modułów takich jak:
- guziki w różnych konfiguracjach
- formularze w różnych konfiguracjach
- nagłówki i tytuły
- zdjęcia z predefiniowanymi wymiarami
- tagi
- Powiadomienia i wiadomości
- ikony z Font Awesome
- zakładki (tabs)
- karty (tutaj przykład: http://bulma.io/documentation/components/card/
- tabelki
- menu i nagłówki
- stopki
- Hiro titles
- i wiele innych....
Przykładowo w ciągu kilkunastu minut udało nam się zbudować prostą stronę dla naszej firmy na potrzebu stron w budowie i 404. Strona zawiera moduł menu, stopkę, działający w 100% newstletter oparty o Mailchimp. Uważamy że efekt finalny jest bardzo dobry a wkład pracy był minimalny. Stronę możecie zobaczyć tutaj: https://nayma.pl/404/
W powyższym przykładzie użyliśmy jeszcze jednej ciekawej opcji. Tło jest wygenerowane jako gradient css i zmienia kolory dzięki zastosowaniu tła 400% i jego animacji. Do tego celu wykorzystaliśmy ciekawą stronę na której możemy sobie wygenerowac taki efekt z dowolnie wybranymi przez nas kolorami: http://www.gradient-animator.com.
Jak widać Bulma jest prostym i łatwym w użyciu frameworkiem, dzięki któremu można zbudować prostą i przejrzystą stronę internetową w relatywnie niedługim czasie.
