Designer's Toolbox: Blank Template CSS
Mars 16, 2008 par · chriscoyier 11 Commentaires 
Buzz This Post 
Digg This Post 
Reddit 
Stumble This Post
Si vous concevez un bon nombre de sites Web à partir de rien, vous vous surprendrez à faire beaucoup de travaux même configuration à plusieurs reprises et plus. Créer le répertoire avec le dossier images. Créer un fichier d'index, d'écrire une déclaration de type de contenu, d'écrire la structure des pages de base. Créer un fichier CSS, écrivez Reset CSS, écrivez structure de base de CSS. Juste que le programme d'installation peut vous prendre un morceau digne du temps et se fanent votre enthousiasme pour entrer dans la viande de votre conception.
Dans ce prochain volet de la Boîte à outils Designer, nous vous offrons un moyen d'éviter tout ce temps perdu avec un modèle CSS Blank. 
Il suffit de garder ce dossier sur votre système et chaque fois que vous démarrez un nouveau projet, vous pouvez simplement dupliquer ce dossier et commencer à utiliser le codage réel / conception.
Donc, vous savez ce que vous avez peut-être se mettre au regardons le code 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> Comme vous pouvez le voir, c'est très très simple. Vient la déclaration page (XHTML 1.0), déclaration de type de contenu (UTF-8), page titre, le lien feuille de style, et la structure simple (le corps avec une page-div WRAP). J'ai aussi inclus un petit rappel pour inclure votre outil d'analyse de code au bas, si vous souhaitez effectuer le suivi des données des visiteurs sur votre site.
Maintenant voici la 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 */ Également assez simple, le plus souvent une simple élargi Reset CSS. Le sélecteur étoile (*) ne le lourd-levée de la réinitialisation, mais il ya une couple de petits extras to mention. Réglage de la police de taille dans le corps à 62,5% vous permet d'utiliser des tailles em comme vous le feriez pixel (px) dimensions. 1.0 em = 10px, 1.1em = 11px, et ainsi de suite. Le débordement des forces y une barre de défilement verticale sur de nombreux navigateurs pour éliminer les sauts dans centrage horizontal.
Il ya une certaine simple «boîte à outils CSS" pour des choses comme flottant, de compensation, et de remplir les zones avec une couleur transparente. La page-wrap CSS est inclus pour centrer le contenu de votre page.
Cela ressemble vraiment comme il sauve beaucoup de travail. Peut-il être utilisé sur les sites Wordpress? J'ai quelques projets à venir et il semble que ça viendra en temps réel très pratique.
Pour une "barebones" template pour wordpress, vérifier les stocks Elliot Jay "Starkers" thème.
L'idée d'avoir un modèle par défaut est bon. La façon dont il fait ici l'est pas.
Par exemple: le sélecteur * ralentit le calcul de rendu. Il supprime également voulu marges et rembourrages de champs de saisie de formulaire dans certains systèmes d'exploitation / navigateurs, qui ne peut pas être appliqué de nouveau.
Le trop-plein-y est aussi absurde, puisque votre page mai ne pas être toujours à défilement, rendant obsolète la barre de défilement (et source de confusion pour certains).
Je n'ai pas encore vu aucun élément concret sur le sélecteur de star ralentit sensiblement le rendu. Je ne doute pas qu'elle joue un rôle légèrement, étant donné que le sélecteur de star va littéralement l'appliquer soi-même à chaque élément sur la page. Mais j'ai de sérieux doutes que le léger ralentissement est encore plus notable sur les pages, même très complexes.
Par ailleurs, ce n'est pas la marge et l'espacement étant éliminé avec le sélecteur de star qui se vissent les champs de saisie par défaut, c'est la frontière, et notez comment la frontière n'est pas réinitialisé ici. Styles d'entrée par défaut est toujours intacte (par exemple, les boutons glowy dans Safari ou sur les touches polyédrique biseauté en FF ou IE). Vous avez raison mais que si vous frontière de la bande de cette façon, ces styles par défaut peut ne pas être de nouveau appliquée.
Overflow-y est également pas de bêtises. Elle applique une barre de défilement verticale vide dans les navigateurs qui n'ont pas déjà que (IE par défaut, le fait déjà cela). Cette mai prendre jusqu'à immobiliers d'écran lorsqu'il n'est pas nécessaire de temps en temps, mais il élimine le saut "encombrant" centrage horizontal où la navigation entre une page qui défile, et une page qui ne fonctionne pas.
merci pour le CSS sophistiqué blanc et le modèle HTML. Ce guide vous aide-moi!
Grande-RES pour les editpadders site comme moi!
Pouvez-vous expliquer l'utilité de l'. TranspBlack (background: url (transpBlack.png);) pensée?
Je ne vois pas pourquoi vous devriez utiliser 1.3em (~ 13px) pour la p-sélecteurs de taille de police. S'il ya quelque chose qui rend laid sur les anciens navigateurs (surtout sans ClearType ou des fonctions similaires), c'est une police de taille à 13.
Il est préférable de travailler avec des nombres pairs, comme 8, 10, 12, 14 et 16. Une meilleure lisibilité> Fancy conception. (Avis personnel, et peut être soutenu jusqu'à la fin des temps)
@ Frédéric: J'utilise comprennent que, comme une partie de ma «boîte à outils" CSS. Il s'agit essentiellement d'un pixel-alpha-PNG transparent, de sorte que je peux appliquer un remplissage noir transparent à une boîte sans avoir à utiliser l'attribut Opacité. L'opacité est grande, parfois, en l'appliquant à un élément de force tous les éléments enfants d'avoir une opacité aussi. Si ces éléments enfants sont texte, qui peut être une mauvaise chose. De cette façon vous pouvez appliquer un fond transparent et de conserver le texte complètement opaque.
@ koew: J'ai été pas au courant que même des dimensions de pixels rendus mieux .... Je vais devoir étudier le problème.
koew commentaires sur la laideur des polices à la taille du pixel impair est un valides en se basant sur ma propre expérience avec les anciens navigateurs sur les plateformes plus âgés.
Peut-être que je suis coincé dans un laps de temps de, mais je ressens toujours la nécessité d'utiliser des tailles de même pixel surtout à petite extrémité de l'échelle.
Sinon que je pense que c'est un modèle très utile et je trouve votre CSS-Tricks site pour être une excellente lecture. Merci Chris.
À la vôtre
Merci de votre excellente idée pour éviter de nombreuses erreurs et de perdre du temps avec une norme XHTML et CSS-template ...
Je dois réfléchir à cette idée pour mon webprojects, trop
Ralph
Chris - Je suis avec toi sur la question sélecteur universel. Je ne suis pas convaincu que c'est tout ce mal, et j'ai toujours l'utiliser intensivement sans aucun problème.