calc()-grid

[fspoettel]

• Use calc() and margin-left() for grids
• TODO: Add back support for collapsing grids (How?)
• TODO: Add support for setting different gutters (How?)

To implement all of this, a bigger rewrite is needed. This PR will be a basis for that.

mention #42
cc @mmjaeger

[mmjaeger]

Thanks - I'm going to play around with it and let you know how it goes -
just out of curiosity, why did you decide to go for margin-left for the
gutter as to halve margin left and right. do you want me do concentrate on
something specific while testing

On Thu, Jul 28, 2016 at 6:24 AM, Felix Spöttel notifications@github.com
wrote:

• Use calc() and margin-left() for grids
• TODO: Add back support for collapsing grids (How?)
• TODO: Add support for setting different gutters (How?)

cc @mmjaeger https://github.com/mmjaeger

You can view, comment on, or merge this pull request online at:

#51
Commit Summary

• Basic calc()-grid

File Changes

• M test/src/scss/test.scss
  https://github.com/fspoettel/hagrid/pull/51/files#diff-0 (1)
• M test/src/scss/tests/_modifiers.scss
  https://github.com/fspoettel/hagrid/pull/51/files#diff-1 (25)
• M scss/_hagrid.scss
  https://github.com/fspoettel/hagrid/pull/51/files#diff-2 (10)
• M scss/hagrid/_functions.scss
  https://github.com/fspoettel/hagrid/pull/51/files#diff-3 (46)
• M scss/hagrid/_modifiers.scss
  https://github.com/fspoettel/hagrid/pull/51/files#diff-4 (23)

Patch Links:

• https://github.com/fspoettel/hagrid/pull/51.patch
• https://github.com/fspoettel/hagrid/pull/51.diff

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#51, or mute the thread
https://github.com/notifications/unsubscribe-auth/ABe4lEVikc6Knxrn_HyHF3G37k4He98sks5qaK13gaJpZM4JXNI6
.

Marco M. Jaeger
http://net4visions.com

[fspoettel]

Using a negative margin-right that overflows the visible window will cause horizontal scrollbars to appear. Consider the following:

body {
  padding: 0.5rem;
}

.grid {
  @include g;
}

One would need to set overflow-x on a container element of the grid to avoid the overflow. I'm not comfortable with setting this globally, so I'd have to implement @mixin container() or c() that does that. I'm trying to figure out how to write hagrid without using the negative margins (it is sorta possible, but not with the syntax i'm using right now) first and if that works, I'll switch to a halved based left & right approach.

[fspoettel]

On another note, there is a test-setup in __test__. You can build it by running npm install and then gulp in the repository-folder. It watches the scss in /scss and /__test__ for changes and recompiles so that you can instantly check if your changes broke some of the tests. I don't think that I implemented BrowserSync / LiveReload for this, so you have to reload the browser to see changes to the scss