Kilkanaście miesięcy temu, podczas przeszukiwania sieci, natrafiłem na framework CSS o nazwie 960 grid system. Był on wtedy w fazie beta i zgodnie z komentarzami autorów – nie wszystko działało jak powinno. Kilka dni temu, gdy przyjąłem zlecenie na przerobienie pliku .psd na szablon .xhtml przypomniałem sobie o tym narzędziu. Zapytałem wujka google’a o adres, pobrałem kilkubajtowy plik, zerknąłem na przykład, rzuciłem okiem na plik .css, zrobiłem kilka poprawek w .psd i po kilkunastu minutach wielokolumnowy szablon był gotowy.

Czym jest 960 grid system?

960gs jest prostym szablonem CSS wykorzystywanym do tworzenia layoutów. Zaprojektowano go w tym celu, aby pomagał w projektowaniu układu kolumnowego. Szablon opiera sie na szerokości 960px – stąd nazwa. Dlaczego akurat 960px? Z dwóch powodów. Pierwszym z nich jest to, że zgodnie ze satystykami W3C naczęściej używaną rozdzielczością przy przeglądaniu stron internetowych jest 1024X768px. Mając to na uwadze projektanci budują tak strony aby ich szerokość nie była większa niż 1024px. Ale dlaczego akurat 960? a nie np. 980 albo 1000? Otóż 960 jest podzielne przez liczby: 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 i 480. Daje to bardzo duże pole do popisu w dostosowywaniu szerokości.

Zasada działanie systemu 960 jest banalnie prosta. Projekt jest dzielony na równe kolumny i każdy element na stronie jest dostosowany do odpowiedniej ilości kolumn we wierszu. 960Gs wspiera dwa układy: 12 kolumn oraz 16 kolumn.

W pierwszym z nich kolumna ma szerokość 60px w drugim 40px. Marginesy są równe 10px po obu stronach co daje nam razem 20px na kolumnę. Warto zerknąć na stronę demo gdzie pokazane są różne możliwe układy. Oczywiście nie są przedstawione wszystkie możliwości, ale jest ich dość aby zobaczyć ogólną zasadę działania.

Co w paczce?

System 960gs możemy pobrać tutaj. W środku otrzymujemy pliki css składające się na system (960.css, reset.css oraz text.css) w wersji skompresowanej jak i nie. Plik 960.css jest esencją systemu. W nim znajdują sie deklaracje wyglądu kolumn. Plik reset.css zeruje wszystkie podstawowe tagi html. Plik text.css jest przykładowym dodatkowym szablonem który nadaje wielkość i wygląd czcionek w pragrafach i nagłówkach. Jest to plik opcjonalny i nie musimy z niego korzystać.

Obok plików CSS w paczce znajdują się sketch_sheets w formie pliku PDF. Są to gotowe szablony gotowe do wydrukowania – można je wykorzystać przy projektowaniu szablonu za pomocą ołówka na kartce.

W paczce także możemy znaleźć gotowe szablony do programów graficznych które wykorzystujemy jako plik bazowy do projektowania layoutu.

Jak to działa?

Pierwszym krokiem jest wybranie wariantu zgodnie, z którym będziemy budować nasz layout. mamy do wyboru 12 lub 16 kolumn.

Tworzymy div z klasą container_12 (albo container_16), w którym umieścymy całą naszą treść.
Dalsze projektowanie polega na tym, że układamy elementy we wierszach, gdzie zwracamy uwagę na to ile kolumn poszczególny element zajmuje. Pamiętać należy że każdy wiersz powinien mieć zdefinione co w której kolumnie się znajduje i nie można zapomnieć o żadnej z nich. Błędem jest np. zdefinowanie dwóch elementów po 5 kolumn (dających razem 10) w układzie 12-to kolumnowych. Dwie brakujące kolumny mogą (aczkowlkiek nie muszą) narobić potem zamieszania. Szerokość elementów określa się bardzo łatwo. Nadaje się klasę grid_xx gdzie xx – określa ilość kolumn które element ma zająć. Dla przykładu:

W przykładzie widzimy, że nasz wiersz został podzielony na trzy sekcje prawa i lewa po 3 kolumny, oraz środkowy element 6 kolumn.

Co jednak gdy będziemy chcieli zostawić puste miejsca w układzie? Używamy wtedy w elemencie dodatkowo klasy prefix_x lub suffix_x. Klasy te tworzą puste przestrzenie przed (gdy użyjemy prefix) lub po (suffix>) wybranym elemencie. „x” oznacza ilość kolumn pustego miejsca.

W tym przykładzie tworzymy podobny układ do poprzedniego, z tym, że lewy i prawy element mają szerokość 2 kolumn, content – jak poprzednio 6, a z lewej i prawej strony są marginesy szerokości 1 kolumny.

W powyższych przykładach można zauważyć, że w każdym wierszu ostatni div posiada klasę clear. Kolumny są rozmieszczane jako opływające (‚float’) i nadanie takiego atrybutu pozwoli „złamać wiersz”. Korzystanie z tej klasy jest zalecane aby zachować dobry układ.
Nie jest wymagane korzystanie z tag’u div. Można używać także tagu: span.
Istnieje także możliwość wpisywania elementów wewnątrz innych elementów. Nic nie stoi na przeszkodzie na stworzenie takiego kodu:

Niestety nie jest on do końca poprawny. Pamiętajmy, że każda kolumna ma margines 10px z lewej i prawej storny. W sytuacji jak powyższa, gdy dwa elementy umieszczamy bezpośrednio w drugim elemencie zajdzie sytuacja że marginesy lewy i prawy będą miały wartość 20px. (10px margines elementu nadrzędnego i 10px elementu potomnego). Gdy będziemy chcieli nasz layout zagłębić jeszcze poziom w dół to nasz margines wyniesie jeszcze więcej. Rozwiązaniem w takich sytuacjach jest użycie klas alpha i omega, które ustawiają margines na 0. alpha zeruje lewy margines, omega zaś prawy.
Poprawnym, więc zapisem będzie:

Reasumując:
Projektując nasz layout z wykorzystaniem 960gs wykorzystujemy klasy:

W następnym artykule pokażę praktyczne zastosowanie frameworku 960gs.
.