Add fluid grid implementation and container tweaks [fixes #113]

ucla-oarc-web · Oct 16, 2012 · 5bf6181 · 5bf6181
1 parent 87bc102
commit 5bf6181
Show file tree

Hide file tree

Showing 12 changed files with 168 additions and 25 deletions.
diff --git a/demo/base/grid.html b/demo/base/grid.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+
+    <head>
+        <title>Grid</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <link rel="stylesheet" href="../../build/css/blocks.css">
+    </head>
+
+    <body>
+
+        <h1>Grid</h1>
+
+        <div class="container">
+
+            <div class="row">
+                <div class="panel-1">
+                    .panel-1
+                </div>
+                <div class="panel-1">
+                    .panel-1
+                </div>
+                <div class="panel-1">
+                    .panel-1
+                </div>
+                <div class="panel-1">
+                    .panel-1
+                </div>
+                <div class="panel-1">
+                    .panel-1
+                </div>
+                <div class="panel-1">
+                    .panel-1
+                </div>
+                <div class="panel-1">
+                    .panel-1
+                </div>
+                <div class="panel-1">
+                    .panel-1
+                </div>
+                <div class="panel-1">
+                    .panel-1
+                </div>
+                <div class="panel-1">
+                    .panel-1
+                </div>
+                <div class="panel-1">
+                    .panel-1
+                </div>
+                <div class="panel-1">
+                    .panel-1
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="panel-6">
+                    .panel-6
+                </div>
+                <div class="panel-2">
+                    .panel-2
+                </div>
+                <div class="panel-4">
+                    .panel-4
+                </div>
+            </div>
+            <div class="row">
+                <div class="panel-6">
+                    .panel-6
+                </div>
+                <div class="panel-6">
+                    .panel-6
+                </div>
+            </div>
+            <div class="row">
+                <div class="panel-12 important">
+                    .panel-12
+                </div>
+            </div>
+        </div>
+
+    </body>
+
+</html>
diff --git a/src/adapter/bootstrap/_util.scss b/src/adapter/bootstrap/_util.scss
diff --git a/src/adapter/bootstrap/_variables.scss b/src/adapter/bootstrap/_variables.scss
@@ -15,4 +15,7 @@ $btnDangerBackground:               $color-mood-danger-background !default;
 $btnDangerBackgroundHighlight:      $color-mood-danger-background-shadow !default;
 
 $btnInverseBackground:              $color-mood-inverse-background !default;
-$btnInverseBackgroundHighlight:     $color-mood-inverse-background-shadow !default;
+$btnInverseBackgroundHighlight:     $color-mood-inverse-background-shadow !default;
+
+$fluidGridColumnWidth:              $structure-panels-width;
+$fluidGridGutterWidth:              $structure-panels-gutter;
diff --git a/src/adapter/bootstrap/base/structure/_panel.scss b/src/adapter/bootstrap/base/structure/_panel.scss
@@ -0,0 +1,27 @@
+@mixin -base-structure-grid-panel {
+
+    @media screen and (min-width: $breakpoint-small) {
+
+        [class*="panel-"] {
+            float: left;
+            &:not(:first-child){
+                margin-left: $structure-panels-gutter;
+            }
+        }
+
+        $i: $structure-panels;
+        @while $i > 0 {
+            .panel-#{$i} { 
+                @include grid-fluid-span($i, $structure-panels-width, $structure-panels-gutter); 
+            }
+            $i: ($i - 1);
+        }
+
+    }
+
+    @media screen and (max-width: $breakpoint-small - 1) {
+        [class*="panel-"] {
+            width: 100%;
+        }
+    }
+}
diff --git a/src/adapter/bootstrap/base/structure/_row.scss b/src/adapter/bootstrap/base/structure/_row.scss
@@ -0,0 +1,6 @@
+@mixin -base-structure-grid-row {
+    &:not(.bootstrap){
+        @extend .row-fluid;
+        margin-left: 0;
+    }
+}
diff --git a/src/core/adapter/base/_variables.scss b/src/core/adapter/base/_variables.scss
@@ -1,11 +1,20 @@
 /**************************************************************************** 
- * Dimensions and Breakpoints 
+ * Breakpoints 
  */
 
