Review 5: DivIt

28/ago/2008 5

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. ¿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

Comentarios

  1. Rolando Murillo [#]

    Sí, faltó más documentación y todo contra que haz mencionado, pero descuida entre ésta y la próxima semana, haré que no sea necesario un archivo para IE, comentaré cada archivo y trataré de documentarlo mejor, ya no habrían contras verdad?

    Buena crítica, me diste en todos los puntos bajos de mi trabajo, justo eso quería.

  2. Jorge Epuñan [#]

    Nada Rolando, no se trata de que lo cambies porq yo lo dije; solo fue una critica constructiva, y muy subjetiva de por cierto. Tu trabajo esta genial pero creo q le falta un poquito para una version 1.0. Exito.

  3. Rolando Murillo [#]

    No lo hago porque lo dices, lo hago porque mencionaste algo que se me estaba haciendo obvio con el pasar de los meses y había dejado DivIt de lado, creyendo que por el momento nada le faltaba, pero ahora me siento motivado a terminar de darle los toques maestros porque siento que es una excelente herramienta para gestionar nuestro contenido sin preocuparnos por las medidas.

    Incluso yo lo estoy empezando a usar en la mayoría de mis proyectos, cosa que no creí que pasaría, porque yo creé DivIt para proyectos desde cero y los proyectos donde trabajo, es decir, mis clientes, tienen otros requerimientos y otro tipo de diseños ya predispuestos.

  4. fearlex [#]

    Voy a probarlo a ver que tal 😀

  5. CSSLab - Videocast 3: creando un plugin para jQuery [#]

    […] mejorar la calidad de los sitios web que vemos día a día. Como lo he hecho en otras ocasiones, pongo a disposición este mismo sitio para hacer un review y […]

Responder a Rolando Murillo ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab