960 Grid system je CSS framework od Nathana Smithe. Tento systém mřížky je hojně využívaný ve webdesignu. Používají ho jak grafici při návrhu layoutu webu, tak následně podle něho se řeže a kóduje grafika web.

Oficiální stránky najdete na: http://960.gs/

Pro vlastní práci na grafických návrzích jsem si tenhle systém rozšířil. (960 grid system je volně šířen jako open source). Hlavním důvodem byla nedostatečná šířka (1020px) layoutu a tudíž horší práce s pozadím layoutu. Pokud pracujeme s původním gridem, tak byl problém při zoomu na 1600% pracovat na detailech u okraje layoutu, protože nám tyto kraje překrývaly panely (vrstvy, historie atd.). Rozšířená šířka toto eliminuje. Volil jsem 1400px - což je dostatečná šířka pro celkový návrh pozadí (včetně tapety). Celý 960px layout jsem zarovnal na střed a dodělal barevné slupce, které mají odlišnou (modrou) barvu od původních, tak aby bylo jasné, kde začíná 960px layout. Do okrajů jsem přidal i vodítka stejným způsobem jako je na původním 960 grindu.

Rozšířil jsem i výšku celého plátna, tak aby bylo možné navrhovat delší webové stránky (třeba portály). Výšku jsem rozšířil na 1400px a barevné sloupce jsou prodlouženy i do této délky.

Na výsledek se můžete podívat na screenu:

PSD s rozšířeným gridem si můžete stáhnout zde:

Click here to download:

960_grid_1400px.psd (1.1 MB)