Ir al contenido principal

Manual/Tutorial Blueprint CSS framework

E

n uno de los artículos anteriores habíamos cómo instalar el framework blueprint CSS, aunque para ser más exactos deberíamos decir a copiar el contenido del archivo descargado en la carpeta, que es la única instalación que necesita.



Una vez tenemos el directorio blueprint en nuestro directorio de trabajo, debemos cargar los archivos desde las páginas en las que vamos a usar el framework. Para ello debemos introducir las siguientes líneas dentro de la cabecera –como si de un archivo css se tratase-.


<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />

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

<!--[if lt IE 8]>

<link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection" />

<![endif]-->

Usando CSS en Blueprint


Existen básicamente 3 capas en el framework blueprint CSS. La capa reset que elimina cualquier regla CSS establecida por cada navegador, typography que nos proporciona distintas tipografías y la capa grid que nos proporciona una serie de clases CSS para hacer diseños de tablas. Las dos primeras no se necesitan modificar, por ejemplo si queremos modificar el tamaño de un elemento lo haremos en nuestra propia hoja de estilo, así se facilita la actualización a posibles actualizaciones del framework.


Tipos de Tipografías


Aunque la tipografía se aplica a sí misma, existen una serie de clases definidas para ser usadas:


.small

Hace el elemento más pequeño.

.large
Hace el elemento más grande.

.hide
Oculta el elemento.

.quiet
Atenua el color de la fuente.

.loud
Hace que el texto tenga color negro.

.highlight
Añade un fondo amarillo al tezto.

.added
Añade un fondo verde al tezto.

.removed
Añade un fondo rojo al tezto.

.first
Elimina el margin/padding del lado izquierdo del elemento.

.last
Elimina el margin/padding del lado derecho del elemento.

.top
Elimina cualquier margin/padding superior del elemento.

.bottom
Elimina cualquier margin/padding inferior del elemento.


Diseño de los formularios


Para dar estilo a los elementos de los formularios, cada elemento debe tener las clases .text o .title donde .text es el tamaño normal y .title se corresponde con un tamaño grande.


También existen una serie de clases que se pueden utilizar para mostrar los mensajes de error:


div.error

Crear un cuadro de error (rojo).

div.notice
Crear un cuadro de noticias (amarillo).

div.success
Crear un cuadro de mensajes correctos (verde).


Creando una tabla


La tercera capa se corresponde con las clases, que permite crear casi cualquier clase de tabla.


La tabla por defecto esta compuesta por 24 columnas, de 30px cada una, con 10px de margen entre cada columna. El tamaño total es de 950px.


Para configurar nuestras tablas, debemos crear una columna con la etiqueta <div> y aplicar una de las clases .span-x para hacerlo. Por ejemplo, si queremos 3 columnas, con dos de ellas estrechas y una más ancha, una cabecera y un pie de tabla, debemos hacer lo siguiente:


<div class="container">

   <div class="span-24">

   The header

   </div>



   <div class="span-4">

   The first column

   </div>

   <div class="span-16">

   The center column

   </div>

   <div class="span-4 last">

   The last column

   </div>



   <div class="span-24">

   The footer

   </div>

  </div>



Hay dos clases importantes que deemos conocer. Ante todo, debemos tener en cuenta que cualquier sitio creado con ayuda de Blueprint debe estar envuelto en un div con la clase .container que se suele colocar justo después de la etiqueta body.


En segundo lugar, la última columna de una fila (por defecto hay 24 columnas) necesita la clase .last para eliminar el borde izquierdo. Sin embargo, cada .span-24 no necesita la clase .last porque siempre ocupa todo el ancho de la página.


Algunas clases más que se pueden utilizar a la hora de trabajar con tablas son:



.append-x




Añade x número de columnas vacías despues de la columna.

.prepend-x




Añade x número de columnas vacías antes de la columna.

.push-x




Empuja una columna x columnas a la izquierda. Puede ser usada para intercambiar columnas.

.pull-x




Tira una columna x columnas a la derecha. Puede ser usada para intercambiar columnas.

.border




Aplica un borde en el lado derecho de la columna.

.colborder




Añade una columna vacía, con un borde en el medio.

.clear




Crea una columna debajo de una fila, sin importar el espacio.

.showgrid




Añade un contendor o columna para ver la tabla.


En la lista x es un valor entre 1 y 23 para append=prepend y 1 y 24 para push/pull.


Otro ejemplo de una tabla con cuatro columnas con el mismo tamaño, con un borde entre las dos primeras y las dos últimas columnas, como si se tratase de un hueco entre ambas.


<div class="container">

<div class="span-5 border">

The first column

</div>

<div class="span-5 append-4">

The second column

</div>

<div class="span-5 border">

The third column

</div>

<div class="span-5 last">

The fourth (last) column

</div>

</div>

Se puede anidar las columnas para lograr el diseño deseado. Haremos una configuración donde tengamos cuatro rectángulos, dos en el lado superior y dos en el inferior de la primera mitad de la página, y una columna normal ocupando la segunda mitad.


