Use @mixin instead of @extend

[fspoettel]

New syntax:

.parent {
     // Declare grid with modifiers
    @include g(center, middle);
}

.child {
   // Declare grid-item with width / responsive widths
  @include i(1/2, lap 1/3, desk 1/4);

  // Include push/pull (same arg-syntax as i)
  @include push(desk 2/5);
}

Contents:

• Concise & precise new syntax
• By default light wrapper around flexbox
• Cleaner margin / padding-approach
• Remove standalone version
• Use DRYed mixins in favor of extends - much smarter and better traceable output css
• Infinite columns / ratio-based
• Embrace the *-selector for some modifiers. Modern browsers can handle it well
• Remove visibility-classes

Todo:

• Update Readme
• Write Tests
• Code Cleanup & Comments
• Crossbrowser Tests

[philippkuehn]

Hey, do you really dropped inline-block fallback? And why? :)

[fspoettel]

@philippkuehn

Yes, I consider dropping it with the next release. Flexbox has pretty broad support nowadays, the only notable exceptions being IE9- & Android 4.3-. The user-data from my last few projects doesn't justify an inclusion, but I'm still monitoring that. The benefit of dropping it is a much cleaner & maintainable codebase. the inline-block grid used in this project was heavily influenced by csswizardry-grids and yahoo's great pure. That being said, I'm not 100% decided yet and it would be pretty easy to bring it back under a flag.

[fspoettel]

@philippkuehn

I added back the fallback-grid for the time being but disabled it by default. :)

[philippkuehn]

Yeah nice! At the moment i'm working with csswizardry-grids, but i need some flexbox features and can not drop old IE support :(
Your grid seems to be the perfect next grid for me :)

[philippkuehn]

And one more question:
Why do I have to define $hagrid-font for the fallback? At csswizardry-grids there is no need for this.

[fspoettel]

@philippkuehn

Reason => Solution

csswizardry-grids is a bit out of date in some aspects

[philippkuehn]

Ah yeah. I removed all whitespace between Html-Tags on my pages, so I don't have to use this hack. Would be nice, to have this as an option.

[fspoettel]

You only have that problem in IE9 or Android 4.3-, flexbox removes the need for this everywhere else. I'll stick with the Yahoo-version as its the most reasonable approach imo, the HTML-trick is an overkill to do just for some legacy browsers. You are not always in a position where you can minify your HTML, resetting the fonts is minimal additional effort and only required if you are using the fallback

[philippkuehn]

Yeah, I know. At the moment I have a really dynamic page, where you can control very much styling in the backend (including fonts etc.). So this could be a problem for me. But this is really an edge case. But it is a case :)

[fspoettel]

Can you explain your problem in more details? I'm not sure if I get it. If it's a case you can't solve in another way, I'm willing to add that option back to the fallback-grid

[philippkuehn]

I have to set $hagrid-font in sass. I compile on my local machine. At my site I have an additional css file only for font-styles, which is generated online. So at the moment I compile the grid, I have no idea, what font I am using at my site.

[fspoettel]

@philippkuehn Added the option back in. Quickly tested it on IE9 via SauceLabs and it seems to work. 🍻

[philippkuehn]

Thanks dude! 👍