Toolbox CSS
7 maggio 2008 da chriscoyier · 13 commenti
Qual è la Toolbox CSS?
CSS Toolbox è styling informazioni che non ha nulla a che fare unicamente con qualsiasi sito particolare. Si tratta di una raccolta di stili comuni che possono essere utili in qualsiasi progetto web. Quante volte avete scritto una classe per l'eliminazione di un galleggiante? Troppi, è la mia ipotesi. L'idea con CSS Toolbox è quella di includere un foglio di stile separato per queste "utility" stili.
Che cosa non è Toolbox CSS?
Toolbox CSS CSS non è un reset. Toolbox CSS non è un framework CSS. CSS Toolbox contiene nessuna dell '"anima" styling che rende unico ogni progetto web.
Perché usare i CSS Toolbox?
Utilizzo di Toolbox CSS vi farà risparmiare tempo. Esso consente di risparmiare di scrivere gli stessi stili più e più e più volte. Hai bisogno di galleggiare qualcosa a sinistra? Si può sempre contare sulla vostra cassetta degli attrezzi. Inoltre, consente di mantenere la coerenza tra i tuoi siti. Se si usa sempre la stessa casella degli strumenti, il markup si condividono gli stessi nomi di classe comuni e rende più facile per voi saltare nuovamente dentro e capire.
Il Codice
Il codice per il CSS Toolbox è inferiore. In alternativa, utilizzare il link diretto .
/* 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; } Una piccola spiegazione
L'interruzione di pagina: Inserendo la classe di "page-break", una nuova pagina viene avviato quando si stampa il sito web a una stampante. Utile prima di immagini di grandi dimensioni o sezioni principali.
Extra Styling: questi fanno riferimento a un paio di file di immagine che non ho incluso qui. Ci sono molti posti per voi per trovare le icone belle, provare Finder Icon .
Mostra Valori: C'è una differenza tra display: none e visibility: hidden. Impostazione del valore visualizzato a nessuno verrà rimosso dalla finestra di layout di pagina, facendo re-flow. A volte auspicabile, a volte no. Se desiderate semplicemente per nascondere un elemento, ma lasciare lo spazio che occupava intatta, utilizzare l'attributo visibilità.
Mi è stato insegnato che per un ". Chiaro" di classe, si dovrebbe avere
height: 1px;
line-height: 1px;
font-size: 1px;
margin-top: 1px;
clear: both;
È questo overkill? La mia comprensione era questo era per fissare alcuni problemi di IE.
Pensieri?
Una pagina demo per questi sarebbe bello, è ovvio che alcuni fanno davanzale, le classi tipografiche non sono così evidenti.
Grazie, meglio di un quadro, e semplice!
Sembra grande! Mi piace molto la sezione Extra Styling. Molto utile, fronte-smacking vittoria per me è la classe resetTypeStyle ... brillante. Questioni giuridiche - se modificare questo fortemente che dobbiamo aggiungere il nostro nome come mod nella pseudo-copyright zona? Se lo eliminare del tutto vi ci caccia e ...?
@ Pat Ho visto una cosa del genere prima, ma penso che sia inutile. Io non sono molto sicuro di quello che effettivamente risolve questo problema e sembra che potrebbe realmente causare più problemi potenziali di quanti ne risolva. Sono aperto a sentire di più su di esso però!
@ Kevin: E 'possibile fare quello che vuoi con esso, andare avanti e rimuovere il nome, non mi dispiace!
Buona idea ...
Nizza articolo e CSS dell'utensile!
Ho trovato un piccolo errore: la linea: a [href = ~ "pdf.] ... Manca un" dopo la parola pdf e quindi il CSS si fermerà lì con excecution Si dovrebbe leggere correttamente:. A [href = ~ ". pdf"] ....
Continuate il vostro buon lavoro, amate i vostri articoli.
@ Pat - oltre uccidere ...
KISS è sempre il metodo migliore.
@ Chris - questo è molto meglio di un reset sciocco o un quadro di riferimento che aggiunge solo spazzatura gonfio ai siti web.
@ Grazie Marlyse, che in effetti è stato un errore di sintassi nel codice visualizzato in questo articolo, ho quello fissato.
Quali sono i browser supportano questo foglio di stile?
Questo è un grande passo indietro se credi di design e la struttura devono essere separati. E 'davvero solo una versione shortcutted di utilizzare gli stili inline ... non esattamente l'ideale.
@ Tobias Sono d'accordo, la classe dovrebbe descrivere il contenuto che marcare, quindi un foglio di stile può applicare lo stile di una particolare situazione, design, o della pagina.
@ Ripristino Jermayn i fogli di stile sono belle se il tuo preoccupato su come mantenere le cose come le dimensioni dei caratteri, delle altezze di linea, margini ecc. coerente tra più browser. Ci sono alcuni che possono essere gonfio, ma in genere servono un più universale funzione imo.
L'aspetto più potente di questa credo sia la capacità di saltare avanti e indietro tra siti diversi, e sentirsi a proprio agio.
Chiunque potrebbe creare una serie di strumenti per se stessi sulla base di ciò che sono a proprio agio, ma ad essere onesti: chi sarebbe? Soprattutto quando qualcun altro ha fatto per voi.
Buon lavoro.
I nomi delle classi non è semantica e contengono riferimenti visivi - che è un grande "nono". Se il cliente, ad esempio, decide di cambiare l'allineamento del testo di alcuni container si avranno due scelte sbagliate: 1. cercare e sostituire all 'class = "textRight"' la con qualcos'altro, che sconfigge l'intera idea di CSS e potrebbe causare risultati indesiderati (come cambiare qualcosa che non dovrebbe), o 2. modificare lo stile unico, all'interno della dichiarazione della classe, che è l'uso corretto di CSS, ma vi lascio con una classe denominata "textRight" che allinea il testo a sinistra. Che farà un casino totale dal livello di presentazione.
Inoltre, i selettori di attributo non sono pienamente supportati e non deve essere utilizzato.
In caso contrario, è una bella idea, ma un po 'difficile da attuare, come è.