blog.nayma.pl


Dla miłośników WordPress, WooCommerce, HTML5, CSS3 oraz JS.

Dariusz Nayma.pl
Autor Wpisu

Podziel się


Tagi


BULMA - CSS framework oparty o Flexbox

Dariusz Nayma.plDariusz Nayma.pl

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/

404.nayma.pl

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.

Komentarze