From c7fdc0c854bf84c3a6de185547e749a9c4a1af06 Mon Sep 17 00:00:00 2001
From: Nikolas Wise <nikolaswise@gmail.com>
Date: Fri, 29 Aug 2014 10:19:01 -0700
Subject: [PATCH 1/2] name space all files properly

---
 docs/source/assets/stylesheets/all.css.scss   |  53 +++
 docs/source/index.html.erb                    | 307 +++++++++++++++++-
 lib/stylesheets/calcite-web.scss              |  18 +-
 .../{_modular-scale.scss => _type-scale.scss} |   0
 .../calcite-web/type/type-cabinet.scss        |   2 +-
 ..._appearance.scss => _util-appearance.scss} |   0
 ..._box-sizing.scss => _util-box-sizing.scss} |   0
 .../utils/{_calc.scss => _util-calc.scss}     |   0
 .../{_clearfix.scss => _util-clearfix.scss}   |   0
 .../{_prefixer.scss => _util-prefixer.scss}   |   0
 ..._responsive.scss => _util-responsive.scss} |   0
 .../{_transform.scss => _util-transform.scss} |   0
 ..._transition.scss => _util-transition.scss} |   0
 ..._visibility.scss => _util-visibility.scss} |   0
 14 files changed, 369 insertions(+), 11 deletions(-)
 rename lib/stylesheets/calcite-web/type/{_modular-scale.scss => _type-scale.scss} (100%)
 rename lib/stylesheets/calcite-web/utils/{_appearance.scss => _util-appearance.scss} (100%)
 rename lib/stylesheets/calcite-web/utils/{_box-sizing.scss => _util-box-sizing.scss} (100%)
 rename lib/stylesheets/calcite-web/utils/{_calc.scss => _util-calc.scss} (100%)
 rename lib/stylesheets/calcite-web/utils/{_clearfix.scss => _util-clearfix.scss} (100%)
 rename lib/stylesheets/calcite-web/utils/{_prefixer.scss => _util-prefixer.scss} (100%)
 rename lib/stylesheets/calcite-web/utils/{_responsive.scss => _util-responsive.scss} (100%)
 rename lib/stylesheets/calcite-web/utils/{_transform.scss => _util-transform.scss} (100%)
 rename lib/stylesheets/calcite-web/utils/{_transition.scss => _util-transition.scss} (100%)
 rename lib/stylesheets/calcite-web/utils/{_visibility.scss => _util-visibility.scss} (100%)

diff --git a/docs/source/assets/stylesheets/all.css.scss b/docs/source/assets/stylesheets/all.css.scss
index f9f600e09..5b227a4bb 100644
--- a/docs/source/assets/stylesheets/all.css.scss
+++ b/docs/source/assets/stylesheets/all.css.scss
@@ -1,2 +1,55 @@
 @import "github";
 @import "calcite-web";
+
+// TEST
+.grid-example [class*="column-"] {
+  span {
+    width: 100%;
+    display: block;
+    color: $white;
+    background-color: rgba(blue, 0.6);
+    font-family: monospace;
+    padding-top: 2em;
+    padding-bottom: 2em;
+    margin-top: 1em;
+    text-align: center;
+  }
+}
+
+.nested-demo [class*="column-"] {
+  [class*="column-"] {
+    span {
+      background-color: rgba(blue, 0.4);
+    }
+    [class*="column-"] {
+      span {
+        background-color: rgba(blue, 0.2);
+      }
+      [class*="column-"] {
+        span {
+          background-color: rgba(blue, 0.1);
+        }
+      }
+    }
+  }
+}
+
+.gridlines {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -10;
+  div {
+  height: 100vh;
+  }
+  span {
+  @include box-sizing(border-box);
+  height: 100vh;
+  width: 100%;
+  display: inline-block;
+  background-color: rgba($gray, 0.05);
+  border: 1px solid $lighter-gray;
+  }
+}
\ No newline at end of file
diff --git a/docs/source/index.html.erb b/docs/source/index.html.erb
index d5e7b16ea..18555851b 100644
--- a/docs/source/index.html.erb
+++ b/docs/source/index.html.erb
@@ -5,4 +5,309 @@ title: Homepage
 <%# a sample styleguide block with modifier classes %>
 <% styleguide "1.1" do %>
   <div class="$modifier_class">Sample Component</div>