<div class="container">

<div class="span-12">

<div class="span-6">

Top left

</div>

<div class="span-6 last">

Top right

</div>

<div class="span-6">

Bottom left

</div>

<div class="span-6 last">

Bottom right

</div>

</div>

<div class="span-12 last">

Second half of page

</div>

</div>

Los scripts


Blueprint viene con dos scripts: uno para comprimir y customizar el CSS, y uno para validar los archivos CSS, que es útil if se realizan cambios en los archivos.


El validador


El validador, como su propia palabra indica, valida los archivos centrales del CSS. El script usa una versión del validador CSS de W3C. Para ejecutarlo, se necesita tener instalado Ruby en la máquina. Se puede ejecutar el script como:


$ ruby valídate.rb

El compresor


Como los archivos que se incluyen en el HTMl son versiones comprimidas de los archivos centrales del CSS, debemos recomprimir los archivos si queremos hacer cualquier cambio.


Comentarios

  1. Muchas gracias por el tutorial, es de gran ayuda, espero hagan mas ejemplos con blueprint ya que es muy buen framework pero no hay muchos tutoriales en internet, los visitaré con frecuencia esperando nuevos. Saludos desde México.

    ResponderEliminar
  2. muchas gracias.... muy util. Hago una pregunta.... he visto q border genera un borde a la derecha.... y si qiuero un borde a la iz como lo hago?

    Saludos

    ResponderEliminar
  3. Hola anonimo,

    ante todo pedirte disculpas por la demora pero.. todos necesitamos unas vecaciones de vez en cuando!!

    Respecto a tu pregunta te he de confesar que hace mucho que no trabajo con este Framework y tendría que repasar algunos conceptos.. pero así de memoria te puedo decir que a la hora de trabajar con celdas, el borde izquierdo se muestra por defecto.

    Intenta probarlo, y si tienes más dudas... intentamos mirarlo más detenidamente.

    Un saludo

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Exportar archivo de configuración de WinSCP

S i estamos trabajando con WinSCP seguro que ya hemos guardado distintas sesiones para acceder a ellas directamente en futuras ocasiones y evitar volver a introducir todos los parámetro de configuración. Seguro que también muchos de vosotros habéis agrupado las sesiones en carpetas dependiendo de la naturaleza de las mismas. Este trabajo ocupa un valioso tiempo que no nos podemos permitir repetirlo para todos los equipos que tenemos, por lo que lo más lógico es configurar todas las sesiones y exportar su configuración al resto de equipos , teniendo una sola versión y evitarnos tener que volver a configurar todas las sesiones en cada uno. El problema es que WinSCP no nos muestra la opción de exportar de una forma sencilla, por lo que tendremos que buscarnos la vida. Lo primero que debemos hacer es abrir el programa y acceder a Preferencias -> Almacenamiento (o su equivalente al inglés) En esta pantalla deberemos indicar que almacene la configuración en un archivo

Asignar valores por defecto a input=”file” y a textarea

S eguro que muchos os habéis estado rompiendo la cabeza buscando la forma de dar un valor por defecto a el tipo de dato input=”file” . Pues que sepáis que no se puede!!! No se puede dar un valor por defecto a los campos de este tipo, ya que hacen referencia a una ruta física local y podrían surgir problemas de seguridad. Lo que se puede hacer, por ejemplo, es mostrar la imagen o el nombre del dato que tenemos almacenado y si el usuario desea modificarla, ofrecerle la opción de cargar una nueva. La etiqueta textarea , aunque pueda parecérnoslo, no se trata de un input y para darle valor por defecto simplemente debemos mostrar el texto que deseemos entre su marca de apertura y de cierre. Es decir, en caso de que lo que deseemos mostrar por defecto sea una variable, introduciremos el siguiente código: <textarea id="txtobservaciones" name="txtobservaciones" rows="2" cols="40" class="txt" ><?=$_POST["txtobservaciones"] ?&

Configuración de archivo de Logs para IpTables

I pTables se usa para configurar, mantener e inspeccionar las tablas de reglas de filtrado de IPs en el kernel de Linux, pero por defecto, su sistema de logs no es todo lo completo esperamos. Por defecto, la mayoría de los logs del sistema se guardan en el fichero /var/log/messages pero en este caso vamos a configurar un nuevo fichero para que almacene únicamente los logs que generaremos con algunas reglas en IpTables , creando así su propio archivo de bitácora . Lo primero que debemos hacer es configurar el archivo /etc/syslog.conf , que se trata de un archivo de configuración en el que se indica el modo en que los mensajes del sistema son bitacorizados a través de la utilidad syslogd que se instala y configura por defecto en todos los sistemas GNU/Linux . Debemos añadir al final del fichero la siguiente sentencia: kern.warning /var/log/iptables.log Con esto indicamos que se almacenen los mensajes provienen del kernel con prioridad 4 o superior ('warning' es el nivel de