Add Box sizing variable to grid

ChristianPeters / crispy-grid

A Compass-based Grid that strives for lean & sane CSS and supports complex layouts

MIT License

10 stars 2 forks source link

Add Box sizing variable to grid #7

Closed lucasdinonolte closed 10 years ago

lucasdinonolte commented 11 years ago

To not break existing layouts when changing their box-sizing to border-box a variable of $grid-box-sizing was added to the _grid.sass.

Setting $grid-box-sizing to border-box will tell crispy that the project is using the border-box box-model. Crispy will then skip the recalculation of the column width if there are any old padding and border-width properties set in the mixin.

When starting fresh projects you should simply set your box-model to border-box and simply don't worry about setting any border or padding-widths to your column mixins.

lucasdinonolte commented 11 years ago

Readme angepasst. Sind leider zwei Commits, weil ich das erst mit --amend gemacht habe und github das dann nicht annehmen wollte...

lucasdinonolte commented 11 years ago

@ChristianPeters kannst du hier bei Gelegenheit mal rüber schauen? Gerade bei fluiden Rastern braucht man das border-box box-sizing eigentlich dringend. Wollte das langfristig bei Sentres so einsetzen dann...

ChristianPeters commented 11 years ago

Okay, habe mir am Ende der Woche dafür ne Deadline gesetzt. ;)

_Christian

ChristianPeters commented 11 years ago

Okay, I tested it in an existing project.

I considered whether @mixin grid-container should set +box-sizing(border-box) if $grid-box-sizing is set accordingly. However, I can't get it working in Chrome. Regardless of which element has a border-box setting, none of the children inherits this property. They default to content-box (browser default). I have to use an asterix:

*
  +box-sizing(border-box)

Do you share my experience, @lnolte?

A few documentation to dos are left:

[x] Include a recommendation for applying border-box to all elements (see above)
[x] Adapt documentation of the $padding option to refelect the new $grid-box-sizing option
[x] Update the changelog (we are releasing a new version 0.4.0 for this feature)
[ ] Tag and release version 0.4.0 after merging this PR

lucasdinonolte commented 11 years ago

@ChristianPeters yep, using an * is the way Paul Irish recommends it http://www.paulirish.com/2012/box-sizing-border-box-ftw/

I'll include the recommendation to the docs

lucasdinonolte commented 10 years ago

@ChristianPeters guckst du noch mal drüber? Hab schon den nächsten PR im Anschlag :yum: