Adding Prefix To all Leap Atom Classes

_includes/icon.html

@@ -1,5 +1,5 @@
 {% capture id %}{% increment uniqueid %}{% endcapture %}
-<svg viewBox="{% if include.icon-size %}0 0 {{ include.icon-size }} {{ include.icon-size }}{% else %} 0 0 16 16{% endif %}" role="img" class="icon {% if include.icon-size %}icon-{{ include.icon-size }}{% else %}icon-16{% endif %} icon-{{ include.icon }} {{include.class}}"
+<svg viewBox="{% if include.icon-size %}0 0 {{ include.icon-size }} {{ include.icon-size }}{% else %} 0 0 16 16{% endif %}" role="img" class="thl-icon {% if include.icon-size %}thl-icon-{{ include.icon-size }}{% else %}thl-icon-16{% endif %} thl-icon-{{ include.icon }} {{include.class}}"
      aria-labelledby="{% if include.title %}title-{{ id }}{% endif %}{% if include.desc %} desc-{{ id }}{% endif %}">
   {% if include.title %}
   <title id="title-{{ id }}">{{ include.title }}</title>

_includes/subnav.html

@@ -1,4 +1,4 @@
-<div class="m-l-4-lg p-3-lg p-r-0-lg border-l-lg">
+<div class="thl-m-l-4-lg p-3-lg p-r-0-lg thl-border-l-lg">
   <ul class="subnav list-unstyled">
     {% for p in page.subnav %}
       <li class="subnav-item">

_layouts/default.html

@@ -12,13 +12,13 @@
     <main class="guide-main" role="main">
       <div class="guide-content">
 
-        <h1 class="border-b-xs p-b-05-xs m-b-4-xs">{{ page.title }}</h1>
+        <h1 class="thl-border-b-xs p-b-05-xs thl-m-b-4-xs">{{ page.title }}</h1>
 
-        <div class="col-container">
-          <div class="col col-80-lg">
+        <div class="thl-col-container">
+          <div class="thl-col thl-col-80-lg">
             {{ content }}
           </div>
-          <div class="hide-xs block-lg col col-20-lg subnav-container">
+          <div class="thl-hide-xs thl-block-lg thl-col thl-col-20-lg subnav-container">
             {% include subnav.html %}
           </div>
         </div>

_layouts/home.html

@@ -12,10 +12,10 @@
     <main class="guide-main" role="main">
       <div class="guide-content">
 
-        <h1 class="border-b-xs p-b-05-xs m-b-4-xs">{{ page.title }}</h1>
+        <h1 class="thl-border-b-xs p-b-05-xs thl-m-b-4-xs">{{ page.title }}</h1>
 
           {{ content }}
-          
+
       </div>
     </main>
 

_sass/leap/_variables.scss

@@ -1,5 +1,7 @@
 $leap-version: "0.8.7";
 
+$leap-prefix: thl;
+
 // Brand Colors
 $brand-colors: (
   "green": #5fcf80,

_sass/leap/atoms/_block-grid.sass

@@ -1,16 +1,16 @@
 // Block grid structures
-.block
+.#{$leap-prefix}-block
   &-grid
     padding: 0 !important
     list-style: none !important
     font-size: 0 !important
     display: block !important
     overflow: hidden !important
     margin-bottom: 2rem !important
-    
+
     &-gutters
       margin: -1rem -1rem 1rem -1rem !important
-      .block-grid__item
+      .#{$leap-prefix}-block-grid__item
         padding: 1rem !important
 
     &__item
@@ -25,7 +25,7 @@
 
   // Iterate from 1-6 to create different block division classes
   @for $num from 1 through 6
-    .block-#{$num}-#{$suffix} .block-grid__item
+    .#{$leap-prefix}-block-#{$num}-#{$suffix} .#{$leap-prefix}-block-grid__item
       width: 100%/$num !important
 
       // If we aren't a block-1 we need to reset and set clear

_sass/leap/atoms/_border.sass

@@ -13,10 +13,10 @@ $border-values: normal, dark, mid, light
     // We don't want a modifier on the normal style,
     // so we need a conditional to control that
     @if $value == normal
-      .border-#{$suffix}
+      .#{$leap-prefix}-border-#{$suffix}
         border: solid 1px border-var($value) !important
     @else
-      .border-#{$value}-#{$suffix}
+      .#{$leap-prefix}-border-#{$value}-#{$suffix}
         border: solid 1px border-var($value) !important
 
     // Iterate through each type in $border-types
@@ -25,10 +25,10 @@ $border-values: normal, dark, mid, light
       // We don't want a modifier on the normal style,
       // so we need a conditional to control that
       @if $value == normal
-        .border-#{$shorthand}-#{$suffix}
+        .#{$leap-prefix}-border-#{$shorthand}-#{$suffix}
           border-#{$border}: solid 1px border-var($value) !important
       @else
-        .border-#{$shorthand}-#{$value}-#{$suffix}
+        .#{$leap-prefix}-border-#{$shorthand}-#{$value}-#{$suffix}
           border-#{$border}: solid 1px border-var($value) !important
 
 
@@ -37,12 +37,12 @@ $border-values: normal, dark, mid, light
 @mixin border-none($suffix)
 
   // Create style for border none on all sides
-  .border-none-#{$suffix}
+  .#{$leap-prefix}-border-none-#{$suffix}
     border: none !important
 
   // Iterate through border sides and create border none styles
   @each $border, $shorthand in $border-types
-    .border-none-#{$shorthand}-#{$suffix}
+    .#{$leap-prefix}-border-none-#{$shorthand}-#{$suffix}
       border-#{$border}: none !important
 
 
@@ -51,7 +51,7 @@ $border-values: normal, dark, mid, light
 @mixin border-radius
 
   // Create style for border radius classes
-  .round
+  .#{$leap-prefix}-round
     border-radius: $border-radius !important
     &-t
       border-radius: $border-radius $border-radius 0 0 !important
@@ -63,7 +63,7 @@ $border-values: normal, dark, mid, light
       border-radius: 0 $border-radius $border-radius 0 !important
 
   // Create the circle class
-  .circle
+  .#{$leap-prefix}-circle
     border-radius: 9999px !important
 
 

_sass/leap/atoms/_button.sass

@@ -1,4 +1,4 @@
-.button
+.#{$leap-prefix}-button
   +appearance(none)
   +user-select(none)
   background-color: transparent
@@ -205,7 +205,7 @@
         color: darken(topic-color(#{$topic}, base), 10%) !important
         svg
           fill: darken(topic-color(#{$topic}, base), 10%) !important
-      &.button--primary
+      &.#{$leap-prefix}-button--primary
         background-color: topic-color(#{$topic}, base) !important
         border-color: topic-color(#{$topic}, base) !important
         color: #fff !important
@@ -216,23 +216,23 @@
             fill: #fff !important
 
   // Split Buttons
-  .split-button &
+  .#{$leap-prefix}-split-button &
     float: left
     z-index: 1
     margin: 0 !important
     border-radius: $border-radius 0 0 $border-radius
     padding: 0 20px
     +selected
       z-index: 2
-    &.button--primary
+    &.#{$leap-prefix}-button--primary
       border-right-color: rgba(#000, 0.1)
-    + .button
+    + .#{$leap-prefix}-button
       border-radius: 0 $border-radius $border-radius 0
       margin-left: -2px !important
-      &.button--primary
+      &.#{$leap-prefix}-button--primary
         border-left-color: rgba(#000, 0.1)
 
-.split-button
+.#{$leap-prefix}-split-button
   +clearfix
   display: inline-block
   margin: 0 15px 0 0

_sass/leap/atoms/_color.sass

@@ -16,13 +16,13 @@ $properties: fill stroke color border-color background-color
     //
     // Else just use the regular property name
     @if $property == background-color
-      .brand-bg-#{$color-name}
+      .#{$leap-prefix}-brand-bg-#{$color-name}
         #{$property}: brand-color($color-name) !important
     @else if $property == border-color
-      .brand-border-#{$color-name}
+      .#{$leap-prefix}-brand-border-#{$color-name}
         #{$property}: brand-color($color-name) !important
     @else
-      .brand-#{$property}-#{$color-name}
+      .#{$leap-prefix}-brand-#{$property}-#{$color-name}
         #{$property}: brand-color($color-name) !important
 
 
@@ -41,10 +41,10 @@ $properties: fill stroke color border-color background-color
     //
     // Else just use the regular property name
     @if $property == background-color
-      .bg-#{$color-name}
+      .#{$leap-prefix}-bg-#{$color-name}
         #{$property}: ui-color($color-name) !important
     @else if $property == border-color
-      .border-#{$color-name}
+      .#{$leap-prefix}-border-#{$color-name}
         #{$property}: ui-color($color-name) !important
     @else
       .#{$property}-#{$color-name}
@@ -66,10 +66,10 @@ $properties: fill stroke color border-color background-color
     //
     // Else just use the regular property name
     @if $property == background-color
-      .bg-#{$color-name}
+      .#{$leap-prefix}-bg-#{$color-name}
         #{$property}: gray-color($color-name) !important
     @else if $property == border-color
-      .border-#{$color-name}
+      .#{$leap-prefix}-border-#{$color-name}
         #{$property}: gray-color($color-name) !important
     @else
       .#{$property}-#{$color-name}
@@ -91,13 +91,13 @@ $properties: fill stroke color border-color background-color
     //
     // Else just use the regular property name
     @if $property == background-color
-      .text-bg-#{$color-name}
+      .#{$leap-prefix}-text-bg-#{$color-name}
         #{$property}: text-color($color-name) !important
     @else if $property == border-color
-      .text-border-#{$color-name}
+      .#{$leap-prefix}-text-border-#{$color-name}
         #{$property}: text-color($color-name) !important
     @else
-      .text-#{$property}-#{$color-name}
+      .#{$leap-prefix}-text-#{$property}-#{$color-name}
         #{$property}: text-color($color-name) !important
 
 
@@ -117,11 +117,11 @@ $properties: fill stroke color border-color background-color
       //
       // Else just use the regular property name
       @if $property == background-color
-        .topic-bg-#{$color-name}-#{$color-value}
+        .#{$leap-prefix}-topic-bg-#{$color-name}-#{$color-value}
           #{$property}: map-get($color, $color-value) !important
       @else if $property == border-color
-        .topic-border-#{$color-name}-#{$color-value}
+        .#{$leap-prefix}-topic-border-#{$color-name}-#{$color-value}
           #{$property}: map-get($color, $color-value) !important
       @else
-        .topic-#{$property}-#{$color-name}-#{$color-value}
+        .#{$leap-prefix}-topic-#{$property}-#{$color-name}-#{$color-value}
           #{$property}: map-get($color, $color-value) !important

_sass/leap/atoms/_display.sass

@@ -8,7 +8,7 @@ $display-types: block, hide, inline, inline-block
 
   // Iterate through each type in $display-types
   @each $type in $display-types
-    .#{$type}-#{$suffix}
+    .#{$leap-prefix}-#{$type}-#{$suffix}
 
       // We want to use the class "hide" for display: none,
       // so we need a conditional to make that happen.

_sass/leap/atoms/_flexbox.sass

@@ -1,6 +1,6 @@
 // Adds flex and flex-inline classes
 @mixin flex-container($suffix)
-  .flex
+  .#{$leap-prefix}-flex
     &-block-#{$suffix}
       display: flex !important
     &-inline-#{$suffix}
@@ -9,18 +9,18 @@
 // Adds flex direction classes
 @mixin flex-direction($suffix)
   @each $direction in row, row-reverse, column, column-reverse
-    .flex-#{$direction}-#{$suffix}
+    .#{$leap-prefix}-flex-#{$direction}-#{$suffix}
       flex-direction: $direction !important
 
 // Adds flex wrap classes
 @mixin flex-wrap($suffix)
   @each $type in wrap, nowrap, wrap-reverse
-    .flex-#{$type}-#{$suffix}
+    .#{$leap-prefix}-flex-#{$type}-#{$suffix}
       flex-wrap: $type !important
 
 // Adds justify-content classes
 @mixin flex-justify-content($suffix)
-  .flex-justify
+  .#{$leap-prefix}-flex-justify
     &-start-#{$suffix}
       justify-content: flex-start !important
     &-end-#{$suffix}
@@ -34,7 +34,7 @@
 
 // Adds align-items classes
 @mixin flex-align-items($suffix)
-  .flex-item
+  .#{$leap-prefix}-flex-item
     &-start-#{$suffix}
       align-items: flex-start !important
     &-end-#{$suffix}
@@ -48,7 +48,7 @@
 
 // Adds align-content classes
 @mixin flex-align-content($suffix)
-  .flex-content
+  .#{$leap-prefix}-flex-content
     &-start-#{$suffix}
       align-content: flex-start !important
     &-end-#{$suffix}
@@ -65,44 +65,44 @@
 // Adds flex-order classes
 @mixin flex-order($suffix)
   @each $num in 1,2,3,4,5,6
-    .flex-order-#{$num}-#{$suffix}
+    .#{$leap-prefix}-flex-order-#{$num}-#{$suffix}
       order: $num !important
 
 // Adds flex-grow classes
 @mixin flex-grow($suffix)
   @each $num in 0,1,2,3,4,5,6
-    .flex-grow-#{$num}-#{$suffix}
+    .#{$leap-prefix}-flex-grow-#{$num}-#{$suffix}
       flex-grow: $num !important
 
 // Adds flex-shrink classes
 @mixin flex-shrink($suffix)
   @each $num in 1,2,3,4,5,6
-    .flex-shrink-#{$num}-#{$suffix}
+    .#{$leap-prefix}-flex-shrink-#{$num}-#{$suffix}
       flex-shrink: $num !important
 
 // Adds flex-basis classes
 @mixin flex-basis($suffix)
   $widths: 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, auto
   @each $width in $widths
     @if $width == auto
-      .flex-basis-auto-#{$suffix}
+      .#{$leap-prefix}-flex-basis-auto-#{$suffix}
         flex-basis: $width !important
     @else
-      .flex-basis-#{$width}-#{$suffix}
+      .#{$leap-prefix}-flex-basis-#{$width}-#{$suffix}
         flex-basis: percentage($width/100) !important
   @each $unit, $value in $spacing
     // We don't want a class of "0.5" so we use a conditional to
     // let us rename is at "05" in this instance
     @if $unit == 0.5
-      .flex-basis-s05-#{$suffix}
+      .#{$leap-prefix}-flex-basis-s05-#{$suffix}
         flex-basis: spacing($unit) !important
     @else
-      .flex-basis-s#{$unit}-#{$suffix}
+      .#{$leap-prefix}-flex-basis-s#{$unit}-#{$suffix}
         flex-basis: spacing($unit) !important
 
 // Adds align-self classes
 @mixin flex-align-self($suffix)
-  .flex-self
+  .#{$leap-prefix}-flex-self
     &-auto-#{$suffix}
       align-self: auto !important
     &-start-#{$suffix}

_sass/leap/atoms/_float.sass

@@ -1,6 +1,6 @@
 // Creates the style declarations for each float type
 @mixin float-style($suffix)
-  .float
+  .#{$leap-prefix}-float
     &-l-#{$suffix}
       float: left !important