Toolbox CSS
7 maggio 2008 da · chriscoyier 13 Commenti 
Che cosa è Toolbox i CSS?
Toolbox CSS è uno stile di informazioni che non ha nulla a che fare unicamente con un particolare sito. Si tratta di una raccolta di stili comuni che possono essere utili per qualsiasi progetto web. Quante volte avete scritto una classe per la compensazione un galleggiante? Troppi, è la mia ipotesi. L'idea Toolbox con i CSS è quello di includere un foglio di stile separato per queste utilità "" stili.
Cosa NON è Toolbox CSS?
Toolbox reset CSS CSS non è un. Toolbox CSS CSS non è un quadro. Toolbox CSS contiene nessuna delle styling "anima" che rende qualsiasi progetto web unico.
Perché usare i CSS Toolbox?
Utilizzo degli strumenti CSS vi farà risparmiare tempo. Si evita di scrivere gli stessi stili più e più volte e più. Necessità di galleggiare qualcosa a sinistra? Si può sempre contare sulla vostra casella degli strumenti. Inoltre, consente di mantenere la coerenza tra i tuoi siti. Se si utilizzano sempre la casella degli strumenti stessi, il vostro codice condivideranno gli stessi nomi di classe comune e rende più facile per voi per tornare indietro in 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: con l'inserimento della pagina "break" di classe, una nuova pagina sarà avviato quando si stampa il sito web per una stampante. Utile prima che le immagini di grandi dimensioni o sezioni principali.
Extra Styling: queste fanno riferimento a un paio di file di immagine che non ho incluso qui. Ci sono un sacco di posti per voi a trovare le icone di Nizza, prova sull'icona del Finder.
Valori di visualizzazione: C'è una differenza tra display: none e visibility: hidden. L'impostazione del valore di visualizzazione a nessuno rimuoverà la finestra di layout della pagina, facendo ri-flusso. A volte auspicabile, a volte no. Se desiderate semplicemente per nascondere un elemento, ma lasciare lo spazio che occupava intatta, utilizzare l'attributo di visibilità.
Mi è stato insegnato che per uno ". Chiara" della classe, si dovrebbe avere
height: 1px;
line-height: 1px;
font-size: 1px;
margin-top:-1px;
clear: both;
Questo è eccessivo? La mia comprensione è stato questo è stato per la fissazione dei problemi IE.
Pensieri?
Una pagina demo per questi sarebbe bello, è ovvio ciò che alcuni davanzale fare, le classi tipografia non sono così evidenti.
Grazie, meglio di un quadro, e semplice!
Looks great! Mi piace molto la sezione Extra Styling. Più utile, fronte-schioccando vittoria per me è la classe resetTypeStyle ... brillante. Le questioni legali - se vogliamo modificare questa pesantemente possiamo aggiungere il nostro nome come mod nella pseudo-area diritto d'autore? Se si elimina del tutto vi si caccia giù e noi ...?
@ Pat Ho visto una cosa del genere prima, ma penso che sia inutile. Io non sono abbastanza sicuro che questo problema si risolve in realtà e sembra che potrebbe realmente causare più problemi di quanti ne risolva potenziali. Sono disponibile ad ascoltare di più però!
@ Kevin: Si può fare quello che vuoi con esso, andare avanti e rimuovere il nome, non mi dispiace!
Buona idea ...
Nizza articolo e CSS tool's!
Ho trovato un piccolo errore però: la linea: a href [~ = ". Pdf] ... manca un" dopo la parola pdf e quindi il CSS si fermerà lì con l'esecuzione. Esso dovrebbe leggere correttamente: a href [~ = ". pdf"] ....
Mantenere il vostro buon lavoro, l'amore i tuoi articoli.
@ Pat - più di uccidere ...
KISS è sempre il metodo migliore.
@ Chris - Questo è molto meglio di un reset stupida o un quadro di riferimento che solo aggiunge gonfio spazzatura a siti web.
@ Grazie Marlyse, che in effetti è stato un errore di sintassi nel codice visualizzato in questo articolo, ho fissato.
Quali sono i browser supportano questo foglio di stile?
Questo è un grande passo indietro, se credi di design e la struttura dovrebbe essere separati. E 'davvero solo una versione shortcutted di utilizzo di stili inline ... non proprio ideale.
@ Tobias Sono d'accordo, la classe dovrebbe descrivere il contenuto segnano, in modo uno stile di fogli è possibile applicare lo stile per una situazione particolare, il design, o una pagina.
@ Stile Jermayn reset-fogli sono bello se la tua preoccupazione per mantenere le cose come le dimensioni dei caratteri, altezze linea, margini ecc. coerente tra più browser. Ci sono alcuni che possono essere gonfio, ma in genere servono uno IMO più universale funzione.
L'aspetto più potenti di questo credo è la capacità di saltare avanti e indietro tra diversi siti, e di stare tranquillo.
Chiunque può creare un "pacchetto" per se stessi sulla base di ciò che a tuo agio con, ma ad essere onesti: chi sarebbe? Specialmente quando qualcun altro ha fatto per voi.
Good work.
I nomi delle classi non sono semantico e contengono riferimenti visivi - che è un grande "Nono". Se il client, per esempio, decide di cambiare l'allineamento del testo di alcuni container si avranno due scelte sbagliate: 1. ricerca e sostituzione di tutte le 'class = "textRight"' con qualcosa d'altro, che sconfigge l'intera idea di CSS e potrebbero portare a risultati indesiderati (come cambiare qualcosa che non dovrebbe), o 2. modificare lo stile unico, all'interno della dichiarazione della classe, che è corretto uso dei CSS, ma vi lascio con una classe denominata "textRight" che allinea il testo a sinistra. Che farà un casino totale fuori dello strato di presentazione.
Inoltre, i selettori di attributo non sono pienamente supportati e non deve essere usato.
In caso contrario, è una bella idea, ma un po 'difficile da attuare, così come è.