Grid System

Grid System

Czym jest Grid System? Moim zdaniem dla Webdesignera, Grid system jest tym, czym dla Frond-end developera edytor kodu. Nie wyobrażam sobie bez niego pracy.

Jest to nic innego niż siatka, w którą wpisuje się różne elementy na stronie. Może być to siatka składająca się z 12, 16 kolumn. A w niektórych przypadkach nawet 24 kolumny. W zależności od tego jakiej szerokości kolumny chcemy mieć.

Najlepszym Freameworkiem do projektowania stron w interfejsie graficznym jest moim zdaniem 960GridSystem.
Wiele stron jest opartych o ten system. Nawet w dzisiejszych czasach kiedy projektuje się już na większe rozdzielczości niż 960px,  960GridSystem wciąż cieszy się popularnością.

Sam autor projektu, którym jest Nathan Smith mówi, że:

Założenie tego systemu to idealne dopasowanie do szybkiego prototypowania stron, ale będzie działać równie dobrze, gdy zintegrujemy w środowisku produkcyjnym W dostępnej paczce znajdują się arkusze ze szkicami, szkieletem psd gotowym do design, gotowe szkielety HTML i CSS, które mają identyczne wymiary. Jest to 960px.

Grid System
Jeden z przykładów strony opartej na 960 Grid System. Na stronie autora znajduje się więcej przykładów.

Można też znaleźć siatki w innych rozdzielczościach niż 960px. Np. 1280px. Aktualna strona tego bloga oparta jest właśnie a taką siatkę.
1280 Grid System

Web Developerom Grid System również się przydaje do kodowania Layoutów. Jest cała masa  specjalnych systemów CSS, JS, które ułatwiają kodowanie tego rozwiązania.

Wiele Freameworków takich jak Bootstrap równie korzysta z systemu grida. Ułatwia to responsywność stron internetowych.

Sama nie obrażam sobie projektowania stron WWW, bez pracy z gridem czy to 960px, czy większym. Siatka w 12 kolumnowym systemie składa się z części, które mają po 60px szerokości. Natomiast 16-to kolumnowa siatka ma 40px szerokości. (czerwone paski na screenie). Jest też 10px marginesu z każdej strony (białe paski), co razem daje 20-to pikselowy margines z każdej strony. Co ułatwia dociąganie elementów do siatki. Dużo prościej jest dopasować elementy na stronie do grida, niż rozmieszczać je na oko. A prace oparte o Grida są powszednie uznawane za wizualnie ładniejsze i profesjonalne.

Dlatego jeszcze raz powtórzę praca z Grid System to podstawa, już na etapie projektowania, jak i później kodowania stron internetowych.

Polecam Ci drogi czytelniku ten system i zachęcam do jego wypróbowania. Tym bardziej, że jest całkowicie darmowy.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *