shipyard-framework 0.5.87 → 0.6.0

data/styleguide/utilities/index.md

@@ -1,19 +0,0 @@
----
-title: Shipyard Utilities
-description: The utility classes below can be applied to any component to override or extend the base styles of the component.
-utilities: [Accordion, Responsive, Grid, Typography, Margin & Padding, Colors, Border Radius, Position, Opacity]
----
-
-{% include page-heading.html page=page %}
-
----
-
-<ul class="col-container">
-  {% for utility in page.utilities %}
-    <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>
-    </li>
-  {% endfor %}
-</ul>

data/styleguide/utilities/margin-padding.md

@@ -1,124 +0,0 @@
----
-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: [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 `.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 }
-
-<div class="col-container">
-  <div class="col">
-    <div class="align-center">
-      {% for option in page.options %}
-        <div class="{{ page.box_classes }} m-{{ option }}">.m-{{ option }}</div>
-      {% endfor %}
-      <div class="{{ page.box_classes }} col-55 col-x1-75 col-x2-85 m-auto">.m-auto</div>
-    </div>
-  </div>
-</div>
-
----
-
-### 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 }} mb-{{ option }}">.mb-{{ option }}</div>
-      <div class="{{ page.box_classes }} mt-{{ option }}">.mt-{{ option }}</div>
-    </div>
-  {% endfor %}
-</div>
-
----
-
-### 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.name }}">
-        {% for option in page.options %}
-          <div class="{{ page.box_classes }} m{{ direction.css }}-{{ option }} mb-20">.m{{ direction.css }}-{{ option }}</div>
-        {% endfor %}
-      </div>
-    </div>
-  {% endfor %}
-</div>
-
----
-
-### 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 p-{{ option }} mb-10">.p-{{ option }}</div>
-    </div>
-  {% endfor %}
-</div>
-
----
-
-### 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 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 `.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.name }}">
-        {% for option in page.options %}
-          <div class="{{ page.box_classes }} p{{ direction.css }}-{{ option }} mb-20">.p{{ direction.css }}-{{ option }}</div>
-        {% endfor %}
-      </div>
-    </div>
-  {% endfor %}
-</div>
-
----
-
-### Component CSS
-```css
-{% sass_output -%}
-```
-
----
-
-{% include css-stats.html %}

data/styleguide/utilities/opacity.md

@@ -1,28 +0,0 @@
----
-title: Opacity Utilities
-description: Shipyard's opacity utilities are useful when you need to overwrite the default opacity of a component.
-options: [0,05,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95]
-sass_file: shipyard/utilities/_opacity
----
-
-{% include page-heading.html page=page %}
-
----
-
-<ul class="col-container strong align-center">
-  {% for option in page.options reversed -%}
-    <li class="col col-20 mb-15">
-      <div class="bg-gray-dark white rounded-sm p-10 o-{{ option | opacity_css_class }}">
-        .{{ option | opacity_css_class }}
-      </div>
-    </li>
-  {% endfor -%}
-</ul>
-
-```css
-{% sass_output -%}
-```
-
----
-
-{% include css-stats.html %}

data/styleguide/utilities/position.md

@@ -1,24 +0,0 @@
----
-title: Position Utilities
-description: Shipyard's position utilities are helpful to override the default styles of component.
-sass_file: shipyard/utilities/_position
-position_utilities: [static, relative, absolute, fixed]
----
-
-{% include page-heading.html page=page %}
-
----
-
-## Position Utilities `.{ position }-{ x1..x4 }`
-Useful when you need to overwrite the default styles of an element or component.
-{: .section-description }
-
-```css
-{% for utility in page.position_utilities -%}
-.{{ utility }} { position: {{ utility }} }
-{% endfor -%}
-```
-
----
-
-{% include css-stats.html %}

data/styleguide/utilities/responsive.md

@@ -1,20 +0,0 @@
----
-title: Mobile-first Methodology
-description: Shipyard is a CSS Framework is built from mobile-first approach to front-end development. This means that by default, a class applies to all screen sizes unless otherwise specifed. In order to make something truly responsive, you need to first think about how you want it to look on all screen sizes, and then using the modifiers `(x1-x4)` to define how the style will change as the screen size grows.
----
-
-{% include page-heading.html page=page %}
-
----
-
-## Responsive Demo
-
-<div class="box-secondary box-padding align-center">
-  <button class="btn btn-xs btn-x1-sm btn-x2-md btn-x3-lg btn-x4-xl">
-    <span class="display-inline display-x1-none">All Screens (.btn-xs)</span>
-    <span class="display-none display-x1-inline display-x2-none">Tablets &amp; Up (.btn-x1-sm)</span>
-    <span class="display-none display-x2-inline display-x3-none">Small Laptops &amp; Up (.btn-x2-md)</span>
-    <span class="display-none display-x3-inline display-x4-none">Wide Laptos &amp; Up (.btn-x3-lg)</span>
-    <span class="display-none display-x4-inline">Large Monitors &amp; Up (.btn-x4-xl)</span>
-  </button>
-</div>

data/styleguide/utilities/typography.md

@@ -1,74 +0,0 @@
----
-title: Shipyard Typography
-sass_file: shipyard/utilities/_typography
-text_sizes: [xxs, xs, sm, md, lg, xl, xxl, xxxl]
-text_shades: [darkest, darker, dark, normal, light, lighter, lightest]
----
-
-{% include page-heading.html page=page %}
-
----
-
-<div class="col-container">
-  <div class="col">
-    <h1>h1. Heading</h1>
-    <h2>h2. Heading</h2>
-    <h3>h3. Heading</h3>
-    <h4>h4. Heading</h4>
-    <h5>h5. Heading</h5>
-    <h6>h6. Heading</h6>
-  </div>
-  <div class="col">
-    <h3>Text Sizes</h3>
-    {% for size in page.text_sizes %}
-      <p class="text-{{ size }}">.text-{{ size }}</p>
-    {% endfor %}
-  </div>
-  <div class="col">
-    <h3>Font Weights</h3>
-    <ul>
-      <li class="normal">.normal</li>
-      <li class="medium">.medium</li>
-      <li class="strong">.strong</li>
-    </ul>
-  </div>
-  <div class="col">
-    <h3>Text Alignment</h3>
-    <ul>
-      <li class="align-left">.align-left</li>
-      <li class="align-center">.align-center</li>
-      <li class="align-right">.align-right</li>
-    </ul>
-  </div>
-</div>
-
----
-
-<div class="col-container">
-  <div class="col">
-    <h3>Text Shades</h3>
-    <div class="box box-padding mt-10">
-      <ul class="list medium">
-        {% for shade in page.text_shades %}
-          <li class="text-{{ shade }}">.text-{{ shade }}</li>
-        {% endfor %}
-      </ul>
-    </div>
-  </div>
-  <div class="col">
-    <h3>Inverse Text Shades</h3>
-    <div class="box-secondary box-padding bg-gray-dark mt-10">
-      <ul class="list medium">
-        {% for shade in page.text_shades %}
-          <li class="text-inverse{{ '-' | append: shade | replace: '-normal', '' }}">
-            .text-inverse{{ '-' | append: shade | replace: '-normal', '' }}
-          </li>
-        {% endfor %}
-      </ul>
-    </div>
-  </div>
-</div>
-
----
-
-{% include css-stats.html %}