shipyard-framework 0.5.86 → 0.5.87

data/styleguide/components/buttons.md

@@ -11,13 +11,13 @@ sass_file: shipyard/components/_buttons
 Shipyard gives you more buttons than you can shake a stick at.
 {: .section-description }
 
-<div class="margin-bottom-md">
-  {% btn Default, :default, class: 'margin-right-xs' %}
-  {% btn Primary, :primary, class: 'margin-right-xs' %}
-  {% btn Primary Dark, :primary_dark, class: 'margin-right-xs' %}
-  {% btn CTA, :cta, class: 'margin-right-xs' %}
-  {% btn Caution, :caution, class: 'margin-right-xs' %}
-  {% btn Disabled, :disabled, class: 'margin-right-xs' %}
+<div class="mb-20">
+  {% btn Default, :default, class: 'mr-10' %}
+  {% btn Primary, :primary, class: 'mr-10' %}
+  {% btn Primary Dark, :primary_dark, class: 'mr-10' %}
+  {% btn CTA, :cta, class: 'mr-10' %}
+  {% btn Caution, :caution, class: 'mr-10' %}
+  {% btn Disabled, :disabled, class: 'mr-10' %}
   {% btn Link, :link %}
 </div>
 
@@ -37,9 +37,9 @@ Shipyard gives you more buttons than you can shake a stick at.
 Useful when you have a button on a darker background.
 {: .section-description }
 
-<div class="margin-bottom-md">
-  {% btn Secondary, :secondary, class: 'margin-right-xs' %}
-  {% btn Secondary Dark, :secondary_dark, class: 'margin-right-xs' %}
+<div class="mb-20">
+  {% btn Secondary, :secondary, class: 'mr-10' %}
+  {% btn Secondary Dark, :secondary_dark, class: 'mr-10' %}
   {% btn Secondary Link, :secondary_link %}
 </div>
 
@@ -55,8 +55,8 @@ Useful when you have a button on a darker background.
 Useful when you have a button on a darker background.
 {: .section-description }
 
-<div class="box-secondary box-padding bg-gray-dark margin-bottom-md">
-  {% btn Inverse, :inverse, class: 'margin-right-xs' %}
+<div class="box-secondary box-padding bg-gray-dark mb-20">
+  {% btn Inverse, :inverse, class: 'mr-10' %}
   {% btn Inverse Secondary, :inverse_secondary %}
 </div>
 
@@ -71,11 +71,11 @@ Useful when you have a button on a darker background.
 Useful when you want a button with completely rounded corners.
 {: .section-description }
 
-<div class="margin-bottom-md">
-  {% btn Default, :rounded, class: 'margin-right-xs' %}
-  {% btn Primary, :primary :rounded, class: 'margin-right-xs' %}
-  {% btn CTA, :cta :rounded, class: 'margin-right-xs' %}
-  {% btn Caution, :caution :rounded, class: 'margin-right-xs' %}
+<div class="mb-20">
+  {% btn Default, :rounded, class: 'mr-10' %}
+  {% btn Primary, :primary :rounded, class: 'mr-10' %}
+  {% btn CTA, :cta :rounded, class: 'mr-10' %}
+  {% btn Caution, :caution :rounded, class: 'mr-10' %}
   {% btn Secondary, :secondary :rounded %}
 </div>
 
@@ -89,13 +89,13 @@ Useful when you want a button with completely rounded corners.
 Useful when you have a button that triggers an asynchronous action.
 {: .section-description }
 
