Εργαλειοθήκης Σχεδιαστής του: Λευκά CSS Template
16 Μάρτη του 2008 από chriscoyier · 11 Σχόλια 
Εάν σχεδιάζετε μια δίκαιη αριθμός των ιστοσελίδων από το μηδέν, θα βρείτε τον εαυτό σας κάνει πολλά από τα ίδια εργασία εγκατάστασης ξανά και ξανά και ξανά. Δημιουργία καταλόγου με εικόνες φάκελο. Δημιουργήστε ευρετήριο αρχείο, γράψτε περιεχόμενο δήλωση τύπου, γράψτε βασική δομή της σελίδας. Δημιουργήστε CSS αρχείο, γράψτε CSS επαναφορά, γράψτε βασική δομή CSS. Απλά ότι η ρύθμιση μπορεί να σας πάρει ένα αξιοπρεπές κομμάτι του χρόνου και μαραίνονται ενθουσιασμό σας για να μπείτε στο κρέας του σχεδίου σας.
Σε αυτήν την επόμενη δόση του Εργαλειοθήκη σχεδιαστή του, σας προσφέρουμε έναν τρόπο να αποφύγει όλα αυτά έχασε χρόνο με Λευκά CSS Πρότυπο. 
Απλά διατηρούν αυτό το φάκελο στο σύστημά σας και κάθε φορά που ξεκινάτε ένα νέο έργο, μπορείτε να διπλούν ακριβώς αυτόν το φάκελο και να ξεκινήσετε με το πραγματικό κωδικοποίησης / σχεδιασμό.
Έτσι, ξέρετε τι θα μπορούσαν να μπουν στην, ας δούμε την HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>PAGE TITLE HERE</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="page-wrap"> </div> <!-- Put Google Analytics Code Here --> </body> </html> Όπως μπορείτε να διαπιστώσετε, είναι πολύ πολύ απλό. Απλά η δήλωση σελίδα (XHTML 1.0), περιεκτικότητα δήλωση τύπου (UTF-8), τίτλος σελίδα, σύνδεση stylesheet, και απλή δομή (σώμα με μια σελίδα-div wrap). Ι περιλαμβάνεται επίσης μια μικρή υπενθύμιση να συμπεριλάβει analytics κωδικό σας στο κάτω μέρος, σε περίπτωση που θα παρακολουθείτε τα δεδομένα των επισκεπτών στο δικτυακό σας τόπο.
Τώρα εδώ είναι το CSS:
/* AUTHOR: YOUR NAME HERE you@domain.com */ /* ------------------------------------------ */ /* RESETS, BASIC PAGE SETUP, BASIC TYPOGRAPHY */ /* ------------------------------------------ */ * { margin: 0; padding: 0; } html { overflow-y: scroll; } body { font: 62.5% Helvetica, sans-serif; } ul { list-style: none inside; } p { font: 1.3em/1.3em; margin-bottom: 1.3em; } a { outline: none; } a img { border: none; } /* END RESET */ /* ------------------------------------------ */ /* TOOLBOX CSS */ /* ------------------------------------------ */ .floatleft { float: left; } .floatright { float: right; } .clear { clear: both; } .transpBlack { background: url(transpBlack.png); } /* END TOOLBOX */ /* ------------------------------------------ */ /* PAGE STRUCTURE */ /* ------------------------------------------ */ #page-wrap { width: 775px; margin: 0 auto; } /* END STRUCTURE */ Επίσης πολύ απλό, ως επί το πλείστον απλά μια διευρυμένη CSS Reset. Το Star Selector (*) κάνει το βαρύ-άρση της επαναφοράς, αλλά υπάρχει ένα ζευγάρι των επιπλέον πινελιές να αναφέρω. Ρύθμιση της γραμματοσειράς, το μέγεθος του σώματος σε 62,5% σας επιτρέπει να χρησιμοποιήσετε τα μεγέθη em όπως και εσείς θα pixel (px) μεγέθη. 1,0 em = 10px, 1.1em = 11px, και ούτω καθεξής. Η υπερχείλιση δυνάμεις y μια κατακόρυφη γραμμή κύλισης σε πολλά προγράμματα περιήγησης για να εξαλείψει άλματα στο οριζόντιο κεντράρισμα.
Υπάρχουν κάποιες απλές "Εργαλεία CSS" για πράγματα όπως πλωτά, εκκαθάρισης, και πλήρωση περιοχές με διαφανές χρώμα. Η σελίδα-wrap CSS περιλαμβάνεται στο κέντρο περιεχόμενο της σελίδας σας.
Αυτό σίγουρα μοιάζει σαν να σώζει πολλή δουλειά. Μπορεί να χρησιμοποιηθεί σε Wordpress χώρους; Έχω μερικά έργα που έρχεται και να μοιάζει με αυτό θα έρθει σε πραγματικό εύχρηστο.
Για ένα "barebones" πρότυπο για wordpress, ελέγξτε τα Elliot Αποθέματα Jay "Starkers [http://elliotjaystocks.com/blog/archive/2008/free-starkers-wordpress-theme/]" θέμα.
Η ιδέα του να έχετε ένα προεπιλεγμένο πρότυπο είναι καλό. Ο τρόπος που το κάνει εδώ δεν είναι.
Για παράδειγμα: * την επιλογέα επιβραδύνει απόδοση κάτω. Επίσης αφαιρεί ήθελαν περιθώρια και paddings από τα πεδία των εισροών μορφή σε ορισμένες OS του / browsers, η οποία δεν μπορεί να ξαναχρησιμοποιηθεί.
Η υπερχείλιση-y είναι ανοησία, αφού η σελίδα σας δεν είναι πάντα scrollable, καθιστώντας το scrollbar παρωχημένη (και σύγχυση σε ορισμένους).
Έχω ακόμα να δω κανένα συγκεκριμένο στοιχείο σχετικά με την επιλογέα αστέρι αισθητά επιβράδυνση απόδοση. Δεν αμφιβάλλω ότι θα κάνει ελαφρώς, αφού ο επιλογέας αστέρι θα εφαρμόσει κατά γράμμα το αυτο για κάθε στοιχείο της σελίδας. Αλλά έχω σοβαρές αμφιβολίες ότι η μικρή επιβράδυνση είναι ακόμη αισθητή ακόμη και σε πολύ περίπλοκο σελίδες.
Επίσης, δεν είναι το περιθώριο και να γεμίσει τον αποκλεισμό με τον επιλογέα αστέρι που βίδα μέχρι τομείς εισαγωγής προεπιλογή, είναι τα σύνορα, και την ανακοίνωση πως τα σύνορα δεν έχει μηδενιστεί εδώ. Προεπιλεγμένο στυλ εισόδου θα παραμείνει ως έχει (π.χ. η glowy κουμπιά στο Safari ή το χονδρός λοξότμητη κουμπιά σε FF ή IE). Έχετε δίκιο, ωστόσο, ότι εάν στα σύνορα της Γάζας με τον τρόπο αυτό, οι μορφές προεπιλογή δεν μπορεί να ξαναχρησιμοποιηθεί.
Υπερχείλιση-y Επίσης, δεν είναι ανοησία. Αφορά ένα άδειο κατακόρυφη γραμμή κύλισης σε προγράμματα περιήγησης που δεν έχουν ήδη ότι (δηλαδή με την προεπιλογή ήδη κάνει αυτό). Αυτό μπορεί να διαρκέσει μέχρι οθόνη ακίνητη περιουσία, όταν δεν χρειάζεται κατά καιρούς, αλλά εξαλείφει την αδέξια "άλμα" στο οριζόντιο κεντράρισμα όταν πλοήγηση μεταξύ μια σελίδα που ειλητάρια και μια σελίδα που δεν το κάνει.
ευχαριστώ για την sofisticated κενό css και html πρότυπο. αυτόν τον οδηγό θα με βοηθήσει!
Μεγάλη ΑΠΕ για την ιστοσελίδα editpadders σαν εμένα!
Μπορείτε να μου εξηγήσετε τη χρησιμότητα του. TranspBlack (background: url (transpBlack.png)?) Σκέψης;
Δεν βλέπω γιατί θα πρέπει να χρησιμοποιήσετε 1.3em (~ 13px) για το p-επιλογείς μέγεθος. Αν υπάρχει κάτι που καθιστά άσχημη για μεγάλα προγράμματα περιήγησης (ιδίως δεν ClearType ή παρόμοια καθήκοντα), είναι μια γραμματοσειρά μεγέθους σε 13.
Είναι καλύτερο να συνεργαστεί ακόμη και με αριθμούς, όπως και 8, 10, 12, 14 και 16. Βελτίωση της αναγνωσιμότητας> φανταχτερό σχεδιασμό. (Προσωπική άποψη, και μπορεί να υποστηριχθεί μέχρι το τέλος του χρόνου)
@ Frederic: Χρησιμοποιώ περιλαμβάνει ότι, ως μέρος της «εργαλειοθήκη μου" CSS. Πρόκειται ουσιαστικά για ένα pixel άλφα-PNG διαφανής, ώστε να μπορώ να εφαρμόσει διαφανή μαύρο να συμπληρώσουν ένα κουτί δεν χρειάζεται να χρησιμοποιήσετε το χαρακτηριστικό Αδιαφάνεια. Αδιαφάνεια είναι μεγάλη μερικές φορές, την εφαρμογή της σε ένα στοιχείο δυνάμεις όλα τα στοιχεία των παιδιών να έχουν, επίσης, την αδιαφάνεια. Αν τα στοιχεία αυτά παιδί είναι κείμενο, που μπορεί να είναι ένα κακό πράγμα. Με αυτό τον τρόπο μπορείτε να εφαρμόσετε ένα διαφανές φόντο και τηρεί πλήρως αδιαφανής κείμενο.
@ koew: Δεν ήμουν πραγματικά γνωρίζει ότι ακόμη και pixel μεγέθη καθίστανται καλύτερα .... Είμαι θα πρέπει να το δω αυτό.
koew παρατηρήσεις σχετικά με την ασχήμια των γραμματοσειρών στο μονό μέγεθος pixel είναι έγκυρο με βάση τη δική μου εμπειρία με παλαιότερα προγράμματα περιήγησης με μεγάλα πλατφόρμες.
Ίσως είμαι κολλημένος σε Timewarp, αλλά νιώθω ακόμα την ανάγκη να χρησιμοποιήσει ακόμη και pixel μεγέθη κυρίως στο χαμηλότερο τμήμα της κλίμακας.
Άλλα από ότι πιστεύω πως αυτό είναι ένα πολύ χρήσιμο πρότυπο και να βρω σας CSS-Κόλπα site για να είναι μια εξαιρετική διαβάσει. Thanks Chris.
Εις υγεία
Σας ευχαριστώ για την μεγάλη ιδέα σας για να αποφευχθούν πολλά λάθη και να χάσουμε χρόνο με το πρότυπο XHTML και CSS-πρότυπο ...
Θα σκεφτεί αυτή την ιδέα για webprojects μου, πάρα
Ralph
Chris - Είμαι μαζί σας σχετικά με την καθολική θέμα επιλογής. Δεν είμαι πεπεισμένος ότι είναι όλα τόσο άσχημα, και το χρησιμοποιώ ακόμα σε μεγάλο βαθμό δεν κανένα πρόβλημα.