Review 5: DivIt
Agosto 28, 2008 @ 16:09
CSSLabA 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. ¿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 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, 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
Articulos relacionados:Review 1: Origo CSS
Review 4: Las Leyes de la Simplicidad
Review 3: No me hagas pensar
Review 2: Shadowbox
Permalink
Via CSSLab
CSS, review, css framework