-<div class="margin-bottom-md">
-  {% btn Default, :loading, class: 'margin-right-xs' %}
-  {% btn Primary, :primary :loading, class: 'margin-right-xs' %}
-  {% btn CTA, :cta :loading, class: 'margin-right-xs' %}
-  {% btn Caution, :caution :loading, class: 'margin-right-xs' %}
-  {% btn Secondary, :secondary :loading, class: 'margin-right-xs' %}
-  {% btn Secondary Link, :secondary_link :loading, class: 'margin-right-xs' %}
+<div class="mb-20">
+  {% btn Default, :loading, class: 'mr-10' %}
+  {% btn Primary, :primary :loading, class: 'mr-10' %}
+  {% btn CTA, :cta :loading, class: 'mr-10' %}
+  {% btn Caution, :caution :loading, class: 'mr-10' %}
+  {% btn Secondary, :secondary :loading, class: 'mr-10' %}
+  {% btn Secondary Link, :secondary_link :loading, class: 'mr-10' %}
 </div>
 
 ```html
@@ -108,7 +108,7 @@ Useful when you have a button that triggers an asynchronous action.
 Often really useful on mobile screens or in combination with other grids.
 {: .section-description }
 
-<div class="margin-bottom-md">
+<div class="mb-20">
   {% btn Save Changes, :full %}
 </div>
 
@@ -122,7 +122,7 @@ Often really useful on mobile screens or in combination with other grids.
 The button classes can be applied to any type of html tag to achieve the desired result. The most common examples being the `button`, `a`, and `input` tags as seen in the example below.
 {: .section-description }
 
-<div class="margin-bottom-lg">
+<div class="mb-30">
   {% btn Button %}
   <a href="#" class="btn">Link</a>
   <input type="button" class="btn" value="Input" />

data/styleguide/components/checkboxes.md

@@ -16,7 +16,7 @@ labels:
 Useful when you want to group a series of checkboxes 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="checkbox-inline-{{ forloop.index }}" name="checkbox-list" type="checkbox" class="input input-checkbox" {% if forloop.index == 1 %}checked{% endif %} />
@@ -40,8 +40,8 @@ Useful when you want to group a series of checkboxes together on a single line.
 Useful when you want to group a series of checkboxes 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 %}
@@ -129,35 +129,35 @@ Useful when you want to the user to proceed with caution about the choices they'
 ---
 
 ## Checkboxes Nested in Buttons
-{: .margin-bottom-md }
+{: .mb-20 }
 
-<button class="btn btn-secondary margin-right-xs margin-bottom-xs">
-  <input type="checkbox" class="input input-checkbox margin-right-xxs" />
+<button class="btn btn-secondary mr-10 mb-10">
+  <input type="checkbox" class="input input-checkbox mr-5" />
   Unchecked
 </button>
-<button class="btn btn-secondary margin-right-xs margin-bottom-xs">
-  <input type="checkbox" class="input input-checkbox margin-right-xxs" checked />
+<button class="btn btn-secondary mr-10 mb-10">
+  <input type="checkbox" class="input input-checkbox mr-5" checked />
   Checked
 </button>
-<button class="btn btn-cta margin-right-xs margin-bottom-xs">
-  <input type="checkbox" class="input input-checkbox input-checkbox-inverse margin-right-xxs" />
+<button class="btn btn-cta mr-10 mb-10">
+  <input type="checkbox" class="input input-checkbox input-checkbox-inverse mr-5" />
   Inverse Unchecked
 </button>
-<button class="btn btn-cta margin-right-xs margin-bottom-xs">
-  <input type="checkbox" class="input input-checkbox input-checkbox-inverse margin-right-xxs" checked />
+<button class="btn btn-cta mr-10 mb-10">
+  <input type="checkbox" class="input input-checkbox input-checkbox-inverse mr-5" checked />
   Inverse Checked
 </button>
 
 ```html
 <!-- Secondary button with a checkbox in the unchecked state. -->
 <button class="btn btn-secondary">
-  <input type="checkbox" class="input input-checkbox margin-right-xxs" />
+  <input type="checkbox" class="input input-checkbox mr-5" />
   Button Text
 </button>
 
 <!-- CTA button with a checkbox in the checked state. -->
 <button class="btn btn-cta">
