Frameworks HTML y CSS

Categoría: HTML/CSS , 13/06/2011, 1 comentario

Lo que más se ve de una web es la parte externa, el frontend. Este suele ser el apartado más llamativo, el usuario final no tiene por que saber cómo está hecha la web, si usa un CMS, si está hecha totalmente a mano o programada con cualquier lenguaje.

Los frameworks suelen ayudar mucho en estas tareas (para backend también hay muchos, en un post próximo los analizaré) y paso a revisar unos cuantos que creo que son interesantes y pueden servir para vuestros nuevos proyectos.

960 Grid System

Este es uno de los más usados, es un framework CSS que establece una serie de columnas (12 o 16) para un contenido de 960 pixels (con 10 pixels de margen a cada lado, lo que hacen que la medida final del contenido sea de 940 pixels) y una forma muy sencilla de dividir los contenidos de tu web. Este es el framework css que he usado en esta web.

960gs

El funcionamiento es muy simple, una vez importado el fichero 960.css que define las distintas columnas, sólo hay que crear el html correspondiente, un ejemplo podría ser:

<div class="container_12">
 <div class="grid_12">
  <div class="grid_8 alpha"></div>
  <div class="grid_4 omega"></div>
 </div>
</div>

Con este código se genera una estructura de dos columnas, una de 620px y otra de 300px, dejando 20px entre las dos como margen separador. Las clases grid_8 y grid_4 hacen que las cajas tomen esas medidas. Las clases alpha y omega sirven para eliminar los márgenes izquierdo y derecho respectivamente, indican que columna es la primera y cual es la última.

HML5 Boilerplate

HTML5 Boilerplate

Este framework es más completo que el anterior, incluso puede complementarse con el para conseguir una mezcla bastante interesante. El HTML5 Boilerplate nos ayuda a empezar un proyecto nuevo, dándonos un código html5 válido listo para empezar, unos ficheros css base (a los que podemos unir el 960.css de antes) la carga del jQuery, unos cuantos scripts interesantes, un favicon, los ficheros .htaccess y robots.txt, etc. Con esto recibimos una estructura de ficheros lista para empezar a programar nuestra maqueta, ahorrándonos el famoso miedo al documento en blanco (no tanto miedo como pereza máxima…)

Como se puede ver en la imagen de la derecha, nada más descargar disponemos de todos esos ficheros ya listos para comenzar a trabajar, y el index.html viene con todos lo necesario incluido para funcionar.

 

G5 Framework

G5 Framework

Este framework es similar al anterior, incluso lleva una mayor cantidad de scripts insertados, además de un grid similar al 960.gs pero basado en porcentajes (easy grid) pero con otra estructura en el código html. El ejemplo de este grid sería algo así:

<div class="cols cols3">
 <div class="col first"></div>
 <div class="col"></div>
 <div class="col"></div>
</div>

HTML5 Reset

html5 reset

Esto puede considerarse más un html reset, lleva lo básico para empezar a trabajar, no tan completo como el HTML5 Boilerplate, con una estructura mucho más sencilla de utilizar.

Este es un pequeño resumen de unos cuantos frameworks de HTML y CSS que me parecen interesantes, en una próxima entrada analizaré varios frameworks php que creo que son interesantes para empezar un desarrollo desde cero.

  • Rocela

    muy buena