Jak obiecałem w poprzednim artykule pokażę jak praktycznie można wykorzystać framework 960gs. Do tego celu będę się wzorował na layoucie witryny wordpress.org .
Spójrzmy jak rozkłada się layout witryny wordpress.org. Gdy nałożymy na nią siatkę (użyłem modelu 12 kolumnowego) przygotowaną przez twórców systemu 960gs to otrzymamy coś takiego:
Patrząc teraz widzimy jak poszczególne elementy nakładają się z kolumnami systemu 960gs. Wystarczy jest teraz dokładnie zdefinionwać i określić ich szerokość.
Zobaczmy:
Teraz widać wyraźnie poszczególne elementy. Cały layout dzieli się na 5 poziomych sekcji – header składający się z logo (1) pola wyszukiwania (2) oraz menu górnego (3).
Następna sekcja to treść podzielona na dwie równe części (4 i 5), od razu pod nim znajduje się obszar komunikatów zajmujący całą szerokość (6). Kolejna sekcja została symetrycznie podzielona na cztery części – z przeznaczeniem na ogłoszenia i komunikaty (elementy 7 – 10). Na samym dole znajdujemy footer, który podzielony został na dwie części – po lewej: standardowy footer (10), po prawej: widoczny jest slogan witryny (11).
Sprawdźmy teraz jak można zreplikować ten layout za pomocą systemu 960gs. Na początku zajmiemy się headerem. Zauważmy, że elementy 2 i 3 są jeden po drugim i nie są tej samej szerokości. Musimy je zgupować razem w jednym elemencie i umieścić w tym samym rzędzie co logo.
Rozpoczynamy od zdefiniowania kontenera 12-to kolumnowego:
|
1 2 3 4 5 6 |
... <div class="container_12"> </div> ... |
Teraz czas na header:
|
1 2 3 4 5 6 7 8 9 10 |
... <div id="logo" class="grid_4">LOGO</div> <div class="grid_8"> <div class="prefix_5 grid_3 alpha omega"> <div id="search"> SEARCH</div> </div> <div id="menu" class="grid_8 alpha omega"> MENU</div> </div> ... |
Następnie dodajemy drugi wiersz zawierający dwie kolumny:
|
1 2 3 4 |
<div class="grid_6">CONTENT 1</div> <div class="grid_6">CONTENT 2</div> ... |
Obszar powiadomień:
|
1 2 3 |
<div id="messages" class="grid_12">MESSAGES</div> ... |
i reszta:
|
1 2 3 4 5 6 7 8 9 |
<div class="grid_2">CONTENT 2 a</div> <div class="grid_4">CONTENT 2 b</div> <div class="grid_4">CONTENT 2 c</div> <div class="grid_2">CONTENT 2 d</div> <div id="footer" class="grid_10">FOOTER</div> <div id="footerlogo" class="grid_2">Footer logo</div> ... |
Gotowe, a tak wygląda to co zrobiliśmy:
Czyż nie podobny to tego z wordpress.org? :)
Oczywiście system 960gs nie rozwiąże wszytkich naszych problemów związanych z przygotowaniem layoutu, ale na pewno nam to ułatwi. Nie musimy się martwić jak on będzie wyglądał w danej przeglądarce bo w każdej z nowych witryna będzie wyglądała tak samo.