-<% end %>
\ No newline at end of file
+<% end %>
+
+ <div class="container grid-example leader-1">
+    <h1>Avenir Next</h1>
+    <p>
+      Frutiger
+    </p>
+    <p class="secondary-face">
+      Charter
+    </p>
+ </div>
+
+<!-- TEST -->
+ <div class="container grid-example leader-1">
+     <div class="column-24"><span>24</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+     <div class="column-1"><span>1</span></div>
+ </div>
+
+ <div class="container leader-1">
+   <div class="column-14 pre-3">
+     <div class="content-area">
+       {{md 'site/source/copy/columns.md'}}
+     </div>
+   </div>
+ </div>
+
+ <div class="container grid-example leader-1">
+     <div class="column-1"><span>1</span></div>
+     <div class="column-23"><span>.column-23</span></div>
+     <div class="column-2"><span>2</span></div>
+     <div class="column-22"><span>.column-22</span></div>
+     <div class="column-3"><span>3</span></div>
+     <div class="column-21"><span>.column-21</span></div>
+     <div class="column-4"><span>4</span></div>
+     <div class="column-20"><span>.column-20</span></div>
+     <div class="column-5"><span>.column-5</span></div>
+     <div class="column-19"><span>.column-19</span></div>
+     <div class="column-6"><span>.column-6</span></div>
+     <div class="column-18"><span>.column-18</span></div>
+     <div class="column-7"><span>.column-7</span></div>
+     <div class="column-17"><span>.column-17</span></div>
+     <div class="column-8"><span>.column-8</span></div>
+     <div class="column-16"><span>.column-16</span></div>
+     <div class="column-9"><span>.column-9</span></div>
+     <div class="column-15"><span>.column-15</span></div>
+     <div class="column-10"><span>.column-10</span></div>
+     <div class="column-14"><span>.column-14</span></div>
+     <div class="column-11"><span>.column-11</span></div>
+     <div class="column-13"><span>.column-13</span></div>
+     <div class="column-12"><span>.column-12</span></div>
+     <div class="column-12"><span>.column-12</span></div>
+ </div>
+
+ <div class="container leader-5">
+   <div class="column-14 pre-3">
+     <div class="content-area">
+       {{md 'site/source/copy/responsive-columns.md'}}
+     </div>
+   </div>
+ </div>
+
+ <div class="container grid-example leader-1">
+  <div class="column-24">
+     <div class="column-1 tablet-column-4 phone-column-1">
+       <span class="tablet-hide">1</span>
+       <span class="tablet-only">.tablet-column-4</span>
+       <span class="phone-show">.phone-column-1</span>
+     </div>
+     <div class="column-23 tablet-column-8 phone-column-5">
+       <span class="tablet-hide">.column-23</span>
+       <span class="tablet-only">.tablet-column-8</span>
+       <span class="phone-show">.phone-column-5</span>
+     </div>
+   </div>
+
+   <div class="column-24">
+     <div class="column-2 tablet-column-8 phone-column-5">
+       <span class="tablet-hide">2</span>
+       <span class="tablet-only">.tablet-column-8</span>
+       <span class="phone-show">.phone-column-5</span>
+     </div>
+     <div class="column-22 tablet-column-4 phone-column-1">
+       <span class="tablet-hide">.column-22</span>
+       <span class="tablet-only">.tablet-column-4</span>
+       <span class="phone-show">.phone-column-1</span>
+     </div>
+   </div>
+
+   <div class="column-24">
+     <div class="column-3 tablet-column-5 phone-column-2">
+       <span class="tablet-hide">.column-3</span>
+       <span class="tablet-only">.tablet-5</span>
+       <span class="phone-show">.phone-column-2</span>
+     </div>
+     <div class="column-21 tablet-column-7 phone-column-4">
+       <span class="tablet-hide">.column-21</span>
+       <span class="tablet-only">.tablet-7</span>
+       <span class="phone-show">.phone-column-4</span>
+     </div>
+   </div>
+
+   <div class="column-24">
+     <div class="column-4 tablet-column-7 phone-column-4">
+       <span class="tablet-hide">.column-4</span>
+       <span class="tablet-only">.tablet-7</span>
+       <span class="phone-show">.phone-column-4</span>
+     </div>
+     <div class="column-20 tablet-column-5 phone-column-2">
+       <span class="tablet-hide">.column-20</span>
+       <span class="tablet-only">.tablet-5</span>
+       <span class="phone-show">.phone-column-2</span>
+     </div>
+   </div>
+
+   <div class="column-24">
+     <div class="column-5 tablet-column-6 phone-column-3">
+       <span class="tablet-hide">.column-5</span>
+       <span class="tablet-only">.tablet-6</span>
+       <span class="phone-show">.phone-column-3</span>
+     </div>
+     <div class="column-19 tablet-column-6 phone-column-3">
+       <span class="tablet-hide">.column-19</span>
+       <span class="tablet-only">.tablet-6</span>
+       <span class="phone-show">.phone-column-3</span>
+     </div>
+   </div>
+
+   <div class="column-24">
+     <div class="column-6 tablet-column-6 phone-column-3">
+       <span class="tablet-hide">.column-6</span>
+       <span class="tablet-only">.tablet-6</span>
+       <span class="phone-show">.phone-column-3</span>
+     </div>
+     <div class="column-18 column-6 tablet-column-6 phone-column-3">
+       <span class="tablet-hide">.column-18</span>
+       <span class="tablet-only">.tablet-6</span>
+       <span class="phone-show">.phone-column-3</span>
+     </div>
+   </div>
+ </div>
+
+ <div class="container leader-5">
+   <div class="column-14 pre-3">
+     <div class="content-area">
+       {{md 'site/source/copy/nested-columns.md'}}
+     </div>
+   </div>
+ </div>
+
+ <div class="container grid-example nested-demo leader-1">
+ <div class="column-18 tablet-column-8">
+     <span class='tablet-hide'>.column-18</span>
+     <span class='tablet-show'>.tablet-column-8</span>
+
+     <div class="column-4 tablet-column-4">
+       <span class='tablet-hide'>.column-4</span>
+       <span class='tablet-show'>.tablet-column-4</span>
+
+       <div class="column-1 tablet-column-4"><span class='tablet-hide'>1</span>
+         <span class='tablet-show'>.tablet-column-4</span></div>
+      <div class="column-1 tablet-column-4 tablet-first-column"><span class='tablet-hide'>1</span>
+         <span class='tablet-show'>.tablet-column-4</span></div>
+      <div class="column-1 tablet-column-4 tablet-first-column"><span class='tablet-hide'>1</span>
+         <span class='tablet-show'>.tablet-column-4</span></div>
+      <div class="column-1 tablet-column-4 tablet-first-column"><span class='tablet-hide'>1</span>
+         <span class='tablet-show'>.tablet-column-4</span></div>
+     </div>
+
+    <div class="column-2 tablet-column-4 tablet-last-column phone-first-column"><span class='ablet-hide'>2</span>
+       <span class='tablet-show'>.tablet-column-4</span></div>
+
+     <div class="column-10 tablet-column-8 tablet-first-column">
+       <span class='tablet-hide'>10</span>
+       <span class='tablet-show'>.tablet-column-8</span>
+       <div class="column-5 tablet-column-4">
+         <span class='tablet-hide'>.column-5</span>
+         <span class='tablet-show'>.tablet-column-4</span>
+       </div>
+       <div class="column-5 tablet-column-4 phone-first-column">
+         <span class='tablet-hide'>.column-5</span>
+         <span class='tablet-show'>.tablet-column-4</span>
+         <div class="column-2 tablet-column-4 phone-first-column">
+           <span class='tablet-hide'>2</span>
+           <span class='tablet-show'>.tablet-column-4</span>
+         </div>
+         <div class="column-3 tablet-column-4 tablet-first-column phone-first-column">
+           <span class='tablet-hide'>.column-3</span>
+           <span class='tablet-show'>.tablet-column-4</span>
+         </div>
+
+       </div>
+     </div>
+
+    <div class="column-1 tablet-column-4 tablet-first-column"><span class='tablet-hide'>1</span>
+       <span class='tablet-show'>.tablet-column-4</span></div>
+    <div class="column-1 tablet-column-5 tablet-first-column"><span class='tablet-hide'>1</span>
+       <span class='tablet-show'>.tablet-column-5</span></div>
+   </div>
+
+   <div class="column-6 tablet-column-4">
+     <span class='tablet-hide'>.column-6</span>
+     <span class='tablet-show'>.tablet-column-4</span>
+
+     <div class="column-6 tablet-column-4">
+       <span class='tablet-hide'>.column-6</span>
+       <span class='tablet-show'>.tablet-column-4</span>
+       <div class="column-4 tablet-column-2"><span class='tablet-hide'>.column-4</span>
+         <span class='tablet-show'>.tablet-column-2</span></div>
+       <div class="column-2 tablet-column-2"><span class='tablet-hide'>2</span>
+         <span class='tablet-show'>.tablet-column-2</span></div>
+     </div>
+
+    <div class="column-4 tablet-column-4 column-first tablet-first-column"><span class='ablet-hide'>.column-4</span>
+       <span class='tablet-show'>.tablet-column-4</span></div>
+   </div>
+ </div>
+
+
+ <div class="container leader-5">
+   <div class="column-14 pre-3">
+     <div class="content-area">
+       {{md 'site/source/copy/columns-as-row.md'}}
+     </div>
+   </div>
+ </div>
+
+ <div class="container grid-example leader-1">
+  <div class="column-2"><span>.column-2 With a lot of content, so it pushes down.</span></div>
+   <div class="column-22"><span>.column-22</span></div>
+   <div class="column-4"><span>.column-4</span></div>
+   <div class="column-4"><span>.column-4</span></div>
+   <div class="column-4"><span>.column-4</span></div>
+
+   <div class="column-24">
+    <div class="column-2"><span>.column-2 With a lot of content, so it pushes down.</span></div>
+     <div class="column-22 tablet-first-column"><span>.column-22</span></div>
+   </div>
+   <div class="column-4"><span>.column-4</span></div>
+   <div class="column-4"><span>.column-4</span></div>
+   <div class="column-4"><span>.column-4</span></div>
+ </div>
+
+ <!-- <div class="container leader-5">
+   <div class="column-14 pre-3">
+     <div class="content-area">
+       {{md 'site/source/copy/nested-column-rows.md'}}
+     </div>
+   </div>
+ </div> -->
+
+ <!-- D E M O -->
+
+ <div class="container leader-5">
+   <div class="column-14 pre-3">
+     <div class="content-area">
+       {{md 'site/source/copy/pre-post.md'}}
+     </div>
+   </div>
+ </div>
+
+ <div class="container grid-example leader-1">
+   <!-- PRE -->
+   <div class="column-24">
+     <div class="column-4 pre-2"><span>4 pre-2</span></div>
+     <div class="column-4 pre-3"><span>4 pre-3</span></div>
+     <div class="column-4 pre-4"><span>4 pre-4</span></div>
+   </div>
+   <!-- POST -->
+   <div class="column-24">
+     <div class="column-4 post-2"><span>4 post-2</span></div>
+     <div class="column-4 post-3"><span>4 post-3</span></div>
+     <div class="column-4 post-4"><span>4 post-4</span></div>
+     <div class="column-3"><span>3</span></div>
+   </div>
+   <!-- COMBO -->
+   <div class="column-24 trailer-5">
+     <div class="column-1"><span>1</span></div>
+     <div class="column-4 pre-1 post-2"><span>4 pre-1 post-2</span></div>
+     <div class="column-4 pre-2 post-2"><span>4 pre-2 post-2</span></div>
+     <div class="column-4 pre-1 post-2"><span>4 pre-1 post-2</span></div>
+     <div class="column-1"><span>1</span></div>
+   </div>
+ </div>
\ No newline at end of file
diff --git a/lib/stylesheets/calcite-web.scss b/lib/stylesheets/calcite-web.scss
index 631ebcc00..413805421 100644
--- a/lib/stylesheets/calcite-web.scss
+++ b/lib/stylesheets/calcite-web.scss
@@ -31,15 +31,15 @@ $include-type:                  true    !default;
 // Utils
 // Micro-Framework adpated from Compass and Bourbon
 // Provides basic prefixing and standard mixins
