Jedną z największych zalet HTML5 jest możliwość szybkiego prototypowania aplikacji. Dzięki temu mamy możliwość przetestowania funkcjonalności zanim przedrzemy się przez dziesiątki tysięcy linii kodu, testów i dokumentacji. Daje to nam szybki podgląd na to, czy nasz serwis będzie funkcjonalny, czy wymaga przemyślenia lub optymalizacji pod kątem usability. Poniżej prezentujemy najpopularniejsze frameworki które ułatwiają to zadanie.

 Foundation

http://foundation.zurb.com/

Pierwszym (i jednocześnie naszym faworytem) jest Foundation, stworzony przez firmę Zurb. Framework ten, poza podstawową funkcjonalnością, czyli rozmieszczaniem elementów na responsywnym gridzie, udostępnia zestaw gotowych, spójnych komponentów ułatwiających tworzenie nawigacji i struktury informacyjnej.

Do zestawu oferowanych przez niego przyjemnych kolorystycznie i świetnie łączących się ze sobą kontrolek należą m.in.:

– alerty
– block grid
– breadcrumbs
– przyciski
– grupy przycisków
– dropdowns/listy rozwijane
– formularze
– flex video
– joyride (świetny dla tworzenia tutoriali i samouczków)
– etykiety
– magellan
– paginacja
– i wiele innych.

Poza zestawem kontrolek mamy do dyspozycji również zestaw klas ogólnego zastosowania, które umożliwiają osiągnięcie określonego, spójnego z resztą elementów wyglądu. Warto zaznaczyć, że konfiguracja Foundation jest oparta nie na czystym CSS, a na SASS.

Bootstrap

http://getbootstrap.com/

Bootstrap jest najpopularniejszym rozwiązaniem wśród narzędzi do prototypowania. Na pierwszy rzut oka niewiele różni się od Foundation. Na drugi i trzeci zresztą również. Podobnie jak wspomniany wyżej, tworzenie layoutów odbywa się na zasadziej „mobile first”, czyli najpierw projektujemy interfejs mobilny i rozwijamy go dla urządzeń o większych rozdzielczościach.

Warto wspomnieć, że Bootstrap został stworzony przez pracowników Twittera.

Co udostępnia:

– dropdowns
– grupy przycisków
– paski przycisków (button toolbars)
– pionowa nawigacja
– checkboxes i radiobuttons
– button addons
– przyciski z dropdownami
– navbars
– formularze
– breadcrumbs
– paginację
– etykiety
– badges
– alerty
– paski postępu
– i mnóstwo innych elementów.

Przewagę Bootstrapa odnajdujemy w ogromie kombinacji w które można układać komponenty. Całość jest spójna i jest bardzo łatwa w obsłudze.

Skeleton

http://www.getskeleton.com/

Skeleton jest najmniej znanym rozwiązaniem z wymienionych. Został stworzony przez… jednego z byłych pracowników zarówno Twittera jak i firmy Zurb, co już samo w sobie świadczy o klasie rozwiązania. W przeciwieństwie do pozostałych dwóch, Skeleton mniej skupia się na samym wyglądzie, a bardziej na jego układzie i rozmieszczeniu. Otrzymujemy na dzień dobry wyłącznie rozmieszczanie elementów na gridzie, podstawową, jednak estetycznie przygotowaną typografię, prosty formularz oraz oskinowane przyciski.

Jeśli poszukujecie prostych i szybkich rozwiązań do tworzenia prototypów aplikacji html5, lub serwisów internetowych, te trzy pozycję stanowią pierwszy wybór. Nasz dość pobieżny opis niewiele mówi o ich złożoności i możliwościach, ale więcej informacji bez problemu odnajdziecie na stronach ich twórców.