thingsym / flexbox-grid-mixins Goto Github PK
View Code? Open in Web Editor NEWSass Mixins to generate Flexbox grid
Home Page: https://thingsym.github.io/flexbox-grid-mixins/
License: MIT License
Sass Mixins to generate Flexbox grid
Home Page: https://thingsym.github.io/flexbox-grid-mixins/
License: MIT License
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.