Jump to content
NiKR

Τι είναι ένα CSS Framework; Αναλυτικο Tutorial

Recommended Posts

NiKR

Τι είναι ένα framework;

Καταρχάς πρέπει να δούμε τι είναι ένα framework..Framework θα μπορούσαμε να πούμε ότι είναι ένας «σκελετός» για κάτι.Για παράδειγμα μπορούμε να αναφέρουμε το εξής:Έστω ότι κάποιος θέλει να δημιουργήσει με κώδικα C# (κώδικας που χρησιμοποιείται από την ASP.NET) μία εφαρμογή (application) για το ίντερνετ.Αυτό μπορεί να το κάνει γράφοντας κώδικα από την αρχή μέχρι το τέλος της εφαρμογής.Αυτό όμως έχει κάποια μειονεκτήματα.Είναι χρονοβόρο και επίσης όταν κάποιος δημιουργεί μία εφαρμογή φροντίζει ώστε ο κώδικας να είναι έτσι γραμμένος ώστε να μπορεί ένας άλλος προγραμματιστής να τον πάρει να τον αλλάξει να τον επεκτείνει χωρίς σημαντικές αλλαγές στο πρόγραμμα.Άρα λοιπόν ,ειδικά σε μεγαλύτερες εφαρμογές,οι προγραμματιστές χρησιμοποιούν κάποιο framework ,κάποιο σκελετό δηλαδή πάνω στον οποίο θα χτίσουν την εφαρμογή.Έτσι και πιο γρήγορα δημιουργούν την εφαρμογή και πιο ουσιαστικά και πιο ευέλικτα..(Θα μπορούσαμε να πούμε πολλά για τα applications και ποιες αρχές πρέπει να υπηρετούν αλλά αυτό θα γίνει σε άλλο άρθρο.)

Τι είναι ένα CSS framework;

Ένα CSS framework είναι ένας σκελετός που χρησιμοποιούμε και μας παρέχει συγκεκριμένους κανόνες για να γράφουμε CSS κώδικα.Κοινώς μπορούμε να χρησιμοποιήσουμε ένα τέτοιο framework σε μία ιστοσελίδα και να γράψουμε CSS ώστε να της δώσουμε στυλ και να της ρυθμίσουμε την εμφάνιση..Η μεγάλη διαφορά του απλού CSS κώδικα και του κώδικα που γράφουμε με τη χρήση ενός framework είναι ότι εάν χρησιμοποιήσουμε κάποιο framework υπάρχουν εντολές CSS οι οποίες εάν τις γράφαμε σε ένα απλό αρχείο CSS δεν θα έκαναν καμία διαφορά..Τα CSS frameworks λοιπόν είναι σχεδιασμένα έτσι ώστε με λιγότερο κώδικα να μπορούμε να έχουμε το ίδιο και καλύτερο αποτέλεσμα από ότι θα είχαμε με απλό CSS κώδικα..Επίσης ένα CSS framework έχει ένα τεράστιο πλεονέκτημα. Έχει αυτό που λέμε «cross browser compatibility».Δηλαδή αυτό που φτιάχνουμε εμφανίζεται ίδιο και στο IE και στον mozilla και στον Chrome κλπ.Αυτό είναι πολύ σημαντικό διότι οι browsers μεταξύ τους έχουν κάποιες διαφορές στον τρόπο που διαβάζουν και εμφανίζουν τα CSS.Και πρέπει πάντα να βλέπουμε αν υπάρχουν bugs και να τα διορθώνουμε ενώ συνήθως με ένα css framework δεν χρειάζεται να γίνεται αυτό..!

Τι χρειάζεται να ξέρω για να χρησιμοποιήσω ένα τέτοιο framework.Πώς το χρησιμοποιώ..;

Αυτή η ερώτηση θα μπορούσε να απαντηθεί μονολεκτικά.Η απάντηση είναι «CSS»..!Πρέπει να γνωρίζει κάποιος σχετικά καλά CSS ώστε να δημιουργήσει κάτι πολύπλοκο..Αλλά και μέτρια να γνωρίζει μπορεί να δημιουργήσει μία δομή ενός site μέσα σε λίγη ώρα!Η χρήση ενός css framework είναι συνήθως πολύ απλή.Δηλαδή κατεβάζουμε από το αντίστοιχο site το framework,το ενσωματώνουμε στο head της σελίδας μας και εν συνεχεία γράφουμε κώδικα-εντολές ανάλογα με το framework που χρησιμοποιούμε.Είναι λογικό όλα τα παραπάνω να σας φαίνονται δύσκολα και περίεργα.Στο επόμενο άρθρο θα χρησιμοποιήσουμε ένα framework και θα κατασκευάσουμε βήμα – βήμα μία απλή δομή ενός site..Ας δούμε 2 πολύ καλά CSS frameworks τώρα.

CSS frameworks

Υπάρχουν αρκετά CSS Frameworks στο ίντερνετ.Εμείς θα αναφερθούμε μόνο στα 2-3 καλύτερα.Το «καλύτερο» είναι βέβαια σχετικό..!

  • 960 Grid System CSS framework.Αυτό το CSS framework είναι από τα πιο γνωστά.Αυτό το framework ορίζει ένα «πλέγμα»-grid πάνω στο οποίο χτίζουμε την ιστοσελίδα μας.Αυτό το grid αποτελείται είτε από 12 είτε από 16 στήλες με αντίστοιχο πλάτος 60 και 40 px η κάθε μία στήλη..Οπότε κάθε html στοιχείο που δημιουργούμε πάνω στο grid έχει πλάτος υποπολλαπλάσιο του 960.
  • Blueprint CSS framework.Αυτό το framework είναι που θα χρησιμοποιήσουμε εμείς tutorial για να φτιάξουμε τη δομή της ιστοσελίδας μας.Αυτό το framework μας παρέχει πάρα πολλές ευκολίες και μπορούμε πολύ γρήγορα να δημιουργήσουμε μία δομή.Παρέχει και plugins για δημιουργία κουμπιών και ελέγχει και την εμφάνιση της γραμματοσειράς,της φόρμας επικοινωνίας κλπ/

 

Λίγα λόγια για το blueprint CSS framework.

Το συγκεκριμένο framework θα το βρείτε στη διεύθυνση http://blueprintcss.org.Ας δούμε λίγο την σελίδα αυτή.
Διαβάζουμε λοιπόν ότι αυτό το css framework μπορεί να μας παρέχει ένα πλέγμα-grid που ουσιαστικά εξυπηρετεί τη δημιουργία ακόμα και περίπλοκων design.Επίσης μας παρέχεται έτοιμο το λεγόμενο “CSS RESET” που ουσιαστικά κάνει reset στα διάφορα margins και paddings που έχουν τα html στοιχεία από μόνα τους.Αυτό είναι πάρα πολύ σημαντικό.Ο πιο απλός κανόνας που θα μπορούσαμε να γράψουμε ώστε να κάνουμε reset στα παραπάνω είναι o εξής:

*{
margin:0;
padding:0;
}

 

To reset CSS αρχείο που περιέχει το blueprint css framework είναι πολύ πιο εξειδικευμένο και πιάνει τα πάντα.

Διαβάζουμε επίσης ότι μας παρέχει κανόνες για typography,κοινώς για τις γραμματοσειρές και επίσης μας παρέχει έτοιμα css φορμών επικοινωνίας καθώς και ειδικά css σε περίπτωση που θέλει κάποιος να εκτυπώσει τη σελίδα μας….Κοινώς το συγκεκριμένο CSS framework μας παρέχει τα πάντα…Ας ξεκινήσουμε το πρακτικό μέρος και ας κατεβάσουμε το blueprint css

Κατεβάζοντας και εφαρμόζοντας το blueprint css framework.

To πρώτο πράγμα που θα κάνουμε είναι να κατεβάσουμε το CSS FRAMEWORK.Κατεβάστε το zip αρχείο που υπάρχει στη σελίδα που σας είπαμε παραπάνω.

Κατεβάστε το blueprintcss framework

Πατήστε πάνω στο “zip”.Αποθηκεύστε το αρχείο στο desktop σας και στην συνέχεια αποσυμπιέστε το στο desktop επίσης..Αυτό που θα πρέπει να βλέπετε στο desktop είναι ένας φάκελος όπως στην παρακάτω εικόνα.

blueprintcss στο desktop μας

blueprintcss στο desktop μας

Πριν κάνουμε οτιδήποτε με τον φάκελο αυτό ας επιστρέψουμε λίγο στη ιστοσελίδα του blueprint css.Στη δεξιά πλευρά βλέπουμε τα εξής links.

  • Ας τα δούμε λοιπόν ένα-ένα

     

  • Live Demos—>Στη συγκεκριμένη σελίδα υπάρχουν κάποια demos σχετικά με το blueprint css ,με την εφαρμογή του,με το grid κλπ.Επίσης μας δίνει links για να δούμε πώς θα είναι οι φόρμες μας με την εφαρμογή του blueprint css framework.
  • Blueprint WIKI—>Εδώ υπάρχει το ζουμί.Υπάρχει ένα απλό tutorial καθώς και άρθρα σχετικά με το framework αυτό.Επίσης υπάρχουν εργαλεία ,plugins ,η άδεια χρήσης κλπ.Αυτή την ενότητα θα την δούμε σε λίγο.
  • Bug Tracker—>Εδώ μπορείτε να δηλώσετε αν βρήκατε κάποιο λάθος στο framework αυτό και να δείτε και απαντήσεις σε άλλα bugs που τυχόν υπάρχουν!
  • Discussion Group—>Εδώ είναι το support.Η υποστήριξη.Μπορείτε να ρωτήσετε κάτι και οι άλλοι χρήστες μπορούν να απαντήσουν στην ερώτησή σας.

Αυτά είναι λίγο πολύ όλα όσα πρέπει να γνωρίζετε…Ας συνεχίσουμε..

Σχετικά με το grid που υπάρχει στο blueprint css.

Το βασικό ζήτημα είναι να κατανοήσουμε τι είναι “grid”.Αυτό μπορεί να γίνει ως εξής.Πατήστε στο link Live Demos και θα δείτε ότι μπροστά σας εμφανίζονται κάποια Links.Πατήστε στο link “Grid”..Θα δείτε ότι ανοίγει μία test σελίδα στην οποία υπάρχει ένα φόντο με μπλε γραμμές κάθετες και ανάμεσα σε αυτές λεπτές γραμμές λευκές. Αυτό είναι και το grid.

Απλή επεξήγηση στο grid

Διαβάζοντας λίγο το αρχείο “grid.css” που υπάρχει στα δεξιά του link “grid” που προαναφέραμε,βλέπουμε πάνω πάνω την εξής δήλωση:Το grid συνολικά έχει συνολικό μήκος 950px.Αποτελείται από 24 στήλες πλάτους 30px έκαστη οι οποίες έχουν μεταξύ τους 10px απόσταση.Εάν κάνουμε την αριθμητική πράξη βλέπουμε ότι :24*30=720px + 23*10=230px.Αν τα προσθέσουμε όντως έχουμε 950px.(Προφανώς οι λευκές στήλες είναι όσες και οι μπλε μείον μία αφού βρίσκονται ανάμεσα γι αυτό και πολλαπλασιάζουμε επί 23 τις λευκές.. ).Άρα λοιπόν κάθε τι που δημιουργούμε πάνω στο grid θα είναι θα είναι συγκεκριμένου μεγέθους και θα έχει σχέση με το grid αυτό καθεαυτό. Ότι δημιουργούμε στο grid θα είναι υποπολλαπλάσιο του 960px. Και με την βοήθεια του grid όλα μπαίνουν σε σωστή σειρά στην ιστοσελίδα μας.

