Διαβάστε περισσότερα για το 960 Grid System και το πως μπορείτε να το εκμεταλλευτείτε

Κατεβάστε το 960GS

Στις σελίδες του WDDC.gr θα μπορείτε να βρείτε νέα και εξελίξεις από τον χώρο της ανάπτυξης και σχεδιασμού ιστοσελίδων, ενώ στο forum θα μπορείτε να μοιραστείτε τις ιδέες σας, τις απόψεις σας, αλλά και να δώσετε απαντήσεις σε διάφορα προβλήματα ή να βρείτε λύσεις σε προβλήματα που μπορεί να αντιμετωπίζετε εσείς.

Αν θέλετε να συμμετάσχετε ενεργά σε αυτήν την προσπάθεια, το Web Development & Design Club ψάχνει άτομα για να στελεχώσουν την ομάδα του. Για περισσότερες πληροφορίες για τις διαθέσιμες θέσεις στην ομάδα μας μπορείτε να επικοινωνήσετε με το WDDC στο info@wddc.gr.

Τέλος μπορείτε να γραφτείτε και εσείς στις ενημερώσεις μέσω email, ώστε να μαθαίνετε πρώτοι τις εξελίξεις του WDDC, ενώ μην ξεχάσετε να τους ακολουθήσετε στο twitter

Το 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.