960 Grid System, czyli o tym, jak stworzyć przejrzysty i schludny layout dla swojej strony WWW

Era tworzenia stron z wykorzystaniem tabelek już przeminęła. Obecnie korzystamy z CSS, zamiast tworzyć tabelę w tabeli, a w niej jeszcze jedną tabelę. Da się to jeszcze bardziej ułatwić? Oczywiście! Nathan Smith wpadł na pomysł stworzenia 960 Grid System, dzięki czemu jeszcze szybciej ułożymy na stronie wszystko tak, jak tego oczekujemy.

Czym jest wspomniany 960 GS? Jest to framework CSS, wspomagający tworzenie layoutów. Ten prosty szablon CSS daje nam szkielet strony, podzielonej na 12, 16 lub 24 kolumn. Każda kolumna posiada 10-pikselowy margines z lewej i prawej strony.

Zalety i wady

Zalety 960 Grid System to przede wszystkim prostota i przyspieszenie pracy. Nie musimy pamiętać o pozycjonowaniu treści oraz o marginesach. Wystarczy kilka klas, umiejętność liczenia do 12, 16 ewentualnie do 24 i mamy gotowy szablon.

W pakiecie otrzymujemy również arkusz CSS, który ładnie sformatuje nam tekst. Na początku trzeba oczywiście przyzwyczaić się do tworzenia szablonów w inny sposób - później pracuje się o wiele szybciej.

A wady? Grafika strony powinna być tworzona pod 960 Grid System. Szerokość strony musi wynosić 960 pikseli, elementy również muszą mieć określoną szerokość. Warto skorzystać z gotowych szablonów, dla programów typu Photoshop, Gimp, Illustrator i innych.

Naturalnie, jeżeli chcemy, elementy mogą mieć dowolną szerokość, wtedy będziemy zmuszeni tworzyć dodatkowy kod CSS. Jednak takie działanie trochę mija się z celem stosowania frameworka.

Dodatkowo, osoby, które będą w przyszłości edytować nasz kod, mogą mieć z tym problemy, jeżeli nie znają 960 Grid System.

«poprzednia 1 2 3 4 ... 5 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

14 skomentuj »

Komentarze

#1 wujekbogdan 2011-08-01 09:12:28 0
960 w tym artykule przedstawiony jest jako jakaś nowość, a frameworków CSS jest już trochę. Warto by było więc chociażby wspomnieć o innych np. popularnym Blueprint.

Pomimo wspomnianych w artykule zalet jakoś nigdy nie mogłem się przekonać do używania frameworków. Być może w dużych projektach ułatwiają pracę, ale dla mniejszych stron lepiej chyba pisać własny CSS.
IP: 89.68.6.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.122 Safari/534.30
#2 Walking In The Darkness 2011-08-01 09:28:21 0
razi konieczność użycia pustego div'a z klasą "clear"...
IP: 86.6.140.[...] Mozilla/5.0 (X11; Linux i686) AppleWebKit/534.30 (KHTML, like Gecko) Ubuntu/11.04 Chromium/12.0.742.112 Chrome/12.0.742.112 Safari/534.30
#3 Pid 2011-08-01 10:41:13 0
A z innej beczki: jak ida prace nad mobilna wersja webhosting.pl?
IP: 77.114.26.[...] Mozilla/5.0 (Linux; U; Android 2.3.3; pl-pl; HTC_DesireHD_A9191 Build/GRI40) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
#4 murwazy^® 2011-08-01 12:59:27 0
z innej beczki 2: kiedy bedzie mozliwosc zobaczenia listy wszystkich swoich komentarzy? i listy artykulow, ktore komentowal;ismy? a lista komentarzy, ktore pokazaly sie po tym, jak dodalismy komentarz?
IP: 89.79.188.[...] Opera/9.80 (Windows NT 6.1; U; pl) Presto/2.9.168 Version/11.50
#5 fajny nick 2011-08-01 13:39:05 0
z innej beczki 3: Przydałoby się stronicowanie komentarzy.
IP: 83.11.128.[...] Mozilla/5.0 (Windows NT 6.1; WOW64; rv:7.0a2) Gecko/20110731 Firefox/7.0a2
#6 Adamm^® 2011-08-01 13:52:07 0
Teraz jest już 1140:

http://cssgrid.net
IP: 178.180.100.[...] Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0
#7 Miłosz 2011-08-01 19:08:54 0
W artykule jako wadę wymieniono to że strony muszą mieć 960px szerokości, co oczywiście jest nie prawdą - fakt musimy zrobić css - ale jest do tego specjalny generator więc to żaden problem, a ustawiamy sobie wszystko (szerorkość, marginesy ilość kolumn) jak chcemy więc to tylko plus, jakaś wartość musiała być domyślna:) Ale napewno nikt nie będzie miał problemów z edycją takiego kodu (no chyba że będzie miał problem z podstawowym układem 960 to i z każdym innym). A sam framework oceniam bardzo pozytywnie, z tym że grafik musi mieć trochę pojęcia aby stronę zaprojektować odpowiednio.
IP: 195.116.41.[...] Mozilla/5.0 (Windows NT 6.1; WOW64; rv:5.0) Gecko/20100101 Firefox/5.0
#8 kwis.abcdw.pl 2011-08-02 07:01:21 0
Już wcześniej z zachwytem pisałem w swoim blogu http://kwis.abcdw.pl o szablonach 960. Wykorzystuję je w swojej pracy i gorąco polecam innym. Praca z nimi to przyjemność.
IP: 95.50.148.[...] Mozilla/5.0 (Windows NT 6.1; WOW64; rv:5.0) Gecko/20100101 Firefox/5.0
#9 Zonk 2011-08-02 13:01:01 -1
Nie róbmy z tego wątku beczkowozu lol

Z innej beczki: faktycznie przydałaby się wersja mobilna Webhosting.pl :] Pokaż komentarz
IP: 109.110.223.[...] Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.107 Safari/535.1
#10 z innej beczki 4 2011-08-02 14:21:56 0
kiedy w końcu będzie możliwość resetowania hasła
IP: 188.33.158.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.68 Safari/534.30
#11 Adam Rybicki 2011-08-04 02:51:39 0
Zarówno 960 Grid System, jak i cssgrid wskazany przez Adamm® mają jeden poważny błąd - pozbawiają myślenia. Ja wolę zastanowić się przy każdym projekcie jakie rozwiązanie wybrać, które w jakim wypadku sprawdzi się najlepiej. Na kolumny są co najmniej trzy sposoby (oczywiście działające również w starszych przeglądarkach i bazujące wyłącznie na css).

Pierwsze dwa bazują na floatach, jednak oba rozwiązania mają wady.

Możemy float "zamknąć" tagiem z przypisanym stylem clear (960 Grid System), co w przypadku pustych tagów wygląda mało elegancko, a dodawanie specjalnej klasy w kolejnych elementach layoutu może być uciążliwe (szczególnie przy rozbudowie serwisu).

Możemy również opakować wszystkie floatowe kolumny zamknąć w div z overflow:hidden (cssgrid), co przynosi wiele dobrego, ale może też przysporzyć problemów w przypadku pozycjonowania absolutnego jakiegoś elementu wewnątrz takiego wrappera (przestaniemy widzieć to co przesunęliśmy).

Rozwiązanie bez floatów bazuje z kolei na display:inline-block. Rozwiązanie eliminuje zarówno puste divy, czy overfloatowe wrappery ratujące skórę przy nierównych wysokościach kolumn, jednak w zastosowaniu może okazać się również uciążliwe (zaburza się czytelność kodu - wymagany jest brak białych znaków między kolumnami). Rozwiązanie wymaga też pewnego fixu dla ie7, co już z każdym dniem jest coraz mniejszym problemem (ie7 ginie).

Każde rozwiązanie ma swoje wady i zalety, i trzeba je znać by używać ich z głową.
IP: 87.207.146.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.122 Safari/534.30
#12 Profesor 2011-08-06 22:47:19 0
o wiele bardziej jest czytelny i przyjazny blueprint
IP: 78.8.51.[...] Mozilla/5.0 (Windows NT 6.1; WOW64; rv:5.0) Gecko/20100101 Firefox/5.0
#13 Kenjiro 2011-08-09 15:39:27 0
@Adam Rybicki: ja używam floaty i overflow: auto, bo clear nie zawsze działało tak jak chciałem. Problem z wrapperami jest nikły, bo i tak trzeba wszystko ujmować w większe bloki, bo w przeciwnym przypadku może wyjść niespodzianka, a wyrzucanie bloków poza wrapper nie należy do dobrych zwyczajów (wrzucenie na następny blok domyślnie blokuje np. możliwość kliknięcia linku, trzeba sobie radzić pozycją z).

Historycznie patrząc to przewaga divów nad tabelą jest zerowa w przypadku klasycznego układu "jedno po drugim". Do tego najczęściej więcej z tym roboty, niż zysku. Mówi się trudno i rypie dalej... ;)
IP: 158.75.204.[...] Mozilla/5.0 (Windows NT 6.1; rv:6.0) Gecko/20100101 Firefox/6.0
#14 mundus^® 2011-09-18 16:16:02 0
Cieszę się że trafiłem na ten artykuł, bo będę niedługo robił nowy layout, a widzę że stosowanie takiego frameworka dla styli to niegłupi pomysł, dzięki za objaśniający artykuł :-]
IP: 79.186.224.[...] Opera/9.80 (Windows NT 6.1; U; pl) Presto/2.9.168 Version/11.51

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.