shipyard-framework 0.5.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 99773df6e410fe11031d0952d7e3e2aa04591241
-  data.tar.gz: 9d2402c4c281779799c1f008fb635b6e979ef25e
+  metadata.gz: 012416749336816965f8232bd66ce83714e27efd
+  data.tar.gz: 75d164a2deb0985740166e01efa83851a7f4409c
 SHA512:
-  metadata.gz: 969689dd5064d951992920c8bd8bb03edcd947580114416dea53c779710f245c15ad00e9fe94c54ed0f5bff4427c3b149b976c27e8b45ae528738e128a360ea5
-  data.tar.gz: 8523e6bf496dfa3afeec3c59abf0f81afdd136b934c346e57ab38d4c0f516a557691d5f30a3d6f7549a421ef58830b9e618a7572c024e95908aa23e902720487
+  metadata.gz: 95a4fa016cd9f1bbd0be6a71399286e3ff456e4c73112f5acc3b37b3fbc9a1dcaa19a215b6139420815672df2edb43d3e751f7f580db7c23c953c207774260df
+  data.tar.gz: e4df0db55dca161de2a38dd16fcfad5cd50d1b338e65cfe3f6d0d80281af2831c121ab5778a168f311b46c58c43b680e83489bc38c834e26f4ac2cd9b7e3711e

data/app/helpers/shipyard/box_helper.rb

@@ -0,0 +1,22 @@
+module Shipyard
+  module BoxHelper
+    include ActionView::Context
+    include ActionView::Helpers::TagHelper
+    include ActionView::Helpers::TextHelper
+
+    def box(types, content)
+      # Gather the appropriate box classes into an array.
+      class_list = ['box']
+      types.each do |type|
+        class_list << "box-#{type}"
+      end
+
+      # Join the CSS Classes together.
+      options ||= {}
+      options[:class] = class_list.join(' ')
+
+      # Return the HTML structure for the box.
+      content_tag :div, content, options
+    end
+  end
+end

data/app/helpers/shipyard/note_helper.rb

@@ -0,0 +1,20 @@
+module Shipyard
+  module NoteHelper
+    include ActionView::Context
+    include ActionView::Helpers::TagHelper
+    include ActionView::Helpers::TextHelper
+
+    def note(type, content)
+      # Gather the appropriate box classes into an array.
+      class_list = ['note']
+      class_list << "note-#{type}" if type
+
+      # Join the CSS Classes together.
+      options ||= {}
+      options[:class] = class_list.join(' ')
+
+      # Return the HTML structure for the box.
+      content_tag :div, content, options
+    end
+  end
+end

data/assets/stylesheets/shipyard/_components.sass

@@ -2,6 +2,7 @@
 @import shipyard/components/buttons
 @import shipyard/components/icons
 @import shipyard/components/alerts
+@import shipyard/components/notes
 @import shipyard/components/boxes
 @import shipyard/components/forms
 @import shipyard/components/form-errors

data/assets/stylesheets/shipyard/components/_alerts.sass

@@ -1,10 +1,10 @@
 +component('alert')
   display: block
