ubiquitour.com

Cómo utilizar Blueprint CSS

Blueprint es un conjunto de hojas de estilo en cascada, escrito por el diseñador noruego Olav Bjorkoy. Modelo facilita crear rápidamente una página Web dividida en secciones y columnas que es compatible con todos los navegadores Web más importantes. Plan también formatos su contenido convenientemente para la impresión. Proyecto evitará la molestia de crear una nueva página desde cero, lo que le permite centrarse más en su contenido.

Instrucciones

1 Descargar plano de blueprintcss.org.

2 Haga clic derecho en el archivo descargado en el explorador de Windows y seleccione "Extraer todo". Haga clic en "Extraer".

3 Abra la carpeta revelada. Subir la carpeta de "blueprint" dentro de ella a su servidor Web, en el mismo directorio que los documentos HTML de tus páginas Web o en un directorio especial de CSS.

4 Crear un nuevo documento HTML e Inserte el código siguiente entre las etiquetas "head".

< link rel = "stylesheet" href="blueprint/screen.css" tipo = "text/css" media = "pantalla de proyección" >

< link rel = "stylesheet" href="blueprint/print.css" tipo = "text/css" media = "print" >

<!--[si lt IE 8] >

< link rel = "stylesheet" href="blueprint/ie.css" tipo = "text/css" media = "pantalla de proyección" >

<! [endif]-->

Corregir los atributos de "href" como sea necesario para reflejar la ruta correcta al directorio de "blueprint" de su servidor.

5 Agregar un div con la clase "container" entre las etiquetas body del documento HTML utilizando el código siguiente.

< div clase = "contenedor" >

< / div >

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

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

< div clase = "span-8 > columna izquierda < / div >< div clase ="span-8 > columna media < / div >< div clase = "span-8 último" > columna derecha < / div >

El ancho de la página es de 24 unidades del modelo, así que los números utilizados agregar hasta 24. Asegúrese de que la última columna de cualquier conjunto también pertenece a la clase "pasada". Coloque el código HTML contenido 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 debajo de las columnas que se extiende por toda la página.

< div clase = "span-24" > pie de página < / div >

Puede añadir tantas secciones así como quieras, cada uno que contiene divs con clases de "span" cuyo número añade hasta 24.

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

< div clase = "span-8 > columna izquierda < / div >< div clase ="span-6 anteponer-2"> media columna con espacio adicional para su izquierda < / div >< div clase ="span-8 último"> columna derecha < / div >

Tenga en cuenta que los números, incluido el de la clase de "anteponer", aún añadir a 24.

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

"pequeño" - texto pequeño

"grande" - texto grande

"tranquila" - silencia el color del texto

"loud" - color de texto sólido (negro)

Fondo "destacan" - amarillo

"añadido" - fondo verde

"eliminado" - fondo rojo

Consejos y advertencias

  • Consulte la Blueprint CSS Framework Tutorial y documentos relacionados con wiki en github.com para ver ejemplos de planos más avanzados y las técnicas.