admin On Kwiecień - 24 - 2010

Co to właściwie jest?

960 grid system (w tłumaczeniu – System siatki 960) to struktura / szkielet CSS umożliwiający designerom łatwiejsze budowanie layoutów. Jak mówi sam autor prototypowanie wyglądu strony staje się wtedy łatwiejsze, przy czym przepływ pracy (workflow) jest wydajniejszy i szybszy. Grid 960 jest narzędziem sprzyjającym zarówno projektantom stron jak i osobom – webdeveloperom, którzy będą tą stronę później cięli do HTML/CSS-a. Autorem tego narzędzia jest Nathan Smith i jak sam pisze:

Założenie tego systemu to idealne dopasowanie do szybkiego prototypowania stron, ale również budowanie stron w normalnych komercyjnych projektach. W dostępnej paczce znajdują się arkusze ze szkicami, szkieletem psd gotowym do design, gotowe szkielety HTML i CSS, które jednocześnie wszystkie są przygotowane pod ten sam wymiar 960px.

Jak to wygląda w rzeczywistości?

Sami mieliśmy tylko przyjemność pracowania ze szkieletem pliku psd oraz HTML/CSS. Idea ta jest bardzo przydatna i gdy zostanie zastosowana już na etapie projektu graficznego strony to później zaoszczędzimy bardzo dużo czasu przy pocięciu tej strony. Jednak już przy projekcie samego layoutu mamy punkt od którego możemy zacząć. Dodatkowo naszym zdaniem 960 grid system pozwala na szybsze rozpoczęcie projektowania strony – siedząc przed otwartym nowym dokumentem psd – nie mamy tak naprawdę nic, jedynie zwykłą białą kartkę a otwierając gotowy szkielet 960 grid mamy już punkt startowy.

Dwie odmiany:

12 kolumn

16 kolumn

Są dwa typy 960 grid – 12 kolumnowy oraz 16 kolumnowy. 12 kolumnowa siatka jest podzielona na części, które mają 60 pikseli szerokości. Natomiast 16 kolumnowa siatka składa się z części o szerokości 40 pikseli. Każda kolumna (w obu odmianach systemu0 posiada 10 pikselowy margines – po lewej i po prawej stronie. Marginesy te tworzą 20 pikselową przerwę pomiędzy kolumnami.

Licencja

Cała paczka, z wszystkimi szkieletami ( m.in. do Photoshop -a, Ilustrator -a, Fireworks –a, CSS, HTML itp.) jest darmowa i posiada podwójną licencję – GPL oraz MIT, co pozwala na dowolne zastosowanie w projektach niekomercyjnych jak i komercyjnych.

Cała paczka waży niespełna 0,5 MB i oficjalną wersję „Grid System Version 1.4” można ściągnąć ze strony www.960grid.com

Należy dodać że na stronie znajdziemy także automatyczne generatory kodu CSS oraz HTML w zależności od podanych przez nas parametrów. Możliwe zatem się staje modyfikowanie tego systemu i utworzenie całkowicie indywidualnej wersji systemu.

Zachęcamy was do poeksperymentowania i zastosowania chociaż raz tego narzędzia przy projektowaniu layoutu strony i późniejszym cięciu jej do HTML/CSS-a. Zobaczycie że życie może być łatwiejsze z 960 Grid system!

Więcej informacji na stronie autora: www.960grid.com

10 Responses so far.

  1. mateusz hauer pisze:

    fajnie wszystko tylko bardzo indywidualnego layoutu nie da się na tym oprzeć, raczej bardziej takie standardowe strony / projekty /

  2. furaje iepuri pisze:

    I got this website from my friend who told me about this sitre
    andd at the moment this tine I am visiting this web site and reading very informative posts att
    this time.

  3. matrus pisze:

    Dobry pomysł z tym gridem. Strony wychodzą o wiele ładniejsze. Pozdrawiam

  4. l pisze:

    Super Framework :) Wlasnie zrobilem stronke na 960 gridzie :) I zycie stalo sie prostsze :) Sciagnalem psd i mozna dzialac dalej :) Polecam

  5. admin pisze:

    To już trudniejsza kwestia, zależna od tego na jakiej zasadzie zbudujemy kod strony. Są dwie możliwości, a właściwie 3. Można ustawić wszystko na stałe wielkości (np w px) – taki typ layoutu nazywamy „fixed”, lub wielkości definiować w % czyli tak aby dopasowywały nam się do okna w zależności od rozdzielczości ekranu, wówczas layout nazywamy „pływającym” – „float”. 3 typ to połączenie obu wcześniejszych. Z tego co piszesz to podszedłeś do sprawy od strony „pływającej” :) – ale czy nic się tobie nie rozjedzie to już zależy od wielu czynników, czyli np. czy w tle elementów masz obrazki, czy jednolite lub powtarzalne (wzór – pattern) tło. Jeżeli gdzieś stosujesz obrazki jako tło np. to prawdopodobnie porozjeżdżają się one i będzie to nieestetycznie wyglądało.

    Musisz testować i jeszcze raz testować – pod różnymi rozdzielczościami oraz w różnych przeglądarkach.

    Dodam, że zbudowanie spójnej strony opartej na wyglądzie dopasowującym się do okna przeglądarki w zależności od rozdzielczości to już wyższa szkoła jazdy. Znacznie łatwiej budować strony oparte o stałe zdefiniowane wielkości.

    Adrian podsunąłeś dobry temat na wpis na e-tutorial.pl :) – może niedługo napiszemy więcej na ten temat.

    Pozdrawiam

  6. Adrian pisze:

    Hm jeśli przykładowo ktoś posiada rozdzielczość 1440×900, ale na stronie ramki są ustawione w kodzie na 100% to nic się nie rozjedzie ;>

  7. admin pisze:

    Dokładnie Adrian. Na tym gridzie szerokość strony to 960px, co pozwala na spokojne wpasowanie się strony w okno większości przeglądarek przy rozdzielczości ekranu 1024x768px (uwzględniając pasek scrollowania i inne elementy).

    Pozdrawiamy

  8. Adrian pisze:

    Czyli rozumiem, że na grindzie szerokość strony wynosi 960px ? ;>

  9. admin pisze:

    Nie zrozumiałem chyba do końca –

    … co nie zmienia faktu ze kilka slow wytlumaczenia w tym artykule jest czyms zlym.

    Coś według ciebie jest źle wytłumaczone?

    A co do samego reklamowego charakteru artykułu – Autor chyba jest tak widoczny w sieci, że nie potrzebuje już reklamy :) Po prostu zrobił coś ułatwiającego życie innym dlatego stwierdziliśmy że warto o tym napisać.

  10. cepo pisze:

    Artykul zabrzmial troche jak reklama : D

    Co do siatki to jesli ktos robil poprzednie tutki to napewno ja widzial, co nie zmienia faktu ze kilka slow wytlumaczenia w tym artykule jest czyms zlym.

Zostaw komentarz