Skip to content

Instantly share code, notes, and snippets.

@tgdev

tgdev/flexbox.scss

Last active December 14, 2015 09:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tgdev/5064324 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tgdev/5064324 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Tom Gillard revised this gist Mar 1, 2013. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion flexbox.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -2,7 +2,9 @@
    // 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. Just by doing this, all direct children of this element become flex items. Doesn't matter what they were before, they are flex items now.
    // 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 */
  2. Tom Gillard revised this gist Mar 1, 2013. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions flexbox.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -14,8 +14,8 @@

    // Flexbox Columns
    // Description: Control column widths
    // Example: @include flexCols(1);
    @mixin flexCols($num: 1){
    // 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. */
  3. Tom Gillard revised this gist Mar 1, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion flexbox.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -13,7 +13,7 @@
    }

    // Flexbox Columns
    // Description:
    // Description: Control column widths
    // Example: @include flexCols(1);
    @mixin flexCols($num: 1){
    -webkit-box-flex: $num; /* OLD - iOS 6-, Safari 3.1-6 */
  4. Tom Gillard created this gist Mar 1, 2013.
    36 changes: 36 additions & 0 deletions flexbox.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    // 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. Just 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:
    // Example: @include flexCols(1);
    @mixin flexCols($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+ */
    }