Boîte à outils CSS
Mai 7, 2008 par · chriscoyier 13 Commentaires 
Qu'est-ce que Toolbox CSS?
Boîte à outils style CSS est l'information qui n'a rien d'unique à voir avec un site Web particulier. Il s'agit d'une collection de styles courants qui peuvent être utiles à tout projet Web. Combien de fois avez-vous écrit une classe pour le nettoyage du flotteur? Trop, c'est mon guess. L'idée avec CSS Toolbox est d'inclure une feuille de style distincte pour ces "utilité" des styles.
Ce qui n'est PAS Toolbox CSS?
Boîte à outils n'est pas un reset CSS CSS. Boîte à outils CSS n'est pas un framework CSS. Boîte à outils CSS ne contient aucune des Styling "âme" qui rend tout projet web unique.
Pourquoi utiliser la Boîte à outils CSS?
Avec les outils CSS vous permettra d'économiser du temps. Il vous évite d'écrire les mêmes styles encore et encore et encore. Besoin de flotter quelque chose à gauche? Vous pouvez toujours compter sur votre boîte à outils. Il vous aide également à maintenir la cohérence entre vos sites. Si vous utilisez toujours la même boîte à outils, votre balisage se partageront les mêmes noms de classes ordinaires et le rend plus facile pour vous de sauter en arrière et à comprendre.
Le Code
Le code de la CSS Toolbox est ci-dessous. Ou, utilisez le lien direct.
/* Toolbox CSS Chris Coyier http://css-tricks.com */ /* LAYOUT TOOLS */ .floatLeft { float: left; } .floatRight { float: right; } .clear { clear: both; } .layoutCenter { margin: 0 auto; } .textCenter { text-align: center; } .textRight { text-align: right; } .textLeft { text-align: left; } /* PRINT TOOLS */ .page-break { page-break-before: always; } /* TYPOGRAPHIC TOOLS */ .error { border: 1px solid #fb4343; padding: 3px; color: #fb4343; } .warning { border: 1px solid #d4ac0a; padding: 3px; color: #d4ac0a; } .success { border: 1px solid #149b0d; padding: 3px; color: #149b0d; } .callOut { font-size: 125%; font-weight: bold; } .strikeOut { text-decoration: line-through; } .underline { text-decoration: underline; } .resetTypeStyle { font-weight: normal; font-style: normal; font-size: 100%; text-decoration: none; background-color: none; word-spacing: normal; letter-spacing: 0px; text-transform: none; text-indent: 0px; } /* STYLING EXTRAS */ a[href^="mailto"] { background: url(images/emailIcon.png) left center no-repeat; padding-left: 10px; } a[href~=".pdf"] { background: url(images/pdfIcon.png) left center no-repeat; padding-left: 10px; } a.button { color: black; border: 1px solid black; padding: 3px; } a.button:hover { background: black; color: white; } .transpBlack { background: url(images/transpBlack.png); } /* DISPLAY VALUES */ .hide { display: none; } .show { display: block; } .invisible { visibility: hidden; } A Little Explication
Le saut de page: en insérant la "page-break" classe, une nouvelle page va être démarré lorsque l'impression du site à une imprimante. Utile avant les grandes images ou des sections principales.
Extras Styling: Ces font référence à un couple de fichiers d'images que je n'ai pas inclus ici. Il ya beaucoup d'endroits pour vous de trouver de jolies icônes, essayez Icon Finder.
Les valeurs d'affichage: Il ya une différence entre display: none et visibility: hidden. Définition de la valeur d'affichage à aucune d'elles ne supprimer la zone de dessin graphique de la page, causant des re-flow. Parfois souhaitable, parfois non. Si vous souhaitez tout simplement pour cacher un élément, mais laisser l'espace qu'il occupait intacte, utiliser l'attribut de visibilité.
On m'a enseigné que, pour un ". Clair" de classe, vous devez avoir
height: 1px;
line-height: 1px;
font-size: 1px;
margin-top:-1px;
clear: both;
Est-ce trop? J'avais cru comprendre cela était pour la fixation de certains problèmes d'IE.
Thoughts?
Une page de démonstration pour ces serait bien, il est évident que certains seuils ne, les classes de la typographie ne sont pas aussi évidentes.
Merci, mieux qu'un cadre, et simple!
Looks great! J'aime beaucoup la section Extras Styling. Très utile, le front-fessée victoire pour moi, c'est la classe ... resetTypeStyle brillant. Questions juridiques - Si nous modifions cette lourdement ne nous ajoutons notre nom comme un mod dans le pseudo-zone droit d'auteur? Si on le supprime purement et simplement allez-vous nous traquer et ...?
@ Pat j'ai déjà vu ce genre de choses auparavant, mais je pense que c'est inutile. Je ne suis pas sûr quel problème cela résout effectivement et il semble que cela pourrait en fait causer plus de problèmes potentiels qu'il n'en résout. Je suis ouvert à une audience plus à ce sujet though!
@ Kevin: Vous pouvez faire ce que tu veux avec lui, aller de l'avant et retirez le nom, ça ne me dérange pas!
Pretty bonne idée ...
Nice article et CSS outil!
Je n'ai pas trouvé une petite erreur cependant: la ligne: a href [~ = ". Pdf] ... il manque un" après le pdf word et donc le CSS s'arrête bien là, avec l'exécution. Il convient de lire correctement: a href [~ = ". pdf"] ....
Continuez votre bon travail, l'amour de vos articles.
@ Pat - tuent plus ...
KISS est toujours la meilleure méthode.
@ Chris - C'est beaucoup mieux que la réinitialisation stupides ou certains cadres qui ne fait qu'ajouter pléthorique junk aux sites Web.
@ Merci Marlyse, que, de fait était une erreur de syntaxe dans le code affiché dans l'article, que j'ai fixé.
Quels sont les navigateurs appuyer cette feuille de style?
Ceci est un grand pas en arrière si vous croyez que la conception et la structure doivent être séparés. C'est vraiment seulement une version shortcutted d'utilisation de styles inline ... pas tout à fait idéal.
@ Tobias Je suis d'accord, la classe doit décrire le contenu qu'ils majoration, de sorte qu'une feuille de style peut appliquer le style pour une situation particulière, le design, ou la page.
@ Jermayn style reset-feuilles sont agréables si votre inquiets garder des objets comme les tailles de police, les hauteurs de ligne, les marges etc. uniforme dans plusieurs navigateurs. Il ya certains qui mai être gonflé, mais en général elles servent un imo plus universel fonction.
L'aspect le plus puissant de ce que je crois être la possibilité de sauter en arrière et vient entre des sites différents, et se sentent confortables.
N'importe qui pourrait créer une boîte à outils pour eux-mêmes fondés sur ce qu'ils sont à l'aise, mais pour être honnête: qui le ferait? Surtout lorsque quelqu'un d'autre l'a fait pour vous.
Bon travail.
Les noms des classes ne sont pas contenir des références sémantiques et visuelles - qui est un grand "nono". Si le client, par exemple, décide de modifier l'alignement du texte de certains conteneurs vous avez deux mauvais choix: 1. rechercher et remplacer tous les "class =" textRight " 'avec autre chose, ce qui contrecarre l'idée même de la CSS et pourrait provoquer des résultats indésirables (comme changer quelque chose que vous ne devez pas), ou 2. changer le style seulement, l'intérieur de la déclaration de classe, ce qui est correct l'utilisation des CSS, mais vous laisse avec une classe nommée "textRight", qui aligne le texte sur la gauche. Qui rendra un désordre total hors de la couche présentation.
De plus, des sélecteurs d'attribut ne sont pas entièrement pris en charge et ne doit pas être utilisé.
Sinon, c'est une bonne idée, mais un peu difficile à mettre en œuvre, telle qu'elle est.