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
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
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
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.