adding more glm-grid support via scss feature/grid
authorAnthony Talarico <talarico@gaslightmedia.com>
Thu, 1 Dec 2016 21:33:11 +0000 (16:33 -0500)
committerAnthony Talarico <talarico@gaslightmedia.com>
Thu, 1 Dec 2016 21:33:11 +0000 (16:33 -0500)
css/glm-grid.css
css/glm-grid.css.map
scss/_glm-grid.scss
scss/_settings.scss
scss/_utilities.scss [new file with mode: 0644]
scss/app.scss

index d0028dd..dde605f 100644 (file)
@@ -1,3 +1,3 @@
-.glm-small-1{width:5.33333rem}.glm-small-2{width:10.66667rem}.glm-small-3{width:16rem}.glm-small-4{width:21.33333rem}.glm-small-5{width:26.66667rem}.glm-small-6{width:32rem}.glm-small-7{width:37.33333rem}.glm-small-8{width:42.66667rem}.glm-small-9{width:48rem}.glm-small-10{width:53.33333rem}.glm-small-11{width:58.66667rem}.glm-small-12{width:64rem}.glm-medium-1{width:5.33333rem}.glm-medium-2{width:10.66667rem}.glm-medium-3{width:16rem}.glm-medium-4{width:21.33333rem}.glm-medium-5{width:26.66667rem}.glm-medium-6{width:32rem}.glm-medium-7{width:37.33333rem}.glm-medium-8{width:42.66667rem}.glm-medium-9{width:48rem}.glm-medium-10{width:53.33333rem}.glm-medium-11{width:58.66667rem}.glm-medium-12{width:64rem}.glm-large-1{width:5.33333rem}.glm-large-2{width:10.66667rem}.glm-large-3{width:16rem}.glm-large-4{width:21.33333rem}.glm-large-5{width:26.66667rem}.glm-large-6{width:32rem}.glm-large-7{width:37.33333rem}.glm-large-8{width:42.66667rem}.glm-large-9{width:48rem}.glm-large-10{width:53.33333rem}.glm-large-11{width:58.66667rem}.glm-large-12{width:64rem}
+.glm-small-1{width:5.33333rem}.glm-small-2{width:10.66667rem}.glm-small-3{width:16rem}.glm-small-4{width:21.33333rem}.glm-small-5{width:26.66667rem}.glm-small-6{width:32rem}.glm-small-7{width:37.33333rem}.glm-small-8{width:42.66667rem}.glm-small-9{width:48rem}.glm-small-10{width:53.33333rem}.glm-small-11{width:58.66667rem}.glm-small-12{width:64rem}.glm-medium-1{width:5.33333rem}.glm-medium-2{width:10.66667rem}.glm-medium-3{width:16rem}.glm-medium-4{width:21.33333rem}.glm-medium-5{width:26.66667rem}.glm-medium-6{width:32rem}.glm-medium-7{width:37.33333rem}.glm-medium-8{width:42.66667rem}.glm-medium-9{width:48rem}.glm-medium-10{width:53.33333rem}.glm-medium-11{width:58.66667rem}.glm-medium-12{width:64rem}.glm-large-1{width:5.33333rem}.glm-large-2{width:10.66667rem}.glm-large-3{width:16rem}.glm-large-4{width:21.33333rem}.glm-large-5{width:26.66667rem}.glm-large-6{width:32rem}.glm-large-7{width:37.33333rem}.glm-large-8{width:42.66667rem}.glm-large-9{width:48rem}.glm-large-10{width:53.33333rem}.glm-large-11{width:58.66667rem}.glm-large-12{width:64rem}@media only screen{.glm-small-1{width:8.33333%}.glm-small-2{width:16.66667%}.glm-small-3{width:25%}.glm-small-4{width:33.33333%}.glm-small-5{width:41.66667%}.glm-small-6{width:50%}.glm-small-7{width:58.33333%}.glm-small-8{width:66.66667%}.glm-small-9{width:75%}.glm-small-10{width:83.33333%}.glm-small-11{width:91.66667%}.glm-small-12{width:100%}}@media only screen and (min-width: 40.0625em){.glm-medium-1{width:8.33333%}.glm-medium-2{width:16.66667%}.glm-medium-3{width:25%}.glm-medium-4{width:33.33333%}.glm-medium-5{width:41.66667%}.glm-medium-6{width:50%}.glm-medium-7{width:58.33333%}.glm-medium-8{width:66.66667%}.glm-medium-9{width:75%}.glm-medium-10{width:83.33333%}.glm-medium-11{width:91.66667%}.glm-medium-12{width:100%}}@media only screen and (min-width: 64.0625em){.glm-large-1{width:8.33333%}.glm-large-2{width:16.66667%}.glm-large-3{width:25%}.glm-large-4{width:33.33333%}.glm-large-5{width:41.66667%}.glm-large-6{width:50%}.glm-large-7{width:58.33333%}.glm-large-8{width:66.66667%}.glm-large-9{width:75%}.glm-large-10{width:83.33333%}.glm-large-11{width:91.66667%}.glm-large-12{width:100%}}.glm-row{width:100%;position:relative}.glm-row::after{clear:both}.glm-row::before,.glm-row::after{content:" ";display:table}.glm-row::before,.glm-row::after{content:" ";display:table}.glm-row{margin-left:auto;margin-right:auto;max-width:64rem}.glm-column,.glm-columns{padding-left:0.9375rem;padding-right:0.9375rem;float:left}.glm-hide{display:none}.glm-left{float:left}.glm-right{float:right}.glm-text-center{text-align:center}.glm-text-right{text-align:right}.glm-text-left{text-align:left}.glm-text-justify{text-align:justify}.glm-horizontal-center{margin:auto 0}.glm-round{border-radius:1000px}.glm-radius{border-radius:4px}@media only screen{.glm-hide-for-small-up{display:none}.glm-small-up-text-right{text-align:right}.glm-small-up-text-left{text-align:left}.glm-small-up-text-center{text-align:center}.glm-small-up-text-justify{text-align:justify}}@media only screen and (max-width: 40em){.glm-hide-for-small-only{display:none}.glm-small-only-text-right{text-align:right}.glm-small-only-text-left{text-align:left}.glm-small-only-text-center{text-align:center}.glm-small-only-text-justify{text-align:justify}}@media only screen and (min-width: 0em) and (max-width: 64em){.glm-hide-for-medium-down{display:none}.glm-medium-down-text-right{text-align:right}.glm-medium-down-text-left{text-align:left}.glm-medium-down-text-center{text-align:center}.glm-medium-down-text-justify{text-align:justify}}@media only screen and (min-width: 40.063em) and (max-width: 64em){.glm-hide-for-medium-only{display:none}.glm-medium-only-text-right{text-align:right}.glm-medium-only-text-left{text-align:left}.glm-medium-only-text-center{text-align:center}.glm-medium-only-text-justify{text-align:justify}}@media only screen and (min-width: 40.063em){.glm-hide-for-medium-up{display:none}.glm-medium-up-text-right{text-align:right}.glm-medium-up-text-left{text-align:left}.glm-medium-up-text-center{text-align:center}.glm-medium-up-text-justify{text-align:justify}}@media only screen and (min-width: 64.063em){.glm-hide-for-large-up{display:none}.glm-large-up-text-right{text-align:right}.glm-large-up-text-left{text-align:left}.glm-large-up-text-center{text-align:center}.glm-large-up-text-justify{text-align:justify}}@media only screen and (min-width: 64.063em) and (max-width: 90em){.glm-hide-for-large-only{display:none}.glm-large-only-text-right{text-align:right}.glm-large-only-text-left{text-align:left}.glm-large-only-text-center{text-align:center}.glm-large-only-text-justify{text-align:justify}}
 
 /*# sourceMappingURL=glm-grid.css.map */