-@import "calcite-web/utils/appearance";
-@import "calcite-web/utils/box-sizing";
-@import "calcite-web/utils/calc";
-@import "calcite-web/utils/clearfix";
-@import "calcite-web/utils/prefixer";
-@import "calcite-web/utils/responsive";
-@import "calcite-web/utils/transform";
-@import "calcite-web/utils/transition";
-@import "calcite-web/utils/visibility";
+@import "calcite-web/utils/util-appearance";
+@import "calcite-web/utils/util-box-sizing";
+@import "calcite-web/utils/util-calc";
+@import "calcite-web/utils/util-clearfix";
+@import "calcite-web/utils/util-prefixer";
+@import "calcite-web/utils/util-responsive";
+@import "calcite-web/utils/util-transform";
+@import "calcite-web/utils/util-transition";
+@import "calcite-web/utils/util-visibility";
 
 // Layout
 // structural level styles: grid, helper classes...
diff --git a/lib/stylesheets/calcite-web/type/_modular-scale.scss b/lib/stylesheets/calcite-web/type/_type-scale.scss
similarity index 100%
rename from lib/stylesheets/calcite-web/type/_modular-scale.scss
rename to lib/stylesheets/calcite-web/type/_type-scale.scss
diff --git a/lib/stylesheets/calcite-web/type/type-cabinet.scss b/lib/stylesheets/calcite-web/type/type-cabinet.scss
index b85434078..340220272 100644
--- a/lib/stylesheets/calcite-web/type/type-cabinet.scss
+++ b/lib/stylesheets/calcite-web/type/type-cabinet.scss
@@ -10,5 +10,5 @@
 @import 'type-unicode-variables';
 @import 'typesetting-mixins';
 @import 'type-faces';
