As requested in #138, I've implemented and documented some classes that provide the ability to hide or show content based on viewport size.

The classes are:

• hide-xs, hide-sm, hide-md, hide-lg: Hide only on the viewports specified.
• hide-sm-up: Same as hide-sm hide-md hide-lg.
• hide-md-up: Same as hide-md hide-lg.
• hide-sm-down: Same as hide-xs hide-sm.
• hide-md-down: Same as hide-xs hide-sm hide-md.

New documentation visible at: http://derflatulator.github.io/flexboxgrid/#hiding

There is no real need for show- classes, as at most two hide- classes would be required for any configuration.

Opening this PR so people can follow along with the progress since 7.0 will be a major change. it will:

• [ ] Add multiple source files
  • [x] CSSNext
  • [x] Sass
  • [ ] Less
  • [ ] Stylus
• [x] Move all marketing site code to gh-pages branch ONLY
• [ ] Create an examples repo
• [ ] Update flexboxgrid.com
  • [ ] Add browser support badge

Tested in IE11 - (VM available from modern.ie)

.

Removing the padding from the column/offset classes corrects the grid, but clearly the padding is required for the gutters.

From what I can gather, this set of rules present on .row:

display:-webkit-flex;
display:-ms-flexbox;
display:-webkit-box;
display:flex;

...causes issues in newer version of safari. Here's the details...

I'm viewing a site using flexbox grid in Safari 9.

Because safari ignores the display:flex; rule, it falls back to display:-webkit-box. But, since that rule is specific to older versions of safari, it does nothing.

Yet, even though it does nothing, the browser doesn't continue to fall back to the display:-webkit-flex declaration... so the elements with class .row remain "unflexed".

I suspect the fix is to simply re-order the rules like so...

display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;

Android stock browser still uses old syntax, as well as a few other randoms out there. With just a few tweaks to your css, you could support them. Do you guys want/plan that for this tool, or is this new syntax support only?

I found that box-pack and box-orient just needed to be changed, and all else seemed to work. Thought I'd throw this on the radar.

Usage of 16.667% can lead to widths totaling up to greater than 100%, forcing columns to the next row on certain widths:

Example fiddle: http://jsfiddle.net/c9dymmy1/ Example fiddle with this branch: http://jsfiddle.net/0k2jpbdL/1/

Bootstrap gets around this by rounding differently on left/right padding but we're using rems there instead, so we can't do the calculation ahead of time.

If one was to implement this: http://getbootstrap.com/examples/dashboard/

Making the root element a row enables horizontal scrolling due to: https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css#L42-L43

Making the root element a container-fluid like bootstrap then making the next level a row leaves padding space on the sides.

Any reason for the negative margin on row?

The .container variant of flexboxgrid has some issues regarding its width:

1. If you make the screen smaller, you'll notice a horizontal scrollbar appearing
2. At the exact breakpoints (e.g. 1200px) the .container-fluid and .container aren't aligned, the .container doesn't have the --outer-margin

See http://codepen.io/ckuijjer/pen/xwENJv for this issue.

Hi,

I would like to have equal size blocks inside of a container (row), how is it possible with flexboxgrid? Should be achievable using the syntax align-items: stretch on the container

currently can't see a good way to use npm install to install flexboxgrid if you also need to adjust the gutters.

Kind of sucks there's not really a good way to expose user-configurable variables for style components, even with preprocessors. Not sure a good pre/post processor-agnostic solution other than exposing a css generator and allowing users to pass in the gutter sizes as variables. Perhaps a cli app?

In my case, I want to remove the gutter completely because the gutter makes certain styles impossible, so perhaps the simplest thing that would work would be special-casing zero gutters (due to aforementioned restriction) and including a zero gutters version in the distribution.

Currently we add all of the files needed to for the gh-page as well as the grid in the master branch. After seeing a few projects that accidentally include the flexboxgrid.com code I am thinking only having the grid code in master is a better idea.

Since I have been the only person updating the site it makes sense to just pull in PRs by hand.

Hi . You can use *[class*="col-xs"] instead of using bellow codes :

.col-xs, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-offset-0, .col-xs-offset-1, .col-xs-offset-2, .col-xs-offset-3, .col-xs-offset-4, .col-xs-offset-5, .col-xs-offset-6, .col-xs-offset-7, .col-xs-offset-8, .col-xs-offset-9, .col-xs-offset-10, .col-xs-offset-11, .col-xs-offset-12

and you can do it for md and lg and other sizes and reduce css file size .

Briefly ( tweet size ) describe your issue and how you discovered it.

The justify-content: space-evenly; is missing

Expected behavior

full functionality

Actual behavior

not there

You could simply add via: .evenly-lg .evenly-md .evenly-sm .evenly-xs { justify-content: space-evenly;}

I did it by myself, works great and is no work :-)

Description

...

Check List

instruction : terminal command

• [ ] run the build script grunt
• [ ] open index.html in a browser & resize to test visual issues

Description

• upgrade package.json
• fix errors @extends within @media

...

Check List

instruction : terminal command

• [x] run the build script grunt
• [x] open index.html in a browser & resize to test visual issues

Description

...

Check List

instruction : terminal command

• [ ] run the build script grunt
• [ ] open index.html in a browser & resize to test visual issues