webija » 960 http://webija.com najbolje na internetu Thu, 13 Aug 2009 08:59:56 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 960 grid system – CSS šablon http://webija.com/css/960-grid-system-css-sablon/ http://webija.com/css/960-grid-system-css-sablon/#comments Sun, 21 Dec 2008 13:52:24 +0000 wizard http://webija.com/?p=290

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 3x60px + 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.

]]> http://webija.com/css/960-grid-system-css-sablon/feed/ 6