960 grid system - CSS šablon
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.
Ostali članci
Upgrade na Wordpress 2.6.5
Postavljanje Wordpress bloga na računar
Firefox i TinyURL dodatak, skratite Vaše linkove lakše
Popularnost i rangiranje social sajtova u regionu
Smešna reklama :)
YouTube moguće linkovanje na određenu tačku videa
Beba koja se ludo smeje :)
Kreiranje Firefox profila
Knjiga “Blog osnove” Dragana Varagića
