Border Box and grid spacing

[Cleecanth]

(Skip this paragraph if you don't want to read about my infatuation with OOCSS) Within the past 6 months or so, I've been implementing OOCSS principles into my team's workflow and have had some amazing results. It's an absolutely beautiful feeling to simply link to our "bootstrap" css file and simply write HTML and suddenly have a working page with all of the styling you'd hope for. It's sped up our development time and has made the step from photoshop to a full, working prototype into a matter of hours rather than days. It's astonishing and I'm constantly discovering new magic in the OOCSS framework (end infatuation/glowing OOCSS review).

Recently I've become intrigued with the box model border-box in combination with a grid system with the goal to ease responsive design/percentage rounding jumps/bugs.

The way I've basically set it up is to make the .unit class a border-box with internal padding. This is done instead of adding padding to every html tag that might reside in within a unit (as is the case in the OOCSS framework example). Adding default padding on multiple objects feels strict and inefficient to me. 

To add some flexiblity, I've also included a class that eliminates padding on a unit (or really any object with default padding).

My question: Is this bad practice? And what might be some pitfalls I'll run into going this route? I've yet to run into any troubles, but I often find myself trying to "outthink" the original OOCSS framework and finding problems much later. Note that my main browsers of focus are IE8+, FF, Chrome, and Safari.

Thanks in advance.

[Kristina Auckland]

On 13 Nov 2012, at 06:55, Cleecanth <clee...@gmail.com> wrote:

> Recently I've become intrigued with the box model border-box in combination with a grid system with the goal to ease responsive design/percentage rounding jumps/bugs.
>
> The way I've basically set it up is to make the .unit class a border-box with internal padding. This is done instead of adding padding to every html tag that might reside in within a unit (as is the case in the OOCSS framework example). Adding default padding on multiple objects feels strict and inefficient to me.
> To add some flexiblity, I've also included a class that eliminates padding on a unit (or really any object with default padding).
>
> My question: Is this bad practice? And what might be some pitfalls I'll run into going this route? I've yet to run into any troubles, but I often find myself trying to "outthink" the original OOCSS framework and finding problems much later. Note that my main browsers of focus are IE8+, FF, Chrome, and Safari.

Hi

This sounds really interesting, I would love to see some examples of this. Perhaps on codepen or somewhere?

Kristina

[Nicole Sullivan]

Cleecanth,

This sounds really cool. We've been doing some experiments with the same thing. We just got frustrated adding padding/margins to every imainable element. We also wanted to be more flexbox-future proof, so we are moving the grids to something that can automatically become flexbox friendly when the latest browsers support it (and fall back to the border box method when older browsers don't). 

You can check out our efforts here:

https://github.com/stubbornella/oocss/blob/oocss-sass/components/grid/_grid.scss

I'd love to see your code, to see if we are headed in the same direction. The biggest stumbling block we hit was supporting older browsers that don't understand border-box. We did that with margins and negative margin on the line. 

Cheers,

Nicole

--
You received this message because you are subscribed to the Google Groups "Object Oriented CSS" group.

To post to this group, send email to object-or...@googlegroups.com.
To unsubscribe from this group, send email to object-oriented...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/object-oriented-css?hl=en.