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

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

foundationWieczny 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

yamlYAML (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

gumbyGumby 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

pureJest 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

tuktukTuktuk 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

htmlkickstartKolejny 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

semanticSemantic 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

kubeJest 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

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

Programista (PHP/MySQL, Node.js/MongoDB), koder (HTML/CSS/JS), ale od biedy nawet layout machnie ;)

  • Znienawidzony Twitter Bootstrap? Jakie jego są jego minusy?

    • mck

      Zarzuty są różnej wagi. Od nudnego wyglądu, który widziany na tysiącach stron się już niektórym przejadł, poprzez semantykę klas (słynne na szczęście zmienione w wydanej ostatnio trzeciej wersji), po problemy wydajnościowe spowodowane nadmiarem nieużywanego, niepotrzebnego kodu (nawet mimo dostępnego konfiguratora) i nadużywanie !important.

      • to już jest kwestia biegłej znajomości frameworka 😉 teraz w wersji 3 nazewnictwo uległo zmianom. Czy na plus, tego nie wiem.

    • Niestety do wszystkiego to Twitter Bootstrap sie nie nadaje ale jak ktos na szybko potrzebuje podstawić jakiś front, to nie ma nic lepszego na rynku. Chociaż w wersji 3.0 trochę sie zmieniło… i trzeba na nowo poduczyć. 🙂

  • Mokry

    Przez bardzo długi czas używałem Bootstrap’a i tylko Bootstrap’a, ale w pewnym momencie ilość generowanego kodu zaczęła mnie już irytować. Ponadto konkurencja nie śpi i daje więcej za mniej (KB).
    Ostatnio bardzo lubię wykorzystywać KickStart w połączeniu z dość nowym w2ui.

  • troche na siłe, że to 10 najlepszych 🙂 po prostu 10 jakich jest od jakiegos czasu, ale dobrych jest zaledwie dwa pierwsze

  • Mamy też klony samego bootstrapa: http://aozora.github.io/bootplus/ wzorowanym na google+. Jest jeszcze FlatUI (darmowe i komercyjne).

  • skowron-line

    Takich FW to jest setki. Fakt jest taki że TB jest wszędzie, podstawowy layout z exampla jest wszędzie, wszędzie, wszędzie.

  • Znalazłem jedną literówkę: „posiada jedyni podstawowy”

    Bardzo mi się podobają takie artykuły, proszę o więcej!

    • nrm

      dzięki, poprawione.

  • Misiek

    Ja aktualnie stoję przed strasznym wyborem pod nowe projekty. W moim rankingu rywalizują:
    http://www.99lime.com/elements/
    http://tuktuk.tapquo.com/
    http://semantic-ui.com/

    Potrzebuję jak najwięcej zabawek typu modal, alert, tooltip, breadcrumb i przynajmniej 4 poziomowe sub-menu.

  • vernalis

    Osobiście bym miał inne pytanie. Poza tym, że wymieniłeś elementy „kombajnu” i to że stworzyli go ludzie od twita i w 70%, a prawda jest taka, że nigdy nie wykorzysta się jego wszystkich modułów, przydało by się poparcie faktami dla czego według Ciebie jest najlepszy . Prawdopodobnie jak większość uważam go za jeden z gorszych frameworków. Wymagający niepotrzebnego gniazdowania elementów. Nie w pełni kompatybilnego z urządzeniami mobilnymi, nie wspomnę o znacznych problemach w wymuszeniu kompatybilności wstecznej dla przeglądarek.

    • vernalis

      Trochę sprosuję: „gniazdowanie” => „zagnieżdżenie” , „jeden z gorszych” => „mam tu na myśli front-end bo na zaplecze może się okazać zbawienny”

    • mck

      Osobiście nie należę do zwolenników Bootstrapa, więc nie wyciągnę Ci tu z kapelusza żadnych argumentów za 😉
      A w zestawieniu znalazł się przede wszystkim z powodu ogromnej popularności i pochlebnych opinii – wielu developerom podoba się to co oferuje i nie przeszkadzają wady.

  • Dzięki za listę ;]

  • Tak mało o Groundworku, a jest taki fajny…

  • Paul Jordan

    Szukam kogoś do zrobienia dashboardu w Bootstrapie3. Możecie kogoś polecić kumatego (najlepiej frontend dev +grafik) ? Temat polega na przerobieniu gotowej skóry Admin Metronic. Backendowe tematy robi mój developer w php, wiec idealnie byłoby gdyby frontendowiec był również conajmniej kumaty z php

  • Edward

    No i zabrakło googlowego frameworka Materialize naprawde bardzo przyjazny i dobrze zrobiony framework.

    • nrm

      zdaje się, że materialize powstało rok później niż ten tekst 😉

Send this to friend

webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL