Cómo utilizar CSS Blueprint

Blueprint es un conjunto de Cascading Style Sheets escritos por el diseñador noruego Olav Web Bjørkøy. Blueprint hace que sea fácil crear rápidamente una página web dividida en secciones y columnas que es compatible con todos los principales navegadores web. Blueprint también formatea el contenido de forma adecuada para la impresión. Con Blueprint a evitar la molestia de crear una nueva página desde cero, lo que le permite centrarse más en su contenido.

Instrucciones

1 Descargar Blueprint de blueprintcss.org.

2 Haga clic en el archivo descargado en el Explorador de Windows y seleccione "Extraer todo". Haga clic en "Extract".

3 Abra la carpeta de revelado. Sube la carpeta "plano" dentro de ella a su servidor Web, en el mismo directorio que los documentos HTML de las páginas Web o en un directorio especial CSS.

4 Crear un nuevo documento HTML, e inserte el código siguiente entre las etiquetas "cabeza".

<Link rel = "stylesheet" href = "plano / screen.css" type = "text / css" media = "pantalla de proyección">

<Link rel = "stylesheet" href = "plano / print.css" type = "text / css" media = "print">

<! - [If lt IE 8]>

<Link rel = "stylesheet" href = "plano / ie.css" type = "text / css" media = "pantalla de proyección">

<! [Endif] ->

Corregir los atributos según sea necesario el "href" para reflejar la ruta correcta en el directorio "plano" en su servidor.

5 Añadir un div con la clase "contenedor" de entre las etiquetas del cuerpo del documento HTML utilizando el código siguiente.

<Div class = "contenedor">

</ Div>

Todo el resto del código del cuerpo debe ir entre estas dos etiquetas.

6 Crear tres columnas en la página agregando divs dentro del div "contenedor". Utilice las clases "span" de Blueprint. Escriba el código siguiente inmediatamente después de la etiqueta div que abre el "contenedor".

<Div class = "palmo-8"> columna de la izquierda </ div> <div class = "palmo-8"> columna central </ div> <div class = "lapso de 8 última"> columna derecha </ div>

El ancho de la página es de 24 unidades del modelo, por lo que los números utilizados se suman a 24. Asegúrese de que la última columna en cualquier conjunto pertenece también a la "última" de clase. Colocar cualquier contenido HTML que te gusta en estos divs para crear su página Web.

7 Agregue el código siguiente después de la última columna para colocar un pie de página en las columnas que se extiende por toda la página.

<Div class = "lapso de 24"> pie de página </ div>

Puede añadir tantas secciones de esta manera a su gusto, cada una DIV contenedor con clases de "span" cuyo número añadir hasta 24.

8 Utilice la opción "anteponer" y las clases de "añadir" para agregar columnas vacías adicional antes o después de una columna en particular, respectivamente. Por ejemplo, escriba el siguiente código.

<Div class = "palmo-8"> columna de la izquierda </ div> <div class = "lapso de 6 prepend-2"> columna central con espacio extra a su izquierda </ div> <div class = "lapso de 8 última "> columna derecha </ div>

Tenga en cuenta que los números, incluyendo la de la clase "anteponer", todavía se suman a 24.

9 Estilizar el contenido de una columna mediante la asociación con una o más de las siguientes clases.

"Pequeño" - pequeño texto

"Grande" - texto grande

"Tranquila" - el color del texto silenciado

"Fuerte" - fuerte color del texto (negro)

"Resalte" - fondo amarillo

"Añadido" - fondo verde

"Eliminado" - fondo rojo

Consejos y advertencias

• Consultar el Blueprint CSS Marco Tutorial y documentos relacionados al wiki github.com para ver más avanzada ejemplos Blueprint y técnicas.