-  <input type="checkbox" class="input input-checkbox input-checkbox-inverse margin-right-xxs" checked />
+  <input type="checkbox" class="input input-checkbox input-checkbox-inverse mr-5" checked />
   Button Text
 </button>
 ```
@@ -168,18 +168,18 @@ Useful when you want to the user to proceed with caution about the choices they'
 Switches are useful when the user has a choice to toggle on and off. Note: For the best UX, please make sure that the switch saves immediately each time it changes state.
 {: .section-description }
 
-<div class="box box-xs margin-bottom-sm padding-top-md padding-bottom-md padding-left-sm padding-right-sm padding-left-x1-lg padding-right-x1-lg">
+<div class="box box-xs mb-15 pt-20 pb-20 pl-15 pr-15 pl-x1-30 pr-x1-30">
   <div class="col-container-nowrap">
     <div class="components-checkboxes-switch-col col col-100 text-light text-overflow-ellipsis">Praesent commodo cursus magna, vel scelerisque aenean eu leo quam pellentesque ornare sem lacinia quam.</div>
-    <div class="col margin-left-sm">
+    <div class="col ml-15">
       <input type="checkbox" class="input input-switch" checked />
     </div>
   </div>
 </div>
-<div class="box-secondary box-xs padding-top-md padding-bottom-md padding-left-sm padding-right-sm padding-left-x1-lg padding-right-x1-lg">
+<div class="box-secondary box-xs pt-20 pb-20 pl-15 pr-15 pl-x1-30 pr-x1-30">
   <div class="col-container-nowrap">
     <div class="components-checkboxes-switch-col col col-100 text-light text-overflow-ellipsis">Praesent commodo cursus magna, vel scelerisque aenean eu leo quam pellentesque ornare sem lacinia quam.</div>
-    <div class="col margin-left-sm">
+    <div class="col ml-15">
       <input type="checkbox" class="input input-switch" />
     </div>
   </div>
@@ -195,18 +195,18 @@ Switches are useful when the user has a choice to toggle on and off. Note: For t
 Useful when you don't need to draw attention to the bright-red, off state.
 {: .section-description }
 
-<div class="box box-xs margin-bottom-sm padding-top-md padding-bottom-md padding-left-sm padding-right-sm padding-left-x1-lg padding-right-x1-lg">
+<div class="box box-xs mb-15 pt-20 pb-20 pl-15 pr-15 pl-x1-30 pr-x1-30">
   <div class="col-container-nowrap">
     <div class="components-checkboxes-switch-col col col-100 text-light text-overflow-ellipsis">Praesent commodo cursus magna, vel scelerisque aenean eu leo quam pellentesque ornare sem lacinia quam.</div>
-    <div class="col margin-left-sm">
+    <div class="col ml-15">
       <input type="checkbox" class="input input-switch-secondary" checked />
     </div>
   </div>
 </div>
-<div class="box-secondary box-xs padding-top-md padding-bottom-md padding-left-sm padding-right-sm padding-left-x1-lg padding-right-x1-lg">
+<div class="box-secondary box-xs pt-20 pb-20 pl-15 pr-15 pl-x1-30 pr-x1-30">
   <div class="col-container-nowrap">
     <div class="components-checkboxes-switch-col col col-100 text-light text-overflow-ellipsis">Praesent commodo cursus magna, vel scelerisque aenean eu leo quam pellentesque ornare sem lacinia quam.</div>
-    <div class="col margin-left-sm">
+    <div class="col ml-15">
       <input type="checkbox" class="input input-switch-secondary" />
     </div>
   </div>
@@ -221,18 +221,18 @@ Useful when you don't need to draw attention to the bright-red, off state.
 Useful to communicate that your object is only partially connected, and it needs additional attention.
 {: .section-description }
 
-<div class="box box-xs margin-bottom-sm padding-top-md padding-bottom-md padding-left-sm padding-right-sm padding-left-x1-lg padding-right-x1-lg">
+<div class="box box-xs mb-15 pt-20 pb-20 pl-15 pr-15 pl-x1-30 pr-x1-30">
   <div class="col-container-nowrap">
     <div class="components-checkboxes-switch-col col col-100 text-light text-overflow-ellipsis">Praesent commodo cursus magna, vel scelerisque aenean eu leo quam pellentesque ornare sem lacinia quam.</div>
-    <div class="col margin-left-sm">
+    <div class="col ml-15">
       <input type="checkbox" class="input input-switch-secondary input-switch-warning" checked />
     </div>
   </div>
 </div>
-<div class="box-secondary box-xs padding-top-md padding-bottom-md padding-left-sm padding-right-sm padding-left-x1-lg padding-right-x1-lg">
+<div class="box-secondary box-xs pt-20 pb-20 pl-15 pr-15 pl-x1-30 pr-x1-30">
   <div class="col-container-nowrap">
     <div class="components-checkboxes-switch-col col col-100 text-light text-overflow-ellipsis">Praesent commodo cursus magna, vel scelerisque aenean eu leo quam pellentesque ornare sem lacinia quam.</div>
-    <div class="col margin-left-sm">
+    <div class="col ml-15">
       <input type="checkbox" class="input input-switch-secondary input-switch-warning" />
     </div>
   </div>
@@ -250,19 +250,19 @@ Each size can be used or altered at any breakpoint.
 <ul class="input-list">
   <li class="input-item">
     <input id="small-switch-on" type="checkbox" class="input input-switch input-switch-sm align-middle" checked />
-    <label for="small-switch-on" class="text-sm text-light margin-left-xxs medium">Small</label>
+    <label for="small-switch-on" class="text-sm text-light ml-5 medium">Small</label>
   </li>
   <li class="input-item">
     <input id="small-switch-on" type="checkbox" class="input input-switch align-middle" checked />
-    <label for="small-switch-on" class="text-sm text-light margin-left-xxs medium">Medium (Default)</label>
+    <label for="small-switch-on" class="text-sm text-light ml-5 medium">Medium (Default)</label>
   </li>
   <li class="input-item">
     <input id="small-switch-on" type="checkbox" class="input input-switch input-switch-lg align-middle" checked />
-    <label for="small-switch-on" class="text-sm text-light margin-left-xxs medium">Large</label>
+    <label for="small-switch-on" class="text-sm text-light ml-5 medium">Large</label>
   </li>
   <li class="input-item">
     <input id="small-switch-on" type="checkbox" class="input input-switch input-switch-xl align-middle" checked />
-    <label for="small-switch-on" class="text-sm text-light margin-left-xxs medium">X-Large</label>
+    <label for="small-switch-on" class="text-sm text-light ml-5 medium">X-Large</label>
   </li>
 </ul>
 

data/styleguide/components/code.html

@@ -7,13 +7,13 @@ sass_file: shipyard/components/_code
 
 <hr />
 
-<h2>Inline Code Example <code class="code-inline margin-left-xxs">.code-inline</code></h2>
+<h2>Inline Code Example <code class="code-inline ml-5">.code-inline</code></h2>
 <p class="p">Vestibulum id ligula porta felis <code class="code-inline">euismod semper</code>. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia <code class="code-inline">bibendum nulla sed</code> consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. <code class="code-inline">Nullam id</code> dolor id nibh ultricies vehicula ut id elit. <code class="code-inline">Cras mattis consectetur</code> purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 
 <hr />
 
-<h2>Code Block Example <code class="code-inline margin-left-xxs">.code-block</code></h2>
-<pre class="code-block margin-top-sm"><code>class Shipyard
+<h2>Code Block Example <code class="code-inline ml-5">.code-block</code></h2>
+<pre class="code-block mt-15"><code>class Shipyard
   def foo
   end
 
@@ -23,7 +23,7 @@ end</code></pre>
 
 <hr />
 
-<h2 class="margin-bottom-sm">Code Alert Examples</h2>
+<h2 class="mb-15">Code Alert Examples</h2>
 {% alert :info %}
   Ten other people are also viewing tickets for this flight.
   Use the code <code class="code-inline">Travel_Light_2017</code> before you book your flight.

data/styleguide/components/forms.md

@@ -7,15 +7,15 @@ title: Shipyard Forms
 ---
 
 <div class="col-container input-group">
-  <div class="col col-100 col-x1-33 margin-bottom-sm margin-bottom-x1-none">
+  <div class="col col-100 col-x1-33 mb-15 mb-x1-0">
     <label class="label">Textbox</label>
     <input type="text" class="input input-text" placeholder=".input-text" />
   </div>
-  <div class="col col-100 col-x1-33 margin-bottom-sm margin-bottom-x1-none">
+  <div class="col col-100 col-x1-33 mb-15 mb-x1-0">
     <label class="label">Textbox Read-Only</label>
     <input type="text" class="input input-text input-readonly" placeholder=".input-readonly" value="copy-paste-me" readonly />
   </div>
-  <div class="col col-100 col-x1-33 margin-bottom-sm margin-bottom-x1-none">
+  <div class="col col-100 col-x1-33 mb-15 mb-x1-0">
     <label class="label">Textbox Disabled</label>
     <input type="text" class="input input-text" placeholder=".input-text" disabled />
   </div>
@@ -84,14 +84,14 @@ title: Shipyard Forms
 
 ---
 
-<h2 class="margin-bottom-xs">Input Boxes</h2>
+<h2 class="mb-10">Input Boxes</h2>
 <div class="input-box">
   <input type="text" class="input input-text" placeholder=".input .input-text" />
 </div>
 
 ---
 
-<h2 class="margin-bottom-xs">Required Fields</h2>
+<h2 class="mb-10">Required Fields</h2>
 <div class="col-container">
   <div class="col col-50">
     <div class="input-required">
@@ -114,7 +114,7 @@ title: Shipyard Forms
 
 ---
 
-<h2 class="margin-bottom-xs">Form Errors</h2>
+<h2 class="mb-10">Form Errors</h2>
 <div class="form-error-container">
   <ul class="form-error-list">
     <li class="form-error-item">
@@ -128,7 +128,7 @@ title: Shipyard Forms
     </li>
   </ul>
 </div>
-<div class="col-container margin-top-md margin-bottom-md">
+<div class="col-container mt-20 mb-20">
   <div class="col col-50 input-error">
     <label class="label">Required Select Box</label>
     <div class="input-required">

data/styleguide/components/horizontal-rules.md

@@ -34,7 +34,7 @@ text_shades: [normal, light, lighter, lightest]
 ---
 
 ## Thin Horizontal Rules `.hr-thin`
-{: .margin-bottom-md }
+{: .mb-20 }
 
 <div class="utilities-typography-hr-box-default">
   <hr class="utilities-typography-hr hr-thin" />

data/styleguide/components/icons.md

@@ -29,6 +29,22 @@ The following icons are the most frequently used in just about any application.
 
 ---
 
+### Status Icons
+The following icons are used primarily in the <a href="{{ site.baseurl }}/components/statuses">status component</a>.
+{: .section-description }
+
+<ul class="icon-list col-container">
+  {% iconitem :error, class: 'center' %}
+  {% iconitem :fail, class: 'center' %}
+  {% iconitem :idle, class: 'center' %}
+  {% iconitem :running, class: 'center' %}
+  {% iconitem :skipped, class: 'center' %}
+  {% iconitem :success, class: 'center' %}
+  {% iconitem 'waiting', class: 'center' %}
+</ul>
+
+---
+
 ### Brand Icons
 If you need to style several paths inside of the icon, it's important to make sure you use the *injected* version of the icon.
 {: .section-description }
@@ -97,8 +113,8 @@ The icon size utility classes can be applied to any icon, and are useful when yo
 One of the most common problems when using an icon is that doesn't line up with the text content next to it. Don't worry though, we've got you covered — simply apply the `.align-middle` class to any icon to fix this issue.
 {: .section-description }
 
-<div class="margin-bottom-lg">
-  <button class="btn btn-secondary">{% icon :plus, class: 'align-middle icon-sm margin-right-xxs' %} Create</button>
+<div class="mb-30">
+  <button class="btn btn-secondary">{% icon :plus, class: 'align-middle icon-sm mr-5' %} Create</button>
 </div>
 
 ```erb

