960 grid system je zanimljivi CSS šablon koji vam omogućava lako sastavljanje osnovnog kostura/izgleda vaše buduće web strane. Suština je da omogućuje često upotrebljivane dimenzije bazirane na širini od 960 pixela. Postoje dve varijante: prva je sa 12 kolona i širinama od 60px svake, a druga je sa 16 kolona i širine od 40px svake kolone. Zbunjuje vas da to kad pomnožimo i izračunamo matematički ne daje ukupno 960px? To je zato što svaka kolona ima marginu sa leve i desne strane od 10px, što znači da između svake kolone imamo 20px razmaka, a sa krajnje leve i desne strane 10px. Kako to izgleda vizuelno, možete pogledati ovde.

Kako koristiti?

Upotreba ovog šablona nije teška, moglo bi se reći i da je laka. Kao prvo treba da skinete šablon sa 960.gs stranice i stavite u direktorijum vašeg web projekta. Da napomenem zip arhiva sadrži dosta toga ne samo CSS fajl koji treba da se koristi. Unutar code direktorijuma zip arhive se nalaze CSS fajlovi i to 3 komada. Dva CSS fajla, reset.css i text.css služe kao vrsta nekog reseta/poništavanje svih stilova web čitača ako se oni učitaju. Ovo u suštini se ne mora koristiti, ali kako hoćete, nama je bitna upotreba 960.css fajla. Njega ćemo prvo učitati u našu stranicu gde hoćemo da upotrebimo:

<link type="text/css" rel="stylesheet" media="all" href="putanja_do_css/960.css" />

Sada posle toga možemo pristupiti kreiranju šablona izgleda stranice. Recimo napravićemo jedan osnovni sa zaglavljem, 3 kolone i footerom. Sledeći kôd ide između <body> i </body> tagova.

<div class="container_12">
<div class="grid_12">header</div>
<div class="grid_3">kolona 1</div>
<div class="grid_6">kolona 2</div>
<div class="grid_3">kolona 3</div>
<div class="grid_12">footer</div>
</div>

Kako radi?

960.css sadrži skup CSS klasa koje su unapred napisane i tako određene širine kolona za varijante. Ako ste pogledali šemu mogli ste lako zaključiti da kod varijante od 12 kolona „grid_3″ znači 3 kolone, što iznosi 3×60px + razmak između kolona (margina levo i desno = 20px, pošto je 3 kolone imamo 2 razmaka između njih = 40px) i sve to ukupno 220px!

I to je to. Naravno možete eksperimentisati i pokušati napraviti kompleksnije šablone ovo je bio samo jedan mali kratki uvod i kratko uputstvo. Možete posetiti matičnu stranicu i videti tamo nekoliko primera stranica koje koriste šablon i ovde opisani koncept.

Random Posts