Add static grid gutters #8508

[ncoden]

Add static (unresponsive) grid gutters
See: #8508
Use: .gutter-{size} class on a row

Example:

<div class="row gutter-small"> <!-- Gutters always have a "small" width -->
  <div class="large-6 columns">...</div>
  <div class="large-6 columns">...</div>
  ...
</div>

Standardize grid gutters functions, mixins and arguments.

Adds/Removes:

• Add @function grid-column-gutter( {breakpoint} ): Get a gutter size for a given breakpoint.
• Add @mixin grid-column-size( {px or breakpoint} ): Set the gutters on a column.
• Depreciate @mixin grid-column-uncollapse. Use grid-column-gutter instead.
• Use these new features in all (flex-)grid mixin & functions. Use @function grid-column-gutter instead of modifying $grid-column-gutter to support its possible single value.

Other changes:

• Argument naming: use $gutter for a single size, and $gutters for a size map.
• Fix $gutter (now $gutters) argument descriptions.

Required for the previous feature.
Anyway, all the "groups of properties" of a component (i.e. size, align, color, or specific behavior like collapse, expand...) should have their own @mixin, to allow a component customization in responsive/semantic cases

[kball]

@ncoden I like the direction this is going. You should be aware though that $grid-column-gutter currently supports setting it to a single (scalar) value as well as the responsive approach... I think this would break in that case. Probably in that situation these should just degenerate to the same gutter, yes?

[andycochran]

@kball Ah, right! This'll need to account for if you're not using responsive gutters (e.g. $grid-column-gutter is a single value).

[ncoden]

👍 hum. Actually, if $grid-column-gutter is a single value, it is transformed to a (small: $value) map.
So it would generate a useless .gutter-small class.

[ncoden]

It's dirty because we're assuming there is always a smallest breakpoint called "small".
So I purpose to remove the $grid-column-gutter modification, and create:

@function grid-column-gutter( $breakpoint )

that return the gutter if it is a single value, or the gutter for a given breakpoint if it is a map.
What do you think ?

[andycochran]

You can use nth(map-keys($breakpoints),1) to get the smallest (zero) "breakpoint."

[ncoden]

You can use nth(map-keys($breakpoints),1) to get the smallest (zero) "breakpoint."

Can there be no breakpoint ? Does the "zero breakpoint" always exists and be zero ?

I also see a problem with grid-column-uncollapse:

@mixin grid-column-uncollapse($gutter: $grid-column-gutter) { ... }

• $grid-column-gutter is always a map, and is used as padding. We must remove this bugged default value`
• So $grid-column-uncollapse is an alias of $grid-column-gutter
• And $grid-column-collapse is an alias of $grid-column-gutter(0)
• So it would be better to only have:

@include grid-column-gutter( {size_in_px} );
@include grid-column-gutter( {breakpoint} ); // "small", "medium"...

And maybe

@include grid-column-gutter( collapse ); // alias for 0

CSS classes keep unchanged

[andycochran]

@ncoden Yeah. A zero breakpoint is required as the first key/value of the $breakpoints map.

But the error is misleading.

This:

@error 'Your smallest breakpoint (defined in $breakpoints) must be set to "0".';

Should probably be:

@error 'The first key in the $breakpoints map must have a value of "0".';

And a note should also be added to the docs page.

[DaSchTour]

BTW, since #8318 is merged you can use $-zf-zero-breakpoint to get the smallest breakpoint.

[ncoden]

@andycochran @DaSchTour @kball Ok, I will add theses changes.

[ncoden]

I done these changes, and standardize/factorized all the gutter functions/mixins/uses. For all the changes, see this PR description

I have two questions:

• Should I update the documentation ? (docs/pages/grid.md)
• Should I keep @mixin grid-column-uncollapse deleted, or would it be better to depreciate it (redirection to @mixin grid-column-size and throw a warning) ?

[kball]

@ncoden I prefer depreciations than outright deletions, so that sounds like a good step. Updating the documentation would be great. @andycochran can you try this out and see if the code changes are good to merge?

[kball]

@ncoden looks like this branch has gotten stale and needs some conflicts resolved before it can be merged. @andycochran can you give this trial run?

[ncoden]

Ah sorry, i forgot this PR ;)
I rebase it...

[ncoden]

@kball @andycochran It's rebased (and fixed). :)

[kball]

comment @param name should prob get updated to $gutters

[ncoden]

Thanks

[ncoden]

@kball Fixed

[kball]

@andycochran @brettsmason @JeremyEnglert as our scss expert yetinauts, does this seem ready to you?