index 45152f4..70ffc6f 100644 (file)
@@ -1 +1 @@
-{"version":3,"file":"glm-grid.css","sources":["app.scss","_functions.scss","_settings.scss","_mixins.scss","_glm-grid.scss"],"sourcesContent":["@import 'functions';\n@import 'settings';\n@import 'mixins';\n@import 'glm-grid';\n","@function lower-bound($range){\n    @if length($range) <= 0 {\n        @return 0;\n    }\n    @return nth($range,1);\n}\n\n@function upper-bound($range) {\n    @if length($range) < 2 {\n        @return 999999999999;\n    }\n    @return nth($range, 2);\n}","$max-columns: 12;\n$max-width: 64rem;\n$prefix: glm;\n$sizes: \"small\" \"medium\" \"large\";\n$width-per-column: $max-width / $max-columns;\n\n$break-small: 0;\n$break-medium: 0;\n$break-large: 0;\n\n$small-range: (0em, 50em);\n$medium-range: (50.063em, $max-width);\n$large-range: (64.063em, 90em);\n$xlarge-range: (90.063em, 120em);\n$xxlarge-range: (120.063em, 99999999em);\n\n$screen: \"only screen\";\n\n$landscape: \"#{$screen} and (orientation: landscape)\";\n$portrait: \"#{$screen} and (orientation: portrait)\";\n\n$small-up: $screen;\n$small-only: \"#{$screen} and (max-width: #{upper-bound($small-range)})\";\n\n$medium-up: \"#{$screen} and (min-width:#{lower-bound($medium-range)})\";\n$medium-down: \"#{$screen} and (max-width:#{lower-bound($medium-range)})\";\n$medium-only: \"#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})\";\n\n$large-up: \"#{$screen} and (min-width:#{lower-bound($large-range)})\";\n$large-only: \"#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})\";\n\n$xlarge-up: \"#{$screen} and (min-width:#{lower-bound($xlarge-range)})\";\n$xlarge-only: \"#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})\";\n\n$xxlarge-up: \"#{$screen} and (min-width:#{lower-bound($xxlarge-range)})\";\n$xxlarge-only: \"#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})\";\n","@mixin box($color) {\n    display: block;\n    width: 200px;\n    height: 200px;\n}\n\n@each $size in $sizes {\n    @for $column from 1 through $max-columns {\n        $column-width: $width-per-column * $column;\n        .#{$prefix}-#{$size}-#{$column} {\n          width: #{$column-width};\n        }\n    }\n}","/*#glm-member-detail-takeback-mini {\n    //@include box(red);\n}\n\n@media #{$small-up} {\n    // This is how you would use a media query\n}\n\n@media screen and (max-width: $break-small) {\n    // Something needs to happen here eventually. Maybe?\n}\n@media only screen {\n\n  .glm-small-1 {\n    width: 8.33333%; }\n\n  .glm-small-2 {\n    width: 16.66667%; }\n\n  .glm-small-3 {\n    width: 25%; }\n\n  .glm-small-4 {\n    width: 33.33333%; }\n\n  .glm-small-5 {\n    width: 41.66667%; }\n\n  .glm-small-6 {\n    width: 50%; }\n\n  .glm-small-7 {\n    width: 58.33333%; }\n\n  .glm-small-8 {\n    width: 66.66667%; }\n\n  .glm-small-9 {\n    width: 75%; }\n\n  .glm-small-10 {\n    width: 83.33333%; }\n\n  .glm-small-11 {\n    width: 91.66667%; }\n\n  .glm-small-12 {\n    width: 100%; }\n\n}\n@media only screen and (min-width: 40.0625em){\n  .glm-medium-1 {\n    width: 8.33333%; }\n\n  .glm-medium-2 {\n    width: 16.66667%; }\n\n  .glm-medium-3 {\n    width: 25%; }\n\n  .glm-medium-4 {\n    width: 33.33333%; }\n\n  .glm-medium-5 {\n    width: 41.66667%; }\n\n  .glm-medium-6 {\n    width: 50%; }\n\n  .glm-medium-7 {\n    width: 58.33333%; }\n\n  .glm-medium-8 {\n    width: 66.66667%; }\n\n  .glm-medium-9 {\n    width: 75%; }\n\n  .glm-medium-10 {\n    width: 83.33333%; }\n\n  .glm-medium-11 {\n    width: 91.66667%; }\n\n  .glm-medium-12 {\n    width: 100%; }\n}\n@media only screen and (min-width: 64.0625em) {\n   .glm-large-1 {\n    width: 8.33333%; }\n\n  .glm-large-2 {\n    width: 16.66667%; }\n\n  .glm-large-3 {\n    width: 25%; }\n\n  .glm-large-4 {\n    width: 33.33333%; }\n\n  .glm-large-5 {\n    width: 41.66667%; }\n\n  .glm-large-6 {\n    width: 50%; }\n\n  .glm-large-7 {\n    width: 58.33333%; }\n\n  .glm-large-8 {\n    width: 66.66667%; }\n\n  .glm-large-9 {\n    width: 75%; }\n\n  .glm-large-10 {\n    width: 83.33333%; }\n\n  .glm-large-11 {\n    width: 91.66667%; }\n\n  .glm-large-12 {\n    width: 100%; }\n}\n.glm-row {\n    width: 100%;\n    position: relative;\n    &::after {\n        clear: both;\n    }\n}\n.glm-row::before, .glm-row::after {\n    content: \" \";\n    display: table;\n}\n*, *::before, *::after {\n    box-sizing: inherit;\n}\n.glm-row::before, .glm-row::after {\n    content: \" \";\n    display: table;\n}\n*, *::before, *::after {\n    box-sizing: inherit;\n}\n.glm-row {\n    clear: both;\n}\n.glm-row {\n    margin-left: auto;\n    margin-right: auto;\n    max-width: $max-width;\n}\nglm-column, glm-columns{\n  padding-left: 0.9375rem;\n  padding-right: 0.9375rem;\n  width: 100%;\n  float: left; \n}\n*/\n"],"mappings":"AGSQ,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,UAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,UAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,cAAc,AAAd,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,cAAc,AAAd,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,cAAc,AAAd,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,UAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,YAAY,AAAZ,CACE,KAAK,CAAC,KAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,WAAC,CACR,AAFD,AAAA,aAAa,AAAb,CACE,KAAK,CAAC,KAAC,CACR","names":[],"sourceRoot":"/source/"}
\ No newline at end of file
+{"version":3,"file":"glm-grid.css","sources":["app.scss","_functions.scss","_settings.scss","_mixins.scss","_glm-grid.scss","_utilities.scss"],"sourcesContent":["@import 'functions';\n@import 'settings';\n@import 'mixins';\n@import 'glm-grid';\n@import 'utilities';\n","@function lower-bound($range){\n    @if length($range) <= 0 {\n        @return 0;\n    }\n    @return nth($range,1);\n}\n\n@function upper-bound($range) {\n    @if length($range) < 2 {\n        @return 999999999999;\n    }\n    @return nth($range, 2);\n}","$max-columns: 12;\n$max-width: 64rem;\n$prefix: glm;\n$sizes: \"small\" \"medium\" \"large\";\n\n$width-per-column: $max-width / $max-columns;\n\n$break-small: 0;\n$break-medium: 0;\n$break-large: 0;\n\n$small-range: (0em, 40em);\n$medium-range: (40.063em, 64em);\n$large-range: (64.063em, 90em);\n$xlarge-range: (90.063em, 120em);\n$xxlarge-range: (120.063em, 99999999em);\n\n$screen: \"only screen\";\n\n$landscape: \"#{$screen} and (orientation: landscape)\";\n$portrait: \"#{$screen} and (orientation: portrait)\";\n\n$small-up: $screen;\n$small-only: \"#{$screen} and (max-width: #{upper-bound($small-range)})\";\n\n$medium-up: \"#{$screen} and (min-width:#{lower-bound($medium-range)})\";\n$medium-only: \"#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})\";\n\n$medium-down: \"#{$screen} and (min-width:#{lower-bound($small-range)}) and (max-width:#{upper-bound($medium-range)})\";\n\n$large-up: \"#{$screen} and (min-width:#{lower-bound($large-range)})\";\n$large-only: \"#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})\";\n\n$large-down: \"#{$screen} and (min-width:#{lower-bound($small-range)}) and (max-width:#{upper-bound($large-range)})\";\n\n$xlarge-up: \"#{$screen} and (min-width:#{lower-bound($xlarge-range)})\";\n$xlarge-only: \"#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})\";\n\n$xxlarge-up: \"#{$screen} and (min-width:#{lower-bound($xxlarge-range)})\";\n$xxlarge-only: \"#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})\";\n\n// Legacy\n$small: $medium-up;\n$medium: $medium-up;\n$large: $large-up;\n\n$breakpoint-values: '#{$small-up}' '#{$small-only}' '#{$medium-down}' '#{$medium-only}' '#{$medium-up}' '#{$large-up}' '#{$large-only}';\n$breakpoints: 'small-up' 'small-only' 'medium-down' 'medium-only' 'medium-up' 'large-up' 'large-only';","@mixin box($color) {\n    display: block;\n    width: 200px;\n    height: 200px;\n}\n\n@each $size in $sizes {\n    @for $column from 1 through $max-columns {\n        $column-width: $width-per-column * $column;\n        .#{$prefix}-#{$size}-#{$column} {\n          width: #{$column-width};\n        }\n    }\n}","#glm-member-detail-takeback-mini {\n    //@include box(red);\n}\n\n@media #{$small-up} {\n    // This is how you would use a media query\n}\n\n@media screen and (max-width: $break-small) {\n    // Something needs to happen here eventually. Maybe?\n}\n@media only screen {\n\n  .glm-small-1 {\n    width: 8.33333%; }\n\n  .glm-small-2 {\n    width: 16.66667%; }\n\n  .glm-small-3 {\n    width: 25%; }\n\n  .glm-small-4 {\n    width: 33.33333%; }\n\n  .glm-small-5 {\n    width: 41.66667%; }\n\n  .glm-small-6 {\n    width: 50%; }\n\n  .glm-small-7 {\n    width: 58.33333%; }\n\n  .glm-small-8 {\n    width: 66.66667%; }\n\n  .glm-small-9 {\n    width: 75%; }\n\n  .glm-small-10 {\n    width: 83.33333%; }\n\n  .glm-small-11 {\n    width: 91.66667%; }\n\n  .glm-small-12 {\n    width: 100%; }\n\n}\n@media only screen and (min-width: 40.0625em){\n  .glm-medium-1 {\n    width: 8.33333%; }\n\n  .glm-medium-2 {\n    width: 16.66667%; }\n\n  .glm-medium-3 {\n    width: 25%; }\n\n  .glm-medium-4 {\n    width: 33.33333%; }\n\n  .glm-medium-5 {\n    width: 41.66667%; }\n\n  .glm-medium-6 {\n    width: 50%; }\n\n  .glm-medium-7 {\n    width: 58.33333%; }\n\n  .glm-medium-8 {\n    width: 66.66667%; }\n\n  .glm-medium-9 {\n    width: 75%; }\n\n  .glm-medium-10 {\n    width: 83.33333%; }\n\n  .glm-medium-11 {\n    width: 91.66667%; }\n\n  .glm-medium-12 {\n    width: 100%; }\n}\n@media only screen and (min-width: 64.0625em) {\n   .glm-large-1 {\n    width: 8.33333%; }\n\n  .glm-large-2 {\n    width: 16.66667%; }\n\n  .glm-large-3 {\n    width: 25%; }\n\n  .glm-large-4 {\n    width: 33.33333%; }\n\n  .glm-large-5 {\n    width: 41.66667%; }\n\n  .glm-large-6 {\n    width: 50%; }\n\n  .glm-large-7 {\n    width: 58.33333%; }\n\n  .glm-large-8 {\n    width: 66.66667%; }\n\n  .glm-large-9 {\n    width: 75%; }\n\n  .glm-large-10 {\n    width: 83.33333%; }\n\n  .glm-large-11 {\n    width: 91.66667%; }\n\n  .glm-large-12 {\n    width: 100%; }\n}\n.glm-row {\n    width: 100%;\n    position: relative;\n    &::after {\n        clear: both;\n    }\n}\n.glm-row::before, .glm-row::after {\n    content: \" \";\n    display: table;\n}\n.glm-row::before, .glm-row::after {\n    content: \" \";\n    display: table;\n}\n.glm-row {\n    margin-left: auto;\n    margin-right: auto;\n    max-width: $max-width;\n}\n.glm-column, .glm-columns{\n  padding-left: 0.9375rem;\n  padding-right: 0.9375rem;\n  float: left; \n}\n\n",".glm-hide{\n    display: none;\n}\n.glm-left{\n    float: left;\n}\n.glm-right{\n    float: right;\n}\n.glm-text-center{\n    text-align: center;\n}\n.glm-text-right{\n    text-align: right;\n}\n.glm-text-left{\n    text-align: left;\n}\n.glm-text-justify{\n    text-align: justify;\n}\n.glm-horizontal-center{\n    margin: auto 0;\n}\n.glm-round{\n    border-radius: 1000px;\n}\n.glm-radius{\n    border-radius: 4px;\n}\n\n// create the utility classes based on the breakpoints string literal; small-only, large-up etc\n// use the breakpoint values for the media queries\n@each $bp-values, $bp in zip($breakpoint-values, $breakpoints){\n    @media #{$bp-values}{\n        .glm-hide-for-#{$bp}{\n            display: none;\n        }\n        .glm-#{$bp}-text-right{\n            text-align: right;\n        }\n        .glm-#{$bp}-text-left{\n            text-align: left;\n        }\n        .glm-#{$bp}-text-center{\n            text-align: center;\n        }\n        .glm-#{$bp}-text-justify{\n            text-align: justify;\n        }\n    }\n}\n"],"mappings":"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","names":[],"sourceRoot":"/source/"}
\ No newline at end of file
index d5a95d9..d2041be 100644 (file)
@@ -1,4 +1,4 @@
-/*#glm-member-detail-takeback-mini {
+#glm-member-detail-takeback-mini {
     //@include box(red);
 }
 
     content: " ";
     display: table;
 }
-*, *::before, *::after {
-    box-sizing: inherit;
-}
 .glm-row::before, .glm-row::after {
     content: " ";
     display: table;
 }
-*, *::before, *::after {
-    box-sizing: inherit;
-}
-.glm-row {
-    clear: both;
-}
 .glm-row {
     margin-left: auto;
     margin-right: auto;
     max-width: $max-width;
 }
-glm-column, glm-columns{
+.glm-column, .glm-columns{
   padding-left: 0.9375rem;
   padding-right: 0.9375rem;
-  width: 100%;
   float: left; 
 }
-*/
+
index 0604f94..5b45d73 100644 (file)
@@ -2,14 +2,15 @@ $max-columns: 12;
 $max-width: 64rem;
 $prefix: glm;
 $sizes: "small" "medium" "large";
+
 $width-per-column: $max-width / $max-columns;
 
 $break-small: 0;
 $break-medium: 0;
 $break-large: 0;
 
-$small-range: (0em, 50em);
-$medium-range: (50.063em, $max-width);
+$small-range: (0em, 40em);
+$medium-range: (40.063em, 64em);
 $large-range: (64.063em, 90em);
 $xlarge-range: (90.063em, 120em);
 $xxlarge-range: (120.063em, 99999999em);
@@ -23,14 +24,25 @@ $small-up: $screen;
 $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
 
 $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
-$medium-down: "#{$screen} and (max-width:#{lower-bound($medium-range)})";
 $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
 
+$medium-down: "#{$screen} and (min-width:#{lower-bound($small-range)}) and (max-width:#{upper-bound($medium-range)})";
+
 $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
 $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
 
+$large-down: "#{$screen} and (min-width:#{lower-bound($small-range)}) and (max-width:#{upper-bound($large-range)})";
+
 $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
 $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";
 
 $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
 $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
+
+// Legacy
+$small: $medium-up;
+$medium: $medium-up;
+$large: $large-up;
+
+$breakpoint-values: '#{$small-up}' '#{$small-only}' '#{$medium-down}' '#{$medium-only}' '#{$medium-up}' '#{$large-up}' '#{$large-only}';
+$breakpoints: 'small-up' 'small-only' 'medium-down' 'medium-only' 'medium-up' 'large-up' 'large-only';
\ No newline at end of file
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
new file mode 100644 (file)
index 0000000..4532b82
--- /dev/null
@@ -0,0 +1,52 @@
+.glm-hide{
+    display: none;
+}
+.glm-left{
+    float: left;
+}
+.glm-right{
+    float: right;
+}
+.glm-text-center{
+    text-align: center;
+}
+.glm-text-right{
+    text-align: right;
+}
+.glm-text-left{
+    text-align: left;
+}
+.glm-text-justify{
+    text-align: justify;
+}
+.glm-horizontal-center{
+    margin: auto 0;
+}
+.glm-round{
+    border-radius: 1000px;
+}
+.glm-radius{
+    border-radius: 4px;
+}
+
+// create the utility classes based on the breakpoints string literal; small-only, large-up etc
+// use the breakpoint values for the media queries
+@each $bp-values, $bp in zip($breakpoint-values, $breakpoints){
+    @media #{$bp-values}{
+        .glm-hide-for-#{$bp}{
+            display: none;
+        }
+        .glm-#{$bp}-text-right{
+            text-align: right;
+        }
+        .glm-#{$bp}-text-left{
+            text-align: left;
+        }
+        .glm-#{$bp}-text-center{
+            text-align: center;
+        }
+        .glm-#{$bp}-text-justify{
+            text-align: justify;
+        }
+    }
+}
index e810002..eb6e7d5 100644 (file)
@@ -2,3 +2,4 @@
 @import 'settings';
 @import 'mixins';
 @import 'glm-grid';
+@import 'utilities';