Last active
December 14, 2015 09:19
-
-
Save tgdev/5064324 to your computer and use it in GitHub Desktop.
After reading a css-tricks article on combining the old and new flexbox syntax, I thought it'd be cool to convert it into a bunch of scss mixins for easy use with SASS.
Read the original article at - http://css-tricks.com/using-flexbox/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Flexbox Mixins (Old & New Syntax) | |
// Based on the article by Chris Coyier - http://css-tricks.com/using-flexbox/ | |
// Flexbox Context | |
// Description: Make the container for our columns a flexbox display context. | |
// By doing this, all direct children of this element become flex items. | |
// Doesn't matter what they were before, they are flex items now. | |
// Example @include flexContext; | |
@mixin flexContext { | |
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ | |
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ | |
display: -ms-flexbox; /* TWEENER - IE 10 */ | |
display: -webkit-flex; /* NEW - Chrome */ | |
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ | |
} | |
// Flexbox Columns | |
// Description: Control column widths | |
// Example: @include flexColWidth(1); | |
@mixin flexColWidth($num: 1){ | |
-webkit-box-flex: $num; /* OLD - iOS 6-, Safari 3.1-6 */ | |
-moz-box-flex: $num; /* OLD - Firefox 19- */ | |
width: 20%; /* For old syntax, otherwise collapses. */ | |
-webkit-flex: $num; /* Chrome */ | |
-ms-flex: $num; /* IE 10 */ | |
flex: $num; /* NEW, Spec - Opera 12.1, Firefox 20+ */ | |
} | |
// Flexbox Ordinal Group | |
// Description: Visually re-order html content (html source remains unchanged) | |
// Example: @include flexOrder(1); | |
@mixin flexOrder($num: 1){ | |
-webkit-box-ordinal-group: $num; /* OLD - iOS 6-, Safari 3.1-6 */ | |
-moz-box-ordinal-group: $num; /* OLD - Firefox 19- */ | |
-ms-flex-order: $num; /* TWEENER - IE 10 */ | |
-webkit-order: $num; /* NEW - Chrome */ | |
order: $num; /* NEW, Spec - Opera 12.1, Firefox 20+ */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment