SummArg | Cursos y recursos para webmasters

13/11/2010

Grilla CSS 1140px que se adapta a resoluciones menores

Este framework CSS permite diseñar para 1280px y al ser flexible se adapta perfectamente a resoluciones menores, incluso dispositivos móbiles. Su utilización es sumamente simple y su única complicación puede surgir para los usuarios de IE6. Claro que ya casi no se utiliza ese navegador.


.container
Su estructura está compuesta por 12 columnas que tienen espacios entre columnas de 40px cuando está en su ancho máximo. Las columnas se ubicarán dentro de un div que a su vez tiene un padding de 20px.


.row
Centra las columnas y fija el ancho.


.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol
Dentro de esta división podemos crear un layout compuesto por dos grandes columnas unicamente, cada una de ellas conformadas por un grupo de seis columnas para cubrir el total de doce. La cantidad de columnas que destinaremos a una sección de nuestra maqueta es facil de recordar ya que está compuesto por el número de columnas que contiene y el sufijo “col”.

El HTML quedaría de este modo:

<div class="container">
<div class="row">
<div class="threecol">
<p>Column 1</p>
</div>
<div class="threecol">
<p>Column 2</p>
</div>
<div class="threecol">
<p>Column 3</p>
</div>
<div class="threecol last">
<p>Column 4</p>
</div>
</div>
</div> 

En el último div .threecol agregamos la clase last para remover el margen derecho.

Descargar 1140px CSS Framework | vía webresourcesdepot

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Este framework CSS permite diseñar para 1280px y al ser flexible se adapta perfectamente a resoluciones menores, incluso dispositivos móbiles. Su utilización es sumamente simple y su única complicación puede surgir para los u…..

Dejar un comentario