shipyard-framework 0.5.87 → 0.6.0

data/styleguide/components/checkboxes.md

@@ -1,281 +0,0 @@
----
-title: Checkboxes
-labels:
-  - Nulla vitae elit libero, a pharetra augue.
-  - Cras mattis consectetur purus sit amet fermentum.
-  - Cum sociis natoque penatibus et magnis dis parturient montes.
-  - Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia.
-  - Donec id elit non mi porta gravida at eget metus.
----
-
-{% include page-heading.html page=page %}
-
----
-
-## Inline Checkbox Lists
-Useful when you want to group a series of checkboxes together on a single line.
-{: .section-description }
-
-<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 %} />
-      <label for="checkbox-inline-{{ forloop.index }}" class="input-label">Inline Label</label>
-    </li>
-  {% endfor %}
-</ul>
-
-```html
-<ul class="input-list">
-  <li class="input-item-inline">
-    <input id="checkbox-id" name="checkbox-name" type="checkbox" class="input input-checkbox" checked />
-    <label for="checkbox-id" class="input-label">Checkbox Label</label>
-  </li>
-</ul>
-```
-
----
-
-## Stacked Checkbox Lists
-Useful when you want to group a series of checkboxes together in a list (stacked by default).
-{: .section-description }
-
-<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 %}
-          <li class="input-item">
-            <input id="checkbox-light-{{ forloop.index }}" name="checkbox-list" type="checkbox" class="input input-checkbox" {% if forloop.index == 1 %}checked{% endif %} />
-            <label for="checkbox-light-{{ forloop.index }}" class="input-label">{{ label }}</label>
-          </li>
-        {% endfor %}
-      </ul>
-    </div>
-  </div>
-  <div class="col col-100 col-x1-50">
-    <div class="box-secondary box-padding">
-      <ul class="input-list">
-        {% for label in page.labels %}
-          <li class="input-item">
-            <input id="checkbox-dark-{{ forloop.index }}" name="checkbox-list" type="checkbox" class="input input-checkbox" {% if forloop.index == 1 %}checked{% endif %} />
-            <label for="checkbox-dark-{{ forloop.index }}" class="input-label">{{ label }}</label>
-          </li>
-        {% endfor %}
-      </ul>
-    </div>
-  </div>
-</div>
-
-```html
-<ul class="input-list">
-  <li class="input-item">
-    <input id="checkbox-id" name="checkbox-name" type="checkbox" class="input input-checkbox" checked />
-    <label for="checkbox-id" class="input-label">Checkbox Label</label>
-  </li>
-</ul>
-```
-
----
-
-## Inverse Checkbox Lists
-Useful when the checkboxes are displayed on a dark background.
-{: .section-description }
-
-<div class="box-secondary box-padding bg-gray-darker">
-  <ul class="input-list">
-    {% for label in page.labels %}
-      <li class="input-item">
-        <input id="checkbox-inverse-{{ forloop.index }}" name="checkbox-inverse-list" type="checkbox" class="input input-checkbox input-checkbox-inverse" {% if forloop.index == 1 %}checked{% endif %} />
-        <label for="checkbox-inverse-{{ forloop.index }}" class="input-label-inverse">{{ label }}</label>
-      </li>
-    {% endfor %}
-  </ul>
-</div>
-
-```html
-<ul class="input-list">
-  <li class="input-item">
-    <input id="checkbox-id" name="checkbox-name" type="checkbox" class="input input-checkbox input-checkbox-inverse" checked />
-    <label for="checkbox-id" class="input-label-inverse">Checkbox Inverse Label</label>
-  </li>
-</ul>
-```
-
----
-
-## Caution Checkbox Lists
-Useful when you want to the user to proceed with caution about the choices they're making.
-{: .section-description }
-
-<ul class="input-list">
-  {% for label in page.labels %}
-    <li class="input-item">
-      <input id="checkbox-caution-{{ forloop.index }}" name="checkbox-list" type="checkbox" class="input input-checkbox input-checkbox-caution" {% if forloop.index == 1 %}checked{% endif %} />
-      <label for="checkbox-caution-{{ forloop.index }}" class="input-label">{{ label }}</label>
-    </li>
-  {% endfor %}
-</ul>
-
-```html
-<ul class="input-list">
-  <li class="input-item">
-    <input id="checkbox-id" name="checkbox-name" type="checkbox" class="input input-checkbox input-checkbox-caution" checked />
-    <label for="checkbox-id" class="input-label">Checkbox Label</label>
-  </li>
-</ul>
-```
-
----
-
-## Checkboxes Nested in Buttons
-{: .mb-20 }
-
-<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 mr-10 mb-10">
-  <input type="checkbox" class="input input-checkbox mr-5" checked />
-  Checked
-</button>
-<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 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 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 mr-5" checked />
-  Button Text
-</button>
-```
-
----
-
-## Checkbox-Switches
-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 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 ml-15">
-      <input type="checkbox" class="input input-switch" checked />
-    </div>
-  </div>
-</div>
-<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 ml-15">
-      <input type="checkbox" class="input input-switch" />
-    </div>
-  </div>
-</div>
-
-```html
-<input type="checkbox" class="input input-switch" />
-```
-
----
-
-## Secondary Checkbox-Switches
-Useful when you don't need to draw attention to the bright-red, off state.
-{: .section-description }
-
-<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 ml-15">
-      <input type="checkbox" class="input input-switch-secondary" checked />
-    </div>
-  </div>
-</div>
-<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 ml-15">
-      <input type="checkbox" class="input input-switch-secondary" />
-    </div>
-  </div>
-</div>
-```html
-<input type="checkbox" class="input input-switch-secondary" />
-```
-
----
-
-## Warning Checkbox-Switches
-Useful to communicate that your object is only partially connected, and it needs additional attention.
-{: .section-description }
-
-<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 ml-15">
-      <input type="checkbox" class="input input-switch-secondary input-switch-warning" checked />
-    </div>
-  </div>
-</div>
-<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 ml-15">
-      <input type="checkbox" class="input input-switch-secondary input-switch-warning" />
-    </div>
-  </div>
-</div>
-```html
-<input type="checkbox" class="input input-switch-secondary input-switch-warning" />
-```
-
----
-
-## Checkbox-Switch Sizes `input-switch-{ x1..x4 }-{ sm..xl }`
-Each size can be used or altered at any breakpoint.
-{: .section-description }
-
-<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 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 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 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 ml-5 medium">X-Large</label>
-  </li>
-</ul>
-
-```html
-<!-- Input-Switch: Small -->
-<input type="checkbox" class="input input-switch input-switch-sm" />
-
-<!-- Input-Switch: Medium (Default) -->
-<input type="checkbox" class="input input-switch" />
-
-<!-- Input-Switch: Large -->
-<input type="checkbox" class="input input-switch input-switch-lg" />
-
-<!-- Input-Switch: X-Large -->
-<input type="checkbox" class="input input-switch input-switch-xl" />
-```

data/styleguide/components/code.html

@@ -1,49 +0,0 @@
----
-title: Shipyard Code Component
-sass_file: shipyard/components/_code
----
-
-{% include page-heading.html page=page %}
-
-<hr />
-
-<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 ml-5">.code-block</code></h2>
-<pre class="code-block mt-15"><code>class Shipyard
-  def foo
-  end
-
-  def bar
-  end
-end</code></pre>
-
-<hr />
-
-<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.
-{% endalert %}
-
-{% alert :success %}
-  Pack your bags! You'll be on the next flight to Hawaii.
-  Use the code <code class="code-inline">Travel_Light_2017</code> on your next flight.
-{% endalert %}
-
-{% alert :warning %}
-  There are only 2 seats left on this flight! We recommend to book your tickets as soon as possible.
-  Use the code <code class="code-inline">Travel_Light_2017</code> before you book your flight.
-{% endalert %}
-
-{% alert :error %}
-  This flight is now sold out. Let's get you on the next flight to Kauai.
-  We hope the code <code class="code-inline">Travel_Light_2017</code> will be useful for your next flight.
-{% endalert %}
-
-<hr />
-
-{% include css-stats.html %}

data/styleguide/components/empty-states.html

@@ -1,12 +0,0 @@
----
-title: Empty States
----
-
-{% include page-heading.html page=page %}
-
-<hr />
-
-<div class="empty-container align-center">
-  <p class="empty-txt">Welcome to Shipyard!<br /> Get started by creating your first project.</p>
-  {% btn Create Project, :primary, class: 'empty-cta' %}
-</div>

data/styleguide/components/forms.md

@@ -1,151 +0,0 @@
----
-title: Shipyard Forms
----
-
-{% include page-heading.html page=page %}
-
----
-
-<div class="col-container input-group">
-  <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 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 mb-15 mb-x1-0">
-    <label class="label">Textbox Disabled</label>
-    <input type="text" class="input input-text" placeholder=".input-text" disabled />
-  </div>
-</div>
-```html
-<!-- Default Textbox -->
-<input type="text" class="input input-text" />
-
-<!-- Read-Only Textbox -->
-<input type="text" class="input input-text input-readonly" readonly />
-
-<!-- Disabled Textbox -->
-<input type="text" class="input input-text" disabled />
-```
-
----
-
-## Connected Textboxes
-
-<div class="input-group">
-  <input type="text" class="input input-text input-text-connect-top" placeholder=".input-text-connect-top" />
-  <input type="text" class="input input-text input-text-connect-middle" placeholder=".input-text-connect-middle" />
-  <input type="text" class="input input-text input-text-connect-bottom" placeholder=".input-text-connect-bottom" />
-</div>
-
-```html
-<input type="text" class="input input-text input-text-connect-top" />
-<input type="text" class="input input-text input-text-connect-middle" />
-<input type="text" class="input input-text input-text-connect-bottom" />
-```
-
----
-
-<div class="col-container input-group">
-  <div class="col">
-    <label class="label">Select Boxes</label>
-    <div class="input-select-container">
-      <select class="input input-select">
-        <option class="input-option-placeholder">.input-select</option>
-        {% for i in (1..10) %}
-          <option>{{ i }}</option>
-        {% endfor %}
-      </select>
-    </div>
-  </div>
-  <div class="col">
-    <label class="label">Select Box Disabled</label>
-    <div class="input-select-container input-select-container-disabled">
-      <select class="input input-select" disabled>
-        <option class="input-option-placeholder">.input-select</option>
-        {% for i in (1..10) %}
-          <option>{{ i }}</option>
-        {% endfor %}
-      </select>
-    </div>
-  </div>
-</div>
-
----
-
-<div class="input-group">
-  <label class="label">Textbox</label>
-  <p class="label-note">Some critically important notes about this field.</p>
-  <input type="text" class="input input-text" placeholder=".input .input-text" />
-</div>
-
----
-
-<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="mb-10">Required Fields</h2>
-<div class="col-container">
-  <div class="col col-50">
-    <div class="input-required">
-      <input type="text" class="input input-text" placeholder=".input .input-text" />
-    </div>
-  </div>
-  <div class="col col-50">
-    <div class="input-required">
-      <div class="input-select-container">
-        <select class="input input-select">
-          <option class="input-option-placeholder">.input-select</option>
-          {% for i in (1..10) %}
-            <option>{{ i }}</option>
-          {% endfor %}
-        </select>
-      </div>
-    </div>
-  </div>
-</div>
-
----
-
-<h2 class="mb-10">Form Errors</h2>
-<div class="form-error-container">
-  <ul class="form-error-list">
-    <li class="form-error-item">
-      <span class="form-error-text">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</span>
-    </li>
-    <li class="form-error-item">
-      <span class="form-error-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</span>
-    </li>
-    <li class="form-error-item">
-      <span class="form-error-text">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>
-    </li>
-  </ul>
-</div>
-<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">
-      <div class="input-select-container">
-        <select class="input input-select">
-          <option class="input-option-placeholder">.input-select</option>
-          {% for i in (1..10) %}
-            <option>{{ i }}</option>
-          {% endfor %}
-        </select>
-      </div>
-    </div>
-  </div>
-  <div class="col col-50 input-error">
-    <label class="label">Required Textbox</label>
-    <div class="input-required">
-      <input type="text" class="input input-text" placeholder=".input .input-text" />
-    </div>
-  </div>
-</div>