ΑΡΑ ΤΟ GRID ΕΙΝΑΙ ΕΝΑΣ “ΜΠΟΥΣΟΥΛΑΣ” ΠΟΥ ΧΡΗΣΙΜΟΠΟΙΟΥΜΕ ΓΙΑ ΝΑ ΚΑΤΑΣΚΕΥΑΣΟΥΜΕ ΣΩΣΤΑ ΤΑ HTML ΣΤΟΙΧΕΙΑ ΜΑΣ ΚΑΙ ΝΑ ΤΑ ΤΟΠΟΘΕΤΗΣΟΥΜΕ ΣΩΣΤΑ…

Εφαρμογή του blueprint CSS στην ιστοσελίδα μας…

Αφού είδαμε λίγο το “grid” τώρα πλέον μπορούμε να κάνουμε μία εφαρμογή ,να δημιουργήσουμε μία ιστοσελίδα από το μηδέν η οποία θα περιέχει αυτό το framework.Για να το κάνουμε αυτό πρέπει να πάμε στην αρχική σελίδα,να πατήσουμε το link το οποίο έχει τίτλο Blueprint WIKI και αφού ανοίξει η σελίδα να πατήσουμε πάνω στο link “Tutorials” και εν συνέχεια στη νέα σελίδα που θα ανοίξει στο link “Quick Start Tutorial”..Εδώ είμαστε…Από κάτω από το “quick start tutorial” υπάρχουν και άλλα tutorials που αξίζει να διαβαστούν.Το πρώτο πράγμα που βλέπουμε είναι για την εγκατάσταση.Επειδή αυτό μπορεί να σας μπερδέψει ακολουθήστε ένα-ένα τα βήματα που σας προτείνω.

Blueprint file

  • Βήμα πρώτο:Δημιουργήστε ένα φάκελο στο desktop τον οποίο ονομάστε “theBlueprintSite”.
  • Βήμα δεύτερο:Ανοίξτε τον αγαπημένο σας html editor και δημιουργήστε ένα καινούργιο html αρχείο.Ονομάστε το “mysite.html”.Τοποθετήστε το αρχείο αυτό μέσα στο φάκελο “theBlueprintSite”.
  • Βήμα τρίτο:Στον παραπάνω φάκελο δημιουργήστε μέσα του ένα νέο φάκελο και ονομάστε τον “css”.Εκεί μέσα θα τοποθετήσετε αργότερα και το css της σελίδας σας αλλά και το blueprint css framework-κάποια αρχεία, θα το δούμε παρακάτω.
  • Βήμα τέταρτο:Ανοίξτε με διπλό κλικ τον φάκελο του blueprint css που αποσυμπιέσατε στην αρχή του tutorial αυτού.Κάντε ένα-δύο διπλά κλικ μέχρι να βρεθείτε στην παρακάτω εικόνα.
  • Τον βλέπετε τον φάκελο με το όνομα “blueprint”;Αντιγράψτε τον έτσι όπως είναι και τοποθετήστε τον μέσα στο φάκελο “css” που δημιουργήσαμε στο βήμα τρία!!!
  • Βήμα πέμπτο:Με τη βοήθεια του αγαπημένου σας html editor δημιουργήστε ένα αρχείο css-ονομάστε τον “styles.css” και τοποθετήστε το μέσα στο φάκελο «css» που αναφέραμε ποιο πάνω.Άρα ο φάκελος «css» που βρίσκεται μέσα στο φάκελο «theBlueprintSite» περιέχει τα εξής:
    css folder περιεχομενα

Εφαρμογή του CSS framework στη σελίδα μας.

Αφού κάναμε όλα τα παραπάνω,τώρα είμαστε έτοιμοι να εφαρμόσουμε το CSS framework στη σελίδα μας.Στη σελίδα με την εγκατάσταση βλέπουμε ποια αρχεία πρέπει να καλέσουμε στη σελίδα μας και μάλιστα στο head.Εμείς μετά τη δημιουργία και των παραπάνω φακέλων,θα κάνουμε δύο βήματα.

  • Βήμα πρώτο:Ανοίγουμε το αρχείο “mysite.html” στον editor της επιλογής μας.
  • Βήμα δεύτερο:Στο head της σελίδας μας γράφουμε τον παρακάτω κώδικα.
<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"/>
    <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"/>
    <link rel="stylesheet" href="css/styles.css" type="text/css"/>

Απλές επεξηγήσεις:
Γραμμή 1:Είναι το css αρχείο που εφαρμόζεται στην ιστοσελίδα μας.
Γραμμή 2:Είναι το css αρχείο που χρησιμοποιείται όταν κάνουμε εκτύπωση τη σελίδα μας.
Γραμμή 3:Είναι το css αρχείο που διορθώνει τα bugs του internet explorer.
Γραμμή 4:Είναι το δικό μας css αρχείο.Εδώ θα χρησιμοποιήσουμε τις ειδικές εντολές οι οποίες ορίζονται μέσα στο αρχείο που καλούμε στη γραμμή 1.
Βασικά το framework το καλούμε στη γραμμή 1+2+3.Από κει και πέρα στη γραμμή 4 θα γράψουμε CSS κώδικα ο οποίος θα στηριχτεί σε ειδικές εντολές που ορίζονται μέσα στο framework και λίγες από αυτές βρίσκονται και στη σελίδα με το tutorial που είδαμε παραπάνω.