data/styleguide/components/index.md

@@ -1,6 +1,6 @@
 ---
 title: Shipyard Components
-components: [Boxes, Buttons, Empty States, Alerts, Notes, Forms, Radio Buttons, Checkboxes, Icons, Modals, Tooltips, Code, Tables, Horizontal Rules]
+components: [Boxes, Buttons, Empty States, Alerts, Notes, Forms, Statuses, Radio Buttons, Checkboxes, Icons, Modals, Tooltips, Code, Tables, Horizontal Rules]
 ---
 
 {% include page-heading.html page=page %}
@@ -9,7 +9,7 @@ components: [Boxes, Buttons, Empty States, Alerts, Notes, Forms, Radio Buttons,
 
 <ul class="col-container">
   {% for component in page.components %}
-    <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 }}/components/{{ component | replace: ' ', '-' | downcase }}" class="box-link box-padding align-center text-md text-x1-lg text-x2-xl">
         {{ component }}
       </a>

data/styleguide/components/modals/_modal.html

@@ -1,11 +1,11 @@
 <div class="modal-container {{ include.css_class }}" modal="example">
   <div class="modal" role="dialog">
     <div class="modal-content">
-      <div class="modal-title-border margin-bottom-x1-md">
+      <div class="modal-title-border mb-x1-20">
         <h1 class="text-lg text-x1-xl">Billing Info</h1>
       </div>
       <form>
