Jako, że większość stron ma dość podobny układ, kilka osób wykombinowało sobie, że może warto zrobić "frameworka" (prześladuje mnie to słowo) by każdorazowe klepanie tego układu mieć z głowy. Jednym z tworów powstałym na tej fali jest 960 Grid System. Jako, że leniwy jestem to postanowiłem spróbować.

Co to robi?

Tak naprawdę to tylko jedną rzecz - ułatwia nam tworzenie stron wielokolumnowych o układach iście bardzo egzotycznych.Jeden wiersz dwie kolumny, drugi siedem... A wszystko to osiągamy przez podanie odpowiedniej klasy. Dodatkowo w pakiecie dostajemy jeden arkusz ładnie formatujący nam tekst oraz reset.css, który ustawi margin i padding na 0 tam gdzie trzeba.

Zalety

Kiedy już zapamiętamy wszystkie klasy, a liczenie do 16 nie będzie nam sprawiać kłopotów to uznamy 960 za bardzo pożyteczne narzędzie, dzięki któremu nie będziemy już musieli pamiętać o floatach i innych rzeczach, których zwykle używamy do stworzenia wielokolumnowych stron. Szkielet będziemy budować używając klas typu grid_4, grid_8, alpha, omega etc. W sumie do zapamiętania jest tylko kilka nazw.

Ze swojego doświadczenia powiem, że o ile pierwsza próba nie była od razu sukcesem, o tyle za drugim razem stworzenie 4 kolumn zajeło mi dosłownie minutkę.

Wady

Po pierwsze należy pamiętać, że 960 (ani inny podobny system) nie nadaje się do wszystkich stron. Robiąc strony pod coś takiego musimy najpierw dość dokładnie sobie wszystko policzyć. A co liczyć? Ano wyobraźcie sobie, że Wasza strona musi mieć szerokość 960px i składa się z 12 lub 16 równych kolumienek, które oczywiście można łączyć we wszelakich konfiguracjach. Oczywiście nie wszędzie trzeba się trzymać grida, ale z drugiej strony jeśli już wczytaliśmy tego cssa od groma to głupio go nie stosować.

Sama Agressiva mnie przeklęła, gdy po tym jak mi stworzyła szablon do tego tutka sobie przypomniałem, że sidebar musi mieć określoną szerokość... oczywiście nie miał. Wniosek z tego taki, że jeżeli współpracujecie z grafikami to będziecie musieli mu dokładnie wytłumaczyć całą sprawę.

Instalacja

Wchodzimy na 960.gs i pobieramy to co trzeba. Następnie wypakowywujemy z niej 3 pliki: 960.css, text.css oraz reset.css. Ostatnim krokiem jest zamieścić je w naszym (x)htmlu:

Troszkę teorii

Nim się zabierzemy za konkrety drobny wstępik teoretyczny. Pierwszym naszym krokiem jest zdecydowanie się czy chcemy korzystać z siatki 12-kolumnowej czy 16. W zależności od tego głównemu divowi nadajemy klasę container_12 lub container_16.

Najważniejszymi klasami w 960 są grid_1, grid_2 itd do maksymalnej liczby kolumn, którą zdefiniowaliśmy. Te klasy oznaczają z ilu małych kolumienek ma się składać nasz obiekt.

Przydatne są też suffix_xx i prefix_xx (pod xx należy wstawić liczbę). Prefix wstawia pustą kolumnę (lub więcej, w zależności od tego ile wpisaliśmy) przed obiektem, a suffix za.

W naszym arsenale dysponujemy jeszcze klasami alpha i omega. Alpha ustawia lewy magines na 0, zaś omega prawy. Najczęściej alphę stosuje się dla pierwszej kolumny, a omegę dla ostatniej.

Na koniec zostaje nam jeszcze klasa clear. Nadaje to divowi clear:both.

Warto spojrzeć sobie na demo ze strony 960. Dzięki temu możecie zobaczyć jak wyglądają te kolumienki w praktyce.

Czas na drobną praktykę

W ramach praktyki zrobimy sobie taką oto stronkę (nałożyłem już siatkę, żeby łatwiej nam było widać jak będą wyglądać kolumny):

960 przyda nam się na tej stronie do:

• podzielenia strony na dwie kolumny
• podziału #main na dwie kolumny
• podziału stopki na cztery kolumny

I tylko tym się w tym tutorialu zajmiemy. Reszta już została opisana w tutorialu Agnieszki.

Pierwszą rzeczą jaką trzeba zrobić jest zdecydowanie się czy korzystamy z 12 czy 16 kolumn. Ja potrzebowałem ich 16, więc <div id="container"> otrzymał klasę container_16.

Teraz zajmijmy się podziałem na dwie kolumny:

Żeby wszystko było ok musimy sumować sobie liczby znajdujące się grid, suffix oraz prefix. Ich suma nie może być większa niż liczba przy elemencie nadrzędnym. W tym przypadku się zgadza: 11+5 = 16, czyli tyle ile zadeklarowalismy na początku. Sidebarowi daliśmy jeszcze prawy margin na 0.

Czas zająć się #main. Tutaj najpierw będziemy mieć jeden wiersz na całą szerokość #main a wiersz niżej dwie kolumny o równej szerokości:

Pierwszy wiersz dostał tylko klasę alpha (czyli lewy magrin ustawiamy na 0). Nie musimy tu pisać grid_11, gdyż szerokość została odzieciczona.

W drugim wierszu pierwszy div otrzymał klasy grid_5, suffix_1 oraz alpha, czyli div ten zajmuje 5 kolumienek, ma lewy margines ustawiony na 0, a na prawo od tego diva znajduje się pusta kolumienka. Drugi div też zajmuje 5 kolumienek (grid_5). Dodatkowo posiada klasę omega, czyli prawy margines ustalony na 0. Sprawdźmy czy jest dobrze: 5 + 1 + 5 = 11, czyli dobrze bo #main ma klasę grid_11, czyli składa się z 11 kolumienek.

No pozostaje nam stopka. Tutaj prosta sprawa. Stopka ma zajmować całą szerokość, czyli dostaje klasę grid_16. Mamy więc 16 kolumienek do dyspozycji, a chcemy mieć 4 kolumny. W związku z tym każdy div otrzymuje klasę grid_4. Poza tym pierwszemu divowi musimy nadać klasę alpha, a ostatniemu klasę omega. W naszym szablonie wygląda to następująco:

Podsumowanie

Dzięki 960 udało mi się zakododować stronkę testową w iście ekspressowym tempie, a moim głównym zajęciem było wybieranie kolorków, zmian tła tu i ówdzie oraz ostylowanie menu na górze. Większość spraw z układem załatwił za mnie 960. Jednak jak już wspominałem na początku - nie przy wszystkich rodzaj stron to zadziała. A szkoda, bo fajnie by było zawsze tak szybko i przyjemnie kodować.

Warto też wspomnieć, że istnieją jeszcze dwie odmiany 960:

• Fluid 960 Grid System - wersja działająca na procentach zamiast na pikselach.
• Typogridphy - wersja oparta o em.