thingsym / flexbox-grid-mixins Goto Github PK

Hello, very nice work on the mixins.
Just a minor suggestion, most of us use the inherited box-sizing approach for our projects, so it's not necessary to output box-sizing: border-box with every mixin call. Maybe try doing something like this:

@charset 'utf-8';

$flexbox-grid-output-box-sizing: true !default;

@mixin grid($display: flex, $flex-direction: null, $flex-wrap: null, $flex-flow: null, $justify-content: null, $align-items: null, $align-content: null, $gutter: null, $grid-type: skeleton)
{
	@if $flexbox-grid-output-box-sizing {
		box-sizing: border-box;
	}

	@if $display {
		display: $display;
	}
...

@mixin grid-col($col: null, $grid-columns: 12, $col-offset: null, $gutter: null, $condensed: false, $align-self: null, $flex-grow: 0, $flex-shrink: 1, $flex-basis: auto, $order: null, $shorthand: true, $grid-type: skeleton, $last-child: false, $width: null, $max-width: null, $min-width: null, $height: null, $max-height: null, $min-height: null)
{
	@if $flexbox-grid-output-box-sizing {
		box-sizing: border-box;
	}

	@if type-of($col) == number and unitless($col) == true {
		$flex-shrink: 0;
		$flex-basis: percentage($col / $grid-columns);
...

This would keep your functionality exactly as it is, but provide an option for people not to output box-sizing for every call to your mixins.

For people who have used the inherited box-sizing approach, they can do:

$flexbox-grid-output-box-sizing: false;
@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins';

Hello
I was wondering how difficult it would be to have the mixins also support fixed gutters like 40px or 2rem for instance?

Hi! I like your mixins very much and use them on a lot of projects.

However I noticed that IE11 has issues when using flex shorthand property.

Issue is described here https://stackoverflow.com/questions/32239549/flex-property-not-working-in-ie

I've usually fixed this by separating flex property into three: flex-basic, flex-shrink and flex-grow.

I was evaluating flexbox grid mixins and encountered something I don't like: the $flex-flow parameter of the grid() mixin modifies a CSS shorthand property. I'd prefer having tow separate parameters: $flex-direction and $flex-wrap since this is cleaner an more flexible.

💥 Thanks for updating and maintaining this