-@import 'modular-scale';
+@import 'type-scale';
 @import 'type-styles';
diff --git a/lib/stylesheets/calcite-web/utils/_appearance.scss b/lib/stylesheets/calcite-web/utils/_util-appearance.scss
similarity index 100%
rename from lib/stylesheets/calcite-web/utils/_appearance.scss
rename to lib/stylesheets/calcite-web/utils/_util-appearance.scss
diff --git a/lib/stylesheets/calcite-web/utils/_box-sizing.scss b/lib/stylesheets/calcite-web/utils/_util-box-sizing.scss
similarity index 100%
rename from lib/stylesheets/calcite-web/utils/_box-sizing.scss
rename to lib/stylesheets/calcite-web/utils/_util-box-sizing.scss
diff --git a/lib/stylesheets/calcite-web/utils/_calc.scss b/lib/stylesheets/calcite-web/utils/_util-calc.scss
similarity index 100%
rename from lib/stylesheets/calcite-web/utils/_calc.scss
rename to lib/stylesheets/calcite-web/utils/_util-calc.scss
diff --git a/lib/stylesheets/calcite-web/utils/_clearfix.scss b/lib/stylesheets/calcite-web/utils/_util-clearfix.scss
similarity index 100%
rename from lib/stylesheets/calcite-web/utils/_clearfix.scss
rename to lib/stylesheets/calcite-web/utils/_util-clearfix.scss
diff --git a/lib/stylesheets/calcite-web/utils/_prefixer.scss b/lib/stylesheets/calcite-web/utils/_util-prefixer.scss
similarity index 100%
rename from lib/stylesheets/calcite-web/utils/_prefixer.scss
rename to lib/stylesheets/calcite-web/utils/_util-prefixer.scss
diff --git a/lib/stylesheets/calcite-web/utils/_responsive.scss b/lib/stylesheets/calcite-web/utils/_util-responsive.scss
similarity index 100%
rename from lib/stylesheets/calcite-web/utils/_responsive.scss
rename to lib/stylesheets/calcite-web/utils/_util-responsive.scss
diff --git a/lib/stylesheets/calcite-web/utils/_transform.scss b/lib/stylesheets/calcite-web/utils/_util-transform.scss
similarity index 100%
rename from lib/stylesheets/calcite-web/utils/_transform.scss
rename to lib/stylesheets/calcite-web/utils/_util-transform.scss
diff --git a/lib/stylesheets/calcite-web/utils/_transition.scss b/lib/stylesheets/calcite-web/utils/_util-transition.scss
similarity index 100%
rename from lib/stylesheets/calcite-web/utils/_transition.scss
rename to lib/stylesheets/calcite-web/utils/_util-transition.scss
diff --git a/lib/stylesheets/calcite-web/utils/_visibility.scss b/lib/stylesheets/calcite-web/utils/_util-visibility.scss
similarity index 100%
rename from lib/stylesheets/calcite-web/utils/_visibility.scss
rename to lib/stylesheets/calcite-web/utils/_util-visibility.scss

From 152da91f3202a5dbd64fd0311cc6593da601747f Mon Sep 17 00:00:00 2001
From: Nikolas Wise <nikolaswise@gmail.com>
Date: Fri, 29 Aug 2014 10:28:31 -0700
Subject: [PATCH 2/2] namespace properly

---
 lib/sass/calcite-web.scss                      | 18 +++++++++---------
 .../{_modular-scale.scss => _type-scale.scss}  |  0
 ...{_appearance.scss => _util-appearance.scss} |  0
 ...{_box-sizing.scss => _util-box-sizing.scss} |  0
 .../utils/{_calc.scss => _util-calc.scss}      |  0
 .../{_clearfix.scss => _util-clearfix.scss}    |  0
 .../{_prefixer.scss => _util-prefixer.scss}    |  0
 ...{_responsive.scss => _util-responsive.scss} |  0
 .../{_transform.scss => _util-transform.scss}  |  0
 ...{_transition.scss => _util-transition.scss} |  0
 ...{_visibility.scss => _util-visibility.scss} |  0
 11 files changed, 9 insertions(+), 9 deletions(-)
 rename lib/sass/calcite-web/type/{_modular-scale.scss => _type-scale.scss} (100%)
 rename lib/sass/calcite-web/utils/{_appearance.scss => _util-appearance.scss} (100%)
 rename lib/sass/calcite-web/utils/{_box-sizing.scss => _util-box-sizing.scss} (100%)
 rename lib/sass/calcite-web/utils/{_calc.scss => _util-calc.scss} (100%)
 rename lib/sass/calcite-web/utils/{_clearfix.scss => _util-clearfix.scss} (100%)
 rename lib/sass/calcite-web/utils/{_prefixer.scss => _util-prefixer.scss} (100%)
 rename lib/sass/calcite-web/utils/{_responsive.scss => _util-responsive.scss} (100%)
 rename lib/sass/calcite-web/utils/{_transform.scss => _util-transform.scss} (100%)
 rename lib/sass/calcite-web/utils/{_transition.scss => _util-transition.scss} (100%)
 rename lib/sass/calcite-web/utils/{_visibility.scss => _util-visibility.scss} (100%)

