Τι είναι το 960 Grid System; Γιατί δημιουργήθηκε; Πώς μπορούμε να το χρησιμοποιήσουμε; Αυτά και άλλα πολλά θα δούμε σε αυτό το άρθρο, που είναι αφιερωμένο στο πρότυπο σχεδίασης ιστοσελίδων με το όνομα 960 Grid System.
Η Πρώτη Επαφή
Το 960 Grid System είναι δημιούργημα του Nathan Smith και είναι μια προσπάθεια καθιέρωσης ενός standard για τον σχεδιασμό ιστοσελίδων, χρησιμοποιώντας συγκεκριμένες διαστάσεις, και πιο συγκεκριμένα, ιστοσελίδες με πλάτος 960pixels. Αυτό το νούμερο δεν είναι τυχαίο, αφού ο αριθμός 960 διαιρείται με τους αριθμούς 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480, και άρα μας κάνει την ζωή πιο εύκολη όταν έχουμε να κάνουμε με σχεδιασμό ιστοσελίδων.
Υπάρχουν τρία διαφορετικά layouts. Ένα που χρησιμοποιεί 12 στήλες, ένα που χρησιμοποιεί 16 αλλά και ένα που χρησιμοποιεί 24 στήλες. Παρακάτω θα δούμε και τις διαφορές, αλλά και το πώς μπορούμε να τα χρησιμοποιήσουμε μαζί.
Διαστάσεις
Το layout που είναι βασισμένο στις 12 στήλες είναι χωρισμένο σε κομμάτια με πλάτος 60pixels. Το layout που είναι βασισμένο στις 16 στήλες είναι χωρισμένο σε κομμάτια με πλάτος 40pixels. Και τα δύο αυτά templates, έχουν στήλες με margin10 pixels σε κάθε πλευρά, όπου δημιουργούν συνολικό κενό 20 pixels ανάμεσα στις στήλες. Τέλος το layout που είναι βασισμένο στις 24 στήλες είναι χωρισμένο σε κομμάτια με πλάτος 60pixels ενώ το margin σε κάθε πλευρά είναι 30 pixels. Το τελευταίο χρησιμοποιείται περισσότερο για ιστοσελίδες που στοχεύουν τους χρήστες που επισκέπτονται την σελίδα μέσω κινητών συσκευών. Για καλύτερη κατανόηση ας κοιτάξουμε τις διαφορές στο παρακάτω γράφημα. (Η εικόνα είναι αρκετά μεγάλη σε ύψος οπότε μην πανικοβληθείτε).
Τα Styles του 960 Grid System
Ας δούμε το .css αρχείο για το template με τις 12 και τις 16 στήλες, για να καταλάβουμε καλύτερα τις ιδιότητες που μας προσφέρει το 960 Grid System
.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;position:relative;margin-left:10px;margin-right:10px}
.container_12 .grid_3,.container_16 .grid_4{width:220px}
.container_12 .grid_6,.container_16 .grid_8{width:460px}
.container_12 .grid_9,.container_16 .grid_12{width:700px}
.container_12 .grid_12,.container_16 .grid_16{width:940px}
.alpha{margin-left:0}
.omega{margin-right:0}
.container_12 .grid_1{width:60px}
.container_12 .grid_2{width:140px}
.container_12 .grid_4{width:300px}
.container_12 .grid_5{width:380px}
.container_12 .grid_7{width:540px}
.container_12 .grid_8{width:620px}
.container_12 .grid_10{width:780px}
.container_12 .grid_11{width:860px}
.container_16 .grid_1{width:40px}
.container_16 .grid_2{width:100px}
.container_16 .grid_3{width:160px}
.container_16 .grid_5{width:280px}
.container_16 .grid_6{width:340px}
.container_16 .grid_7{width:400px}
.container_16 .grid_9{width:520px}
.container_16 .grid_10{width:580px}
.container_16 .grid_11{width:640px}
.container_16 .grid_13{width:760px}
.container_16 .grid_14{width:820px}
.container_16 .grid_15{width:880px}
.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}
.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}
.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}
.container_12 .prefix_1{padding-left:80px}
.container_12 .prefix_2{padding-left:160px}
.container_12 .prefix_4{padding-left:320px}
.container_12 .prefix_5{padding-left:400px}
.container_12 .prefix_7{padding-left:560px}
.container_12 .prefix_8{padding-left:640px}
.container_12 .prefix_10{padding-left:800px}
.container_12 .prefix_11{padding-left:880px}
.container_16 .prefix_1{padding-left:60px}
.container_16 .prefix_2{padding-left:120px}
.container_16 .prefix_3{padding-left:180px}
.container_16 .prefix_5{padding-left:300px}
.container_16 .prefix_6{padding-left:360px}
.container_16 .prefix_7{padding-left:420px}
.container_16 .prefix_9{padding-left:540px}
.container_16 .prefix_10{padding-left:600px}
.container_16 .prefix_11{padding-left:660px}
.container_16 .prefix_13{padding-left:780px}
.container_16 .prefix_14{padding-left:840px}
.container_16 .prefix_15{padding-left:900px}
.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}
.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}
.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}
.container_12 .suffix_1{padding-right:80px}
.container_12 .suffix_2{padding-right:160px}
.container_12 .suffix_4{padding-right:320px}
.container_12 .suffix_5{padding-right:400px}
.container_12 .suffix_7{padding-right:560px}
.container_12 .suffix_8{padding-right:640px}
.container_12 .suffix_10{padding-right:800px}
.container_12 .suffix_11{padding-right:880px}
.container_16 .suffix_1{padding-right:60px}
.container_16 .suffix_2{padding-right:120px}
.container_16 .suffix_3{padding-right:180px}
.container_16 .suffix_5{padding-right:300px}
.container_16 .suffix_6{padding-right:360px}
.container_16 .suffix_7{padding-right:420px}
.container_16 .suffix_9{padding-right:540px}
.container_16 .suffix_10{padding-right:600px}
.container_16 .suffix_11{padding-right:660px}
.container_16 .suffix_13{padding-right:780px}
.container_16 .suffix_14{padding-right:840px}
.container_16 .suffix_15{padding-right:900px}
.container_12 .push_3,.container_16 .push_4{left:240px}
.container_12 .push_6,.container_16 .push_8{left:480px}
.container_12 .push_9,.container_16 .push_12{left:720px}
.container_12 .push_1{left:80px}
.container_12 .push_2{left:160px}
.container_12 .push_4{left:320px}
.container_12 .push_5{left:400px}
.container_12 .push_7{left:560px}
.container_12 .push_8{left:640px}
.container_12 .push_10{left:800px}
.container_12 .push_11{left:880px}
.container_16 .push_1{left:60px}
.container_16 .push_2{left:120px}
.container_16 .push_3{left:180px}
.container_16 .push_5{left:300px}
.container_16 .push_6{left:360px}
.container_16 .push_7{left:420px}
.container_16 .push_9{left:540px}
.container_16 .push_10{left:600px}
.container_16 .push_11{left:660px}
.container_16 .push_13{left:780px}
.container_16 .push_14{left:840px}
.container_16 .push_15{left:900px}
.container_12 .pull_3,.container_16 .pull_4{left:-240px}
.container_12 .pull_6,.container_16 .pull_8{left:-480px}
.container_12 .pull_9,.container_16 .pull_12{left:-720px}
.container_12 .pull_1{left:-80px}
.container_12 .pull_2{left:-160px}
.container_12 .pull_4{left:-320px}
.container_12 .pull_5{left:-400px}
.container_12 .pull_7{left:-560px}
.container_12 .pull_8{left:-640px}
.container_12 .pull_10{left:-800px}
.container_12 .pull_11{left:-880px}
.container_16 .pull_1{left:-60px}
.container_16 .pull_2{left:-120px}
.container_16 .pull_3{left:-180px}
.container_16 .pull_5{left:-300px}
.container_16 .pull_6{left:-360px}
.container_16 .pull_7{left:-420px}
.container_16 .pull_9{left:-540px}
.container_16 .pull_10{left:-600px}
.container_16 .pull_11{left:-660px}
.container_16 .pull_13{left:-780px}
.container_16 .pull_14{left:-840px}
.container_16 .pull_15{left:-900px}
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix{height:1%}
Όπως παρατηρούμε υπάρχουν προκαθορισμένες ιδιότητες που μπορούμε να δώσουμε στις θέσεις της ιστοσελίδας μας, και που θα μας βοηθήσουν στη σωστή στοίχιση με το σύστημα των 960 pixels ,αλλά ταυτόχρονα θα μας παρέχουν και μεγάλη ευελιξία στις τροποποιήσεις που μπορεί να θέλουμε να κάνουμε στην σελίδα μας.
Ας δούμε τώρα το πώς χρησιμοποιούμε τα styles του συστήματος.
............
Στο container ορίζουμε το πλήθος στηλών που θέλουμε να έχουμε. Συνήθως ονομάζουμε τις κλάσεις μας grid_XX,όπου ΧΧ είναι το πλάτος της στήλης. Όταν μια κλάση έχει και υποκλάση, τότε η πρώτη υποκλάση πρέπει να περιέχει το class name:alpha ενώ η τελευταία το class name:omega.
Σημαντικά Στοιχεία Για Το 960 Grid System
Το νέο αυτό πρότυπο, έχει ήδη καθιερωθεί σε πολλές από τις εταιρίες σχεδιασμού ιστοσελίδων, ενώ είναι το standard πλαίσιο σχεδιασμού του Drupal.
Θέλω Περισσότερα
Περισσότερες πληροφορίες αλλά και τα αρχεία του συστήματος των 960 pixels μπορείτε να βρείτε στο http://960.gs/
Επίλογος
Το 960 Grid System είναι πολύ χρήσιμο και σίγουρα θα βοηθήσει οποιονδήποτε σχεδιάζει, ή αναπτύσει ιστοσελίδες. Για αυτόν τον λόγο, σε μελλοντικό βοήθημα θα δημιουργήσουμε μια ιστοσελίδα απο το μηδέν, βασισμένοι στο σύστημα των 960 pixels.
Trackbacks - Pingbacks