Grid jest to siatka, na bazie której w łatwy sposób może zbudować responsywną stronę internetową. Projektowanie zawartości strony na siatce jest bardzo wygodne, a nowoczesne Frameworki takie jak Bootstrap czy Foundation sprawiają, że budowanie strony od zera wyłącznie z wykorzystaniem HTML i CSS staje się dużo bardziej czasochłonne i mało wydajne. Frameworki to nie tylko wspomniana siatka, ale również masa dodatków m.in: MENU, przyciski, tabele, a nawet animacje.
W tym artykule skupię się jednak na podstawie czyli na budowie Grid’a dla dwóch bardzo popularnych Frameworków: Bootstrap i Foundation. W obu Frameworkach szerokość okna dzielona jest na 12 kolumn.
Klasy CSS dla Bootstrapa:
- .col-xs-12 (szerokość auto)
- .col-sm-12 (szerokość 750px)
- .col-md-12 (szerokość 970px)
- .col-lg-12 (szerokość 1170px)
w miejsce ledwo widocznego koloru żółtego należy wpisać cyfrę jak w poniższym przykładzie. Tyle będzie kolumn ile dla danej wielkości okna wpiszemy pamiętając, że suma szerokości wynosi 12. Przykładowo chcąc dwie kolumny dla największych ekranów wpiszemy klasę .col-lg-6 .col-lg-6 co znaczy, że będą to dwie kolumny o równej szerokości.
<div class="container">
<div class="row">
<div class="col-lg-3 text-center">.col-lg-3</div>
<div class="col-lg-3 text-center">.col-lg-3</div>
<div class="col-lg-3 text-center">.col-lg-3</div>
<div class="col-lg-3 text-center">.col-lg-3</div>
</div>
<div class="row">
<div class="col-md-4 text-center">.col-md-4</div>
<div class="col-md-4 text-center">.col-md-4</div>
<div class="col-md-4 text-center">.col-md-4</div>
</div>
<div class="row">
<div class="col-sm-6 text-center">.col-sm-6</div>
<div class="col-sm-6 text-center">.col-sm-6</div>
</div>
<div class="row">
<div class="col-xs-12 text-center">.col-xs-12</div>
</div>
</div>
Standardowo szerokość dla najszerszego okna to 1170px. Jeżeli chcemy, żeby okno zajęło 100% okna to dodajemy klasę: .container-fluid . Efekt całości kodu widać poniżej. Pierwsze 4 wiersze to powyższy kod, a ostatni rozciągnięty wiersz to kod poniżej. Dzięki takiemu zapisowi poszczególnych klas w zależności od wielkości okna liczba kolumn na stronie będzie się zmieniać.
<div class="container-fluid" style="margin-top:50px;">
<div class="row">
<div class="col-lg-6 text-center">.col-lg-6</div>
<div class="col-lg-6 text-center">.col-lg-6</div>
</div>
</div>
Warto również znać klasy Bootstrapa, które niektóre kolumny potrafią ukryć lub pokazać przy zmianie rozmiaru przeglądarki. Dzięki temu dla okna o dużej szerokości możemy dać więcej treści, którą oszczędzimy osobie, która weszła na stronę np. z komórki. Poniżej klasy ukrywające kolumny, a w nawiasach ich odpowiedniki, które pokazują zawartość:
- .hidden-xs (.visible-xs-*)
- .hidden-sm (.visible-sm-*)
- .hidden-md (.visible-md-*)
- .hidden-lg (.visible-lg-*)
Podobnie sytuacja wygląda z Foundation tutaj klasy, są zapisane inaczej ale zasada jest ta sama i suma kolumn również musi wynieść 12. Podobnie jak w Bootstrapie w celu uzyskania 100% szerokości okna należy użyć osobnej klasy. W Foundation jest to .expanded .
Klasy CSS dla Foundation:
- .large-12 columns
- .medium-12 columns
- .small-12 columns
<div class="row">
<div class="large-3 columns text-center">.large-3 columns</div>
<div class="large-3 columns text-center">.large-3 columns</div>
<div class="large-3 columns text-center">.large-3 columns</div>
<div class="large-3 columns text-center">.large-3 columns</div>
</div>
<div class="row">
<div class="medium-4 columns text-center">.medium-4 columns</div>
<div class="medium-4 columns text-center">.medium-4 columns</div>
<div class="medium-4 columns text-center">.medium-4 columns</div>
</div>
<div class="row">
<div class="small-6 columns text-center">.small-6 columns</div>
<div class="small-6 columns text-center">.small-6 columns</div>
</div>
<div class="expanded row" style="margin-top:50px;">
<div class="large-6 columns text-center">.large-6 columns</div>
<div class="large-6 columns text-center">.large-6 columns</div>
</div>
I jeszcze podobnie jak było w Bootstrapie pokazywanie oraz ukrywanie kolumn w zależności od zmiany szerokości okna przeglądarki w Foundation odbywa się poniższymi klasami:
- .show-for-small-only (.hide-for-small-only)
- .show-for-medium-up (.hide-for-medium-up)
- .show-for-medium-only (.hide-for-medium-only)
- .show-for-large-up (.hide-for-large-up)
- .show-for-large-only (.hide-for-large-only)
- .show-for-xlarge-up (.hide-for-xlarge-up)
- .show-for-xlarge-only (.hide-for-xlarge-only)
- .show-for-xxlarge-up (.hide-for-xxlarge-up)
Więcej o tych Frameworkach przeczytasz na poniższych stronach, gdzie znajduje się bardzo bogata dokumentacja:
- Bootstrap – http://getbootstrap.com/
- Foundation – http://foundation.zurb.com/