GLM-grid coding, not yet implemented

These are the styles for our new glm-grid, intended to make us
independent from Foundation, but still giving us the ability to
use equivalent functionality on our view files.

diff --git a/css/front.css b/css/front.css
index 42664cd..0786d26 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -705,10 +705,14 @@ input[type="submit"].glm-member-button {
 .glm-member-detail-content-data {
     padding: 10px;
     display: none;
+    clear: both;
 }
 #glm-member-detail-description-container {
 /*    display: block;*/
 }
+#glm-member-detail-description {
+/*    margin-top: 10px;*/
+}
 #glm-member-detail-fullprofile-toggle {
     text-align: center;
     padding: 3px 6px;
@@ -737,6 +741,7 @@ input[type="submit"].glm-member-button {
     color: #57b649;
     font-size: 18px;
     padding: 10px;
+    float: left;
 }
 #glm-member-detail-data-container > .glm-member-detail-content-toggle:nth-child(n-1) {
     border-width: 0 0 1px 0;
@@ -892,6 +897,12 @@ input[type="submit"].glm-member-button {
         padding: 5px;
     }
 }
+glm-member-detail-content-toggle {
+    float: left;
+}
+.glm-member-detail-link-to-top {
+    float: right;
+}
 .glm-member-detail-live-cam-descr,
 .glm-member-detail-video-descr {
     margin-top: 20px;

diff --git a/css/glm-grid.css b/css/glm-grid.css
index 7466a85..ab0f8b7 100644 (file)
--- a/css/glm-grid.css
+++ b/css/glm-grid.css
@@ -1,2 +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-row{width:100%;position:relative}.glm-row::after{clear:both}.glm-row::before,.glm-row::after{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:64rem}
 
 /*# sourceMappingURL=glm-grid.css.map */

diff --git a/css/glm-grid.css.map b/css/glm-grid.css.map
index 5cd2645..002251b 100644 (file)
--- a/css/glm-grid.css.map
+++ b/css/glm-grid.css.map
@@ -1 +1 @@
-{"version":3,"file":"glm-grid.css","sources":["app.scss","_glm-grid.scss","_settings.scss"],"sourcesContent":["@import 'glm-grid';\n@import 'settings';","",""],"mappings":"","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"],"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.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}"],"mappings":"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","names":[],"sourceRoot":"/source/"}
\ No newline at end of file

diff --git a/scss/_functions.scss b/scss/_functions.scss
new file mode 100644 (file)
index 0000000..e8c8ffc
--- /dev/null
+++ b/scss/_functions.scss
@@ -0,0 +1,13 @@
+@function lower-bound($range){
+    @if length($range) <= 0 {
+        @return 0;
+    }
+    @return nth($range,1);
+}
+
+@function upper-bound($range) {
+    @if length($range) < 2 {
+        @return 999999999999;
+    }
+    @return nth($range, 2);
+}
\ No newline at end of file

diff --git a/scss/_glm-grid.scss b/scss/_glm-grid.scss
index e69de29..6a1f43d 100644 (file)
--- a/scss/_glm-grid.scss
+++ b/scss/_glm-grid.scss
@@ -0,0 +1,40 @@
+#glm-member-detail-takeback-mini {
+    //@include box(red);
+}
+
+@media #{$small-up} {
+    // This is how you would use a media query
+}
+
+@media screen and (max-width: $break-small) {
+    // Something needs to happen here eventually. Maybe?
+}
+.glm-row {
+    width: 100%;
+    position: relative;
+    &::after {
+        clear: both;
+    }
+}
+.glm-row::before, .glm-row::after {
+    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;
+}
\ No newline at end of file

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
new file mode 100644 (file)
index 0000000..1f9e973
--- /dev/null
+++ b/scss/_mixins.scss
@@ -0,0 +1,14 @@
+@mixin box($color) {
+    display: block;
+    width: 200px;
+    height: 200px;
+}
+
+@each $size in $sizes {
+    @for $column from 1 through $max-columns {
+        $column-width: $width-per-column * $column;
+        .#{$prefix}-#{$size}-#{$column} {
+          width: #{$column-width};
+        }
+    }
+}
\ No newline at end of file

diff --git a/scss/_settings.scss b/scss/_settings.scss
index e69de29..0604f94 100644 (file)
--- a/scss/_settings.scss
+++ b/scss/_settings.scss
@@ -0,0 +1,36 @@
+$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);
+$large-range: (64.063em, 90em);
+$xlarge-range: (90.063em, 120em);
+$xxlarge-range: (120.063em, 99999999em);
+
+$screen: "only screen";
+
+$landscape: "#{$screen} and (orientation: landscape)";
+$portrait: "#{$screen} and (orientation: portrait)";
+
+$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)})";
+
+$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)})";
+
+$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)})";

diff --git a/scss/app.scss b/scss/app.scss
index 95c71f3..e810002 100644 (file)
--- a/scss/app.scss
+++ b/scss/app.scss
@@ -1,2 +1,4 @@
+@import 'functions';
+@import 'settings';
+@import 'mixins';
 @import 'glm-grid';
-@import 'settings';
\ No newline at end of file