diff --git a/lib/sass/calcite-web.scss b/lib/sass/calcite-web.scss
index 631ebcc00..413805421 100644
--- a/lib/sass/calcite-web.scss
+++ b/lib/sass/calcite-web.scss
@@ -31,15 +31,15 @@ $include-type:                  true    !default;
 // Utils
 // Micro-Framework adpated from Compass and Bourbon
 // Provides basic prefixing and standard mixins
-@import "calcite-web/utils/appearance";
-@import "calcite-web/utils/box-sizing";
-@import "calcite-web/utils/calc";
-@import "calcite-web/utils/clearfix";
-@import "calcite-web/utils/prefixer";
-@import "calcite-web/utils/responsive";
-@import "calcite-web/utils/transform";
-@import "calcite-web/utils/transition";
-@import "calcite-web/utils/visibility";
+@import "calcite-web/utils/util-appearance";
+@import "calcite-web/utils/util-box-sizing";
+@import "calcite-web/utils/util-calc";
+@import "calcite-web/utils/util-clearfix";
+@import "calcite-web/utils/util-prefixer";
+@import "calcite-web/utils/util-responsive";
+@import "calcite-web/utils/util-transform";
+@import "calcite-web/utils/util-transition";
+@import "calcite-web/utils/util-visibility";
 
 // Layout
 // structural level styles: grid, helper classes...