-        <div class="col-container margin-bottom-md">
+        <div class="col-container mb-20">
           <div class="col">
             <label class="label">First Name</label>
             <div class="input-required">
@@ -19,8 +19,8 @@
             </div>
           </div>
         </div>
-        <div class="col-container margin-bottom-md">
-          <div class="col col-100 col-x1-50 margin-bottom-sm margin-bottom-x1-none">
+        <div class="col-container mb-20">
+          <div class="col col-100 col-x1-50 mb-15 mb-x1-0">
             <label class="label">Email Address</label>
             <input type="text" class="input input-text" />
           </div>
@@ -31,23 +31,23 @@
             </div>
           </div>
         </div>
-        <div class="col-container margin-bottom-md">
-          <div class="col col-100 margin-bottom-sm">
+        <div class="col-container mb-20">
+          <div class="col col-100 mb-15">
             <label class="label">Billing Address</label>
             <input type="text" class="input input-text" placeholder="Company Name" />
           </div>
-          <div class="col col-100 margin-bottom-sm">
+          <div class="col col-100 mb-15">
             <input type="text" class="input input-text" placeholder="Street Address" />
           </div>
-          <div class="col col-100 col-x1-33 margin-bottom-sm">
+          <div class="col col-100 col-x1-33 mb-15">
             <div class="input-required">
               <input type="text" class="input input-text" placeholder="Postal Code" />
             </div>
           </div>