Ας δούμε τα πιο βασικά του blueprint CSS framework..

Στο web development υπάρχει μία div την οποία τη χρησιμοποιούμε για να τοποθετήσουμε μέσα σε αυτή την ιστοσελίδα.Την ονομάζαμε “wrapper” συνήθως. Εδώ,επειδή στα css αρχεία που φορτώσαμε στο head υπάρχει το grid,ορίζεται δηλαδή, γράφουμε το εξής ανάμεσα στα body tags της σελίδας:

<div class="container">
	Εδώ μέσα πλέον κατασκευάζω τη σελίδα μου.Η class="container" ουσιαστικά ορίζει το grid μας!!!Εάν δεν την γράψουμε τότε έχουμε πρόβλημα,διότι όλα παίζουν πάνω σε αυτό το Grid!!!!
</div>

Κάποιες βασικές εντολές CSS…

Για τη χρήση του framework αυτού έχουν οριστεί κάποιες συγκεκριμένες κλάσεις.Δηλαδή ας δούμε λίγο μέσα στην ιστοσελίδα

<div class="span-24 last">
//Εδώ δημιουργούμε μία div η οποία έχει πλάτος 24 μπλε στήλες!!!Εάν δείτε το grid και μετρήσετε 24 μπλε στήλες θα διαπιστώσετε ότι μιλάμε για όλο το GRID άρα 950px!!Οπότε αυτή η η div έχει πλάτος 950px.Η κλάση last δηλώνει ότι μετά αυτή την div δεν ακολουθεί άλλη ΣΤΗΝ ΙΔΙΑ ΓΡΑΜΜΗ!!!!!
</div>

Η βασική φόρμουλα για να μην μπερδεύεστε με το πλάτος κάθε html στοιχείου είναι η εξής:

(Αριθμός span*40)-10.Δηλαδή παραπάνω έχουμε 24*40=960px από το οποίο αν αφαιρεθεί το 10px κάνει 950px που είναι το σύνολο του grid!Τόσο απλά..! Kάτι σημαντικό!!Σε κάθε γραμμή της σελίδας πρέπει να φροντίσουμε ώστε τα html στοιχεία που υπάρχουν ,εάν προσθέσουμε τα πλάτη τους να μας δίνουν 950px.Επίσης στο τελευταίο στοιχείο κάθε γραμμής πρέπει και οφείλουμε να τοποθετούμε και την κλάση “last” σε περίπτωση που το άθροισμα των πλατών δεν είναι 950px. Θα είναι το καλύτερο.

Κατασκευάζοντας τη σελίδα μας

Ανοίξτε τη σελίδα “mysite.html” στον αγαπημένο σας html editor καθώς και το αρχείο “styles.css”..
Ας κάνουμε το πρώτο βήμα!Ορίζουμε τη div με την κλάση “container”..Για να δούμε το βασικότερο κομμάτι κώδικα

<!--Αρχή grid-->
<div class="container">
<!--Εδώ μέσα θα κατασκευάσω τη σελίδα μου!-->
</div>
<!--Τέλος grid--

To CSS για την κλάση “container” δεν θα το γράψουμε γιατί ορίζεται από το framework και τα αρχεία που καλέσαμε!
Το επόμενο βήμα είναι να δημιουργήσουμε μία div με κλάση “clear” -αυτό κάνουμε για να “καθαρίσουμε” τα διάφορα floats που μπορεί να έχουν τα html στοιχεία που θα δημιουργήσουμε.Αυτό συνήθως το τοποθετούμε ακριβώς πριν το κλείσιμο του “container”..Στον παραπάνω κώδικα προσθέτουμε την κλάση ως εξής:

<!--Αρχή grid-->
<div class="container">
 
<!--Εδώ μέσα θα κατασκευάσω τη σελίδα μου!-->
<!--Eδώ είναι η div με την κλαση "clear"-->
<div class="clear"></div>
</div>
<!--Τέλος grid-->

 

 
 To css για την div με την κλάση “clear” είναι το εξής:

.clear{
    clear:both;
}

 

Προσοχή!!!Την κλάση αυτή τη τοποθετώ για λόγους προληπτικούς διότι τις περισσότερες φορές έχω floats html στοιχείων .Μετά από τα παραπάνω είμαστε έτοιμοι να δημιουργήσουμε header,navigation,content και footer!!

 

Δημιουργία header.

Θα δημιουργήσουμε ένα απλό header.Θα έχει πλάτος όσο το grid μας δηλαδή 950px.Και θα του δώσουμε ένα id ώστε να του πειράξουμε την εμφάνιση και όχι μόνο στο «styles.css».Μέσα στο div με class «container» γράφουμε:

<!-- HEADER-->
 
<div class="span24" id="header">
 <h1>Αυτό είναι το header μας!!</h1>
</div>
 
<!-- ΤΕΛΟΣ HEADER-->

το «styles.css» προσθέτουμε τον παρακάτω κώδικα:

#header{
    background-color:navy;/*Το χρώμα της div-το ναυτικό μπλε.*/
    height:100px;/*ύψος της div*/
    border-bottom:5px solid #00006A;/*5px border στο κάτω μέρος της div*/
    text-align:center;/*Ότι κείμενο γράφεται έχει τοποθετήσει στο κέντρο της header div!*/
   
}
#header h1{
     color:#ffffff;/*Χρώμα γραμματοσειράς επικεφαλίδας.*/
     line-height:100px; /* Με αυτό η επικεφαλίδα μας πάει στο μέσο ύψος της header div.*/
     font-family:'Trebuchet MS';
     font-size:48px;
}

