Add hidden- modifiers (closes #1)

[claviska]

Description

Per #1, this PR adds the following .hidden- modifiers to hide/show columns based on breakpoints:

.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.hidden-xl

These classes follow the Bootstrap 4-alpha naming convention, minus the -up and -down suffixes which were removed in 4.0.0-beta1. Bootstrap now uses display utilities, so this approach mimics that behavior and feels much cleaner.

Alas, we can't use calc in media queries, so to achieve this, breakpoint units were converted from rem to px to properly calculate max widths.

I've also added custom media queries to make targeting specific breakpoints easier.

Check List

instruction : terminal command

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

[imevro]

Awesome! But can you bring back rems? It’s flexboxgrid original feature and I don’t want break it: someone can set custom root font-size for own gutter.

[claviska]

Everything is still calculated in rems except for the breakpoints. These have to be calculated in pixels because you need to target breakpoints at <breakpoint> and <breakpoint> - 1px.

Note the 1px variation in media queries:

@custom-media --xs-only only screen and (max-width: 575px);
@custom-media --sm-only only screen and (min-width: 576px) and (max-width: 767px);
@custom-media --md-only only screen and (min-width: 768px) and (max-width: 991px);
@custom-media --lg-only only screen and (min-width: 992px) and (max-width: 1200px);
@custom-media --xl-only only screen and (min-width: 1200px);

Unfortunately, the CSS spec doesn't allow us to do this:

@custom-media --xs-only only screen and (max-width: calc(var(--sm-min) - 1px));

The calc() inside the media query above is invalid.

Furthermore, postprocessing the breakpoint with calc(36rem - 1px) will result in an invalid custom media query.

So the only way to properly calculate the required breakpoints (as far as I'm aware) is to use pixels. Even if we tried to calculate the 1px variation in rems, we can't guarantee we'll actually achieve a true 1px variation which will lead to "dead zones" in the grid.

[claviska]

I just noticed I used 1200px instead of 1199px for the large-only media query. Fixed in 2f5e474.

You can see the dead zone that resulted at exactly 1200px. (All but one of the boxes should be displayed at any given time.)

I'm not aware of a way to determine precisely 1px from an arbitrary rem unit, so we're basically stuck with pixels for breakpoints or we don't get to have this type of utility. 😕

[claviska]

Sorry, I geeked the second PR and it was pushed here. Interested in your thoughts on .initial-order per #3.

[imevro]

Looks pretty awesome!