TechLife devBlog

Bootstrap - HTML-owe klocki Lego

Kodowanie Techblog 16 kwietnia 2012 o 22:18:55 | ☍ trackback

W lipcu narzekałem, że webdeveloperom brakuje klocków/struktur z których mogliby łatwo budować aplikacje, podobnie jak buduje się desktopowe interfejsy graficzne korzystając z różnych bibliotek zawierających zdefiniowane elementy i kontrolki. Dzisiaj spokojnie mogę powiedzieć, że HTML również doczekał tych wspaniałych czasów.

Bootstrap - przykład

Od kilku miesięcy obserwowałem rozwój projektu Bootstrap (od Twittera). Bootstrap to ogromny zbiór najczęściej stosowanych HTML-owych struktur, które zostały w bardzo estetyczny sposób ostylowane oraz dodano JavaScript do sterowania interaktywnymi elementami tj. okna modalne, taby, rozwijane menu, dymki z podpowiedziami, komunikaty i wiele innych.

Początkowo dostarczanych elementów było względnie mało. Do tego zastosowanie Bootstrapa było bardzo inwazyjne, ponieważ automatycznie stylował nam różne elementy, które niekoniecznie chcieliśmy mieć ostylowane w ten sposób. Jednak przez te kilka miesięcy odwalono kawał dobrej roboty. Liczba elementów urosła już do takiej ilości, że pozwala spokojnie budować bardzo zaawansowane aplikacje bez konieczności tworzenia własnych struktur. Zmieniła się również polityka stylowania i teraz większości elementów trzeba nadać klasę (np. tabeli należy nadać klasę table) aby skorzystać ze styli Bootstrapa.

Komponenty

Jak przystało na porządne pudełko z narzędziami, w Boostrapie znajdziemy też 12 kolumnowy CSS grid (stały lub płynny), oraz zestaw styli CSS3 służący do ładnego wyświetlania całości na różnej wielkości ekranach (Responsive design).

Grid

Korzystałem już z Bootstrapa w kilku aplikacjach i okazał się bardzo wygodny w użyciu. Bez problemu mogłem się skupić na mechanizmach zamiast na warstwie prezentacyjnej a mimo to wynikowa aplikacja była bardzo estetyczna i odznaczała się wysokim współczynnikiem eye candy. Do tego wszystkiego można dodać, że Bootstrap umożliwia wygenerowanie sobie spersonalizowanej paczki, zawierającej tylko potrzebne nam elementy a nawet przebudowany na nasze potrzeby CSS, ponieważ Boostrap generuje go korzystając z dobrodziejstw LESS.

Generator

Używa się tego tak dobrze, że całkiem prawdopodobne jest, że niedługo internet zostanie zalany podobnie wyglądającymi stronami i aplikacjami. Prosty przykład:

Przykładowa strona

Na stronie builtwithbootstrap.com można zobaczyć już całą gamę stron zbudowanych z pomocą Bootstrapa. Jest jednak światełko w tunelu. Powstała strona bootswatch.com oferująca różnorodne skórki dla elementów Bootstrapa.

Przykład skórki
Przykład skórki

Oczywiście Bootstrap to nie jedyny projekt tego typu. Warto przyjrzeć się również HTML KickStart.

Kick Start

Czasy gdy programiści tworzyli sraczkowate interfejsy oparte na tabelkach rodem z lat '90 oficjalnie uważam za zamknięte. Miłego kodowania!