Review 5: DivIt

28/Ago/2008 92

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. Yxyder [#]

    viagra o similares – viagra y esteroides viagra gГ©nГ©rique

  2. Exddvg [#]

    viagra comprar – viagra cialis viagra precio

  3. Dbscnb [#]

    bactrim tablets – bactrim cost australia cheapest generic bactrim (sulfamethoxazole / trimethoprim) without a persription

  4. Eviesi [#]

    bactrim cost australia – bactrim over the counter canada bactrim cost in india

  5. Pdhqng [#]

    buy cialis viagra – cialis o cialis professional average cost of cialis

  6. Dhvoax [#]

    tops pharmacy – site tadalafil generic uk

  7. Axqita [#]

    generic cialis us – how fast does cialis super active works where can i buy cialis without a presc

  8. Dvluos [#]

    tadalafil tablets prices – cialis super active most popular no prescripton website tadalafil 5mg tablets online

  9. Ncdorx [#]

    duloxetine lowest price – buy duloxetine online australia duloxetine without insurance

  10. Llmlqx [#]

    duloxetine 30 mg price australia – duloxetine from canada price cymbalta price canada

  11. hiring-movers-los-angeles [#]

    This paragraph will assist the internet people for building
    up new website or even a blog from start to end.

  12. Ltozzc [#]

    synthroid generic india – synthroid 62.5 mcg levothyroxine 50 mcg coupon

  13. Yrrire [#]

    levothyroxine price comparison – levothyroxine best prices levothyroxine 125

  14. https://moverslosangeles.co/uber-movers-los-angeles.html [#]

    Its like you read my mind! You appear to know a lot about this, like you wrote the book in it or something.
    I think that you could do with a few pics to drive the message home a bit, but other than that, this
    is excellent blog. A fantastic read. I’ll definitely be back.

  15. Zboaqt [#]

    amoxil no prescription – amoxicillin for dogs without vet prescription amoxicillin price without insurance

  16. Nkcvao [#]

    amoxicillin 500 mg – buy amoxicillina noscript canada avatar de price of amoxicillin without insurance

  17. torrance-california-moving [#]

    Can I simply say what a comfort to uncover somebody that genuinely knows what they’re talking about over the internet.
    You actually understand how to bring an issue to light and make
    it important. More and more people need to look at this and understand this side of your story.
    I was surprised that you are not more popular given that you most certainly have the gift.

  18. hampton virginia dui lawyers [#]

    I’m not sure why but this website is loading extremely slow for me.
    Is anyone else having this problem or is it a problem on my end?
    I’ll check back later on and see if the problem still exists.

  19. Ufteid [#]

    is vardenafil generic – buying vardenafil online reviews how to take vardenafil

  20. Yxdygh [#]

    vardenafil dose – generic viagra cialis vardenafil cheap sale vardenafil

  21. credit-repair-loans [#]

    I was recommended this website by my cousin. I am not sure whether this post is
    written by him as nobody else know such detailed about my problem.
    You’re wonderful! Thanks!

  22. Jbepdv [#]

    vardenafil and alcohol – bayer vardenafil online how does vardenafil work

  23. Toewpc [#]

    vardenafil online bestellen – vardenafil for sale online laura vardenafil generic

  24. Nsblqc [#]

    buy drugs from canada – pharpls online pharmacy school

  25. Mucish [#]

    walmart pharmacy – buy adderall canadian pharmacy canada pharmacy

  26. Yreslu [#]

    order cialis online cheap – how much is cialis tadalafil compare prices

  27. Atcplz [#]

    cost of cialis without insurance – order cialis from canada discount pharmacy mexico

  28. Ypjdvx [#]

    sildenafil citrate 200mg – buy viagra soft tabs buy viagra usa online

  29. Suzmnx [#]

    viagra singapore – sildenafil 5 mg lowest cost online prescription sildenafil

  30. Dnbhyn [#]

    order vardenafil uk – generic levitra buy vardenafil now

  31. Bhinzd [#]

    levitra coupon – online vardenafil uk vardenafil pills

  32. Gepfwf [#]

    cheap generic vardenafil – vardenafil online vardenafil online prescription

  33. Vidwft [#]

    order vardenafil online pharmacy – vardenafil cost buy cheap vardenafil no prescription

  34. KU99 [#]

    Hello to all, how is the whole thing, I think every one
    is getting more from this site, and your views
    are good in favor of new viewers.

  35. Nlefop [#]

    stromectol over the counter – buy ivermectin 2mg stromectol for humans

  36. Taejma [#]

    cost of ivermectin pill – gnrstromectol.com ivermectin syrup

  37. Hcqone [#]

    viagra 500mg online – cheapest price for viagra 100mg sildenafil from india

  38. Kwcpie [#]

    can you buy viagra over the counter australia – ordering viagra from india best sildenafil prices

  39. Jfpnod [#]

    cialis usa prescription – tadalafil 10mg india buy tadalafil online paypal

  40. Hmzkms [#]

    prescription cialis from canada – generic cialis coupon pharmacy rx

  41. Xajdsu [#]

    online prednisone 5mg – 50mg prednisone tablets prednisone pill cost

  42. Zehyws [#]

    generic prednisone – prednisone 10 mg price in india prednisone 10mg tabs

Deja tu Comentario

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

CSSLab