Μάθετε εύκολα και γρήγορα το Blueprint CSS Framework !

Σε αυτό το άρθρο θα μάθετε πως να εγκαθιστάτε και να δουλεύετε με το blueprint CSS framework. Το blueprint είναι ένα δυνατό εργαλείο που βοηθάει στη μείωση του χρόνου ολοκλήρωσης ενός web site.

Εγκατάσταση

Το blueprint θα πρέπει να εγκατασταθεί στον κατάλογο με τα CSS της ιστοσελίδας σας. Αφού αντιγράψετε τα αρχεία του στον κατάλογο με τα CSS, βάλτε τις τρεις γραμμές κώδικα που ακολουθούν ανάμεσα από τις ετικέτες head της σελίδας σας. Βεβαιωθείτε πως η διεύθυνση στην ιδιότητα href της ετικέτας link είναι σωστή. Επίσης βεβαιωθείτε πως η ιδιότητα rel είναι και αυτή σωστή, ανάλογα με το αρχείο που συνδέετε στην html.

    <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
    <!--[if lt IE 8]>
        <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
    <![endif]-->

Το blueprint τώρα είναι έτοιμο για χρήση.

Τα αρχεία στο blueprint

Το framework έχει κάποια αρχεία για τα οποία θα πρέπει να πούμε μερικά πράγματα. Κάθε αρχείο στον φάκελο src περιέχει σχόλια για τον κώδικα.

Συμπιεσμένα αρχεία :

blueprint/screen.css
blueprint/print.css
blueprint/ie.css

Αρχεία πηγαίου κώδικα :

blueprint/src/reset.css : Αυτό το αρχείο επαναφέρει τις τιμές που οι περιηγητές τείνουν να ορίζουν για εσάς.
blueprint/src/grid.css : Αυτό το αρχείο ορίζει το πλέγμα. Περιέχει πάρα πολλές κλάσεις που μπορείτε να εφαρμόσετε στα divs για να δημιουργήσετε πλέγματα κάθε πιθανού συνδυασμού
blueprint/src/typography.css : Αυτό το αρχείο ορίζει την προεπιλεγμένη τυπογραφία. Έχει επίσης μερικές μεθόδους για μερικά πραγματικά φανταστικά πράγματα που μπορείτε να κάνετε με το κείμενο σας.
blueprint/src/forms.css : Περιέχει ένα πολύ απλοϊκό στυλ για φόρμες
blueprint/src/print.css : Σε αυτό το αρχείο ορίζονται μερικοί πολύ απλοί κανόνες για εκτύπωση, έτσι ώστε οι σελίδες σας να δείχνουν καλύτερα εκτυπωμένες. Κανονικά θα πρέπει να περιλαμβάνετε σε κάθε σελίδα.
blueprint/src/ie.css : Περιέχει κάθε Hack για τους IE6 και 7

Σενάρια :

lib/compress.rb : Ένα σενάριο γραμμένο σε Ruby που συμπιέζει και παραμετροποιεί τα CSS. Ορίζει τα δικά σας namespace, το πλήθος από τις στήλες, το πλάτος κάθε στήλης, τη διαδρομή εξαγωγής, μπορεί να παράγει αρχεία για πολλαπλά έργα και να ορίσει τις semantic κλάσεις. Διαβάστε τα σχόλια στο compress.rb ή εκτελέστε το $ruby compress.rb -h για περισσότερες πληροφορίες.
lib/validate.rb : Επικυρώνει τα αρχεία του Blueprint με το πρόγραμμα επικύρωσης W3C CSS Validator.

Άλλα αρχεία :

blueprint/plugins/ : Περιέχει επιπλέον λειτουργικότητα σε μορφή πρόσθετων για το blueprint. Διαβάστε τα αρχεία readme στον κατάλογο κάθε πρόσθετου για περισσότερες οδηγίες.
Tests/ : Περιέχει αρχεία html που έχουν δοκιμές για τις περισσότερες δυνατότητες του blueprint. Ανοίξτε το αρχείο tests/index.html για περισσότερες πληροφορίες

Χρησιμοποιήστε το blueprint

Ο καλύτερος τρόπος για να δείτε πως να χρησιμοποιήσετε το blueprint, είναι να διαβάσετε τα σχόλια στον κώδικα ή να δείτε τον πηγαίο κώδικα της δοκιμαστικής σελίδας που περιέχεται μέσα στο αρχείο που κάνετε download. Ωστόσο, ακολουθούν και μερικά από τα βασικά χαρακτηριστικά του.

Τα τυπογραφικά χαρακτηριστικά

Το typography.css δεν χρειάζεται καμία παραμετροποίηση, απλά ενσωματώστε το στη σελίδα σας και αυτό θα σας παρέχει τη βασική μορφοποίηση για τα κείμενα σας.

Επίσης του typography.css ορίζει και το βασικό ύψος γραμμής (line-height) στα 18px. Αυτό σημαίνει πως κάθε στοιχείο, από το ύψος κάθε γραμμής μέχρι και το ύψος των εικόνων θα πρέπει να έχει ύψος πολλαπλάσιο του 18. Αυτό μπορεί να μοιάζει κουραστικό, αλλά το αποτέλεσμα τείνει να είναι υπέροχο.

Δημιουργία πλέγματος

Εξ ορισμού, το πλέγμα που δημιουργεί το blueprint είναι 950px πλατύ, με 24 στήλες πλάτους 30px και περιθώριο 10px ανάμεσα από τις στήλες.

Αν θέλετε περισσότερες ή λιγότερες στήλες, χρησιμοποιήστε το αρχείο lib/compress.rb. Αυτό το αρχείο έχει πολλές επιλογές, οι οποίες περιγράφονται στα σχόλια αυτού του αρχείου.

Αν θέλετε να το κάνετε χειρωνακτικά, ακολουθήστε την παρακάτω φόρμουλα για να βρείτε το νέο πλάτος.

    Συνολικό πλάτος = (στήλες * 40) – 10

Το πρώτο πράγμα που πρέπει να κάνετε είναι να βάλετε το πλέγμα σας μέσα σε ένα δοχείο (container) :

    <div class=”container”>
	<p>
		Εδώ θα εισάγουμε το περιεχόμενο της ιστοσελίδας μας
	</p>
</div>

Στη συνέχεια μπορείτε να χρησιμοποιήσετε div με μια από τις κλάσεις .span-x για να ορίσετε πόσες στήλες θα πρέπει να καλύψει το στοιχείο. Ακολουθούν μερικά παραδείγματα :

    <div class=”container”>
	<div class=”span-24 last”>
		Επικεφαλίδα σελίδας
	</div>
	<div class=”span-4”>
		Αριστερή μπάρα
	</div>
	<div class=”cpan-16”>
		Κεντρικό περιεχόμενο ιστοσελίδας
	</div>
	<div class=”span-4 last”>
		Δεξιά μπάρα
	</div>
	<div class=”span-4 last”>
		Δεξιά μπάρα
	</div>
</div>

Παρατηρήστε την κλάση last που κάθε τελευταίο στοιχείο έχει μέσα στο container.

Μπορείτε επίσης να ενσωματώσετε στήλες με όποιο τρόπο θέλετε. Δείτε τον κώδικα που ακολουθεί για ένα ποιο σύνθετο παράδειγμα που χρησιμοποιεί το αρχείο grid.css. Αυτό είναι ένα παράδειγμα με ενσωματωμένες στήλες

    <div class=”container”>
	<div class=”span-24 last”>
		Επικεφαλίδα
	</div>
	<div class=”span-4”>
		Αριστερή μπάρα
	</div>
	<div class=”span-16”>
		<div class=”span-8”>
			Κουτί 1
		</div>
		<div class=”span-4”>
			Κουτί 2
		</div>
		<div class=”span-4 last”>
			Κουτί 3
		</div>
	</div>
	<div class=”span-4 last”>
		Δεξιά μπάρα
	</div>
	<div class=”span-4 last”>
		Δεξιά μπάρα
	</div>
</div>

Και αυτό το παράδειγμα δεν είναι δύσκολο. Απλά να θυμάστε :

Να χρησιμοποιείτε την κλάση last στην τελευταία στήλη
Να βεβαιώνεστε πως το σύνολο τον στηλών που έχετε βάλει συμπληρώνουν της 24 θέσεις που αφήνει το blueprint για εσάς (για παράδειγμα η κλάση last δεν συμπληρώνει τα κενά από τις στήλες που δεν έχετε βάλει)

Αν κάνετε τα παραπάνω δεν θα έχετε κανένα πρόβλημα.

Το αρχείο grid.css έχει περισσότερες δυνατότητες από όσες είδαμε εδώ. Μπορείτε να βάλετε πριν και μετά από ένα στοιχείο κενές στήλες, να σπρώξετε ή να τραβήξετε εικόνες ανάμεσα στις στήλες, να ορίσετε περιθώρια ανάμεσα από τις στήλες και να χρησιμοποιήσετε πολλαπλά container για να δημιουργήσετε σχεδόν κάθε πιθανό συνδυασμό. Διαβάστε τα σχόλια στο αρχείο grid.css και στη σελίδα με τα παραδείγματα για περισσότερες πληροφορίες.

Περισσότερα για τον CorfuGmr

Όλα τα άρθρα

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.

← Ξεκινήστε το ACL στο CakePHP

12 απλά, αλλά χρήσιμα online εργαλεία για developers ! →