10 najlepszych frameworków CSS

Frameworki CSS zdobywają coraz większą popularność. Nic w tym dziwnego, gdyż znacznie przyspieszają pracę i pozwalają zminimalizować różnice między przeglądarkami. Oto zestawienie najlepszych i najpopularniejszych z nich.
Każdy z zaprezentowanych tu frameworków wykorzystuje technikę RWD, dzięki czemu obejmuje swym zasięgiem również urządzenia mobilne. Wszystkie wspierają też najnowsze wersje popularnych przeglądarek: Firefox, Chrome, Opera, Safari. Informacje o wsparciu Internet Explorera znajdziecie w opisach.

#1. Bootstrap

Niekwestionowany lider, stworzony przez pracowników Twittera, przez wielu uwielbiany, ale i przez wielu znienawidzony. Został zbudowany na preprocesorze LESS, dzięki czemu pozwala na bardzo dokładne dopasowanie do własnych potrzeb. Zawiera 12-kolumnową siatkę, zarówno w wersji ze stałą jak i z automatyczną szerokością. Posiada bogaty pakiet UI – począwszy od typografii, poprzez formularze, tabele, po nawigacje i ikonki. Całość dopełnia kolekcja skryptów JS pozwalająca na obsługę okien modalnych, dropdownów, akordeonów czy sliderów. Bootstrap posiada też ogromną liczbę dodatków i skórek (niektóre z nich są naprawdę fantastyczne ;)), co tylko przysparza mu popularności. Wsparcie IE 8+. Licencja Apache 2.

#2. Foundation

Wieczny numer 2. Również w pełni konfigurowalny, dzięki użyciu preprocesora SASS. Posiada 12-kolumnową płynną siatkę, którą można łatwo zagnieżdżać. Warto dodać, iż jest to pierwszy duży framework wykonany zgodnie z regułą mobile first, co sprawia iż tworzenie mobilnych wersji stron jest bardzo szybkie i banalnie proste. Zawiera pełen zestaw elementów UI i skryptów JS.

#3. YAML

YAML (ang. Yet Another Multicolumn Layout) to jeden z najstarszych frameworków rozwijany od 2005 roku. Jego 4 wersja używa SASS i posiada jedynie podstawowy pakiet UI – typografię, formularze i nawigacje, oraz style dla podstawowych mikroformatów (hCard, hCalendar, hReview). Wsparcie IE 6+. Licencja CC-BY.

#4. Gumby

Gumby to bardzo zbliżony do Bootstrapa framework, posiadający własne narzędzie do zarządzania z linii poleceń – Claymate – które pozwala na szybkie zarządzanie i budowanie kodu. Kolekcja elementów UI i skryptów JS jest podobna jak u liderów, na uwagę zasługuje dołączony efekt parallax. Wsparcie IE 8+. Licencja Open Source.

#5. Pure

Jest to mały i lekki (tylko 4.4KB) pakiet UI, stworzony przez Yahoo! Posiada siatkę tworzoną na zasadzie podziałów, dzięki czemu możliwe jest wykonanie dość skomplikowanych layoutów. Wsparcie IE 7+. Licencja BSD.

#6. Tuktuk

Tuktuk to 12-kolumnowa siatka z dość bogatym UI, mimo to ważąca zaledwie 9KB. Jako jeden z nielicznych korzysta z preprocesora Stylus. Wsparcie IE 8+. Licencja MIT.

#7. HTML Kickstart

Kolejny zestaw wzorowany na Bootstrapie. Wyróżnia się przede wszystkim niewielką wagą (10KB) i całkiem sporym pakietem UI. Wsparcie IE 8+. Licencja MIT.

#8. Semantic UI

Semantic to nieco odmienne podejście do tworzenia layoutów – ustalona konwencja nazewnictwa klas sprawia, że jest on o wiele łatwiejszy do nauki. Po więcej informacji odsyłam do artykułu Radka sprzed kilku tygodni. Wsparcie IE 8+. Licencja MIT.

#9. Kube

Jest to kolejny framework oparty o siatkę tworzoną metodą podziałów. Domyślnie posiada układ 10-kolumnowy (rozmiary co 10%) oraz 4- i 3-kolumnowy (odpowiednio 25/50/75% i 33/66%), jednak dzięki użyciu preprocesora LESS pozwala na stworzenie dowolnego układu. Wsparcie IE 8+. Licencja Open Source.

#10. Groundwork

Groundwork również posiada siatkę tworzoną przez podziały, acz w nieco odmiennej wersji – każdy wiersz może być podzielony na dowolną liczbę kolumn (standardowo do 12, jednak posiada możliwość użycia SASS). Wsparcie IE 9+. Licencja Open Source.