From 6be1520debf548ec3ab4998e4f1e16fc8773d325 Mon Sep 17 00:00:00 2001 From: homerjam Date: Wed, 14 Jan 2015 14:15:09 +0000 Subject: [PATCH 1/3] Update _flexgrid.sass --- _flexgrid.sass | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_flexgrid.sass b/_flexgrid.sass index 3bc4bce..2bf6c91 100644 --- a/_flexgrid.sass +++ b/_flexgrid.sass @@ -69,6 +69,10 @@ $screen-lg-min: 1200px !default @if $type == width and $index > 0 .col-#{$class}-#{$index} width: percentage($index / $grid-columns) + -webkit-flex-basis: percentage($index / $grid-columns) + -moz-flex-basis: percentage($index / $grid-columns) + -ms-flex-basis: percentage($index / $grid-columns) + flex-basis: percentage($index / $grid-columns) @if $reorder @if $type == push and $index > 0 \:root:not(.flexbox):not(.webkitbox) From d7adeb79521eb891bcb02279c72de384a94b7ccf Mon Sep 17 00:00:00 2001 From: James Homer Date: Wed, 11 Mar 2015 12:25:13 +0000 Subject: [PATCH 2/3] added css versions --- _flexgrid.scss | 231 ++++++++++++++++++++++++++++++++++++++++++ flexgrid-ie.scss | 54 ++++++++++ flexgrid-reorder.scss | 3 + flexgrid.scss | 3 + 4 files changed, 291 insertions(+) create mode 100644 _flexgrid.scss create mode 100644 flexgrid-ie.scss create mode 100644 flexgrid-reorder.scss create mode 100644 flexgrid.scss diff --git a/_flexgrid.scss b/_flexgrid.scss new file mode 100644 index 0000000..09fc745 --- /dev/null +++ b/_flexgrid.scss @@ -0,0 +1,231 @@ +/*! ptb2.me/flexgrid | (c) 2014 Peter T Bosse II | Apache license */ +/*! Inspired by Bootstrap 3.2 | License: http://bit.ly/WzvaP8 */ + +// box-sizing supported by: +// Chrome, IE 8+, Firefox (-moz), Safari 5.1+, Opera +// iOS <= 4 & Android <= 2.3 (-webkit), Firefox (-moz) + +// :before and :after pseudo-elements supported by: +// Chrome, IE 8+, Firefox, Safari, Opera 4.0+: +// ::before and ::after pseudo-elements supported by: +// Chrome, IE 9+, Firefox, Safari, Opera 7.0+: +// + +// XHTML supported by IE 9+ and all other browsers + +// media queries supported by: +// Chrome, IE 9+, Firefox, Safari 1.3+, Opera 9.2+ + +// :root CSS selector supported by: +// Chrome, IE 9+, Firefox, Safari, Opera 9.5+ + +// flexible box layout supported by: +// Chrome, IE 10+, Firefox, Safari, Opera 12.1+ + +// FYI: Bootstrap 3 drops support for IE 7: +// FYI: jQuery 2.0 drops support for IE 8: +// FYI: Google has dropped support for IE 9: + +//* Variable Definitions **// + +$grid-columns: 12 !default; +$grid-gutter-width: 30px !default; +$reorder: false !default; + +$container-sm: 720px + $grid-gutter-width !default; +$container-md: 940px + $grid-gutter-width !default; +$container-lg: 1140px + $grid-gutter-width !default; + +$screen-sm-min: 768px !default; +$screen-md-min: 992px !default; +$screen-lg-min: 1200px !default; + +//* Mixin Directive Declarations **// + +@mixin box-sizing($boxmodel) { + -webkit-box-sizing: $boxmodel; + -moz-box-sizing: $boxmodel; + box-sizing: $boxmodel; +} + +@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") { + @for $i from 1 + 1 through $grid-columns { + $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"; + } + #{$list} { + position: relative; + min-height: 1px; + padding-left: $grid-gutter-width / 2; + padding-right: $grid-gutter-width / 2; + } +} + +@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") { + @for $i from 1 + 1 through $grid-columns { + $list: "#{$list}, .col-#{$class}-#{$i}"; + } + :root:not(.flexbox):not(.webkitbox) { + & #{$list} { + float: left; + } + } +} + +@mixin calc-grid-column($index, $class, $type) { + @if $type == width and $index > 0 { + .col-#{$class}-#{$index} { + width: percentage($index / $grid-columns); + -webkit-flex-basis: percentage($index / $grid-columns); + -moz-flex-basis: percentage($index / $grid-columns); + -ms-flex-basis: percentage($index / $grid-columns); + flex-basis: percentage($index / $grid-columns); + } + } + @if $reorder { + @if $type == push and $index > 0 { + :root:not(.flexbox):not(.webkitbox) { + & .col-#{$class}-push-#{$index} { + left: percentage($index / $grid-columns); + } + } + @if $index < $grid-columns { + :root.flexbox, :root.webkitbox { + & .col-#{$class}-push-#{$index} { + @include order-flex($index + 1); + } + } + } + } + @if $type == push and $index == 0 { + :root:not(.flexbox):not(.webkitbox) { + & .col-#{$class}-push-0 { + left: auto; + } + } + :root.flexbox, :root.webkitbox { + & .col-#{$class}-push-0 { + @include order-flex($index + 1); + } + } + } + @if $type == pull and $index > 0 { + :root:not(.flexbox):not(.webkitbox) { + & .col-#{$class}-pull-#{$index} { + right: percentage($index / $grid-columns); + } + } + @if $index < $grid-columns { + :root.flexbox, :root.webkitbox { + & .col-#{$class}-pull-#{$index} { + @include order-flex($grid-columns - $index); + } + } + } + } + @if $type == pull and $index == 0 { + :root:not(.flexbox):not(.webkitbox) { + & .col-#{$class}-pull-0 { + right: auto; + } + } + :root.flexbox, :root.webkitbox { + & .col-#{$class}-pull-0 { + @include order-flex($grid-columns); + } + } + } + } + @if $type == offset { + .col-#{$class}-offset-#{$index} { + margin-left: percentage($index / $grid-columns); + } + } +} + +@mixin loop-grid-columns($columns, $class, $type) { + @for $i from 0 through $columns { + @include calc-grid-column($i, $class, $type); + } +} + +@mixin make-grid($class) { + @include float-grid-columns($class); + @include loop-grid-columns($grid-columns, $class, width); + @include loop-grid-columns($grid-columns, $class, pull); + @include loop-grid-columns($grid-columns, $class, push); + @include loop-grid-columns($grid-columns, $class, offset); +} + +@mixin order-flex($i) { + -webkit-box-ordinal-group: $i; + -ms-flex-order: $i; + -webkit-order: $i; + order: $i; +} + +//* Placeholder Selector Declarations **// + +%boxsizing { + @include box-sizing(border-box); +} + +%clearfix { + &::before, &::after { + content: " "; + display: table; + } + &::after { + clear: both; + } +} + +//* Class Selector Declarations **// + +*, *::before, *::after { + @extend %boxsizing; +} + +.container, .container-fluid { + margin-right: auto; + margin-left: auto; + padding-left: $grid-gutter-width / 2; + padding-right: $grid-gutter-width / 2; + @extend %clearfix; +} + +.row { + margin-left: $grid-gutter-width / -2; + margin-right: $grid-gutter-width / -2; + @extend %clearfix; + :root.flexbox &, :root.webkitbox & { + display: -webkit-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + } +} + +@include make-grid-columns; + +@include make-grid(xs); + +@media (min-width: $screen-sm-min) { + .container { + width: $container-sm; + } + @include make-grid(sm); +} + +@media (min-width: $screen-md-min) { + .container { + width: $container-md; + } + @include make-grid(md); +} + +@media (min-width: $screen-lg-min) { + .container { + width: $container-lg; + } + @include make-grid(lg); +} diff --git a/flexgrid-ie.scss b/flexgrid-ie.scss new file mode 100644 index 0000000..aeafdbd --- /dev/null +++ b/flexgrid-ie.scss @@ -0,0 +1,54 @@ +/*! ptb2.me/flexgrid | (c) 2014 Peter T Bosse II | Apache license */ +/*! Inspired by Bootstrap 3.2 | License: http://bit.ly/WzvaP8 */ + +$fixed-grid-width: 750px !default; +$grid-gutter-width: 30px !default; +$grid-columns: 12 !default; + +// Rename these classes if you don't need Bootstrap compatibility +$container: "container" !default; +$row: "row" !default; +$span: "col-sm-" !default; +$offset: "col-sm-offset-" !default; + +@mixin fixed-grid-widths($num-columns) { + $i: 1; + @while $i <= $num-columns { + .#{$span}#{$i} { + *width: $fixed-grid-width / $num-columns * $i - $grid-gutter-width; + } + @if $i < $num-columns { + .#{$offset}#{$i} { + *margin-left: $fixed-grid-width / $num-columns * $i; + } + } + $i: $i + 1; + } +} + +@mixin span-x($num-columns) { + $i: 1; + @while $i <= $num-columns { + .#{$span}#{$i} { + @extend %span; + } + $i: $i + 1; + } +} + +.#{$container} { + *width: $fixed-grid-width; +} + +.#{$row} { + *zoom: 1; +} + +%span { + *display: inline; + *float: left; +} + +@include span-x($grid-columns); + +@include fixed-grid-widths($grid-columns); diff --git a/flexgrid-reorder.scss b/flexgrid-reorder.scss new file mode 100644 index 0000000..121b6ac --- /dev/null +++ b/flexgrid-reorder.scss @@ -0,0 +1,3 @@ +$reorder: true; + +@import "_flexgrid"; diff --git a/flexgrid.scss b/flexgrid.scss new file mode 100644 index 0000000..f5920cd --- /dev/null +++ b/flexgrid.scss @@ -0,0 +1,3 @@ +$reorder: false; + +@import "_flexgrid"; From 05bff29bab40ed0337543884b7aa75efc64ff676 Mon Sep 17 00:00:00 2001 From: James Homer Date: Thu, 29 Oct 2015 17:48:09 +0000 Subject: [PATCH 3/3] fix ambiguity complaint --- flexgrid-reorder.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/flexgrid-reorder.scss b/flexgrid-reorder.scss index 121b6ac..bcbdd10 100644 --- a/flexgrid-reorder.scss +++ b/flexgrid-reorder.scss @@ -1,3 +1,3 @@ $reorder: true; -@import "_flexgrid"; +@import "_flexgrid.scss";