diff --git a/lib/sass/calcite-web/type/_modular-scale.scss b/lib/sass/calcite-web/type/_type-scale.scss
similarity index 100%
rename from lib/sass/calcite-web/type/_modular-scale.scss
rename to lib/sass/calcite-web/type/_type-scale.scss
diff --git a/lib/sass/calcite-web/utils/_appearance.scss b/lib/sass/calcite-web/utils/_util-appearance.scss
similarity index 100%
rename from lib/sass/calcite-web/utils/_appearance.scss
rename to lib/sass/calcite-web/utils/_util-appearance.scss
diff --git a/lib/sass/calcite-web/utils/_box-sizing.scss b/lib/sass/calcite-web/utils/_util-box-sizing.scss
similarity index 100%
rename from lib/sass/calcite-web/utils/_box-sizing.scss
rename to lib/sass/calcite-web/utils/_util-box-sizing.scss
diff --git a/lib/sass/calcite-web/utils/_calc.scss b/lib/sass/calcite-web/utils/_util-calc.scss
similarity index 100%
rename from lib/sass/calcite-web/utils/_calc.scss
rename to lib/sass/calcite-web/utils/_util-calc.scss
diff --git a/lib/sass/calcite-web/utils/_clearfix.scss b/lib/sass/calcite-web/utils/_util-clearfix.scss
similarity index 100%
rename from lib/sass/calcite-web/utils/_clearfix.scss
rename to lib/sass/calcite-web/utils/_util-clearfix.scss
diff --git a/lib/sass/calcite-web/utils/_prefixer.scss b/lib/sass/calcite-web/utils/_util-prefixer.scss
similarity index 100%
rename from lib/sass/calcite-web/utils/_prefixer.scss
rename to lib/sass/calcite-web/utils/_util-prefixer.scss
diff --git a/lib/sass/calcite-web/utils/_responsive.scss b/lib/sass/calcite-web/utils/_util-responsive.scss
similarity index 100%
rename from lib/sass/calcite-web/utils/_responsive.scss
rename to lib/sass/calcite-web/utils/_util-responsive.scss
diff --git a/lib/sass/calcite-web/utils/_transform.scss b/lib/sass/calcite-web/utils/_util-transform.scss
similarity index 100%
rename from lib/sass/calcite-web/utils/_transform.scss
rename to lib/sass/calcite-web/utils/_util-transform.scss
diff --git a/lib/sass/calcite-web/utils/_transition.scss b/lib/sass/calcite-web/utils/_util-transition.scss
similarity index 100%
rename from lib/sass/calcite-web/utils/_transition.scss
rename to lib/sass/calcite-web/utils/_util-transition.scss
diff --git a/lib/sass/calcite-web/utils/_visibility.scss b/lib/sass/calcite-web/utils/_util-visibility.scss
similarity index 100%
rename from lib/sass/calcite-web/utils/_visibility.scss
rename to lib/sass/calcite-web/utils/_util-visibility.scss