-$base-breakpoint-small:     768px !default;     /* width-based */
-$base-breakpoint-medium:    978px !default;     /* width-based */
+$breakpoint-small:     768px !default;     /* width-based */
+$breakpoint-medium:    978px !default;     /* width-based */
 
-$max-container-width:       960px !default;
+/****************************************************************************
+ * Structure
+ */
+
+$structure-container-gutter:    2%;           /* minimum spacing on either side of container */
+$structure-container-width-max: 1024px !default; /* pixel-based to limit max size (or false) */
+$structure-panels:              12 !default;
+$structure-panels-gutter:       2.5641% !default;
+$structure-panels-width:        (100% - ($structure-panels - 1) * $structure-panels-gutter)
+                                / $structure_panels;
 
 /****************************************************************************
  * Branding Colors

diff --git a/src/core/adapter/base/structure/_container.scss b/src/core/adapter/base/structure/_container.scss
@@ -1,3 +1,19 @@
 @mixin -base-structure-container {
-    max-width: 960px;
+    &:not(.bootstrap) {
+        width: 100%;
+        margin: auto;
+        @if $structure-container-width-max {
+            @media screen 
+                and (max-width: $structure-container-width-max 
+                                    + $structure-container-width-max 
+                                        * (($structure-container-gutter*2)/100%) )
+                and (min-width: 768px) /* body applies its own padding in bootstrap */
+            {                                       
+                width: 100% - ($structure-container-gutter*2);
+                padding-left: $structure-container-gutter;
+                padding-right: $structure-container-gutter;
+            }
+            max-width: $structure-container-width-max;
+        }
+    }
 }
diff --git a/src/core/adapter/base/structure/_panel.scss b/src/core/adapter/base/structure/_panel.scss
@@ -0,0 +1,3 @@
+@mixin -base-structure-grid-panel {
+
+}
diff --git a/src/core/adapter/base/structure/_row.scss b/src/core/adapter/base/structure/_row.scss
@@ -0,0 +1,3 @@
+@mixin -base-structure-grid-row {
+
+}
diff --git a/src/core/adapter/base/visibility/responsive/_hide.scss b/src/core/adapter/base/visibility/responsive/_hide.scss
@@ -1,22 +1,22 @@
 @mixin -base-visibility-hide-small {
 
-    @media screen and (max-width: $base-breakpoint-small - 1) {
+    @media screen and (max-width: $breakpoint-small - 1) {
         display: none;
     }
 
 }
 
 @mixin -base-visibility-hide-medium {
 
-    @media screen and (min-width: $base-breakpoint-small) and (max-width: $base-breakpoint-medium - 1) {
+    @media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-medium - 1) {
         display: none;
     }
 
 }
 
 @mixin -base-visibility-hide-large {
 
-    @media screen and (min-width: $base-breakpoint-medium) {
+    @media screen and (min-width: $breakpoint-medium) {
         display: none;
     }
 

diff --git a/src/core/adapter/base/visibility/responsive/_show.scss b/src/core/adapter/base/visibility/responsive/_show.scss
@@ -1,26 +1,26 @@
 @mixin -base-visibility-show-small {
 
-    @media screen and (min-width: $base-breakpoint-small) {
+    @media screen and (min-width: $breakpoint-small) {
         display: none;  
     }
 
 }
 
 @mixin -base-visibility-show-medium {
 
-    @media screen and (max-width: $base-breakpoint-small - 1) {
+    @media screen and (max-width: $breakpoint-small - 1) {
         display: none;  
     }
 
-    @media screen and (min-width: $base-breakpoint-medium) {
+    @media screen and (min-width: $breakpoint-medium) {
         display: none;  
     }
 
 }
 
 @mixin -base-visibility-show-large {
 
-    @media screen and (max-width: $base-breakpoint-medium - 1) {
+    @media screen and (max-width: $breakpoint-medium - 1) {
         display: none;  
     }
 

diff --git a/src/core/definitions/base/structure/_grid.scss b/src/core/definitions/base/structure/_grid.scss
@@ -0,0 +1,5 @@
+.row {
+    @include -base-structure-grid-row;
+}
+
+@include -base-structure-grid-panel;