Caja de herramientas para diseñadores: Blank Plantilla CSS
16 de marzo 2008 por · chriscoyier 11 Comentarios 
Buzz This Post 
Digg this post 
Reddit 
Stumble This Post
Si diseña un buen número de sitios web desde cero, se encontrará haciendo mucho del trabajo de instalación mismo una y otra y otra vez. Crear un directorio con imágenes de la carpeta. Crear un índice de archivo, escribir declaración de tipo de contenido, escriba la estructura de la página de base. Crear un archivo CSS, escriba reset CSS, escribir la estructura CSS básica. Sólo que el programa de instalación puede tomar un pedazo decente de tiempo y se marchitan su entusiasmo por entrar en la carne de su diseño.
En esta nueva entrega de la caja de herramientas para diseñadores, le ofrecemos una forma de evitar todo lo que el tiempo perdido con un CSS de la plantilla en blanco. 
Sólo mantener esta carpeta en su sistema y en cualquier momento de iniciar un nuevo proyecto, sólo puede duplicar esta carpeta y empezar con la codificación real / diseño.
Así que ya sabes lo que puede estar metiendo, vamos a ver el código 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> Como puede ver, es muy muy simple. Sólo la declaración de la página (XHTML 1.0), la declaración de tipo de contenido (UTF-8), título de la página, enlace de estilo, y la estructura simple (el cuerpo con una página-div wrap). También incluye un pequeño recordatorio de incluir su código de Google Analytics en la parte inferior, si se desea realizar el seguimiento de datos de visitantes en su sitio.
Ahora aquí está 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 */ También bastante simple, en su mayoría sólo un Perdí ampliado CSS. El Selector de asterisco (*) tiene la pesada de levantamiento de la restauración, pero hay un par de toques adicionales para mencionar. Ajuste de la font-size en el cuerpo al 62,5% le permite utilizar los tamaños de em como lo haría píxeles (px) los tamaños. 1,0 EM = 10px, 1.1em = 11px, y así sucesivamente. El desbordamiento-y las fuerzas de una barra de desplazamiento vertical en muchos navegadores para eliminar saltos de centrado horizontal.
Hay algo de simple "caja de herramientas CSS" para cosas como flotante, facilitación, y rellenar áreas con el color transparente. La página-wrap CSS se incluye para su centro de contenido de la página.
Esto, definitivamente, parece que se ahorra mucho trabajo. ¿Puede ser utilizado en los sitios de Wordpress? Tengo algunos proyectos por delante y parece que llegaría en tiempo real a la mano.
Para un "barebones" plantilla para wordpress, echa un vistazo a las poblaciones Elliot Jay "Starkers tema".
La idea de tener una plantilla predeterminada es bueno. La forma en que se hace aquí no es.
Por ejemplo: * el selector retrasa la prestación abajo. También elimina los márgenes y quería Juntas de los campos de la forma de entrada en determinados sistemas operativos / navegadores, que no puede volver a aplicarse.
El desbordamiento-y es un absurdo, ya que su página no siempre puede ser desplazable, haciendo que la barra de desplazamiento obsoletos (y confuso para algunos).
Todavía no he visto ninguna evidencia firme en el selector de estrellas notable ralentización de representación. No me cabe duda de que lo hace ligeramente, ya que el selector de estrellas, literalmente, se aplicará lo mismo a cada elemento de la página. Pero tengo serias dudas de que la ligera desaceleración es aún visible en las páginas pares muy complejo.
Además, no es el margen y el relleno de ser retirado con el selector de estrella que arruinar campos de entrada por defecto, es la frontera, y observe cómo la frontera no se restablece aquí. Los estilos de entrada por defecto permanecerá intacto (por ejemplo, los botones de glowy en Safari o los botones de bloque biselado en FF o IE). Usted está correcto sin embargo, que si tira de la frontera de esta manera, los estilos predeterminados no se pueden volver a aplicarse.
Overflow-y tampoco es una tontería. Se aplica una barra de desplazamiento vertical vacía en los navegadores que no tienen ya que (es decir, por defecto ya lo hace). Esto puede tomar hasta espacio en pantalla cuando no se necesita de vez en cuando, pero elimina la incómoda "salto" en horizontal, centrado en la navegación entre una página y que se desplaza a una página que no.
gracias por la CSS y HTML en blanco sofisticado plantilla. esta guía le ayudará a mí!
Gran RES para la editpadders sitio web como yo!
¿Puede explicar la utilidad de la. TranspBlack (background: url (transpBlack.png);) pensamiento?
No veo por qué debería utilizar 1.3em (~ 13px) para la categoría P-selectores de tamaño de fuente. Si hay algo que hace feo en los navegadores más antiguos (especialmente sin ClearType o funciones similares), es una fuente de tamaño en 13.
Es mejor trabajar con números pares, como 8, 10, 12, 14 y 16. Mejor lectura> de lujo de diseño. (Opinión personal, y puede afirmarse hasta el final del tiempo)
@ Federico: Yo uso que se incluyen como parte de mi caja de herramientas "," CSS. Se trata básicamente de un alfa-pixel-PNG transparente para que pueda aplicar un relleno negro transparente a un cuadro sin tener que usar el atributo de opacidad. La opacidad es a veces grandes, aplicándola a un elemento de las fuerzas de todos los elementos niño a tener también la opacidad. Si esos elementos secundarios son de texto, que puede ser una cosa mala. De esta manera se puede aplicar un fondo transparente y mantener el texto totalmente opaco.
@ koew: yo no era realmente consciente de que incluso los tamaños en píxeles prestados mejor .... Me voy a tener que mirar eso.
koew comentarios sobre la fealdad de las fuentes en el tamaño de píxel extraño es válida sobre la base de mi propia experiencia con los navegadores más antiguos en plataformas mayores.
Tal vez estoy atrapado en una deformación de tiempo, pero todavía siento la necesidad de utilizar los tamaños, incluso píxel especialmente en extremo más pequeño de la escala.
Aparte de eso creo que este es un modelo muy útil y creo que su sitio de CSS-Tricks ser una excelente lectura. Gracias Chris.
¡Salud!
Gracias por su gran idea para evitar muchos errores y perder el tiempo con el estándar XHTML y CSS de plantilla ...
Debo pensar en esta idea para mi Webprojects, también
Ralph
Chris - Estoy con usted sobre la cuestión selector universal. No estoy convencido de que todo es tan malo, y yo todavía lo utilizan ampliamente sin ningún problema.