chevron-left chevron-right

[CSS] Frameworki CSS – zestawienie 3 popularnych frameworków

Dzisiejszy artykuł będzie dotyczył frameworków CSS. Dowiesz się z niego co to są frameworki CSS, jakie są ich zalety oraz jak wygląda charakterystyka każdego z nich.

W dzisiejszych czasach, pracując jako projektant warstwy wizualnej strony WWW (inaczej mówiąc - frontendowiec) często korzystamy z tych samych kawałków kodu CSS w wielu projektach różnych stron. Aby zapobiec powtarzalnemu, a często zbędnemu, procesowi tworzenia tych samych reguł utworzono zbiór reguł, które nazwano frameworkiem CSS.

Frameworki CSS - charakterystyka

Framework CSS jest zbiorem takich kawałków kodu, który zapewnia odpowiednie działanie strony we wszystkich przeglądarkach. Dzięki czemu, możemy być pewni, że nie spotkają nas kłopoty z różnym wyglądem elementów tworzonych przez nas stron WWW.
Frameworki CSS pozwalają na zachowanie jednolitej przestrzeni nazw elementów kodu strony, dzięki czemu w sposób prosty i przyjemny jesteśmy w stanie pracować nad różnymi projektami bez uczenia się od nowa nazewnictwa identyfikatorów i klas zawartych w kodzie.

Frameworki CSS - zalety

Bardzo często wykorzystuje się frameworki w kilku celach:

  • ujednolicenie nazewnictwa struktur zawartych w kodzie HTML i CSS
  • uzyskanie przystępnego systemu grid (czyli pionowego ułożenia elementów na stronie)
  • uzyskanie przystępnie wyglądającej domyślnej typografii na stronie
  • wykorzystanie instrukcji resetujących domyślne ustawienia wyglądu elementów strony w różnych przeglądarkach
  • kompatybilność wyglądu strony pod różnymi wersjami przeglądarek
Jak widać na powyższej liście, frameworki CSS posiadają wiele zalet dzięki czemu praca nad stronami WWW (ich częścią wizualną) może zdecydowanie przyspieszyć. Jednak frameworki posiadają również wady.

Frameworki CSS - wady

Do najczęstszych z nich są:

  • stosowanie dziwnych, czasem nieintuicyjnych nazw klas i identyfikatorów elementów strony WWW
  • duża waga plików oraz duża ich ilość (co może nieco spowolnić działanie strony)
  • nadmiarowość (często opisują elementy, które w ogóle nie są używane na stronach WWW)
Będąc świadomym zalet i wad takiego rozwiązania możemy zacząć poszukiwania frameworka, który będzie odpowiedni dla nas i dla naszego projektu.

Frameworki CSS - zestawienie

Blueprint

Bleprint - logo

Jest to rozbudowany framework CSS, co skutkuje dużą wielkością i ilością plików.
Do jego zalet można zaliczyć rozbudowany "system wtyczek", czyli dodatkowych plików CSS dołączanych do strony WWW pozwalający na uzyskanie tak samo wyglądających przycisków na stronach czy też obsługę nacji czytających tekst od prawej do lewej. Ponadto, oferuje również dedykowane arkusze stylów dla elementów drukowanych przez drukarkę, specjalne style odpowiedzialne za typografię, formularze i tzw. grid.

Bardzo wiele użytkowników korzysta z tego rozwiązania, co skutkuje dodatkowym supportem w postaci forum na którym można rozwiązywać problemy.
Do jego wad można zaliczyć nie do końca jasny system nazewnictwa klas, którego trzeba się specjalnie nauczyć, aby z niego efektywnie korzystać.
Docelowa maksymalna szerokość strony to 960px.

960.gs

960.gs - logo

Jest to framework przystosowany do wyświetlania stron w sposób uporządkowany za pomocą systemu grid i tylko tyle. Dzięki temu zapewnia nam dowolność w tworzeniu dedykowanych rozwiązań wizualnych na stronach internetowych. Jego dodatkową zaletą może być wsparcie dla rozwiązań mobilnych oraz jego nieduża waga. Można się posłużyć dodatkowymi narzędziami dostępnymi na stronie, które pozwalają na utworzenie pliku CSS czy wspomagają tworzenie rozwiązań mobilnych.
Docelowa szerokość obsługiwana to 960px.

Do wad można zaliczyć, podobnie jak w Blueprint, udziwniony system nazewnictwa klas, który może odstraszać ewentualnych użytkowników przed wykorzystaniem go (między innymi mnie). Ponadto, nie zawiera kodu CSS odpowiedzialnego za reset wyglądu elementów strony, typografię, formularze, itd., itp.

Baseline

Baseline - logo

Mój osobisty faworyt wśród frameworków CSS. Zapewnia wsparcie dla systemu grid, typografii, formularzy, resetu wyglądu, tabelek. Ma zdefiniowane style dla elementów HTML5. Przestrzeń nazw tego frameworka jest przyjemna i łatwa do opanowania. Ponadto, framework waży niewiele, a pozwala na bardzo wiele.
Ogólnie, jest to idealny framework dla osób które lubią dobrą typografię oraz układ elementów na stronach. Ciekawostką jest to, że zawiera dodatkowy plik CSS, który można dołączyć do stron mobilnych (a w szczególności do stron dedykowanym urządzeniom typu iPhone).
Docelowa szerokość obsługiwana przez ten framework to 990px.

Ze względu na to że jestem fanem tego frameworka, nie potrafię wskazać ewentualnych słabszych jego stron, bo do tej pory spełniał wszystkie moje wymagania.

Frameworki CSS - podsumowanie

Mam nadzieję, że udało mi się przedstawić zalety z korzystania z frameworków CSS oraz odpowiednio zaprezentować część z nich.
Zapraszam do korzystania z nich, bo szybkość tworzenia stron i ich jakość zdecydowanie wzrośnie.

Należy jednak pamiętać, że korzystanie z frameworka nie zabrania korzystania z własnej inwencji i należy dopisać własne style, które nie są zawarte w frameworkach, ale są niezbędne na tworzonej przez Ciebie stronie. Dzięki temu, każda strona może być niepowtarzalna.

  • Ja polecam ze swojej strony Gantry Framework. Z niego korzysta m.in. RocketTheme.

  • Tak, ale on jest dedykowany dla Joomla i jest bardzo rozbudowany. Co może trochę przytłaczać.

  • Joomla i bodajże WordPress również może z niego korzystać. Jak akurat sporo pracuje na Joomla i kiedy już się jakoś go ogarnie to bardzo fajny FM 🙂

  • Strach się przyznać, ale do tej pory nie wiedziałem, że istnieje coś takiego jak framework CSS. Oczywiście korzystam także z Gantry na Joomla! ale nigdy nie nazwałbym tego frameworkiem CSS 🙂 Aż do dziś. Dzięki wielkie za ciekawy artykuł…