Ας δούμε ένα στιγμιότυπο:

To header της ιστοσελίδας μας

To header της ιστοσελίδας μας

 

Δημιουργία navigation menu.

Αφού τελειώσαμε το header ας φτιάξουμε ακριβώς από κάτω ένα navigation menu.Ένα navigation menu όπως γνωρίζετε είναι μία λίστα από links.Στον κώδικα της σελίδας μας, γράφουμε :

<!--Navigation-->
<ul class="span24 last" id="menu">
	<li><a href="#">Αρχική</a></li>
	<li><a href="#">Σχετικά..</a></li>
	<li><a href="#">To portfolio</a></li>
	<li><a href="#">Επικοινωνήστε</a></li>
	<li><a href="#">Αναζήτηση στο site μας..</a></li>
</ul>
<!--Τέλος navigation-->

To αντίστοιχο CSS θα είναι :

/*ΤΟ ΜΕΝΟΥ ΜΑΣ*/
#menu {
overflow:hidden;
padding: 5px 0 5px 0;
background:blue;
}

#menu li  {
float:left;
display: block;
line-height: 40px;
margin:0 5px 0 5px;
color:#fff;
}

#menu li a{
padding: 17px;	
color:#fff;
text-decoration: none;
}

/*Τα Links μας όταν κάνουμε hover*/
#menu li a:hover {
color: #ffffff; background: #9a9a9a;
}

 

Ας δούμε ένα στιγμιότυπο:
Το css μενού μας.

Δημιουργία mainContent div και 2 sidebar.

Ένα βασικό μέλημα μας είναι ότι πρέπει όλα τα html στοιχεία σε μία γραμμή να είναι σε μήκος 24 στήλες του grid…Άρα μπορώ να κάνω το εξής:Η δεξιά και η αριστερή sidebar να είναι 4 στήλες η κάθε μία και το κεντρικό περιεχόμενο να είναι 16 κοινώς 4+16+4=24 στήλες που είναι το grid για το οποίο μιλούσαμε.Ας ξεκινήσω με την αριστερή sidebar.

Η αριστερή sidebar.

O html κώδικας που θα χρησιμοποιήσουμε είναι ο εξής:

<!--αριστερή sidebar -->
<div class="span-4" id="leftSidebar">
Αριστερή sidebar..
</div>

Αυτός θα είναι ο κώδικας.Όπως βλέπουμε στη div αυτή δίνουμε την κλάση “span-4″ που δηλώνει 4 στήλες του grid δηλαδή 150px(βλέπε παραπάνω για επεξήγηση).Επίσης σε αυτή τη div δίνουμε ένα id,ώστε να μπορέσουμε μέσω των CSS να ελέγξουμε την εμφάνιση της.Ας δούμε λίγο το CSS που θα χρησιμοποιήσουμε για την div αυτή.

/*CSS για την αριστερή sidebar*/
 
#leftSidebar{
margin-top:5px;/*περιθώριο από πάνω,από τη navigation bar */
background: #E5E5E5; /*Το χρώμα του φόντου της sidebar*/
height:300px;/*Το ύψος της sidebar*/
overflow:hidden;/*Με αυτή την εντολή αν τοποθετήσουμε μέσα στη sidebar περιεχόμενο που θα είναι μεγαλύτερο από το μέγεθος της τότε το κόβει στα 300px..*/
}

Κεντρικό περιεχόμενο και δεξιά sidebar..

Ο κώδικας για το κεντρικό περιεχόμενο και τη δεξιά sidebar θα είναι πολύ απλός και θα είναι ο εξής:

<!--Βασικό περιεχόμενο-->
<div class="span-16" id="mainContent">
Βασικό περιεχόμενο!!!!
</div>  
 
<!--Δεξιά Sidebar -->
<div class="span-4 last" id="rightSidebar">
Δεξιά sidebar..
</div>
</p>

Στη συνέχεια θα γράψουμε το CSS για τα δύο αυτά html στοιχεία τα οποία έχουν ids «mainContent» το κυρίως περιεχόμενο και «rightSidebar» η δεξιά sidebar.Ας δούμε τον CSS κώδικα..

/*CSS για mainContent*/
#mainContent{
margin-top:5px;
margin-bottom:5px;/*Αυτό το περιθώριο θα είναι από οποιοδήποτε html στοιχείο υπάρχει από κάτω από το mainContent--κοινώς τα τρία κουτιά που θα φτιάξουμε μετά..*/
background: #C3C3C3;
height:300px;
overflow:hidden;
}

/*CSS για την αριστερή sidebar*/

#rightSidebar{
margin-top:5px;
background: #E5E5E5;
height:300px;
overflow:hidden;
}

 

Ας δούμε ένα στιγμιότυπο του site μας.
Το site μας σχεδόν έτοιμο.

Μερικά γρήγορα συμπεράσματα

