CSS Resizing based on key variables

I

Illilltip

New Member
I've built a dynamically sized grid layout that can adapt to reasonably in any sized resolution (phone, tablet, desktop) and handle resizing, all while being near pixel-perfect (sorry, I'm OCD -- and I say "near" because my math is broken right now and you can't fit two evenly sized elements inside of an odd sized container without padding being 1px off on one side).Anyway, below is a link to what I've hacked together with JavaScript. It's an example of what I'm trying to pull off. Resize the width of the bottom pane a bit to see what I'm going for.http://jsfiddle.net/langdonx/uFW2C/2/It has some ugly manual JavaScript that's since been ported to Angular, but still the ugly JavaScript that calculates all the styles remains.So my question... can I pull this off with strictly CSS? Or a lot more CSS and a lot less JavaScript? And by this I mean dynamically sized cells based on the width of the screen?Here's are my business rules:
  • Max cell width: 320px
  • Minimum # cells per row: 2
    • this might be impossible with CSS, so I'd be fine with settling on Min Cell Width: 178 for Chrome on my Galaxy Nexus(whose portait mode is 360px wide)
  • Cell border: 5px with a 2px outline
  • Visible margin between cells: 3px (margin is actually 5px, but \[code\]outline\[/code\] bleeds out)
In this example, I'm redrawing the cells on resize every time, but in my Angular version, I believe that just the styles get updated. That said, I could probably get away with redrawing a \[code\]table\[/code\] on resize, but I'd only have to calculate the cell width based on the document width, and well... I wouldn't be thrilled to use a \[code\]table\[/code\]. =[-end mad rant
 
You must log in or register to reply here.
Back
Top