shipyard-framework 0.5.86 → 0.5.87

data/styleguide/components/radio-buttons.md

@@ -16,7 +16,7 @@ labels:
 Useful when you want to group a series of radio buttons together on a single line.
 {: .section-description }
 
-<ul class="input-list margin-bottom-lg">
+<ul class="input-list mb-30">
   {% for label in page.labels %}
     <li class="input-item-inline">
       <input id="radio-inline-{{ forloop.index }}" name="radio-list" type="radio" class="input input-radio" {% if forloop.index == 1 %}checked{% endif %} />
@@ -40,8 +40,8 @@ Useful when you want to group a series of radio buttons together on a single lin
 Useful when you want to group a series of radio buttons together in a list (stacked by default).
 {: .section-description }
 
-<div class="col-container margin-bottom-sm margin-bottom-x1-lg">
-  <div class="col col-100 col-x1-50 margin-bottom-sm margin-bottom-x1-none">
+<div class="col-container mb-15 mb-x1-30">
+  <div class="col col-100 col-x1-50 mb-15 mb-x1-0">
     <div class="rounded bg-white box-padding">
       <ul class="input-list">
         {% for label in page.labels %}
@@ -153,43 +153,43 @@ Yep, that's exactly what it sounds like. It behaves like a radio button but look
 ---
 
 ## Radio Buttons Nested in Buttons
-{: .margin-bottom-md }
+{: .mb-20 }
 
-<button class="btn btn-secondary margin-right-xs margin-bottom-xs">
-  <input type="radio" class="input input-radio margin-right-xxs" />
+<button class="btn btn-secondary mr-10 mb-10">
+  <input type="radio" class="input input-radio mr-5" />
   Unchecked
 </button>
-<button class="btn btn-secondary margin-right-xs margin-bottom-xs">
-  <input type="radio" class="input input-radio margin-right-xxs" checked />
+<button class="btn btn-secondary mr-10 mb-10">
+  <input type="radio" class="input input-radio mr-5" checked />
   Checked
 </button>
-<button class="btn btn-secondary margin-right-xs margin-bottom-xs">
-  <input type="radio" class="input input-radio-checkbox margin-right-xxs" checked />
+<button class="btn btn-secondary mr-10 mb-10">
+  <input type="radio" class="input input-radio-checkbox mr-5" checked />
   Checked w/ Icon
 </button>
-<button class="btn btn-cta margin-right-xs margin-bottom-xs">
-  <input type="radio" class="input input-radio input-radio-inverse margin-right-xxs" />
+<button class="btn btn-cta mr-10 mb-10">
+  <input type="radio" class="input input-radio input-radio-inverse mr-5" />
   Inverse Unchecked
 </button>
-<button class="btn btn-cta margin-right-xs margin-bottom-xs">
-  <input type="radio" class="input input-radio input-radio-inverse margin-right-xxs" checked />
+<button class="btn btn-cta mr-10 mb-10">
+  <input type="radio" class="input input-radio input-radio-inverse mr-5" checked />
   Inverse Checked
 </button>
-<button class="btn btn-cta margin-right-xs margin-bottom-xs">
-  <input type="radio" class="input input-radio-checkbox input-radio-inverse margin-right-xs" checked />
+<button class="btn btn-cta mr-10 mb-10">
+  <input type="radio" class="input input-radio-checkbox input-radio-inverse mr-10" checked />
   Inverse Checked w/ Icon
 </button>
 
 ```html
 <!-- Secondary button with a radio button in the unchecked state. -->
 <button class="btn btn-secondary">
-  <input type="radio" class="input input-radio margin-right-xxs" />
+  <input type="radio" class="input input-radio mr-5" />
   Button Text
 </button>
 
 <!-- CTA button with a radio-checkbox in the checked state. -->
 <button class="btn btn-cta">
-  <input type="radio" class="input input-radio-checkbox input-radio-inverse margin-right-xxs" checked />
+  <input type="radio" class="input input-radio-checkbox input-radio-inverse mr-5" checked />
   Button Text
 </button>
 ```

data/styleguide/components/statuses.md