Μετά τις παραπάνω απλές αλλά σημαντικές εξηγήσεις μπορούμε να συνεχίσουμε με τη δημιουργία των τριών κουτιών και του footer.

  • Το πρώτο πράγμα που θέλουμε να τονίσουμε είναι ότι όπως βλέπετε και ιδίοις όμμασι στη δεξιά sidebar η οποία είναι η τελευταία στη γραμμή έχουμε τοποθετήσει και την κλάση “last”.Αυτό είναι πολύ σημαντικό να το κάνουμε…!
    Βλέπουμε ότι μεταξύ των divs υπάρχει ένα κενό.Αυτό το κενό δημιουργείται λόγω του grid.Εάν δείτε το grid στην ιστοσελίδα του blueprint CSS framework θα διαπιστώσετε ότι μεταξύ των στηλών υπάρχουν 10px κενά..Άρα όταν τελειώνει το ένα html στοιχείο μετά ακολουθεί κενό 10px.
  • Παρατηρείστε το εξής και σκεφτείτε:Θα μπορούσαμε αντί για χρώμα φόντου να βάλουμε border γύρω από κάθε div.Εδώ όμως υπάρχει το εξής θέμα..To border προσθέτει pixels στο στοιχείο το οποίο το προσθέτουμε.Αν το κάνουμε υπάρχει πιθανότητα να σπάσουμε το grid και η δεξιά sidebar να πέσει από κάτω.Στην περίπτωσή μας που η γραμμή με τα τρία html στοιχεία είναι 24 στήλες ,δηλαδή 950px εάν βάλουμε 1px border για να περικυκλώσουμε την αριστερή div τότε η δεξιά sidebar θα πέσει από κάτω ..Αυτό διότι το συνολικό πλάτος των divs μαζί με τα κενά θα είναι 952px(αφού στην αριστερή sidebar το border θα προσθέσει 1px από δεξιά και 1px από αριστερά..) ενώ το grid έχει πλάτος 950px.Η λύση σε αυτές τις περιπτώσεις είναι κάπως πιο περίπλοκη και έχει να κάνει αποκλειστικά με την διαφοροποίηση του κώδικα css ώστε να μπορέσουμε να το φέρουμε εκεί που θέλουμε..

 

Δημιουργία των τριών κουτιών και footer με το blueprint CSS framework…

Με τον ίδιο τρόπο όπως και παραπάνω θα κάνουμε τα τρία κουτιά και εν συνεχεία το footer…Ας δούμε τον κώδικα για τα τρία κουτιά ο οποίος μοιάζει εκπληκτικά με τα προηγούμενα.

<!--Τρια κουτιά..-->
<div class="span-8" id="leftUnder">
Αριστερό κάτω κουτί..

</div>
<div class="span-8" id="middleUnder">
Μεσαίο κάτω κουτί..

</div>
<div class="span-8 last" id="rightUnder">
Δεξί κάτω κουτί..

</div>

 

Ας δούμε και το αντίστοιχο CSS.

/*CSS για leftUnder κουτί*/
#leftUnder{
background: #FED0CF;
height:100px;
overflow:hidden;

}

/*CSS για middleUnder κουτί*/
#middleUnder{
background: #FFE0C1;
height:100px;
overflow:hidden;

}

/*CSS για rightUnder κουτί*/
#rightUnder{
background: #FF7979;
height:100px;
overflow:hidden;

}

 

Είμαστε σχεδόν έτοιμοι. Ας προσθέσουμε και ένα footer

Δημιουργία footer.

<!--Footer-->
<div class="span-24" id="footer">
To footer μας!!!
</div>

Ας δούμε και το CSS μας:

/*CSS για footer*/
#footer{
    height:20px;
    background: #AEFFAE;
    margin-top:5px;
    overflow:hidden;
}

Ας δούμε ένα τελικό στιγμιότυπο:
Το site μας με το blueprint CSS

Share this post


Link to post
Share on other sites

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε προκειμένου να το δείτε

Πρέπει να είστε μέλος για να μπορέσετε να αφήσετε κάποιο σχόλιο

Δημιουργία λογαριασμού

Κάντε μια δωρεάν εγγραφή στην κοινότητά μας. Η εγγραφές μας είναι εύκολες.!

Εγγραφή τώρα

Σύνδεση

Εάν έχετε ήδη λογαριασμό σε αυτό το Forum; Συνδεθείτε εδώ.

