Skonstruowanie od podstaw w pełni skalowalnego szablonu jest dość czasochłonnym zadaniem, należy poszczególnym elementom odpowiednio zdefiniować style CSS, które przy pomocy zapytań medialnych będą się zmieniać dzięki czemu strona będzie mogła dostosować się do szerokości ekranu. Jednak zamiast budować wszystko od podstaw możemy zaoszczędzić sporo czasu i żmudnej pracy wykorzystując gotowe rozwiązania.
w Internecie znaleźć możemy gotowe rozwiązania ułatwiające zbudowanie elastycznej strony. Począwszy od prostych siatek CSS, znaleźć możemy także bardziej rozwinięte Framework’i.
Siatka CSS to zbiór zdefiniowanych reguł, które pomagają szybko tworzyć kolumnowe układy strony.
Jeśli tworzymy prosty projekt elastycznej strony możemy skorzystać z minimalistycznej siatki. Obecnie mamy duży wybór systemów siatek CSS. Poniżej zestawienie podstawowych prostych elastycznych siatek:
- Columnal – http://www.columnal.com/
Jest to system siatek generujący płynną siatkę oraz zapytania medialne wykorzystujące podobne zestawy klas do popularnego niegdyś systemu 960.gs
Siatka Columnal podzielona jest na 12 kolumn, które możemy podzielić według potrzeb na dowolną ilość rzędów.
- Base Framework (http://matthewhartman.github.io/base/)
Jest to 12 kolumnowy układ o maksymalnej szerokości 960px zawierający reguły pozwalające na elastyczny układ strony. Zawiera minimalną ilość szablonu HTML (w tym również jQuery), arkusz podstawowych stylów (dla typografii, cytatów, kodu, elementów formularza, tabel itp.) pliku JavaScript z podstawowymi akcesoriami oraz pliku LESS, w którym można łatwo dostosować nasz arkusz stylów.
- Toast CSS Framework (http://daneden.github.io/Toast/)
Toast zawiera jedną kolumnę dla widoku w urządzeniach mobilnych i do 12 responsywnych kolumn dla trybu stacjonarnego, o maksymalnej szerokości 960px. Każda funkcja posiada własny arkusz stylów, dzięki czemu możemy wybrać tylko te elementy, które są nam potrzebne. Wystarczy odpowiednio edytować plik toast.css i importować w nim moduły, które potrzebujemy.
- Quantum Framework (dawniej Titan Framework) – http://codecanyon.net/item/quantum-framework/5956995
Jest to rozwiązanie płatne, bowiem Quantum kosztuje 5 dolarów. Jest do lekki framework CSS przeznaczony dla responsywnych stron internetowych. Jego celem jest zapewnienie większej elastyczności projektów. Posiada budowę 12 i 16-kolumnową z możliwością ponad 130 kombinacji ustawień kontenerów oraz rozmarów od 300px (dla smartfonów) do 1872px/1920 dla szerszych, panoramicznych rozdzielczości ekranu.
Dodatkowo autorzy dorzucają również pliki PSD zawierające wszystkie możliwe kombinacje, oferując dzięki temu elastyczność i ułatwiając projektowanie. Kombatybilny jest z przeglądarkami: IE7-10, Chrome, Mozilla, Opera i Safari. Oprócz tego producenci oferują szybkie wsparcie.
- Bourbon Neat (http://neat.bourbon.io/)
Framework ten został napisany w celu „promowania czystych i semantycznych znaczników”, zależny jest wyłącznie od mixin’ów SASS przez co nie zanieczyszcza naszego kodu HTML i pozwala zaoszczędzić zbędnych DIV’ów. Korzystając z mixinów możemy sami ustawić ilość kolumn w siatce dla każdego media query.
- csswizardry-grids – http://csswizardry.com/csswizardry-grids/
Podobnie jak w omówionym wyżej frameworku Neat, możliwe jest korzystanie z SASS. Siatka jest w pełni elastyczna i na pierszym planie stawie wygląd w przeglądarkach urządzeń mobilnych.
- The Goldilocks Approach – http://goldilocksapproach.com/
Jest to maksymalnie uproszczony framework, zawierający wyłącznie ustawienia maksymalnie trzech stanów: multi kolumn, wąskiej kolumny i pojedynczej kolumny. Pozwala to jednak zbudować proste projekty dostosowujące się do rozdzielczości obszaru operacyjnego. Zawiera 2 dobrze skomentowane pliki z arkuszami stylów CSS oraz plik HTML pozwalający na szybki start.
- Simple Grid – http://thisisdallas.github.io/Simple-Grid/
Simple Grid jest prostą siatką CSS, która jest w pełni elastyczna, zawiera dwanaście kolumn o maksymalnej szerokości 1140 pikseli. W przeciwieństwie do innych nie oferuje gotowych styli podstawowych elementów takich jak przyciski, typografia, czy ustawienia tabel, jednak oferuje maksymalnie uproszczoną platformę umożliwiającą rozpoczęcie naszej przygody z budową elastycznych witryn WWW.
- Proportional Grids – http://builtbyboon.com/blog/proportional-grids
Siatka ta pozwala na zbudowanie strony zmieniającej swój rozmiar w zależności od rozmiaru ekranu, korzysta z plików SASS, które możemy skompilować. Framework zawiera 6 różnych konfiguracji siatki oraz pliki Sass, co sprawia, że możemy łatwo skompilować siatkę wstawiając mixiny w zależności od naszych potrzeb.
- Kube CSS Framework – http://imperavi.com/kube/
Kube jest bardzo zaawansowaną, elastyczną siatką CSS. Działa we wszystkich nowych przeglądarkach na komputerach stacjonarnych jak i urządzeniach przenośnych, obsługiwane jest prawidłowo przez Chrome, Firefox, Safari, Operę i IE9+.
Zawiera minimalny plik CSS, nie zawiera zbędnych stylów, przez co daje większą swobodę w tworzeniu własnej strony dokładnie wedle naszych potrzeb. Dodatkowo wykorzystuje pliki LESS.
- RWD Grid – http://rwdgrid.com/
Responsive Grid System oparty jest na bardzo popularnym systemie 960grid, który jest elastyczny i pozwala na prawidłowe rozciąganie siatki w telefonach, tabletach, laptopach oraz na szerokich ekranach monitorów stacjonarnych. Nazewnictwo klas jest podobne jak w sieci 960grid, z tą różnicą że siatka RWD Grid zawiera różne siatki utworzone pod szerokości 1200px+, 960px+ i 720px+ oraz mniejsze szerokości urządzeń mobilnych.
Korzysta z HTML5, CSS3 oraz mediaqueries w JavaScript – by nie zapominać o poszczególnych osobach, które wciąż używają IE.
- One% CSS Grid – http://onepcssgrid.mattimling.com/
To 12-kolumnowy, płynny system siatki oparty na procentowych rozmiarach. Framework zawiera 2 opcje wyjściowe: siatkę o maksymalnej szerokości 1280px w pełnym widoku ekranu, oraz mniejszą siatkę zajmującą w pełnym widoku 1024px szerokości.
Siatka została przetestowana przeglądarkach takich jak: Chrome, Opera, Safari, IE9+, działa bez problemów w IE7 i IE8, jednak nie obsługuje zapytań medialnych z CSS3 (wymaga do tego dodatkowych JavaScriptów które nie są zawarte w pakiecie tego Frameworku).
Dużym plusem jest udostępnienie przez autorów gotowych akcji oraz szablonu PSD do Photoshopa, które przydadzą się projektantom grafiki. Pliki te możemy pobrać całkowicie za darmo.
- Profound Grid – http://www.profoundgrid.com/
Siatka zbudowana w SCSS, zapewnia pełną kontrolę i elastyczność. Siatka utrzymuje Twoje znaczniki semantyczne i działą bez żadnych klas typu „grid_x”.
Jedną z unikalnych cech tej siatki jest precyzyjne wyświetlanie układu na wszystkich przeglądarkach które wspiera. Wszystko to dzięki użyciu ujemnych marginesów do obliczenia rozmiaru kolumn. Przez to, płynny układ będzie wyglądał tak samo w każdej przeglądarce.
- Semantic – http://semantic.gs
Może mieć zarówno stałą jak i zmienną szerokość. Umożliwia wybór ilości kolumn, określenie ich szerokości i modyfikowanie ich bezpośrednio w arkuszu stylów. Zamiast prezentacyjnych class CSS przypisanych do elementów w kodzie HTML do kontroli stylu używa LESS lub SCSS.j
Wyżej wymienione siatki i frameworki cechują się lekkością i minimalizmem, ale idealnie nadają się do szybkiego rozpoczęcia projektu elastycznej witryny internetowej.
Oprócz nich istnieją bardziej rozbudowane frameworki, mające gotowe dodatki, które możemy wykorzystać na naszej stronie.
- Bootstrap – http://getbootstrap.com
W chwili obecnej jest to najpopularniejszy framework, który jest rozwijany przez twórców Twittera. Konstrukcja siatki opiera się na 12 kolumnach. Oprócz responsywnej siatki zawiera spory zbiór dodatkowych komponentów i wtyczek głównie w JavaScript.
Budowa tego frameworku opiera się na preprocesorze LESS przez co można bardzo dokładnie dopasować go do własnych potrzeb.
Posiada bardzo rozbudowany pakiet UI (interfejsu użytkownika): style podstawowej typografii, formularzy, tabel, a także elementy nawigacji i ikony. Dochodzi do tego olbrzymia ilość skryptów JS i jQuery pozwalających na obsługę wyskakujących okienek (tzw. okien modalnych), rozwijanych menu (dropdown), czy sliderów. Bootstrap posiada też ogromną ilość dodatków i skórek, które sprawiają że jest jeszcze bardziej popularnym frameworkiem. Poza prostymi darmowymi skryptami dostępna jest spora ilość płatnych rozwiązań, które pomogą utworzyć nam nowocześnie wyglądającą witrynę zgodną z współczesnymi standardami.
Zaletą frameworka Twitter Bootstrap jest prężnie rozwijająca się społeczność, dzięki której powstają dodatkowe style i komponenty. Na podstawie frameworka Bootsrap opiera się bardzo wiele szablonów dla popularnego i darmowego systemu zarządzania treścią: WordPress, który w oparciu o PHP i MySQL umożliwia niezwykle łatwe założenie strony internetowej.
Ponadto Bootstrap posiada gotowe narzędzie online, dzięki któremu możemy wygenerować własne arkusze stylów pod ten framework.
- Foundation 5 – http://foundation.zurb.com/
Foundation na pierwszym kroku stawia na rozwiązania mobilne. Jest w pełni konfigurowalny za pomocą preprocesora SASS, Budowa siatki opiera się na 12 kolumnach. Foundation to pierwszy tak rozwinięty framework, który wykonany jest zgodnie z regułą „mobile first” – pozwala zatem idealnie tworzyć szybko i prosto mobilne wersje stron. Pakiet zawiera pełen zestaw elementów UI oraz JavaScript’ów. Posiada świetną dokumentację z dużą ilością gotowych przykładów. Dzięki temu, że skupia się na elastyczności i obsłudze urządzeń mobilnych jest dużo lepszy od Twitter Bootstrap’a. Jest lekki i podobnie jak Bootstrap posiada bardzo dużą bazę dodatkowych wtyczek. Modyfikowanie siatki w Foundation dla początkującego użytkownika wydaje się być łatwiejsze niż w Bootstrapie.
- Skeleton – http://www.getskeleton.com/
Skeleton to zbiór plików CSS dla projektantów stron internetowych, którzy potrzebują w szybki sposób utworzyć elastyczny układ strony. Oprócz podstawowego systemu siatki Skeleton oferuje dodatkowo kilka podstawowych funkcji, takich jak reset CSS dla normalizacji stylu. Bazuje na znanej i bardzo popularnej siatce 960grid, ale jest ona elegancko skalowana w dół do mniejszych szerokości. Posiada ostylowanie do najbardziej podstawowych elementów witryny, takich jak formularze, przyciski, tabelki itp. Jeśli chodzi o wizualny wygląd to nie przyciągają one oka, jednak możemy je dostosować do naszych potrzeb. Idealnie nadaje się na fundament większego projektu. Obsługuje 16 kolumn, a jego budowa jest bardzo prosta w użytkowaniu.
Używa zapytań medialnych do skalowania siatki w zależności od szerokości ekranu. Posiada osobne pliki dla samej elastycznej siatki, oraz dla predefiniowanych styli. Wszystkie zapytania są napisane w taki sposób, aby optymalnie działały na urządzeniach z systemem Apple.