-          <div class="col col-50 col-x1-33 margin-bottom-sm">
+          <div class="col col-50 col-x1-33 mb-15">
             <input type="text" class="input input-text" placeholder="City" />
           </div>
-          <div class="col col-50 col-x1-33 margin-bottom-sm">
+          <div class="col col-50 col-x1-33 mb-15">
             <input type="text" class="input input-text" placeholder="State" />
           </div>
           <div class="col col-100">
@@ -64,13 +64,13 @@
             </div>
           </div>
         </div>
-        <div class="col-container margin-bottom-md">
+        <div class="col-container mb-20">
           <div class="col">
             <label class="label">Tax Information</label>
             <input type="text" class="input input-text" placeholder="VAT Number" />
           </div>
         </div>
-        <div class="col-container margin-bottom-sm margin-bottom-x1-none">
+        <div class="col-container mb-15 mb-x1-0">
           <div class="col">
             <label class="label">Additional Invoice Information</label>
             <p class="label-note">This information will appear on each invoice. Don't include any confidential financial information.</p>
@@ -86,11 +86,11 @@
             Save
             <span class="display-none display-x1-inline">&amp; Close</span>
           </button>
-          <button class="btn btn-secondary btn-sm btn-x1-md margin-left-xxs margin-left-x1-xs" modal-close>Cancel</button>
+          <button class="btn btn-secondary btn-sm btn-x1-md ml-5 ml-x1-10" modal-close>Cancel</button>
         </div>
         <div class="col align-right">
-          <span class="btn-sm btn-x1-md white-space-nowrap padding-none">
-            {% icon :lock, class: 'green-dark align-middle margin-right-xxs' %}
+          <span class="btn-sm btn-x1-md white-space-nowrap p-0">
+            {% icon :lock, class: 'green-dark align-middle mr-5' %}
             <span class="text-sm text-lighter medium">Secure Server</span>
           </span>
         </div>

data/styleguide/components/modals/example-billing.html

