A través de este mismo sitio, Rolando Murillo me contacta para mostrarme su última joya: DivIt, un sistema de grillas para que trabajes el layout de tu sitio ordenadamente mediante porcentajes. Confieso que trabajar con porcentajes es mi karma; lo encuentro muy difícl, especialmente al momento de lograr una armonía entre browsers, y para IE6 no puedes usar cifras absolutas, sino que en vez de 50% deberías tantear entre 48% y 49.9%… probando aver cuál funciona mejor sin quebrar el layout; un lío… Así que me casé con layout fijo y lo domino bastante bien.

La idea detrás de DivIt es simple: mediante class‘es pre-establecidad, divides los elementos siempre y cuando el ancho total sume 100%. Por ejemplo, para una fila puedes usar:

  • 100%
  • 50%+50%
  • 33%+33%+33%
  • 25%+25%+25%+25%
  • 50%+25%+25%
  • etc etc etc

La combitatoria va con tu imaginación y tu necesidades. Puedes establecer un contenedor con ancho fijo, o con ancho también con porcentaje. En este caso DivIt (y el uso de porcentajes en general) es bastante flexible y hace bastante fácil su implementación, principalmente para quienes se dificultan con calcular anchos de cajas para layouts complejos.

¿Qué pasa si entre las cajas tiene padding y/o margin? Rolando recomienda utilizar una class que contenga estas propiedades, entre la caja de layout y el contenido mismo de la caja, tal como [recomendé hace un tiempo atrás][1]. ¿Pero si entre cajas hay un border-right, y luego un margin-right? Eses son casos de diseño que se deben de solucionar con bastante ingenio, ya que sabemos que son elementos que hacen parte del [modelo de caja][2] e influyen en el ancho de la caja, inclusive si son con porcentajes.. y personalmente esos son impedimentos que me hacen preferir definir y construir el layout a mano; pierdo más tiempo pero tengo más control.

En mis pruebas DivIt anduvo bastante bien, logrando armonía entre mis browsers de pruebas, así que logró mi satisfacción y que me tomara mi tiempo en escribir este review. Para funcionar, Rolando entrega un .zip con varios archivos necesarios:

  • reset.css
  • divit.css
  • ie.css
  • minmax.js

El reseter.css es necesario para cualquier layout, pero aquí está incluído como archivo aparte; divit.css contiene las class‘es de porcentajes necesarias; ie.css las arregla para IE6 y minmax.js según las palabras de Rolando “para soportar min/max-width en IE”. Estos dos últimos archivos asumo que deben ser incluídos mediante [comentarios condicionales][3], y según entiendo este último .js no es necesario si no usas min/max-width… tampoco me quedó claro eso.

Pros:⌗

  • fácil de entender.
  • fácil de usar.
  • resultados reales.

Contras:⌗

  • falta documentación más detallada (instrucciones).
  • falta comentarios detallados en los source entregados.
  • la implementación con IE podría ser más integrada (sin necesidad de una hoja de estilos externa o comentarios condicionales).

Link: DivIt // Un grid-system que divide el trabajo⌗

[1]: http://www.csslab.cl/2007/07/19/como-caja-2-superando-el-modelo/ “Enlace en CSSLab a “Como Caja 2: Superando el Modelo”” [2]: http://www.csslab.cl/2006/12/14/como-caja-el-modelo/ “Enlace en CSSLab a “Como Caja: el modelo”” [3]: http://www.csslab.cl/2006/07/28/se-viene-ie7-¡huid/ “Enlace en CSSLab a “Modelo de Caja””