@@ -0,0 +1,324 @@
+---
+title: Shipyard Statuses
+sass_file: shipyard/components/_statuses
+statuses: [skipped, waiting, running, success, idle, error, fail]
+---
+
+{% include page-heading.html page=page %}
+
+---
+
+### Status Dots `.status-xs`
+Useful in tight spaces where it's still important to show status, but not important enough to compete for attention with other elements on the page.
+{: .section-description }
+
+<div class="mb-25">
+  {% for status in page.statuses -%}
+    <button class="btn btn-secondary btn-xs btn-rounded mr-5">
+      <span class="status status-xs status-{{ status }}"></span>
+      <span class="text-sm medium ml-xs text-{{ status }}">{{ status | capitalize }}</span>
+    </button>
+  {% endfor %}
+</div>
+
+```html
+{%- for status in page.statuses %}
+<span class="status status-xs status-{{ status }}"></span>
+<span class="text-{{ status }}">{{ status }}</span>
+{% endfor -%}
+```
+
+---
+
+### Status Circles `.status-sm`
+Useful when next to standard text where where it's important to show the status of a particular object.
+{: .section-description }
+
+{% for status in page.statuses -%}
+  <button class="btn btn-secondary btn-sm btn-rounded mr-5">
+    <span class="status status-{{ status }} status-sm"></span>
+    <span class="text-md medium ml-xs text-{{ status }}">{{ status | capitalize }}</span>
+  </button>
+{% endfor %}
+
+```html
+{%- for status in page.statuses %}
+<span class="status status-sm status-{{ status }}"></span>
+<span class="text-{{ status }}">{{ status }}</span>
+{% endfor -%}
+```
+
+---
+
+### Status Icons `.status-md`
+Useful when next to standard text where where it's important to show the status of a particular object.
+{: .section-description }
+
+<button tooltip="skipped" class="mr-5">
+  <span class="status status-skipped status-md">{% icon :skipped, prefix: 'status-md', class: 'status-icon' %}</span>
+</button>
+<button tooltip="waiting" class="mr-5">
+  <span class="status status-waiting status-md">{% icon 'waiting', prefix: 'status-md', class: 'status-icon' %}</span>
+</button>
+<button tooltip="running" class="mr-5">
+  <span class="status status-running status-md">{% icon :running, prefix: 'status-md', class: 'status-icon' %}</span>
+</button>
+<button tooltip="success" class="mr-5">
+  <span class="status status-success status-md">{% icon :success, prefix: 'status-md', class: 'status-icon' %}</span>
+</button>
+<button tooltip="idle" class="mr-5">
+  <span class="status status-idle status-md">{% icon :idle, prefix: 'status-md', class: 'status-icon' %}</span>
+</button>
+<button tooltip="error" class="mr-5">
+  <span class="status status-error status-md">{% icon :error, prefix: 'status-md', class: 'status-icon' %}</span>
+</button>
+<button tooltip="fail" class="mr-5">
+  <span class="status status-fail status-md">{% icon :fail, prefix: 'status-md', class: 'status-icon' %}</span>
+</button>
+
+```erb
+{%- for status in page.statuses %}
+<span class="status status-md status-{{ status }}">
+  <%= icon :{{ status }}, prefix: 'status-md', class: 'status-icon' %>
+</span>
+{% endfor -%}
+```
+
+---
+
+### Inverse Status Icons `.status-inverse.status-md`
+Useful when next to standard text where where it's important to show the status of a particular object.
+{: .section-description }
+
+<div class="col-container m-0 align-center mb-30">
+  <div class="status-skipped-bg p-20 pl-0 pr-0 col rounded rounded-left" tooltip="skipped">
+    <span class="status status-inverse status-skipped status-md">
+      {% icon :skipped, prefix: 'status-md', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-waiting-bg p-20 pl-0 pr-0 col" tooltip="waiting">
+    <span class="status status-inverse status-waiting status-md">
+      {% icon 'waiting', prefix: 'status-md', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-running-bg p-20 pl-0 pr-0 col" tooltip="running">
+    <span class="status status-inverse status-running status-md">
+      {% icon :running, prefix: 'status-md', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-success-bg p-20 pl-0 pr-0 col" tooltip="success">
+    <span class="status status-inverse status-success status-md">
+      {% icon :success, prefix: 'status-md', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-idle-bg p-20 pl-0 pr-0 col" tooltip="idle">
+    <span class="status status-inverse status-idle status-md">
+      {% icon :idle, prefix: 'status-md', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-error-bg p-20 pl-0 pr-0 col" tooltip="error">
+    <span class="status status-inverse status-error status-md">
+      {% icon :error, prefix: 'status-md', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-fail-bg p-20 pl-0 pr-0 col rounded rounded-right" tooltip="fail">
+    <span class="status status-inverse status-fail status-md">
+      {% icon :fail, prefix: 'status-md', class: 'status-icon' %}
+    </span>
+  </div>
+</div>
+
+```erb
+{%- for status in page.statuses %}
+<span class="status status-inverse status-md status-{{ status }}">
+  <%= icon :{{ status }}, prefix: 'status-md', class: 'status-icon' %>
+</span>
+{% endfor -%}
+```
+
+---
+
+### Large Status Icons `.status-lg`
+Useful when next to standard text where where it's important to show the status of a particular object.
+{: .section-description }
+
+<button tooltip="skipped" class="mr-5">
+  <span class="status status-skipped status-lg">{% icon :skipped, prefix: 'status-lg', class: 'status-icon' %}</span>
+</button>
+<button tooltip="waiting" class="mr-5">
+  <span class="status status-waiting status-lg">{% icon 'waiting', prefix: 'status-lg', class: 'status-icon' %}</span>
+</button>
+<button tooltip="running" class="mr-5">
+  <span class="status status-running status-lg">{% icon :running, prefix: 'status-lg', class: 'status-icon' %}</span>
+</button>
+<button tooltip="success" class="mr-5">
+  <span class="status status-success status-lg">{% icon :success, prefix: 'status-lg', class: 'status-icon' %}</span>
+</button>
+<button tooltip="idle" class="mr-5">
+  <span class="status status-idle status-lg">{% icon :idle, prefix: 'status-lg', class: 'status-icon' %}</span>
+</button>
+<button tooltip="error" class="mr-5">
+  <span class="status status-error status-lg">{% icon :error, prefix: 'status-lg', class: 'status-icon' %}</span>
+</button>
+<button tooltip="fail" class="mr-5">
+  <span class="status status-fail status-lg">{% icon :fail, prefix: 'status-lg', class: 'status-icon' %}</span>
+</button>
+
+```erb
+{%- for status in page.statuses %}
+<span class="status status-lg status-{{ status }}">
+  <%= icon :{{ status }}, prefix: 'status-lg', class: 'status-icon' %>
+</span>
+{% endfor -%}
+```
+
+---
+
+### Large, Inverse Status Icons `.status-inverse.status-lg`
+Useful when next to standard text where where it's important to show the status of a particular object.
+{: .section-description }
+
+<div class="col-container m-0 align-center mb-30">
+  <div class="status-skipped-bg p-20 pl-0 pr-0 col rounded rounded-left" tooltip="skipped">
+    <span class="status status-inverse status-skipped status-lg">
+      {% icon :skipped, prefix: 'status-lg', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-waiting-bg p-20 pl-0 pr-0 col" tooltip="waiting">
+    <span class="status status-inverse status-waiting status-lg">
+      {% icon 'waiting', prefix: 'status-lg', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-running-bg p-20 pl-0 pr-0 col" tooltip="running">
+    <span class="status status-inverse status-running status-lg">
+      {% icon :running, prefix: 'status-lg', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-success-bg p-20 pl-0 pr-0 col" tooltip="success">
+    <span class="status status-inverse status-success status-lg">
+      {% icon :success, prefix: 'status-lg', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-idle-bg p-20 pl-0 pr-0 col" tooltip="idle">
+    <span class="status status-inverse status-idle status-lg">
+      {% icon :idle, prefix: 'status-lg', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-error-bg p-20 pl-0 pr-0 col" tooltip="error">
+    <span class="status status-inverse status-error status-lg">
+      {% icon :error, prefix: 'status-lg', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-fail-bg p-20 pl-0 pr-0 col rounded rounded-right" tooltip="fail">
+    <span class="status status-inverse status-fail status-lg">
+      {% icon :fail, prefix: 'status-lg', class: 'status-icon' %}
+    </span>
+  </div>
+</div>
+
+```erb
+{%- for status in page.statuses %}
+<span class="status status-lg status-{{ status }}">
+  <%= icon :{{ status }}, prefix: 'status-lg', class: 'status-icon' %>
+</span>
+{% endfor -%}
+```
+
+---
+
+### X-Large Status Icons `.status-xl`
+Useful when next to standard text where where it's important to show the status of a particular object.
+{: .section-description }
+
+<button tooltip="skipped" class="mr-5">
+  <span class="status status-skipped status-xl">{% icon :skipped, prefix: 'status-xl', class: 'status-icon' %}</span>
+</button>
+<button tooltip="waiting" class="mr-5">
+  <span class="status status-waiting status-xl">{% icon 'waiting', prefix: 'status-xl', class: 'status-icon' %}</span>
+</button>
+<button tooltip="running" class="mr-5">
+  <span class="status status-running status-xl">{% icon :running, prefix: 'status-xl', class: 'status-icon' %}</span>
+</button>
+<button tooltip="success" class="mr-5">
+  <span class="status status-success status-xl">{% icon :success, prefix: 'status-xl', class: 'status-icon' %}</span>
+</button>
+<button tooltip="idle" class="mr-5">
+  <span class="status status-idle status-xl">{% icon :idle, prefix: 'status-xl', class: 'status-icon' %}</span>
+</button>
+<button tooltip="error" class="mr-5">
+  <span class="status status-error status-xl">{% icon :error, prefix: 'status-xl', class: 'status-icon' %}</span>
+</button>
+<button tooltip="fail">
+  <span class="status status-fail status-xl">{% icon :fail, prefix: 'status-xl', class: 'status-icon' %}</span>
+</button>
+
+```erb
+{%- for status in page.statuses %}
+<span class="status status-xl status-{{ status }}">
+  <%= icon :{{ status }}, prefix: 'status-xl', class: 'status-icon' %>
+</span>
+{% endfor -%}
+```
+
+---
+
+### X-Large, Inverse Status Icons `.status-inverse.status-xl`
+Useful when next to standard text where where it's important to show the status of a particular object.
+{: .section-description }
+
+<div class="col-container m-0 align-center mb-30">
+  <div class="status-skipped-bg p-10 p-x1-20 pl-0 pr-0 col rounded rounded-left" tooltip="skipped">
+    <span class="status status-inverse status-skipped status-xl">
+      {% icon :skipped, prefix: 'status-xl', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-waiting-bg p-10 p-x1-20 pl-0 pr-0 col" tooltip="waiting">
+    <span class="status status-inverse status-waiting status-xl">
+      {% icon 'waiting', prefix: 'status-xl', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-running-bg p-10 p-x1-20 pl-0 pr-0 col" tooltip="running">
+    <span class="status status-inverse status-running status-xl">
+      {% icon :running, prefix: 'status-xl', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-success-bg p-10 p-x1-20 pl-0 pr-0 col" tooltip="success">
+    <span class="status status-inverse status-success status-xl">
+      {% icon :success, prefix: 'status-xl', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-idle-bg p-10 p-x1-20 pl-0 pr-0 col" tooltip="idle">
+    <span class="status status-inverse status-idle status-xl">
+      {% icon :idle, prefix: 'status-xl', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-error-bg p-10 p-x1-20 pl-0 pr-0 col" tooltip="error">
+    <span class="status status-inverse status-error status-xl">
+      {% icon :error, prefix: 'status-xl', class: 'status-icon' %}
+    </span>
+  </div>
+  <div class="status-fail-bg p-10 p-x1-20 pl-0 pr-0 col rounded rounded-right" tooltip="fail">
+    <span class="status status-inverse status-fail status-xl">
+      {% icon :fail, prefix: 'status-xl', class: 'status-icon' %}
+    </span>
+  </div>
+</div>
+
+```erb
+{%- for status in page.statuses %}
+<span class="status status-inverse status-xl status-{{ status }}">
+  <%= icon :{{ status }}, prefix: 'status-xl', class: 'status-icon' %>
+</span>
+{% endfor -%}
+```
+
+---
+
+### Utility CSS
+```css
+{% sass_output -%}
+```
+
+---
+
+{% include css-stats.html %}

data/styleguide/utilities/accordion.md

@@ -24,8 +24,8 @@ sizes:
 
 ---
 
-<div class="box-secondary margin-bottom-lg">
-  <div class="box box-padding box-link padding-top-md padding-bottom-md" accordion="#accordion-example">
+<div class="box-secondary mb-30">
+  <div class="box box-padding box-link pt-20 pb-20" accordion="#accordion-example">
     Click this box to see an example of the accordion transitions.
   </div>
   <div id="accordion-example" class="accordion accordion-xs accordion-closed box-padding rounded-bottom">

data/styleguide/utilities/border-radius.md

@@ -2,8 +2,8 @@
 title: Border-Radius Utilities
 description: Shipyard's border-radius utilities are useful for connecting components together.
 sass_file: shipyard/utilities/_border-radius
-col_classes: col col-50 col-x1-20 margin-bottom-xs
-box_classes: padding-top-xs padding-bottom-xs text-sm strong align-center bg-gray-light gray-dark
+col_classes: col col-50 col-x1-20 mb-10
+box_classes: pt-10 pb-10 text-sm strong align-center bg-gray-light gray-dark
 directions:
   -
     label: all
@@ -80,7 +80,7 @@ The examples below demonstrate the utility classes on each breakpoint.
 ```
 
 {% for breakpoint in site.data.breakpoints %}
-  <h3 class="text-md text-light margin-top-lg margin-bottom-xs">{{ breakpoint.label }}</h3>
+  <h3 class="text-md text-light mt-30 mb-10">{{ breakpoint.label }}</h3>
   <div class="col-container">
     {% for direction in page.directions %}
       <div class="{{ page.col_classes }}">
@@ -94,4 +94,11 @@ The examples below demonstrate the utility classes on each breakpoint.
 
 ---
 
+### Utility CSS
+```css
+{% sass_output -%}
+```
+
+---
+
 {% include css-stats.html %}

data/styleguide/utilities/colors.md

@@ -12,9 +12,9 @@ base_colors: [Black, White]
 ---
 
 {% for color in page.primary_colors %}
-  <ul class="col-container shade-list margin-bottom-lg" shade-list>
+  <ul class="col-container shade-list mb-30" shade-list>
     {% for shade in page.shades %}
-      <li class="col col-50 col-x1-25 col-x2-0 padding-left-xxs padding-right-xxs padding-left-x1-xs padding-right-x1-xs margin-bottom-xs margin-bottom-x1-md shade-item shade-{{ shade | downcase }} shade-{{ color | color_css_class: shade }}">
+      <li class="col col-50 col-x1-25 col-x2-0 pl-5 pr-5 pl-x1-10 pr-x1-10 mb-10 mb-x1-20 shade-item shade-{{ shade | downcase }} shade-{{ color | color_css_class: shade }}">
         <div class="shade-box box bg-{{ color | color_css_class: shade }} shade-{{ shade | downcase | replace: 'er', '' | replace: 'est', '' }}">
           <div class="shade-color col-center text-xxl bold bg-{{ color | color_css_class: shade }}" shade-color></div>
           <p class="shade-text text-sm medium {{ color | color_css_class: shade }}">
@@ -26,10 +26,10 @@ base_colors: [Black, White]
   </ul>
 {% endfor %}
 
-<ul class="col-container shade-list margin-bottom-lg" shade-list>
+<ul class="col-container shade-list mb-30" shade-list>
   {% assign shade = 'Base' %}
   {% for color in page.base_colors %}
-    <li class="col padding-left-xxs padding-right-xxs padding-left-x1-xs padding-right-x1-xs margin-bottom-xs margin-bottom-x1-md shade-item shade-{{ shade | downcase }} shade-{{ color | color_css_class: shade }}">
+    <li class="col pl-5 pr-5 pl-x1-10 pr-x1-10 mb-10 mb-x1-20 shade-item shade-{{ shade | downcase }} shade-{{ color | color_css_class: shade }}">
       <div class="shade-box box bg-{{ color | color_css_class: shade }} shade-{{ shade | downcase | replace: 'er', '' | replace: 'est', '' }}">
         <div class="shade-color text-xxl bold bg-{{ color | color_css_class: shade }}" shade-color></div>
         <p class="shade-text text-sm medium {{ color | color_css_class: shade }}">

data/styleguide/utilities/grid.md

@@ -2,7 +2,7 @@
 title: Shipyard Grid
 description: The Shipyard grid is a percentage-based, flexbox grid and is entirely responsive. Each class needs the foundational `.col` class in order to function properly, and also should be contained inside the `.col-container` as well.
 sass_file: shipyard/utilities/_grid
-container_classes: col-container margin-top-xs margin-top-x1-sm margin-top-x2-md margin-bottom-xs margin-bottom-x1-sm margin-bottom-x2-md
+container_classes: col-container mt-10 mt-x1-15 mt-x2-20 mb-10 mb-x1-15 mb-x2-20
 box_classes: utilities-grid-box col-center box-secondary text-lighter text-sm strong align-center
 example_flex_columns: [10,20,25,33,50]
 example_sizes: [5,10,15,20,25,30,33,35,40,45,50,55,60,65,66,70,75,80,85,90,95,100]
@@ -170,7 +170,7 @@ Nested grids can be tricky to build and somewhat fragile by nature. For the best
     <div class="{{ page.box_classes }}">40</div>
   </div>
   <div class="col col-60">
-    <div class="{{ page.box_classes }} margin-bottom-xs margin-bottom-x1-sm margin-bottom-x2-md">60</div>
+    <div class="{{ page.box_classes }} mb-10 mb-x1-15 mb-x2-20">60</div>
     <div class="col-container">
       <div class="col"><div class="{{ page.box_classes }}">20</div></div>
       <div class="col"><div class="{{ page.box_classes }}">20</div></div>
@@ -207,7 +207,7 @@ Useful when the flow of the content should be different at a certain breakpoint.
       <span class="teal-darker display-inline display-x2-none">top (mobile)</span>
       <span class="teal-darker display-none display-x2-inline">bottom (desktop)</span>
     </div>
-    <div class="col-container margin-top-xs margin-top-x2-sm margin-bottom-xs margin-bottom-x2-sm flex-row flex-x2-row-reverse">
+    <div class="col-container mt-10 mt-x2-15 mb-10 mb-x2-15 flex-row flex-x2-row-reverse">
       <div class="col">
         <div class="{{ page.box_classes }} bg-blue-lighter">
           <span class="blue-darker display-inline display-x2-none">left (mobile)</span>

data/styleguide/utilities/index.md

@@ -10,7 +10,7 @@ utilities: [Accordion, Responsive, Grid, Typography, Margin & Padding, Colors, B
 
 <ul class="col-container">
   {% for utility in page.utilities %}
-    <li class="margin-bottom-xs margin-bottom-x1-sm margin-bottom-x2-lg col col-100 col-x1-33 col-x2-25">
+    <li class="mb-10 mb-x1-15 mb-x2-30 col col-100 col-x1-33 col-x2-25">
       <a href="{{ site.baseurl }}/utilities/{{ utility | replace: ' ', '-' | replace: '&', '' | replace: '--', '-' | downcase }}" class="box-link box-padding align-center text-md text-x1-lg text-x2-xl">
         {{ utility }}
       </a>

data/styleguide/utilities/margin-padding.md

@@ -3,15 +3,21 @@ title: Margin & Padding Utilities
 description: Shipyard's margin & padding utilities are useful for overriding the default margin and padding in any component, and can be extremely useful in a wide array of situations.
 sass_file: shipyard/utilities/_margin-padding
 box_classes: utilities-margin-padding-box box-secondary btn-sm medium text-light
-options: [none,xxs,xs,sm,md,lg,xl,xxl]
-directions: [left,right]
+options: [0,5,10,15,20,30,40]
+directions:
+  -
+    name: left
+    css: l
+  -
+    name: right
+    css: r
 ---
 
 {% include page-heading.html page=page %}
 
 ---
 
-### Margin All Sides `.margin-{ x1..x4 }-{ xxs..xxl }`
+### Margin All Sides `.m-{ x1..x4 }-{ 0..40 }`
 The examples below demonstrate how much margin will be added to the top and bottom of any element the classes is applied to.
 {: .section-description }
 
@@ -19,40 +25,40 @@ The examples below demonstrate how much margin will be added to the top and bott
   <div class="col">
     <div class="align-center">
       {% for option in page.options %}
-        <div class="{{ page.box_classes }} margin-{{ option }}">.margin-{{ option }}</div>
+        <div class="{{ page.box_classes }} m-{{ option }}">.m-{{ option }}</div>
       {% endfor %}
-      <div class="{{ page.box_classes }} col-55 col-x1-75 col-x2-85 margin-auto">.margin-auto</div>
+      <div class="{{ page.box_classes }} col-55 col-x1-75 col-x2-85 m-auto">.m-auto</div>
     </div>
   </div>
 </div>
 
 ---
 
-### Margin Top & Bottom `.margin-{ top, bottom }-{ x1..x4 }-{ xxs..xxl }`
+### Margin Top & Bottom `.m{ t, b }-{ x1..x4 }-{ 0..40 }`
 The examples below demonstrate how much margin will be added to the top and bottom of any element the classes is applied to.
 {: .section-description }
 
 <div class="col-container">
   {% for option in page.options %}
     <div class="col align-center">
-      <div class="{{ page.box_classes }} margin-bottom-{{ option }}">{{ option }}</div>
-      <div class="{{ page.box_classes }} margin-top-{{ option }}">{{ option }}</div>
+      <div class="{{ page.box_classes }} mb-{{ option }}">.mb-{{ option }}</div>
+      <div class="{{ page.box_classes }} mt-{{ option }}">.mt-{{ option }}</div>
     </div>
   {% endfor %}
 </div>
 
 ---
 
-### Margin Left & Right `.margin-{ left, right }-{ x1..x4 }-{ xxs..xxl }`
+### Margin Left & Right `.m{ l, r }-{ x1..x4 }-{ 0..40 }`
 The examples below demonstrate how much margin will be added to the left and right sides of any element the classes is applied to.
 {: .section-description }
 
 <div class="col-container">
   {% for direction in page.directions %}
     <div class="col">
-      <div class="align-{{ direction }}">
+      <div class="align-{{ direction.name }}">
         {% for option in page.options %}
-          <div class="{{ page.box_classes }} margin-{{ direction }}-{{ option }} margin-bottom-md">.margin-{{ direction }}-{{ option }}</div>
+          <div class="{{ page.box_classes }} m{{ direction.css }}-{{ option }} mb-20">.m{{ direction.css }}-{{ option }}</div>
         {% endfor %}
       </div>
     </div>
@@ -61,45 +67,45 @@ The examples below demonstrate how much margin will be added to the left and rig
 
 ---
 
-### Padding All Sides `.padding-{ x1..x4 }-{ xxs..xxl }`
+### Padding All Sides `.p-{ x1..x4 }-{ 0..40 }`
 The examples below demonstrate how much padding will be added to the top and bottom of any element the classes is applied to.
 {: .section-description }
 
 <div class="col-container">
   {% for option in page.options %}
     <div class="col align-center">
-      <div class="box-secondary medium text-light text-sm padding-{{ option }} margin-bottom-xs">{{ option }}</div>
+      <div class="box-secondary medium text-light text-sm p-{{ option }} mb-10">.p-{{ option }}</div>
     </div>
   {% endfor %}
 </div>
 
 ---
 
-### Padding Top & Bottom `.padding-{ top, bottom }-{ x1..x4 }-{ xxs..xxl }`
+### Padding Top & Bottom `.p{ t, b }-{ x1..x4 }-{ 0..40 }`
 The examples below demonstrate how much padding will be added to the top and bottom of any element the classes is applied to.
 {: .section-description }
 
 <div class="col-container">
   {% for option in page.options %}
     <div class="col align-center">
-      <div class="box-secondary medium text-light text-sm padding-bottom-{{ option }} margin-bottom-xs">{{ option }}</div>
-      <div class="box-secondary medium text-light text-sm padding-top-{{ option }}">{{ option }}</div>
+      <div class="box-secondary medium text-light text-sm pb-{{ option }} mb-10">.pb-{{ option }}</div>
+      <div class="box-secondary medium text-light text-sm pt-{{ option }}">.pt-{{ option }}</div>
     </div>
   {% endfor %}
 </div>
 
 ---
 
-### Padding Left & Right `.padding-{ left, right }-{ x1..x4 }-{ xxs..xxl }`
+### Padding Left & Right `.p{ l, r }-{ x1..x4 }-{ 0..40 }`
 The examples below demonstrate how much padding will be added to the left and right sides of any element the classes is applied to
 {: .section-description }
 
 <div class="col-container">
   {% for direction in page.directions %}
     <div class="col">
-      <div class="align-{{ direction }}">
+      <div class="align-{{ direction.name }}">
         {% for option in page.options %}
-          <div class="{{ page.box_classes }} padding-{{ direction }}-{{ option }} margin-bottom-md">.padding-{{ direction }}-{{ option }}</div>
+          <div class="{{ page.box_classes }} p{{ direction.css }}-{{ option }} mb-20">.p{{ direction.css }}-{{ option }}</div>
         {% endfor %}
       </div>
     </div>
@@ -108,4 +114,11 @@ The examples below demonstrate how much padding will be added to the left and ri
 
 ---
 
+### Component CSS
+```css
+{% sass_output -%}
+```
+
+---
+
 {% include css-stats.html %}