@@ -7,7 +7,7 @@ title: Shipyard Modal Example
 <div class="modal-container" modal="example-small">
   <div class="modal modal-sm modal-billing" role="dialog">
     <div class="modal-content">
-      <div class="modal-title-border margin-bottom-md margin-bottom-x1-lg">
+      <div class="modal-title-border mb-20 mb-x1-30">
         <div class="col-container">
           <h1 class="text-lg text-x1-xl col">Payment Period</h1>
           <p class="col text-light medium align-right display-none display-x1-block">
@@ -17,27 +17,27 @@ title: Shipyard Modal Example
           </p>
         </div>
       </div>
-      <button class="btn btn-cta btn-sm btn-x1-md margin-right-xs margin-right-x1-sm margin-bottom-xs margin-bottom-x1-none">
-        <input type="radio" class="input input-radio-checkbox input-radio-inverse margin-right-xs" checked />
+      <button class="btn btn-cta btn-sm btn-x1-md mr-10 mr-x1-15 mb-10 mb-x1-0">
+        <input type="radio" class="input input-radio-checkbox input-radio-inverse mr-10" checked />
         Monthly &mdash; $39
       </button>
       <button class="btn btn-secondary-link btn-sm btn-x1-md">
-        <input type="radio" class="input input-radio-checkbox margin-right-xs" />
+        <input type="radio" class="input input-radio-checkbox mr-10" />
         Yearly &mdash; $390
-        <span class="btn btn-cta btn-rounded btn-xxs margin-left-xs modal-billing-yearly-promo">2 Months Free</span>
+        <span class="btn btn-cta btn-rounded btn-xxs ml-10 modal-billing-yearly-promo">2 Months Free</span>
         {% icon :tag, class: 'icon-inverse' %}
       </button>
-      <p class="text-light margin-top-xs margin-top-x1-sm" markdown="1">
+      <p class="text-light mt-10 mt-x1-15" markdown="1">
         Your new subscription will be prorated on your next invoice. If you have any questions, don't hesitate to <a href="#" class="medium">contact our support team</a>.
       </p>
-      <div class="modal-title-border margin-top-lg margin-bottom-md margin-bottom-x1-lg">
+      <div class="modal-title-border mt-30 mb-20 mb-x1-30">
         <h1 class="text-lg text-x1-xl">Payment Info</h1>
       </div>
       <form>
         <div class="input-required">
           <input type="text" class="input input-text" placeholder="Card Number" />
         </div>
-        <div class="col-container margin-top-md">
+        <div class="col-container mt-20">
           <div class="col col-50 col-x1-33">
             <label class="label">Expiry Date</label>
             <div class="input-required">
@@ -50,7 +50,7 @@ title: Shipyard Modal Example
               <input type="text" class="input input-text" placeholder="3 or 4 digits" />
             </div>
           </div>
-          <div class="col col-100 col-x1-33 margin-top-md margin-top-x1-none margin-bottom-sm margin-bottom-x1-none">
+          <div class="col col-100 col-x1-33 mt-20 mt-x1-0 mb-15 mb-x1-0">
             <label class="label">Zip Code</label>
             <div class="input-required">
               <input type="text" class="input input-text" />
@@ -66,11 +66,11 @@ title: Shipyard Modal Example
             Save
             <span class="display-none display-x1-inline">&amp; Continue</span>
           </button>
-          <button class="btn btn-secondary btn-sm btn-x1-md margin-left-xxs margin-left-x1-xs" modal-close>Cancel</button>
+          <button class="btn btn-secondary btn-sm btn-x1-md ml-5 ml-x1-10" modal-close>Cancel</button>
         </div>
         <div class="col align-right">
-          <span class="btn-sm btn-x1-md white-space-nowrap padding-none">
-            {% icon :lock, class: 'green-dark align-middle margin-right-xxs' %}
+          <span class="btn-sm btn-x1-md white-space-nowrap p-0">
+            {% icon :lock, class: 'green-dark align-middle mr-5' %}
             <span class="text-sm text-lighter medium">Secure Server</span>
           </span>
         </div>

data/styleguide/components/modals/example-downgrade.html