Συνδεθείτε τώρα

  • Μηνύματα

    • Anastasis
      Στο παρελθόν, οι ερευνητές ασφαλείας αντιμετώπισαν περιπτώσεις όπου περιβόητοι χάκερς ήταν σε θέση να χρησιμοποιήσουν τα δεδομένα EXIF των εικόνων για να κρύψουν κακόβουλο κώδικα. Αυτή η τεχνική εξακολουθεί να χρησιμοποιείται ευρέως για να μολύνει τους χρήστες web με malware. Προχωρώντας ένα βήμα παραπέρα, διαπιστώθηκε ότι οι χάκερς έχουν βρει έναν τρόπο να μοιράζονται κακόβουλα προγράμματα μέσω αξιόπιστων servers της Google, όπως αυτά του googleusercontent. Σε αντίθεση με το κακόβουλο λογισμικό που είναι αποθηκευμένο σε αρχεία κειμένου, είναι πολύ πιο δύσκολο να εντοπιστούν κακόβουλα payloads σε εικόνες. Επιπλέον, είναι ακόμη πιο δύσκολο να γίνει αναφορά του malware που βρίσκεται στο googleusercontent.com στη Google.   Για όσους δεν το γνωρίζουν, το googleusercontent είναι ο τομέας της Google για την προβολή περιεχομένου που παρέχεται από τον χρήστη, χωρίς να επηρεάζεται η ασφάλεια των σελίδων της Google. Σύμφωνα με μια αναφορά του Sucuri, ο ακόλουθος κώδικας εντοπίστηκε σε ένα script που εξάγει τον κωδικό ασφαλείας PayPal:   Το script διαβάζει τα δεδομένα EXIF από μια εικόνα του googleusercontent, η οποία κατά πάσα πιθανότητα μεταφορτώθηκε από κάποιον σε λογαριασμό Google+ ή Blogger. Όταν η ενότητα UserComment των δεδομένων EXIF αποκωδικοποιήθηκε, αποδείχθηκε ότι είναι ένα script που έχει τη δυνατότητα να ανεβάσει web shell και αυθαίρετα αρχεία. Αυτό υποδεικνύει μια μεγαλύτερη απειλή, καθώς δεν υπάρχει κανένας τρόπος να εντοπιστεί το malware μέχρι να ελεγχθούν τα μεταδεδομένα των εικόνων και να αποκωδικοποιηθούν. Ακόμη και μετά την επισήμανση του κακόβουλου λογισμικού, δεν μπορεί κανείς να γνωρίζει την πραγματική πηγή της εικόνας.   Read more...  
    • Anastasis
      Τα smartphones, παρόλο που μας προσφέρουν πολλά, είναι πολύ ευαίσθητα και η καθημερινή χρήση τους μπορεί εύκολα να οδηγήσει σε μια ραγισμένη οθόνη. Μια έρευνα που διεξήχθη από την Motorola κατέληξε στο συμπέρασμα ότι τουλάχιστον το 50% των χρηστών smartphone έχουν βρεθεί με ραγισμένη οθόνη στο κινητό τους, έστω μία φορά στη ζωή τους. Όμως τώρα ίσως υπάρχει μια λύση για αυτό! Το πρόσφατα ανακοινωθέν Corning Gorilla Glass 6, υπόσχεται να μειώσει δραματικά τον κίνδυνο ραγίσματος ή θρυμματισμού της οθόνης σας. Σε ένα σημαντικό event, η Corning διαβεβαίωσε ότι το νέο Gorilla Glass 6 θα μπορούσε να επιβιώσει από έως και 15 διαδοχικές πτώσεις από ύψος 1 m ή λιγότερο. Σύμφωνα με την εταιρεία, το Corning Gorilla Glass 6 είναι “δύο φορές καλύτερο από το Gorilla Glass 5” και αποκαλείται ως “το πιο σκληρό γυαλί κάλυψης που διατίθεται για συσκευές κινητών τηλεφώνων”. Σχεδόν όλες οι flagship συσκευές, συμπεριλαμβανομένων των iPhone και Samsung μεσαίας και υψηλής απόδοσης, χρησιμοποιούν το Corning Gorilla Glass. Αλλά κάθε φορά, αυτές οι εταιρείες αποτυγχάνουν να δώσουν μια ελπιδοφόρα οθόνη για τις υψηλές τιμές τους. Κι αν δεν ραγίσει, η πρώτη πτώση από την τσέπη σίγουρα αποδυναμώνει την οθόνη με ορατές γρατσουνιές πάνω της. Ωστόσο, η Corning πιστεύει ότι το νέο προϊόν δεν θα παρουσιάσει καμία ρωγμή ούτε μετά από επαναλαμβανόμενες πτώσεις.   Θα ήταν ενδιαφέρον να δούμε πώς το νέο Gorilla Glass θα λειτουργήσει στα bezel-less τηλέφωνα. Γιατί σε αυτή την περίπτωση, η σύγκρουση γίνεται πρώτα με το γυαλί σε μια οθόνη edge to edge, σε αντίθεση με το παρελθόν όπου το πλαίσιο ήταν το πρώτο που ερχόταν σε επαφή με το έδαφος. Όσον αφορά την αντοχή στις γρατσουνιές, η εταιρεία είπε ότι το γυαλί θα προσφέρει την ίδια αντοχή σε γρατζουνιές όπως το προηγούμενο Gorilla Glass 5, αλλά θα είχε καλύτερη απόδοση.   Read more...
    • Anastasis
      Οι ευρωπαϊκές ρυθμιστικές αρχές επέβαλαν πρόστιμο ύψους 5 δισεκατομμυρίων δολαρίων στην Google, για την καταπάτηση των αντιμονοπωλιακών νόμων, σχετικά με το λειτουργικό σύστημα Android. Η επιτροπή, με επικεφαλής την Margrethe Vestager, κατηγόρησε την εταιρεία ότι καταχράστηκε την κυριαρχία της στην αγορά λειτουργικών συστημάτων για smartphone, καθώς ωθεί τους κατασκευαστές να παραδώσουν προεγκατεστημένα προγράμματα αναζήτησης Google και Chrome σε νέες τηλεφωνικές συσκευές.   Δεν είναι η πρώτη φορά που η εταιρεία «χτυπήθηκε» με ένα τεράστιο πρόστιμο που ξεπέρασε το δισεκατομμύριο. Πίσω στο 2016, η εταιρεία έλαβε πρόστιμο ύψους 2,7 δισ. Δολαρίων για την διαχείριση των αποτελεσμάτων αναζήτησης, αφού έδινε την κορυφαία θέση στη δική της ιστοσελίδα αγορών. Οι ευρωπαϊκές ρυθμιστικές αρχές εξέτασαν λεπτομερώς την κίνηση της εταιρείας να καταβάλει σημαντικά ποσά σε κατασκευαστές smartphone και φορείς κινητής τηλεφωνίας, ώστε να εγκαθιστούν την αναζήτηση Google, ως την προεπιλεγμένη εφαρμογή αναζήτησης. Επίσης κατηγορούν την εταιρεία για τη θέσπιση αυστηρών κατευθυντήριων γραμμών προς τους ΚΑΕ, οι οποίες περιορίζουν την ανάπτυξη του Android που βασίζεται στο AOSP (Android Open Source Project). Οι ρυθμιστικές αρχές επιδιώκουν επίσης τον έλεγχο του τρόπου με τον οποίο η εταιρεία διεξάγει τις δραστηριότητές της. Σύμφωνα με το CNBC, η εταιρεία σημείωσε πτώση 0,3% στις μετοχές της αμέσως μετά την δημοσίευση των ειδήσεων.   Οι Ευρωπαίοι αξιωματούχοι ερευνούν το Android από το 2015, αφού η FairSearch υπέβαλε καταγγελία κατά της Google το 2013. Πολλοί τεχνολογικοί γίγαντες υποστήριξαν την καταγγελία, συμπεριλαμβανομένης της Microsoft, η οποία στη συνέχεια δήλωσε ότι η Google έχει το “μονοπώλιο” στην αγορά του Android. Οι νομοθέτες της ΕΕ ζήτησαν από την Google να εφαρμόσει νέες κατευθυντήριες γραμμές μέσα σε 90 ημέρες. Η μη συμμόρφωση με την απόφαση θα υποχρεώσει την εταιρεία να καταβάλει πρόστιμο ίσο με το 5% του μέσου όρου των ημερήσιων κερδών της Alphabet, της μητρικής εταιρείας της Google. Οι νέοι κανονισμοί είναι σίγουρο ότι θα αναγκάσουν την εταιρεία να ανανεώσει τη στρατηγική της για την παροχή εξατομικευμένων αποτελεσμάτων αναζήτησης, καθώς όλο το πρότυπό της βασίζεται στην αναζήτηση Google και σε ολόκληρο το οικοσύστημα της εφαρμογής. Read more...  
    • Anastasis
      Το υπουργείο δικαιοσύνης των ΗΠΑ, η Apple Και η Supercell, προειδοποιήθηκαν για μια πιθανή υπόθεση ξεπλύματος χρήματος. Μέσω του Apple, χρησιμοποιώντας ψεύτικους λογαριασμούς και gaming profiles, οι επιτήδειοι carders χρέωναν κλεμμένες χρεωστικές και πιστωτικές κάρτες για premium συνδρομές, και στην συνέχεια πουλούσαν τους λογαριασμούς στο Internet. Η δραστηριότητα βγήκε στο φως στα μέσα του Ιουνίου, όταν ερευνητές ασφαλείας της Kromtech Security βρήκαν κατά τύχη μια βάση δεδομένων MongoDB, χωρίς κωδικό, την οποία και ανέλυσαν.   “Αφού αρχίσαμε να αναλύουμε την βάση δεδομένων, δεν αργήσαμε να καταλάβουμε ότι αυτή δεν ήταν μια συνηθισμένη βάση δεδομένων κάποιας τυπικής επιχείρησης.” είπε ένας ερευνητής της Kromtech. “Με μια πρώτη ματιά, η βάση φαίνεται να ανήκει σε κλέφτες πιστωτικών καρτών (γνωστούς και ως carders), και η βάση είναι σχετικά καινούρια, δηλαδή μόλις μερικών μηνών.” Ο ίδιος ερευνητής της Kromtech αναφέρει ότι οι carders χρησιμοποιούσαν ένα ειδικό tool, με το οποίο δημιουργούσαν καινούριους IOS λογαριασμούς με ψεύτικα στοιχεία, και στη συνέχεια πρόσθεταν τις κάρτες στους καινούριους λογαριασμούς.   Στην συνέχεια οι carders χρησιμοποιούσαν ένα δεύτερο tool, με το οποίο κατέβαζαν αυτόματα συγκεκριμένες εφαρμογές, δημιουργούσαν καινούριους λογαριασμούς, και αγοράζαν premium συνδρομές, τις οποίες αργότερα πούλαγαν online για αληθινά λεφτά. Οι ειδικοί λένε ότι οι carders για να χρεώνουν τις κλεμμένες κάρτες, είχαν ως στόχο κυρίως λογαριασμούς από παιχνίδια όπως το Clash of Clans, Clash Royale και το Marvel Contest of Champions. Επίσης μέσα από την έρευνα αναφέρεται ότι η εκτεθειμένη βάση δεδομένων είχε στο σύνολο στοιχεία από 150.833 κάρτες,  και οι κάρτες προέρχονται από 19 διαφορετικές τράπεζες. Οι ερευνητές πιστεύουν ότι το περιεχόμενο της βάσης προήλθε από το dark web. Περισσότερα στοιχεία για την έρευνα μπορούν να βρεθούν στον σύνδεσμο.   Read more...  
    • Anastasis
      CloudScraper is a Tool to spider and scrape targets in search of cloud resources. Plug in a URL and it will spider and search the source of spidered pages for strings such as ‘s3.amazonaws.com’, ‘windows.net’ and ‘digitaloceanspaces’. AWS, Azure, Digital Ocean resources are currently supported. This tool was inspired by a recent talk by Bryce Kunz. The talk Blue Cloud of Death: Red Teaming Azure takes us through some of the lesser known common information disclosures outside of the ever common S3 Buckets. The benefit of using raw regex’s instead of parsing for href links is that many times, these are not included in href links, they can be buried in JS or other various locations. CloudScraper grabs the entire page and uses a regex to look for links. This also has its flaws such as grabbing too much or too little but at least we know we are covering our bases 🙂 Download Use usage: CloudScraper.py [-h] [-u URL] [-d DEPTH] [-l TARGETLIST] optional arguments: -h, --help show this help message and exit -u URL Target Scope -d DEPTH Max Depth of links Default: 25 -l TARGETLIST Location of text file of Line Delimited targets example: python3 CloudScraper.py -u https://rottentomatoes.com     Copyright (c) 2018 JP
      Source: https://github.com/jordanpotti/
×