1. ¿Qué es Blueprint CSS?
Blueprint es un framework CSS que puede ahorrar tiempo y dolores de cabeza cuando se trabaja en un proyecto que involucra a HTML y CSS, ya sea con Rails, PHP, o simplemente trazar una página HTML. En este tutorial vamos a echar un vistazo a los trabajos internos de Blueprint y vamos a echar un vistazo a la aplicación de demostración que usa Blueprint para tener una mejor idea de cómo utilizar efectivamente utilizar el framework.
Si usted es como yo, que en más de un desarrollador de un diseñador, entonces usted está familiarizado con el proceso de iniciar un nuevo proyecto y no saber qué hacer con su CSS. Usted sabe que su diseño probablemente cambiará a medida que el proyecto avanza, pero desea tener un diseño bonito desde el principio. Así que pasar algún tiempo escribiendo un poco de CSS que funciona en Firefox y Safari, oh espera, no te olvides de IE, cierto, cierto. A continuación, escribir algo de HTML que usted piensa que va a utilizar, y trabajar en conseguir todo el espacio se vea bien. Great! ¡Ya está! Ahora, tres días más tarde, los requisitos para su proyecto han cambiado y usted se encuentra rediseñando el diseño nuevo. Hmm ...
Ahora, incluso si usted es un diseñador estrella de rock que ya tiene todas estas cosas CSS descubierto, o si usted no está preocupado acerca de cómo su diseño cambiará con el tiempo, ya que se trabaja desde una plantilla PSD o algo así, eso no significa que que no hay nada que aprender aquí. Blueprint todavía puede proporcionar algunas herramientas para que puedas ...
Dedique su tiempo innovando, no replicante.
Este es el lema anunciado en blueprintcss.org Y creo que esto es exactamente lo Blueprint logra. Blueprint proporciona una base sólida para construir su proyecto en la parte superior de. Para ello, proporciona parámetros por defecto en todos los navegadores, de aspecto agradable tipografía por defecto, un marco de rejilla, formularios de aspecto agradable, y una hoja de estilo de impresión con impresoras construido en mente. Echemos un vistazo a cómo Blueprint alcanzar este objetivo:
2. Archivos Blueprint Fuente
reset.css
Este archivo establece los parámetros por defecto en todos los navegadores. Estoy seguro de que todos estamos familiarizados con el inicio de un nuevo proyecto, ir a nuestra página principal archivo CSS y añadir unas pocas estilos por defecto para el selector del cuerpo, como 'margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; "o algo por el estilo. Esto es lo que hace reset.css, y más.Reinicia estilos por defecto de espacios, mesas, fuentes, etc para que pueda trabajar desde cero.
typography.css
Este archivo configura alguna tipografía predeterminada agradable. No voy a explicar todos los estilos pero he de decir que se trata de mis partes favoritas del Blueprint porque, para mí, no hay nada más desalentador que tratar de diseñar una página y ver algunas veces negro nuevo texto romano atascado en el esquina superior izquierda de la página. Ugh. Typography.css Blueprint me impide volver a ver de nuevo. El typography.css también establece algunos estilos muy bonitos alrededor tamaños de fuente, la línea de alturas-, el estilo por defecto de tablas, etc
grid.css
Este archivo se encarga de la parte de diseño de cuadrícula de plano. Vamos a echar un vistazo a las clases que se utiliza en un momento. Una cosa importante a observar con la red, por defecto se utiliza un ancho de 950px, con 24 columnas cada una con un ancho de 30px 10px y un margen entre columnas. Esto puede sonar constrictiva, pero si este no es el diseño que desee, siempre puede utilizar una cuadrícula Blueprint CSS Generator para generar un diseño de cuadrícula personalizado. Si este último párrafo completamente confundido, por favor, sigue leyendo como vamos a construir un diseño utilizando una cuadrícula en un poco. Si usted no está familiarizado con los diseños de rejilla CSS y quiere un poco de fondo, Raj Cuál CSS Framework cuadrícula debe usted utilizar para el diseño web? es una buena introducción.
ie.css
Blueprint soporta IE, así que por supuesto que necesita es propia hoja de estilo específica para cuidar de esos pequeños detalles que hacen de IE tan especial :) Lo bueno es que el Plan se ocupa de esto por usted, por lo que todos sus estilos básicos funcionará en todos los principales navegadores (creo que incluso soporta IE 5).
print.css
Este archivo establece algunos de los estilos predeterminados de impresión, por lo que las versiones impresas de su sitio se ve mejor de lo que normalmente lo haría. El archivo print.css también tiene una opción donde usted puede llenar en su nombre de dominio a fin de que los vínculos relativos se muestran entre paréntesis tras el enlace de texto en la versión impresa de la página. Sin rellenar esta sección sólo enlaces remotos se imprimirán correctamente. Echa un vistazo a la parte inferior del archivo print.css src, vinculado anteriormente.
forms.css
Este archivo proporciona buen aspecto formularios predeterminados, así como clases para notificaciones de error o incluso notificaciones de flash si está usando algo como Rails. Dado que esta es la única sección que no voy a cubrir con más detalle, he aquí algunos de los estilos por defecto del formulario en uso:
¿Significa esto que tengo que incluyen seis diferentes hojas de estilo?
Modelo No. viene con tres hojas de estilo comprimidos para las páginas HTML, que contiene screen.css # 's 1-3 y 6 de arriba, print.css y ie.css. La razón por la que se indica las diferentes partes del marco anterior es debido a que el marco es modular, cada una de esas piezas trabaja de forma independiente el uno del otro. Lo bueno de esto es que si usted decide que uno de los aspectos del Plan, como un diseño de cuadrícula, no se ajusta a su proyecto, pero usted todavía desea los beneficios de reset.css y typography.css, usted no tiene que utilizar la red, sino los otros estilos seguirá funcionando.
3. Vamos a crear un diseño con Blueprint
Este sitio es una idea que me había dando vueltas en mi cabeza, así que pensé que iba a traer a la vida aquí. Es un sitio donde la gente que les gusta escribir novelas como un hobby puede ir a revisar las novelas de escritores otro hobby, así como cargar su propio ser revisado.
Me doy cuenta de que todos ustedes, los diseñadores rockstar que pegó alrededor al comienzo están a punto de salir después de echar un vistazo a mi diseño, pero lo interesante de este diseño es que yo no escribí ninguna CSS para ello. Este diseño utiliza sólo estilos Blueprint y si bien no es el final de todos los diseños, proporciona una solución flexible, de aspecto agradable diseño para mi proyecto. Desde que mi diseño es probable cambio, Blueprint hace que sea fácil de actualizar mi disposición, y cuando mi sitio es completamente funcional, puedo pensar en añadir algo de mi propio estilo de hacer las cosas se ven más bonitas.
4. Break it Down
El encabezado del documento
- < cabeza >
- < meta http-equiv = "Content-type" content = "text / html; charset = UTF-8" />
- < título > Book Haven </ titulo >
-
-
- < enlace rel = "stylesheet" href = "plano / screen.css" tipo = "text / css" media= "pantalla de proyección" />
- < enlace rel = "stylesheet" href = "plano / print.css" tipo = "text / css" media ="print" />
-
-
-
- < enlace rel = "stylesheet" href = "blueprint / plugins / fancy-type / screen.css" tipo = "text / css" media = "pantalla de proyección" />
- </ cabeza >
Así es como una etiqueta head típico debe buscar cuando usted está utilizando Blueprint. Es necesario incluir los archivos del framework CSS, que consiste en screen.css, print.css y ie.css.
Una gran cosa acerca de Blueprint: es sólo CSS, por lo que puede ser anulado como cualquier otro CSS.Así es como Blueprint trabajo plugins. En este ejemplo estoy usando el Modelo de lujo del tipo de plugin que ofrece cierta tipografía estilo elegante. Usted puede ver que he vinculado al archivo de fantasía del tipo CSS debajo archivos del framework CSS, por lo que el CSS fancy-tipo tiene la capacidad de sobrescribir estilos definidos por el marco. Para ello, hay varios plugins disponibles BP que simplemente sobrescribir los aspectos del marco o añadir nuevos estilos para que usted utilice.
Por último debe incluir el archivo CSS donde se puede sobrescribir los estilos del marco y añadir su propio estilo a la página.
El encabezado de página
<body>
<div class="container">
<div id="header" class="span-24 last">
<h1 id="book_haven"> <img src="images/header.gif" encabezado alt="Book image" id="header-image" /> </ h1>
</ Div>
<hr />
<div id="subheader" class="span-24 last">
<h3 class="alt"> obtener opiniones sobre su última novela, y leer lo que otras personas están escribiendo. </ h3>
</ Div>
<hr />
Lo más importante a destacar en este código: Su red debe estar rodeado de un <div> con una clase de "contenedor" de lo contrario no se mostrará como una cuadrícula. Los <hr /> etiquetas son utilizadas por Blueprint para separar secciones de su página verticalmente. El 'alt' clase es traído a usted por el plugin de fantasía del tipo y proporciona una buena manera de darle vida a un texto (puede aplicarse a cualquier elemento de texto).
El contenido principal
- < div clase = "span-17 colborder" id = "content" >
- < h3 clase = "fuerte" > Libro destacado: "El mundo sin nosotros" </ h3 >
- < p >
- < img clase = "right" src = "images / en todo el mundo book.gif" alt = "libro destacado" />
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- </ p >
- < p >
- Cras sagittis. Fusce porttitor felis sed Massa. En hac habitasse platea dictumst.
- </ p >
-
- < hr />
- < div clase = "span-8 colborder" >
- < h4 clase = "anteponer-5" > subir un libro </ h4 >
- < p >
- Nam vitae tortor id sodales ante facilisis.
- </ p >
- </ div >
-
- < div clase = "span-8 último" >
- < h4 clase = "anteponer-5" > Escribir comentario </ h4 >
- < p >
- Nam vitae tortor id sodales ante facilisis. Mauris ipsum.
- </ p >
- </ div >
- </ div >
-
- < div clase = "span-6 últimos" id = "sidebar" >
-
- < div id = "reciente-books" >
- < h3 clase = "caps" > Libros recientes </ h3 >
-
- < div clase = "caja" >
- < a href = "#" clase = "tranquilo" > Higiene </ a >
- < div clase = "tranquilo" > noviembre 29, 2008 </ div >
- < div clase = "tranquilo" > por Craven </ div >
- </ div >
-
- </ div >
-
- < div clase = "anteponer-top" id = "reciente-reviews" >
- < h3 clase = "caps" > Comentarios recientes </ h3 >
- < div clase = "caja" >
- < lapso clase = "tranquilo" > Thor Higiene revisada </ lapso >
- < div clase = "tranquilo" > Rating: 4/5 </ div >
- < a href = "#" clase = "tranquilo" > Lea esta revisión </ a >
- </ div >
-
- </ div >
- </ div >
-
- < hr />
Hay un montón de cosas importantes en este fragmento de código! Vamos a empezar por la parte superior con <div class="span-17 colborder">. Esta etiqueta se declara la mayor div resumidas esa página, la que contiene la sección de Libros destacados, así como las dos secciones más pequeñas de abajo. La clase 'span-17 "se refiere a la disposición de la rejilla Blueprint. Se declara que la anchura de este div debería abarcar 17 de las 24 columnas de la página. La otra clase se utiliza, "colborder ', es la abreviatura de borde de la columna y le dice Blueprint para poner un borde a la derecha de este div entre él y la barra lateral.
Importante : el uso de la "colborder" clase en realidad ocupa una columna completa. Dado que nuestro principal div utiliza 17 columnas (palmo-17), se puede esperar que la barra lateral podría ocupar siete columnas (desde el 17 + 7 = 24, el número de columnas en nuestra página), pero dado que la propiedad 'colborder' ocupa una columna a sí mismo, esto deja sólo 6 columnas de la izquierda de la barra lateral para ocupar div (17 + 1 + 6 = 24).
Antes de llegar a la barra lateral tenemos que mirar a los de dos div menor, los titulada 'Subir un libro "y" Escribir comentario ". Esto es en realidad una red Blueprint anidar otra cuadrícula Blueprint. Dado que la red interna está anidado dentro de un div que abarca 17 columnas, el ancho máximo para esta red, en lugar de 24, es de 17.
Por lo tanto, la primera div tiene 'palmo-8' de las clases y 'colborder', lo que significa que el ancho se extenderá por 8 columnas y tendrá un borde a la derecha. El segundo div aquí tiene clases "palmo-8 'y' último '. Esta es una importante parte del marco de rejilla Blueprint. La columna más a la derecha en una cuadrícula debe haber utilice el "último" de clase. Esto le dice a BP que esta es la última columna de esta red y no es necesario para hacer espacio para más. Observe cómo nos dieron la habitación por 17 columnas, para empezar, cada uno de los divs abarcó 8 columnas y la propiedad 'colborder' tomó la última columna (8 + 8 + 1 = 17).
OK, de vuelta a la barra lateral. La barra lateral div tiene clases de 'span-6' y 'últimos'. Estoy seguro de que ustedes se han enterado ahora de cómo funcionan estas clases. Esta barra lateral se completa la grilla que el principal período de div-17 comenzó. En caso de que no se dio cuenta, la clase 'palmo-#' puede tomar cualquier número entre 1 y 24, a menos que decida utilizar una red más grande, en cuyo caso el 'span-#' clase puede tener cualquier número, siempre y cuando el número es menor que el número total de columnas de la cuadrícula.
Se trata de la más simple de HTML podría llegar a demostrar la cuadrícula.
- < div clase = "contenedor" >
- < div clase = "span-24" >
- Encabezamiento
- </ div >
- < div clase = "span-4" >
- Barra lateral izquierda
- </ div >
- < div clase = "span-16" >
- Contenido principal
- </ div >
- < div clase = "span-4 última" >
- Barra lateral derecha
- </ div >
- </ div >
Echemos un vistazo a algunas más de las clases CSS que hemos utilizado en el diseño.
- 'Caps': Esta clase se utiliza en los títulos de la barra lateral. Se trae a nosotros por el plugin de fantasía del tipo y ofrece un estilo agradable para los títulos en mayúsculas.
- 'Box': Este es un gran día para la visualización de los elementos de lista. Se distingue fácilmente estos artículos del resto de la página y proporciona un buen margen entre los elementos y el relleno agradable para los elementos interiores.
- 'Tranquilo': Esta es una clase CSS que cambia el color del texto para que sea suave y gris que se ve en el texto de la barra lateral.
- 'Prepend-top': Esta se utiliza en la sección de "Comentarios recientes" de la barra lateral.Simplemente se aplica un margen de 1.5em a la parte superior del elemento. Hay una clase similar llamado 'append de fondo ", que tiene el mismo efecto en la parte inferior de un elemento.
- 'Prepend-5': Estoy utilizando esta clase para empujar los títulos de la div es menor a la derecha. En Blueprint hay varias clases de espacio: prepend, añadir, tire y empuje. Anteponer y append agregar relleno a la izquierda y derecha, respectivamente. Tire y empuje añadir un margen a la izquierda y derecha, respectivamente. Una vez más, usted puede hacer tanto añadiendo, anteponiendo, jalar y empujar lo que quieras, siempre y cuando no se utiliza un número mayor que el número total de columnas en la cuadrícula (como el prefijo-25 en una cuadrícula con 24 columnas).
Si usted no está familiarizado con el modelo de caja CSS y no saben la diferencia entre el relleno y el margen, aquí es breve lección aa. En CSS, acolchado añade espacio dentro de las fronteras del elemento y de hecho aumenta el tamaño del elemento. Por ejemplo, si usted tiene una tabla con bordes y agregar relleno a la mesa, es realmente empujar los límites de la mesa. Margen, por el contrario, añade un espacio fuera de la frontera y no aumenta el tamaño del elemento. Esto puede tener el efecto de empuje de otros elementos fuera de la corriente de uno o mover el elemento actual de la página. He aquí una gran imagen para demostrar el modelo de caja CSS:
5. Resumen
Este tutorial pretende mostrar cómo Blueprint CSS se puede utilizar para preparar el terreno para su próximo proyecto, o por lo menos tener algo del peso de sus hombros alrededor restablece y la tipografía.Además, si usted está usando Blueprint con Rails, echa un vistazo a su repositorio en Github , ya que tienen algunas características que le permiten integrar fácilmente y configurar Blueprint para trabajar con su proyecto Rails.
Lo mejor modelo es que es sólo CSS. Todo es CSS. Así que si usted está interesado en Blueprint ir a ver la fuente y si usted tiene algún conocimiento de CSS debe ser capaz de entender cómo funciona todo.Blueprint también no es una base de código muy grande, es probable que tenga menos CSS que la mayoría de nosotros usamos en un proyecto típico. Incluso se puede leer la fuente en su navegador a través del repositorio en Github Blueprint .
Los dejo con algunos recursos en Blueprint:
- El sitio web está en Blueprint blueprintcss.org . Este es el lugar más fácil para descargar el framework.
- Por defecto Blueprint utiliza un diseño fijo, si usted está a favor de diseños líquidos aquí es un plug-in que te permitirá Blueprint para funcionar con un diseño líquido.
- Más plugins Blueprint
Fuente:
http://net.tutsplus.com