@@ -11,7 +11,7 @@ answers:
   <div class="modal modal-sm modal-billing" role="dialog">
     <div class="modal-content">
       <h1 class="modal-title text-lg text-x1-xl">Codeship Basic Downgrade</h1>
-      <p class="text-light margin-bottom-md">
+      <p class="text-light mb-20">
         Our mission is to ensure that Codeship enables all users to be successful with their projects. The best way to do this is through continuous feedback. Before we process your request, please let us know why you're canceling your current Codeship Basic plan.
       </p>
       <form>
@@ -26,7 +26,7 @@ answers:
       </form>
     </div>
     <div class="modal-ctas">
-      <a href="{{ site.baseurl }}/components/modals/example-survey" class="btn btn-primary btn-sm btn-x1-md margin-right-xxs margin-right-x1-xs" modal-close>Continue</a>
+      <a href="{{ site.baseurl }}/components/modals/example-survey" class="btn btn-primary btn-sm btn-x1-md mr-5 mr-x1-10" modal-close>Continue</a>
       <button class="btn btn-secondary btn-sm btn-x1-md" modal-close>Cancel</button>
     </div>
   </div>

data/styleguide/components/modals/example-survey.html

@@ -12,9 +12,9 @@ answers:
 
 <div class="modal-container" modal="example-small">
   <div class="modal modal-sm modal-billing" role="dialog">
-    <div class="alert alert-success margin-bottom-none rounded-top medium text-sm">
+    <div class="alert alert-success mb-0 rounded-top medium text-sm">
       We'd like to offer you
-      <span class="modal-downgrade-coupon code-inline strong"><span class="modal-downgrade-tag bg-green-dark margin-right-none rounded-left">{% icon :tag, class: 'align-middle modal-downgrade-tag-icon' %}</span><span class="modal-downgrade-coupon-txt">50% OFF</span></span>
+      <span class="modal-downgrade-coupon code-inline strong"><span class="modal-downgrade-tag bg-green-dark mr-0 rounded-left">{% icon :tag, class: 'align-middle modal-downgrade-tag-icon' %}</span><span class="modal-downgrade-coupon-txt">50% OFF</span></span>
       one month if you decide to stay.
       <button class="alert-cta btn btn-cta btn-sm" modal-close>Apply Discount</button>
     </div>
@@ -22,7 +22,7 @@ answers:
       <div class="modal-title">
         <h1 class="text-lg text-x1-xl">Codeship Basic Downgrade</h1>
       </div>
-      <p class="text-light margin-bottom-md">
+      <p class="text-light mb-20">
         We'd appreciate it if you would take a moment to share your thoughts
         and experience on why Codeship wasn't a good fit for your team.
       </p>
@@ -42,10 +42,10 @@ answers:
       </form>
     </div>
     <div class="modal-ctas">
-      <button class="btn btn-caution btn-sm btn-x1-md margin-right-xxs margin-right-x1-xs" modal-close>
+      <button class="btn btn-caution btn-sm btn-x1-md mr-5 mr-x1-10" modal-close>
         <span class="display-none display-x1-inline">Confirm</span> Downgrade
       </button>
-      <button class="btn btn-cta btn-sm btn-x1-md margin-right-xxs margin-right-x1-xs" modal-close>Apply Discount</button>
+      <button class="btn btn-cta btn-sm btn-x1-md mr-5 mr-x1-10" modal-close>Apply Discount</button>
       <button class="btn btn-secondary btn-sm btn-x1-md" modal-close>Cancel</button>
     </div>
   </div>

data/styleguide/components/modals/index.md

@@ -11,7 +11,7 @@ sass_file: shipyard/components/_modals
 <div class="col-container-x1-nowrap">
   <div class="col col-100">
     <h3 class="col-100">Building Modals</h3>
-    <p class="text-light margin-bottom-sm">Useful when you need to draw attention to information that requires additional action.</p>
+    <p class="text-light mb-15">Useful when you need to draw attention to information that requires additional action.</p>
   </div>
   <div class="col">
     <button class="btn btn-sm btn-x1-md btn-secondary white-space-nowrap" modal-trigger="example">Demo Modal</button>