-  border-radius: 5px
   background: $gray
   color: $gray-lightest
   position: relative
   text-shadow: 0 1px 0 rgba(#000,.08)
+  +border-radius
   +respond-to(min-height, (x0: 50px, x1: 60px))
   +respond-to(margin-bottom, (x0: 10px, x1: 15px))
   +respond-to(padding, (x0: 12px 10px, x1: 17px 20px, x2: 17px 30px))
@@ -37,8 +37,8 @@
     color: $red-lightest
     background: $red
   &-info
-    background: $blue
     color: $blue-lightest
+    background: $blue
 
   // Alert: Sub-components
   &-txt,

data/assets/stylesheets/shipyard/components/_buttons.sass

@@ -90,11 +90,11 @@
 
   // Alert Buttons
   .alert &
-    +btn-color(darken($gray, 20%))
-    +btn-hover(darken($gray, 25%))
+    +btn-color($gray-dark)
+    +btn-hover($gray-darker)
   .alert-info &
-    +btn-color(darken($blue, 10%))
-    +btn-hover(darken($blue, 15%))
+    +btn-color($blue-dark)
+    +btn-hover($blue-darker)
   .alert-warning &
     +btn-color($yellow-darker)
     +btn-hover($yellow-darkest)
@@ -103,6 +103,17 @@
   .alert-error &
     +extend('caution')
 
+  // Note Buttons
+  .note-info &
+    +btn-color($blue-dark)
+    +btn-hover($blue-darker)
+  .note-warning &
+    +btn-color($yellow-dark)
+    +btn-hover($yellow-darker)
+  .note-success &
+    +btn-color($green-dark)
+    +btn-hover($green-darker)
+
   &-margin
     margin: 0 5px
     &-lg

data/assets/stylesheets/shipyard/components/_code.sass

@@ -25,8 +25,8 @@
     border-color: darken($gray, 10%)
     background-color: darken($gray, 5%)
   .alert-info &
-    border-color: darken($blue, 10%)
-    background-color: darken($blue, 5%)
+    border-color: darken($blue, 11%)
+    background-color: darken($blue, 6%)
   .alert-error &
     border-color: $red-dark
     background-color: lighten($red-dark, 7%)
@@ -36,3 +36,22 @@
   .alert-success &
     border-color: $green-dark
     background-color: darken($green, 10%)
+
+  // Code blocks inside of notes
+  .note &
+    margin: 0 2px
+    color: darken($purple-dark, 6%)
+    border-color: darken($gray-lighter, 12%)
+    background-color: darken($gray-lighter, 6%)
+  .note-info &
+    color: $purple-darker
+    border-color: darken($blue-light, 8%)
+    background-color: $blue-light
+  .note-success &
+    color: $purple-darker
+    border-color: darken($green-light, 8%)
+    background-color: $green-light
+  .note-warning &
+    color: $purple-darker
+    border-color: darken($yellow-light, 8%)
+    background-color: $yellow-light

data/assets/stylesheets/shipyard/components/_forms.sass

@@ -102,18 +102,18 @@
     &::before
       z-index: 1
       content: "*"
-      +component-styles(required-asterisk)
+      +sub-component-styles(required-asterisk)
       +when('error')
-        +component-styles(required-asterisk-error)
+        +sub-component-styles(required-asterisk-error)
     &::after
       content: ""
       display: block
       border-style: solid
       border-radius: 0 3px 0 0
       border-color: transparent
-      +component-styles(required-corner)
+      +sub-component-styles(required-corner)
       +when('error')
-        +component-styles(required-corner-error)
+        +sub-component-styles(required-corner-error)
 
   &-full
     width: 100%

data/assets/stylesheets/shipyard/components/_notes.sass

@@ -0,0 +1,30 @@
++component('note')
+  display: block
+  position: relative
+  +respond-to(min-height, (x0: 50px, x1: 60px))
+  +respond-to(margin-bottom, (x0: 10px, x1: 15px))
+  +respond-to(padding, (x0: 12px 10px, x1: 17px 20px, x2: 17px 30px))
+  a, strong, .strong
+    &:not(.btn)
+      font-weight: $bold
+
+  // Note: Types
+  a
+    color: $blue-dark
+
+  // Note: Type colors defined in _components.scss
+  +sub-component('info')
+  +sub-component('success')
+  +sub-component('warning')
+
+  // Note: CTAs
+  &-cta
+    +breakpoint-x0
+      display: block
+      text-align: center
+      margin-top: 10px
+    +breakpoint-x1
+      top: 50%
+      right: 10px
+      position: absolute
+      transform: translatey(-50%)

data/assets/stylesheets/shipyard/components/_tooltips.sass

@@ -9,8 +9,8 @@
     transform: rotate(45deg) translatey(50%)
     transform-origin: center center
     border: 4px solid transparent
-    border-right-color: $gray-dark
-    border-bottom-color: $gray-dark
+    border-right-color: $gray-darker
+    border-bottom-color: $gray-darker
     margin-top: 0
   &:after
     top: -34px
@@ -21,7 +21,7 @@
     text-align: center
     border-radius: 3px
     content: attr(tooltip)
-    background: $gray-dark
+    background: $gray-darker
     font-size: $font-size-xxs
     font-weight: $bold
     transform: translate(-50%, 6px)

data/assets/stylesheets/shipyard/core/_typography.sass

@@ -1,6 +1,6 @@
 body
   background: $gray-lightest
-  color: $gray-dark
+  color: $gray-darker
   font-family: $font-family
   -webkit-font-smoothing: antialiased
   -moz-osx-font-smoothing: grayscale

data/assets/stylesheets/shipyard/mixins/_components.sass

@@ -3,12 +3,13 @@
   $component: $name !global
   .#{$name}
     @content
+    +component-styles($name)
 
 @mixin sub-component($name)
   $sub-component: "#{$component}-#{$name}" !global
   &-#{$name}
     @content
-    +component-styles($name)
+    +sub-component-styles($name)
 
 @mixin extend($modifier: null)
   @if $modifier
@@ -23,6 +24,13 @@
     z-index: map-get($z-index, $component)
 
 @mixin component-styles($modifier)
+  $component-styles: map-get($components, $component)
+  @if $component-styles
+    @each $property, $value in $component-styles
+      @if type-of($value) != map
+        #{$property}: $value
+
+@mixin sub-component-styles($modifier)
   $component-styles: map-get($components, $component)
   @if $component-styles
     @each $property, $value in map-get($component-styles, $modifier)

data/assets/stylesheets/shipyard/variables/_color_utilities.sass

@@ -4,11 +4,13 @@ $gray-light: color('gray', 'light') !default
 $gray-lighter: color('gray', 'lighter') !default
 $gray-lightest: color('gray', 'lightest') !default
 $gray-dark: color('gray', 'dark') !default
+$gray-darker: color('gray', 'darker') !default
 $gray-darkest: color('gray', 'darkest') !default
 
 // Green
 $green: color('green') !default
 $green-light: color('green', 'light') !default
+$green-lighter: color('green', 'lighter') !default
 $green-lightest: color('green', 'lightest') !default
 $green-dark: color('green', 'dark') !default
 $green-darker: color('green', 'darker') !default
@@ -17,15 +19,19 @@ $green-darkest: color('green', 'darkest') !default
 // Blue
 $blue: color('blue') !default
 $blue-light: color('blue', 'light') !default
+$blue-lighter: color('blue', 'lighter') !default
 $blue-lightest: color('blue', 'lightest') !default
 $blue-dark: color('blue', 'dark') !default
+$blue-darker: color('blue', 'darker') !default
 $blue-darkest: color('blue', 'darkest') !default
 
 // Teal
 $teal: color('teal') !default
 $teal-light: color('teal', 'light') !default
+$teal-lighter: color('teal', 'lighter') !default
 $teal-lightest: color('teal', 'lightest') !default
 $teal-dark: color('teal', 'dark') !default
+$teal-darker: color('teal', 'darker') !default
 $teal-darkest: color('teal', 'darkest') !default
 
 // Red

data/assets/stylesheets/shipyard/variables/_colors.scss

@@ -4,13 +4,14 @@ $colors: (
     light: #bac5d2,
     lighter: #dfe6eb,
     lightest: #f2f5f7,
-    dark: #313a44,
+    dark: darken(#788594, 18%),
+    darker: #313a44,
     darkest: #1e252c
   ),
   "green": (
     base: darken(#3acc7c, 3%),
-    light: lighten(#3acc7c, 15%),
-    lighter: lighten(#3acc7c, 30%),
+    light: lighten(#3acc7c, 22%),
+    lighter: lighten(#3acc7c, 34%),
     lightest: lighten(#3acc7c, 41%),
     dark: darken(#3acc7c, 18%),
     darker: darken(#3acc7c, 26%),
@@ -18,19 +19,21 @@ $colors: (
   ),
   "blue": (
     base: #1ca1e3,
-    light: #5eb9e6,
-    lighter: #9ed8f5,
-    lightest: lighten(#9ed8f5, 10%),
+    light: lighten(#5eb9e6, 15%),
+    lighter: lighten(#9ed8f5, 9%),
+    lightest: lighten(#9ed8f5, 15%),
     dark: #0075b0,
-    darkest: #004d73
+    darker: darken(#0075b0, 7%),
+    darkest: darken(#004d73, 5%)
   ),
   "teal": (
     base: #20a5a8,
     light: #6ab7b9,
     lighter: #b2dbdc,
     lightest: lighten(#b2dbdc, 13%),
-    dark: #0e6e70,
-    darkest: #00494b
+    dark: darken(#20a5a8, 8%),
+    darker: darken(#20a5a8, 16%),
+    darkest: darken(#20a5a8, 24%)
   ),
   "red": (
     base: #e06158,
@@ -43,12 +46,12 @@ $colors: (
   ),
   "yellow": (
     base: #ffca49,
-    light: lighten(#ffca49, 7%),
-    lighter: darken(#ffe7b1, 3%),
+    light: lighten(#ffca49, 8%),
+    lighter: #ffe7b1,
     lightest: lighten(#ffe7b1, 7%),
     dark: darken(#ffca49, 20%),
     darker: darken(#ffca49, 30%),
-    darkest: darken(#ffca49, 40%)
+    darkest: darken(#ffca49, 47%)
   ),
   "orange": (
     base: #ff9f49,

data/assets/stylesheets/shipyard/variables/_components.scss

@@ -36,6 +36,22 @@ $component-defaults: (
       color: #fff,
       font-weight: $medium
     )
+  ),
+  note: (
+    background: $gray-lighter,
+    border-radius: $border-radius,
+    info: (
+      color: $blue-darkest,
+      background: $blue-lighter
+    ),
+    success: (
+      color: $green-darkest,
+      background: $green-lighter
+    ),
+    warning: (
+      color: $yellow-darkest,
+      background: $yellow-lighter
+    )
   )
 ) !default;
 

data/assets/stylesheets/shipyard/variables/_typography.sass

@@ -20,11 +20,11 @@ $font-size-sm: map-get($font-sizes, sm) !default
 $font-size-xs: map-get($font-sizes, xs) !default
 $font-size-xxs: map-get($font-sizes, xxs) !default
 $font: $normal 16px / 1.6 $font-family !default
-$text-color: $gray-dark !default
+$text-color: $gray-darker !default
 $text-color-disabled: lighten($gray, 15%) !default
 $text-color-lightest: lighten($gray, 10%) !default
 $text-color-lighter: lighten($gray, 5%) !default
 $text-color-light: $gray !default
-$text-color-darkest: $gray-dark !default
-$text-color-darker: lighten($gray-dark, 4%) !default
-$text-color-dark: lighten($gray-dark, 7%) !default
+$text-color-darkest: $gray-darker !default
+$text-color-darker: lighten($gray-darker, 4%) !default
+$text-color-dark: lighten($gray-darker, 7%) !default

data/lib/shipyard-framework/jekyll/box_tag.rb

@@ -0,0 +1,21 @@
+require_relative '../../../app/helpers/shipyard/box_helper'
+
+module Shipyard
+  module Jekyll
+    class Box < Liquid::Block
+      include Shipyard::BoxHelper
+
+      def initialize(tag_name, types, options)
+        super
+        @types = []
+        types.tr(' ','').split(',').each do |type|
+          @types << type.tr(':','').to_sym
+        end
+      end
+
+      def render(context)
+        box @types, raw(super.strip)
+      end
+    end
+  end
+end

data/lib/shipyard-framework/jekyll/note_tag.rb

@@ -0,0 +1,18 @@
+require_relative '../../../app/helpers/shipyard/note_helper'
+
+module Shipyard
+  module Jekyll
+    class Note < Liquid::Block
+      include Shipyard::NoteHelper
+
+      def initialize(tag_name, type, options)
+        super
+        @type = type.tr(':','').to_sym unless type.blank?
+      end
+
+      def render(context)
+        note @type, raw(super.strip)
+      end
+    end
+  end
+end

data/lib/shipyard-framework/version.rb

@@ -1,3 +1,3 @@
 module Shipyard
-  VERSION = '0.5.0'
+  VERSION = '0.5.1'
 end

data/lib/shipyard-framework.rb

@@ -69,9 +69,13 @@ module Shipyard
 
     def register_jekyll_tags
       require 'shipyard-framework/jekyll/button_tag'
+      require 'shipyard-framework/jekyll/box_tag'
+      require 'shipyard-framework/jekyll/note_tag'
       require 'shipyard-framework/jekyll/alert_tag'
       require 'shipyard-framework/jekyll/shipyard_version_tag'
       Liquid::Template.register_tag('btn', Shipyard::Jekyll::Button)
+      Liquid::Template.register_tag('box', Shipyard::Jekyll::Box)
+      Liquid::Template.register_tag('note', Shipyard::Jekyll::Note)
       Liquid::Template.register_tag('alert', Shipyard::Jekyll::Alert)
       Liquid::Template.register_tag('shipyard_version', Shipyard::Jekyll::ShipyardVersion)
     end

data/styleguide/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    shipyard-framework (0.5.0)
+    shipyard-framework (0.5.1)
       actionview (~> 5.0)
 
 GEM

data/styleguide/_sass/views.sass

@@ -39,10 +39,10 @@ hr
     +when('box:hover')
       color: #fff
     +when('light:hover')
-      color: $gray-dark
+      color: $gray-darker
   &-text
     transition: 300ms color ease
     +when('box:hover')
-      color: #fff
+      color: rgba(#fff,.7)
     +when('light:hover')
-      color: $gray-dark
+      color: rgba($gray-darker,.6)

data/styleguide/components/alerts.md

@@ -44,7 +44,7 @@ title: Shipyard Alerts
 <p class="text-light margin-bottom-sm">Useful when drawing attention to critical, time-sensitive information &mdash; even if nothing has gone wrong.</p>
 
 {% alert :warning %}
-  There are only 2 seats left on this flight! We recommend to book your tickets as soon as possible.
+  There are only 2 seats left on this flight! We recommend to <a href="#">book your tickets</a> as soon as possible.
   Use the code <code class="code-inline">Travel_Light_2017</code> before you book your flight.
   {% btn Call to Action, :sm, class: 'alert-cta' %}
 {% endalert %}
@@ -55,7 +55,7 @@ title: Shipyard Alerts
 <p class="text-light margin-bottom-sm">Useful when drawing attention to something that has gone critically wrong.</p>
 
 {% alert :error %}
-  This flight is now sold out. Let's get you on the next flight to Kauai.
+  This flight is now sold out. Let's get you on the <a href="#">next flight to Kauai</a>.
   We hope the code <code class="code-inline">Travel_Light_2017</code> will be useful for your next flight.
   {% btn Call to Action, :sm, class: 'alert-cta' %}
 {% endalert %}

data/styleguide/components/boxes.md

@@ -0,0 +1,54 @@
+---
+title: Shipyard Boxes
+box_sizes: [xxs, xs, sm, md, lg, xl]
+---
+
+# {{ page.title }}
+<p class="text-light text-lg margin-top-xxs">Boxes should be used to grab a draw attention to specific groups of content, and are most useful to linked content. By default, all boxes need to have the base class of <code class="code-inline">.box</code> in order to function properly.</p>
+
+---
+
+### Default `.box`
+<p class="text-light margin-bottom-sm">Useful when needing to draw extra attention to a particular group of content.</p>
+
+{% box %}
+  <p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+{% endbox %}
+
+---
+
+### Padded `.box-padding`
+<p class="text-light margin-bottom-sm">Useful when needing to draw extra attention to a particular group of content.</p>
+
+{% box :padding %}
+  <p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+{% endbox %}
+
+---
+
+### Linked `.box-link`
+<p class="text-light margin-bottom-sm">Useful when linking important components to another page or another group of content.</p>
+
+{% box :link, :padding %}
+  <p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+{% endbox %}
+
+---
+
+### Secondary `.box-secondary`
+<p class="text-light margin-bottom-sm">Useful when connecting secondary information to the default box styles.</p>
+
+{% box :secondary, :padding %}
+  <p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
+{% endbox %}
+
+---
+
+### Box Sizes `.box-[{{ page.box_sizes | join: ', ' }}]`
+<p class="text-light margin-bottom-sm">Useful when you need to create boxes with fixed heights. Note: The <a href="{{ site.baseurl }}/utilities/responsive">responsive utility classes</a> can also be applied to each box size.</p>
+
+{% for size in page.box_sizes %}
+  <div class="box box-{{ size }} margin-top-md">
+    <strong class="center text-lighter text-sm">.box-{{ size }}</strong>
+  </div>
+{% endfor %}

data/styleguide/components/index.html

@@ -1,10 +1,12 @@
 ---
 title: Shipyard Components
-components: [Grid, Boxes, Buttons, Empty States, Alerts, Forms, Icons, Modals, Tooltips, Code]
+components: [Grid, Boxes, Buttons, Empty States, Alerts, Notes, Forms, Icons, Modals, Tooltips, Code]
 ---
 
 <h1>{{ page.title }}</h1>
+
 <hr />
+
 <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-25">

data/styleguide/components/notes.md

@@ -0,0 +1,50 @@
+---
+title: Shipyard Notes
+---
+
+# {{ page.title }}
+<p class="text-light text-lg margin-top-xxs">Notes should be used to grab a user's attention along side of other content.</p>
+
+---
+
+### Default `.note`
+<p class="text-light margin-bottom-sm">Used to display notes, tips, and other non-critical information.</p>
+
+{% note %}
+  Ten other people are also viewing tickets for <a href="#">this flight</a>.
+  Use the code <code class="code-inline">Travel_Light_2017</code> before you book your flight.
+  {% btn Call to Action, :sm, class: 'note-cta' %}
+{% endnote %}
+
+---
+
+### Info `.note-info`
+<p class="text-light margin-bottom-sm">Useful when drawing attention to non-critical information or actions we want the user to take.</p>
+
+{% note :info %}
+  Ten other people are also viewing tickets for <a href="#">this flight</a>.
+  Use the code <code class="code-inline">Travel_Light_2017</code> before you book your flight.
+  {% btn Call to Action, :sm, class: 'note-cta' %}
+{% endnote %}
+
+---
+
+### Success `.note-success`
+<p class="text-light margin-bottom-sm">Useful when drawing attention to interactions that have produced successful results.</p>
+
+{% note :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. In the meantime you can <a href="#">invite a friend</a> to this flight.
+  {% btn Call to Action, :sm, class: 'note-cta' %}
+{% endnote %}
+
+---
+
+### Warning `.note-warning`
+<p class="text-light margin-bottom-sm">Useful when drawing attention to critical information.</p>
+
+{% note :warning %}
+  There are only 2 seats left on this flight! We recommend to <a href="#">book your tickets</a> as soon as possible.
+  Use the code <code class="code-inline">Travel_Light_2017</code> before you book your flight.
+  {% btn Call to Action, :sm, class: 'note-cta' %}
+{% endnote %}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shipyard-framework
 version: !ruby/object:Gem::Version
-  version: 0.5.0
+  version: 0.5.1
 platform: ruby
 authors:
 - Shipyard
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-09-12 00:00:00.000000000 Z
+date: 2017-09-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -59,10 +59,12 @@ files:
 - README.md
 - Rakefile
 - app/helpers/shipyard/alert_helper.rb
+- app/helpers/shipyard/box_helper.rb
 - app/helpers/shipyard/button_helper.rb
 - app/helpers/shipyard/form_helper.rb
 - app/helpers/shipyard/icon_helper.rb
 - app/helpers/shipyard/layout_helper.rb
+- app/helpers/shipyard/note_helper.rb
 - app/views/shipyard/_alerts.slim
 - assets/icons/arrows/arrow-down.svg
 - assets/icons/gear.svg
@@ -106,6 +108,7 @@ files:
 - assets/stylesheets/shipyard/components/_icons.sass
 - assets/stylesheets/shipyard/components/_input-switch.sass
 - assets/stylesheets/shipyard/components/_modals.sass
+- assets/stylesheets/shipyard/components/_notes.sass
 - assets/stylesheets/shipyard/components/_tooltips.sass
 - assets/stylesheets/shipyard/core/_animations.sass
 - assets/stylesheets/shipyard/core/_grid.sass
@@ -132,7 +135,9 @@ files:
 - lib/shipyard-framework.rb
 - lib/shipyard-framework/icons.rb
 - lib/shipyard-framework/jekyll/alert_tag.rb
+- lib/shipyard-framework/jekyll/box_tag.rb
 - lib/shipyard-framework/jekyll/button_tag.rb
+- lib/shipyard-framework/jekyll/note_tag.rb
 - lib/shipyard-framework/jekyll/shipyard_version_tag.rb
 - lib/shipyard-framework/rails/engine.rb
 - lib/shipyard-framework/rails/railtie.rb
@@ -151,7 +156,7 @@ files:
 - styleguide/_sass/views.sass
 - styleguide/assets/css/application.sass
 - styleguide/components/alerts.md
-- styleguide/components/boxes.html
+- styleguide/components/boxes.md
 - styleguide/components/buttons.html
 - styleguide/components/code.html
 - styleguide/components/empty-states.html
@@ -159,6 +164,7 @@ files:
 - styleguide/components/grid.html
 - styleguide/components/index.html
 - styleguide/components/modals.html
+- styleguide/components/notes.md
 - styleguide/components/tooltips.html
 - styleguide/index.html
 - styleguide/utilities/colors.html

data/styleguide/components/boxes.html

@@ -1,37 +0,0 @@
----
-title: Shipyard Boxes
-box_sizes: [xxs, xs, sm, md, lg, xl]
----
-
-<h1>{{ page.title }}</h1>
-
-<hr />
-
-<div class="box box-padding">
-  <h4>Default Box</h4>
-  <p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
-</div>
-
-<hr />
-
-<div class="box-link box-padding">
-  <h4>Linked Box</h4>
-  <p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
-</div>
-
-<hr />
-
-<div class="box-secondary box-padding">
-  <h4>Secondary Box</h4>
-  <p>Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
-</div>
-
-<hr />
-
-<h2>Boxes Sizes</h2>
-
-{% for size in page.box_sizes %}
-  <div class="box box-{{ size }} margin-top-md">
-    <strong class="center text-lighter text-sm">.box-{{ size }}</strong>
-  </div>
-{% endfor %}