Designer's Toolbox: Blank CSS Template
16 marzo 2008 da · chriscoyier 11 Commenti 
Se si progetta un discreto numero di siti web da zero, vi troverete un sacco di fare lo stesso lavoro di impostazione più e più e più volte. Creare la directory con le immagini della cartella. Creare file di indice, scrivere dichiarazione del tipo di contenuto, scrivere la struttura della pagina di base. Creare file CSS, CSS reset scrivere, scrivere struttura CSS di base. Solo che il programma di installazione si può prendere un pezzo decente di tempo e di appassire il tuo entusiasmo per entrare nella carne del vostro disegno.
In questa puntata successiva del Designer's Toolbox, vi offriamo un modo per evitare tutto questo tempo sprecato con un modello CSS Template. 
Just keep questa cartella sul vostro sistema e ogni volta che si avvia un nuovo progetto, si può semplicemente duplicare questa cartella e iniziare con la codifica reale / progettazione.
Così si sa cosa si potrebbe ottenere in, diamo un'occhiata al codice 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> Come potete vedere, è molto molto semplice. Solo la dichiarazione di pagina (XHTML 1.0), dichiarazione del tipo di contenuto (UTF-8), il titolo della pagina, link foglio di stile, e di struttura semplice (il corpo con una pagina-div wrap). Ho anche un piccolo promemoria per includere il codice di Google Analytics in fondo, se si saranno dati di monitoraggio dei visitatori del tuo sito.
Ora ecco il 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 */ Anche piuttosto semplici, per lo più solo un esteso CSS Reset. Il selettore di Stella (*) fa il pesante sollevamento del reset, ma c'è un paio di tocchi extra per parlare. Impostando il font-size nel corpo al 62,5% ti permette di usare le dimensioni em come si farebbe pixel (px) dimensioni. 1,0 em = 10px, 11px = 1.1em, e così via. L'overflow-y forze di una barra di scorrimento verticale su molti browser per eliminare i salti in orizzontale centratura.
Ci sono alcune semplici "Toolbox CSS" per cose come galleggianti, di compensazione, e riempire aree con colore trasparente. La pagina-wrap CSS è incluso al centro i contenuti della pagina.
Questo sembra decisamente piace risparmiare un sacco di lavoro. Può essere utilizzato su siti di Wordpress? Ho alcuni progetti a venire e sembra che sarebbe arrivato in tempo reale a portata di mano.
Per un barebone "" template per wordpress, check-out Elliot Jay Stocks "Starkers [http://elliotjaystocks.com/blog/archive/2008/free-starkers-wordpress-theme/]" a tema.
L'idea di avere un modello predefinito è buona. Il modo in cui viene fatto qui non lo è.
Ad esempio: il selettore * rallenta il rendering in giù. Rimuove anche voluto margini e padding da campi di input forma in alcuni sistemi operativi / browser, che non può essere riapplicato.
L'overflow-y è anche un'assurdità, perché la tua pagina non può essere sempre scorrevole, rendendo obsoleti barra di scorrimento (e la confusione di alcuni).
Devo ancora vedere alcuna prova certa sul selettore star notevolmente rallentare il rendering. Non metto in dubbio che esso sia un po ', dato che il selettore star si applica letteralmente se stesso ad ogni singolo elemento della pagina. Ma ho seri dubbi che il leggero rallentamento è ancora più evidente sulle pagine anche molto complesse.
Inoltre, non è il margine e padding essere rimosso con il selettore stella che rovinare i campi di input di default, è il confine, e notare come il confine non viene reimpostato qui. Stili di input predefinita rimarranno intatti (per esempio i pulsanti glowy in Safari o pulsanti blocky smussati in FF o IE). Lei ha ragione, tuttavia, che se si striscia di confine in questo modo, gli stili di default non può essere riapplicato.
Overflow-y è, inoltre, non sciocchezze. Si applica una barra di scorrimento verticale vuoto nei browser che non dispongono già di che (IE di default è già presente). Questo può richiedere fino a schermo immobiliari quando non necessaria di tanto in tanto, ma si elimina il goffo "salto" in orizzontale centratura, quando la navigazione tra una pagina che scorre e una pagina che non è così.
grazie per il CSS sofisticati in bianco e template HTML. questa guida mi aiuterà!
Grande RES per la editpadders sito come me!
Può spiegare l'utilità del. TranspBlack (background: url (transpBlack.png);) pensiero?
Non vedo perché si dovrebbe usare 1.3em (~ 13px) per il p-selettori dimensione del carattere. Se c'è qualcosa che rende brutto il browser più vecchi (in particolare senza ClearType o funzioni simili), è un font di dimensioni a 13.
E 'meglio lavorare con numeri pari, come 8, 10, 12, 14 e 16. Migliore leggibilità> fantasia progettazione. (Opinione personale, e può essere sostenuto fino alla fine dei tempi)
@ Federico: io uso comprendono il fatto che, come una parte della mia "toolbox" CSS. Si tratta essenzialmente di un alfa-pixel-PNG trasparenti in modo da poter applicare un riempimento trasparente nero a una finestra, senza dover utilizzare l'attributo Opacity. Opacità è grande a volte, applicandolo a un elemento forze di tutti gli elementi figlio per avere anche l'opacità. Se tali elementi figlio sono il testo, che può essere una cosa cattiva. In questo modo è possibile applicare uno sfondo trasparente e di mantenere il testo completamente opaco.
@ koew: io in realtà non era consapevole del fatto che anche le dimensioni dei pixel rendering migliore .... I'm gonna have a questo aspetto.
koew commenti sulla bruttezza dei caratteri a dispari dimensione del pixel è un valido in base alla mia esperienza personale con i browser più vecchi sulle piattaforme più anziani.
Forse io sono bloccato in un Timewarp, ma mi sento ancora la necessità di utilizzare anche le dimensioni dei pixel in particolare a piccole estremità della scala.
Diverso da quello penso che questo è un modello molto utile e trovo il vostro sito CSS Tricks di essere una lettura eccellente. Grazie Chris.
Salute
Grazie per la vostra grande idea per evitare molti errori e perdere tempo con uno standard XHTML e CSS-template ...
Dovrei pensare a questa idea per il mio webprojects, anche
Ralph
Chris - Sono con voi sulla questione universale selettore. Io non sono convinto che è tutto così male, e io ancora uso estensivo senza problemi.