Zestawienie porównawcze najpopularniejszych i najbardziej rozbudowanej na chwilę obecną frameworków CSS: Skeleton, Bootstrap 3 i Foundation 5.
Krótka specyfikacja
Skeleton
Budowa siatki: „fixed” – statyczna siatka, ustawione są stałe szerokości szablonu (w pikselach), zmieniające się w zależności od rozdzielczości urządzenia.
Narzędzia UI*: niewielka ilość
Jest bardzo lekki, jednak sprawia problemy z wyświetlaniem siatki w wersjach mobilnych, nie zawiera tak szczegółowej dokumentacji jak dwa kolejne frameworki.
Składniowo podobny jest do popularnej siatki 960.gs
Bootstrap 3
Budowa siatki: „fluid” – płynna szerokość siatki określana procentowo
Narzędzia UI: duża ilość widgetów, bardzo dobry do szybkiego prototypowania
Bootstrap od wersji 3 na pierwszym planie stawia widok mobilny, czego brakowało w starszych wersjach.
Płynna siatka obsługiwana jest przez klasy dla telefonów, tabletów, komputerów stacjonarnych i dużych ekranów panoramicznych.
Wszystkie style (również te dotyczące widoku mobilnego) zostały zoptymalizowane pod kątem wydajności i umieszczone w jednym pliku.
W wersji 3 zrezygnowano z wsparcia dla starej i problematycznej przeglądarki IE7 oraz Windows’owego Safari.
Dalej wspierana jest przeglądarka IE8, co wiąże się z dołączaniem dodatkowych JavaScriptów, ponieważ w Internet Explorerze 8 nie działają zapytania medialne.
Foundation 5
Budowa siatki: „fluid” – płynnie dostosuje się do szerokości ekranu
Narzędzia UI: wydajne i modułowe zestawy narzędzi, bardziej dostosowane do mniejszych ekranów niż w przypadku Bootstrap
Foundation 5 korzysta z najnowszego jQuery 2 (zaprzestano korzystania z Zepto, który był używany w wersji 4 – jest to odchudzona wersja jQuery 1). Zmiany te poprawiły wydajność oraz umożliwiły w pełni wykorzystanie możliwości jQuery na stronie. Nowe szablony zostały także zmienione by przyśpieszyć maksymalnie działanie. Dużym atutem jest szczegółowa dokumentacja dla deweloperów.
| Skeleton | Bootstrap 3 | Foundation 5 | |
| Aktualna wersja | 1.2 | 3.1.1 | 5.2.2 |
| Ostatnia aktualizacja | 20 czerwca 2012 | 13 lutego 2014 | 4 kwietnia 2014 |
| Twórca | Dave Gamache | ZURB | |
| Licencja | X11 (MIT) | X11 (MIT) | X11 (MIT) |
| Obsługiwane przeglądarki | Stacjonarne: Chrome, Firefox, Safari, IE7+ Mobilne: iPhone, Droid, iPad | Chrome (Mac, Windows, iOS i Android) Safari (wyłącznie Mac i iOS) Firefox (Mac, Windows Opera (Mac, Windows) IE8+ | Stacjonarne: Chrome, Firefox, Safari, IE9+ Mobilne: iOS (iPhone), iOS (iPad), Android 2, 4 (smartfony), Android 2, 4 (tablety), Windows Phone 7+, Surface |
UI – skrót od angielskiego user interface, czyli interfejsu użytkownika. Graficzny interfejs użytkownika składa się między innymi z przycisków, odnośników, ikon, pól formularzy, a także kształty kursora.
Arkusze stylów CSS
| Skeleton | Bootstrap 3 | Foundation 5 | |
| Reset styli przeglądarki | Inspirowane resetem Eric’a Meyer’a | normalize.css | normalize.css |
| LESS | Nie | Tak | Nie |
| Sass/Scss | Nie | Tak | Tak |
Płynność siatek
| Skeleton | Bootstrap 3 | Foundation 5 | |
| Podstawowa szerokość | 960px | Płynna (480px, 768px, 992px, 1200px) | Płynna (maksymalna szerokość domyślna to 62,5em) |
| Ilość kolumn | 16 | 12 | Możliwość ustawienia w konfiguratorze 1-16 (domyślnie 12) |
| Składnia klas dla pojedynczej kolumny | .one.column | .col-xs-1 .col-sm-1 .col-md-1 .col-lg-1 |
.small-1.columns .medium-1.columns .large-1.columns |
| Składnia klas dla dwóch kolumn | .two.columns | .col-xs-2 .col-sm-2 .col-md-2 .col-lg-2 |
.small-2.columns .medium-2.columns .large-2.columns |
| Składnia wiersza | <div class=”row”> <div class=”four columns”>…</div> <div class=”eight columns”>…</div> </div> | <div class=”row”> <div class=”col-xs-2 col-sm-8 col-md-6 col-lg-5″>…</div> <div class=”col-xs-10 col-sm-4 col-md-6 col-lg-7″>…</div> </div> |
<div class=”row”> <div class=”small-8 medium-6 large-4 columns”>…</div><div class=”small-4 medium-6 large-8 columns”>…</div></div> |
Foundation 5 cechuje się prostotą budowy i pozwala na więcej niż Bootstrap i Skeleton. Jeśli chodzi o możliwość konfiguracji i zagnieżdżania kolumn to najuboższy jest Skeleton.
Foundation jest najbardziej rozwinięty, pozwala na ustawienie wyśrodkowanej kolumny, pustego pola pomiędzy granicami danego elementu a treścią, która się w nim znajduje (wiersz „gutter-free”), posiada klasy do wykorzystania listowania jako siatkę bloków, oraz co najważniejsze ma najszersze możliwości dostosowania strony do ekranu w zależności od jego rozmiaru, orientacji, obsługi funkcji dotykowych itd. Projektując stronę przeznaczoną na telefony przy użyciu Foundation 5 możemy łatwo określić jakie elementy będą widoczne dla urządzeń, na których użytkownicy do nawigacji będą używać ekranu dotykowego. Powiększając przyciski sprawimy, że staną się one łatwiej „klikalne” na mniejszych urządzeniach i umożliwimy sprawniejsze poruszanie się po witrynie. Możemy też manipulować położeniem elementów na stronie w zależności od orientacji obszaru operacyjnego wyświetlając ją inaczej w trybie portretowym, a inaczej w trybie horyzontalnym.
Interfejs użytkownika i dostępne dodatki
| Skeleton | Bootstrap 3 | Foundation 5 | |
| Okna komunikatów | Nie | Tak | Tak |
| Ścieżka okruszków | Nie | Tak | Tak |
| Przyciski | Tak | Tak | Tak |
| Rozwijane menu | Nie | Tak | Tak |
| Formularze | Tak | Tak | Tak |
| Walidacja formularzy | Nie | Nie | Tak, korzystając z Abide w HTML5 |
| Ikonki | Nie | Tak – Glyphinicons | Tak – możliwość pobrania (2 opcje do wyboru) |
| Etykiety | Nie | Tak | Tak |
| Listy | Nie | Tak | Tak |
| Listy poziome | Nie | Tak | Tak |
| Nawigacja | Nie | Tak | Tak |
| Paginacja | Nie | Tak | Tak |
| Paski postępu | Nie | Tak | Tak |
| Responsywne media | Nie | Nie | Tak |
| Tabelki | Nie | Tak | Tak |
| Zakładki | Nie | Tak | Tak |
| Miniaturki | Nie | Tak | Tak |
| Skalowalne wideo | Nie | Nie | Tak |
Według powyższego zestawienia można zaobserwować, że Foundation posiada najbardziej rozwinięte klasy do podstawowych elementów strony. Są one w pełni elastyczne i nawet zamieszczone wideo dostosowuje się do szerokości strony. Dzięki „Interchange”, który pozwala wczytywać różne treści w zależności od ustawień przeglądarki możemy ustawić osobne grafiki dla wersji mobilnej i desktopowej zaoszczędzając transferu.
Po przetestowaniu sporej ilości frameworków i zapoznaniu się z ich możliwościami zdecydowałem, że do swojego projektu użyje Foundation 5 🙂
