shipyard-framework 0.5.83 → 0.5.84

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c847bd8a06897c01bf0f4aea3acba561a85e48d146c3bfe66f6e78a5254aca1d
-  data.tar.gz: 7175c8a635a4997e26ca3c3653413464a96dd15a3a396b3be4f20ce05afbe070
+  metadata.gz: bc383fe968d0fe96db0d235903e775a9cff70a849d2090e4e185853e8d277ba1
+  data.tar.gz: 3956e48a5c285f2cb96e5c71689aaba7cae1d6cd96db3aea2b6a82282db9be26
 SHA512:
-  metadata.gz: 3da5f028fc98e941950f381d994c61ca8dc77988ee1822eb5e35225eb31ad0312de01bc76d73c8ec2e46e3424879194634bb0f543298a5ab917922556caf78f1
-  data.tar.gz: c0d206953934307ceae826e6cae57dfc31f7a581352ac5fdd34930e72f18517337c54ae38af47878b22325aa71b93c20ebbeee4faae68753902cebce04ed2b2b
+  metadata.gz: 830ef59a63a920209a562f3017371b62454b2905ccc08c80e8b52fd8c2d62d30736ac5f898b83a08ba0efc7c0461f1b4255b706a3e960fee271434e115649480
+  data.tar.gz: 553d03d4162905b4492c0b7a35b100096fdd0655be5b975e7eb55dc8ab897e049885f46913ae3a7a398f9d39a33eb24db307a60e3c729716f242326f0d59b190

data/assets/stylesheets/_shipyard.sass

@@ -1,3 +1,6 @@
 @import "shipyard/core"
+@import "shipyard/core/animations"
+@import "shipyard/core/reset"
+@import "shipyard/core/typography"
 @import "shipyard/components"
 @import "shipyard/utilities"

data/assets/stylesheets/shipyard/_components.sass

@@ -1,22 +1,22 @@
-@import "components/code"
-@import "components/buttons"
-@import "components/icons"
-@import "components/alerts"
-@import "components/notes"
-@import "components/boxes"
-@import "components/forms"
-@import "components/form-errors"
-@import "components/input"
-@import "components/input-text"
-@import "components/input-select"
-@import "components/input-radio-checkbox"
-@import "components/input-switch"
-@import "components/input-sizes"
-@import "components/input-required"
-@import "components/input-readonly"
-@import "components/empty"
-@import "components/modals"
-@import "components/tooltips"
-@import "components/hamburger"
-@import "components/tables"
-@import "components/horizontal-rules"
+@import "shipyard/components/code"
+@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"
+@import "shipyard/components/input"
+@import "shipyard/components/input-text"
+@import "shipyard/components/input-select"
+@import "shipyard/components/input-radio-checkbox"
+@import "shipyard/components/input-switch"
+@import "shipyard/components/input-sizes"
+@import "shipyard/components/input-required"
+@import "shipyard/components/input-readonly"
+@import "shipyard/components/empty"
+@import "shipyard/components/modals"
+@import "shipyard/components/tooltips"
+@import "shipyard/components/hamburger"
+@import "shipyard/components/tables"
+@import "shipyard/components/horizontal-rules"

data/assets/stylesheets/shipyard/_core.sass

@@ -1,6 +1,3 @@
-@import "functions"
-@import "mixins"
-@import "variables"
-@import "core/animations"
-@import "core/reset"
-@import "core/typography"
+@import "shipyard/functions"
+@import "shipyard/mixins"
+@import "shipyard/variables"

data/assets/stylesheets/shipyard/_functions.sass

@@ -1,3 +1,3 @@
-@import "functions/map-merge-options"
-@import "functions/color"
-@import "functions/text-color"
+@import "shipyard/functions/map-merge-options"
+@import "shipyard/functions/color"
+@import "shipyard/functions/text-color"

data/assets/stylesheets/shipyard/_mixins.sass

@@ -1,7 +1,8 @@
-@import "mixins/prefixed"
-@import "mixins/box-model"
-@import "mixins/selectors"
-@import "mixins/responsive"
-@import "mixins/components"
-@import "mixins/positioning"
-@import "mixins/icons"
+@import "shipyard/mixins/prefixed"
+@import "shipyard/mixins/box-model"
+@import "shipyard/mixins/selectors"
+@import "shipyard/mixins/responsive"
+@import "shipyard/mixins/components"
+@import "shipyard/mixins/positioning"
+@import "shipyard/mixins/icons"
+@import "shipyard/mixins/buttons"

data/assets/stylesheets/shipyard/_utilities.sass

@@ -1,9 +1,10 @@
-@import "utilities/grid"
-@import "utilities/colors"
-@import "utilities/opacity"
-@import "utilities/display"
-@import "utilities/positioning"
-@import "utilities/typography"
-@import "utilities/margin-padding"
-@import "utilities/border-radius"
-@import "utilities/accordion"
+@import "shipyard/utilities/grid"
+@import "shipyard/utilities/colors"
+@import "shipyard/utilities/opacity"
+@import "shipyard/utilities/display"
+@import "shipyard/utilities/center"
+@import "shipyard/utilities/position"
+@import "shipyard/utilities/typography"
+@import "shipyard/utilities/margin-padding"
+@import "shipyard/utilities/border-radius"
+@import "shipyard/utilities/accordion"

data/assets/stylesheets/shipyard/_variables.sass

@@ -1,7 +1,7 @@
-@import "variables/colors"
-@import "variables/color_utilities"
-@import "variables/typography"
-@import "variables/grid"
-@import "variables/misc"
-@import "variables/components"
-@import "variables/opacities"
+@import "shipyard/variables/colors"
+@import "shipyard/variables/color_utilities"
+@import "shipyard/variables/typography"
+@import "shipyard/variables/grid"
+@import "shipyard/variables/misc"
+@import "shipyard/variables/components"
+@import "shipyard/variables/opacities"

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

@@ -1,65 +1,3 @@
-@mixin btn($size: md, $position: relative, $bg: $gray)
-  position: $position
-  display: inline-block
-  border-radius: 5px
-  border: 0
-  cursor: pointer
-  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, opacity 300ms ease
-  outline: none
-  border-width: 2px
-  border-style: solid
-  font-weight: $bold
-  font-family: $font-family
-  text-align: center
-  text-decoration: none
-  +btn-size($size)
-  +btn-color($bg, #fff)
-  +btn-hover(darken($bg, 10%), #fff)
-
-@mixin btn-color($color, $text-color: null, $border-color: null)
-  background-color: $color
-  @if $border-color
-    border-color: $border-color
-  @else
-    border-color: $color
-  @if $text-color
-    color: $text-color
-
-@mixin btn-hover($color, $text-color: null, $border-color: null, $text-decoration: none)
-  &:hover, &:focus, &:active, &.btn-loading
-    text-decoration: $text-decoration
-    +btn-color($color, $text-color, $border-color)
-
-@mixin btn-size($size, $min-width: null)
-  @if $size == xxs
-    font-size: 12px
-    padding: 0 8px
-    +btn-size(20px)
-  @else if $size == xs
-    font-size: 12px
-    padding: 0 10px
-    +btn-size(30px)
-  @else if $size == sm
-    font-size: 14px
-    padding: 0 15px
-    +btn-size(40px)
-  @else if $size == md
-    font-size: 16px
-    padding: 0 20px
-    +btn-size(50px)
-  @else if $size == lg
-    font-size: 18px
-    padding: 0 30px
-    +btn-size(60px)
-  @else if $size == xl
-    font-size: 20px
-    padding: 0 35px
-    +btn-size(70px)
-  @else if type-of($size) == 'number'
-    height: $size
-    line-height: $size - 4px
-    min-width: if($min-width, $min-width, $size)
-
 +component('btn')
   +btn
 

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

@@ -9,7 +9,7 @@
     overflow: hidden
 
   &-container
-    @extend .col-center
+    @extend .col-center !optional
     +z-index
     top: 0
     left: 0

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

@@ -42,9 +42,6 @@ h1, .h1
 h2, .h2
   font-size: 18px
 
-h1, h2, h3, h4, h5, h6
-  @extend .strong
-
 .h-primary
   margin-bottom: 0
   +respond-to(font-size, (x0: 24px, x1: 28px))

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

@@ -0,0 +1,61 @@
+@mixin btn($size: md, $position: relative, $bg: $gray)
+  position: $position
+  display: inline-block
+  border-radius: 5px
+  border: 0
+  cursor: pointer
+  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, opacity 300ms ease
+  outline: none
+  border-width: 2px
+  border-style: solid
+  font-weight: $bold
+  font-family: $font-family
+  text-align: center
+  text-decoration: none
+  +btn-size($size)
+  +btn-color($bg, #fff)
+  +btn-hover(darken($bg, 10%), #fff)
+
+@mixin btn-color($color, $text-color: null, $border-color: null)
+  background-color: $color
+  @if $border-color
+    border-color: $border-color
+  @else
+    border-color: $color
+  @if $text-color
+    color: $text-color
+
+@mixin btn-hover($color, $text-color: null, $border-color: null, $text-decoration: none)
+  &:hover, &:focus, &:active, &.btn-loading
+    text-decoration: $text-decoration
+    +btn-color($color, $text-color, $border-color)
+
+@mixin btn-size($size, $min-width: null)
+  @if $size == xxs
+    font-size: 12px
+    padding: 0 8px
+    +btn-size(20px)
+  @else if $size == xs
+    font-size: 12px
+    padding: 0 10px
+    +btn-size(30px)
+  @else if $size == sm
+    font-size: 14px
+    padding: 0 15px
+    +btn-size(40px)
+  @else if $size == md
+    font-size: 16px
+    padding: 0 20px
+    +btn-size(50px)
+  @else if $size == lg
+    font-size: 18px
+    padding: 0 30px
+    +btn-size(60px)
+  @else if $size == xl
+    font-size: 20px
+    padding: 0 35px
+    +btn-size(70px)
+  @else if type-of($size) == 'number'
+    height: $size
+    line-height: $size - 4px
+    min-width: if($min-width, $min-width, $size)

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

@@ -13,9 +13,9 @@
 
 @mixin extend($modifier: null)
   @if $modifier
-    @extend .#{$component}-#{$modifier}
+    @extend .#{$component}-#{$modifier} !optional
   @else
-    @extend .#{$component}
+    @extend .#{$component} !optional
 
 @mixin z-index($value: null)
   @if $value

data/assets/stylesheets/shipyard/utilities/{_positioning.sass → _center.sass}

@@ -14,8 +14,3 @@
   top: -1px
   position: relative
   vertical-align: middle
-
-@each $value in (static, relative, absolute, fixed)
-  .#{$value}
-    +all-media-sizes
-      position: $value

data/assets/stylesheets/shipyard/utilities/_position.sass

@@ -0,0 +1,4 @@
+@each $value in (static, relative, absolute, fixed)
+  .#{$value}
+    +all-media-sizes
+      position: $value

data/ci/sass_lint

@@ -12,10 +12,10 @@ echo -e "************** Copy Master Branch **************"
 git clone $repository --branch master --single-branch ci/master-tmp
 
 echo -e "\n\n************** Compile Sass **************"
-bundle exec sass --no-cache --sourcemap=none --style compact assets/stylesheets/_shipyard.sass ci/master-tmp/branch-compact.css
-bundle exec sass --no-cache --sourcemap=none --style compressed assets/stylesheets/_shipyard.sass ci/master-tmp/branch-compressed.css
-bundle exec sass --no-cache --sourcemap=none --style compact ci/master-tmp/assets/stylesheets/_shipyard.sass ci/master-tmp/master-compact.css
-bundle exec sass --no-cache --sourcemap=none --style compressed ci/master-tmp/assets/stylesheets/_shipyard.sass ci/master-tmp/master-compressed.css
+bundle exec sass --no-cache --load-path assets/stylesheets --sourcemap=none --style compact assets/stylesheets/_shipyard.sass ci/master-tmp/branch-compact.css
+bundle exec sass --no-cache --load-path assets/stylesheets --sourcemap=none --style compressed assets/stylesheets/_shipyard.sass ci/master-tmp/branch-compressed.css
+bundle exec sass --no-cache --load-path assets/stylesheets --sourcemap=none --style compact ci/master-tmp/assets/stylesheets/_shipyard.sass ci/master-tmp/master-compact.css
+bundle exec sass --no-cache --load-path assets/stylesheets --sourcemap=none --style compressed ci/master-tmp/assets/stylesheets/_shipyard.sass ci/master-tmp/master-compressed.css
 gzip -kvf ci/master-tmp/branch-compressed.css
 gzip -kvf ci/master-tmp/master-compressed.css
 

data/ci/setup

@@ -1,6 +1,6 @@
 #!/bin/bash
 
 rvm use $(cat .ruby-version)
-gem install bundler --pre
+gem install bundler --pre --no-ri --no-rdoc
 bundle install
-cd styleguide && gem install bundler --pre && bundle install && cd ..
+(cd styleguide && gem install bundler --pre --no-ri --no-rdoc && bundle install)

data/lib/shipyard-framework/version.rb

@@ -1,3 +1,3 @@
 module Shipyard
-  VERSION = '0.5.83'
+  VERSION = '0.5.84'
 end

data/styleguide/Gemfile

@@ -4,4 +4,6 @@ group :jekyll_plugins do
   gem 'jekyll', '~> 3.6.0'
   gem 'jekyll-assets', '~> 2.3.2'
   gem 'shipyard-framework', path: '../'
+  gem 'rake' # Needed for Codeship to install the sassc gem
+  gem 'sassc', '~> 1.11.4'
 end

data/styleguide/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    shipyard-framework (0.5.83)
+    shipyard-framework (0.5.84)
       actionview (~> 5.0)
       sprockets-es6 (~> 0.9.2)
 
@@ -57,15 +57,16 @@ GEM
       pathutil (>= 0.8)
       rack (~> 1.6)
       sprockets (~> 3.3, < 3.8)
-    jekyll-sass-converter (1.5.0)
+    jekyll-sass-converter (1.5.1)
       sass (~> 3.4)
-    jekyll-watch (1.5.0)
-      listen (~> 3.0, < 3.1)
-    kramdown (1.15.0)
+    jekyll-watch (1.5.1)
+      listen (~> 3.0)
+    kramdown (1.16.2)
     liquid (4.0.0)
-    listen (3.0.8)
+    listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
+      ruby_dep (~> 1.2)
     loofah (2.1.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
@@ -74,25 +75,31 @@ GEM
     minitest (5.10.3)
     nokogiri (1.8.1)
       mini_portile2 (~> 2.3.0)
-    pathutil (0.16.0)
+    pathutil (0.16.1)
       forwardable-extended (~> 2.6)
-    public_suffix (3.0.0)
+    public_suffix (3.0.1)
     rack (1.6.8)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
     rails-html-sanitizer (1.0.3)
       loofah (~> 2.0)
+    rake (12.3.0)
     rb-fsevent (0.10.2)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
     rouge (2.2.1)
+    ruby_dep (1.5.0)
     safe_yaml (1.0.4)
     sass (3.5.3)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
+    sassc (1.11.4)
+      bundler
+      ffi (~> 1.9.6)
+      sass (>= 3.3.0)
     sprockets (3.7.1)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
@@ -110,6 +117,8 @@ PLATFORMS
 DEPENDENCIES
   jekyll (~> 3.6.0)
   jekyll-assets (~> 2.3.2)
+  rake
+  sassc (~> 1.11.4)
   shipyard-framework!
 
 BUNDLED WITH

data/styleguide/_assets/css/views.sass

@@ -97,3 +97,7 @@ hr
 +component('components-checkboxes')
   &-switch-col
     line-height: 1.2
+
++component('css-stat')
+  &-item
+    line-height: 1.3

data/styleguide/_includes/css-stats.html

@@ -0,0 +1,14 @@
+<ul class="col-container">
+  <li class="css-stat-item col col-10">
+    <span class="text-sm medium text-lighter display-block">Gzipped Size</span>
+    <span class="text-xxxl strong text-darker">{% css_size %}</span>
+  </li>
+  <li class="css-stat-item col col-10">
+    <span class="text-sm medium text-lighter display-block">Declarations</span>
+    <span class="text-xxxl strong text-darker">{% css_declarations %}</span>
+  </li>
+  <li class="css-stat-item col col-10">
+    <span class="text-sm medium text-lighter display-block">Selectors</span>
+    <span class="text-xxxl strong text-darker">{% css_selectors %}</span>
+  </li>
+</ul>

data/styleguide/_plugins/css_declarations.rb

@@ -0,0 +1,16 @@
+module Jekyll
+  class CssDeclarations < Liquid::Tag
+    def initialize(tag_name, args, options)
+      super
+    end
+
+    def render(context)
+      sass = context['site']['sass_output'].detect { |s|
+        s[:file].include? context['page']['sass_file']
+      }
+      sass[:declarations]
+    end
+  end
+end
+
+Liquid::Template.register_tag('css_declarations', Jekyll::CssDeclarations)

data/styleguide/_plugins/css_selectors.rb

@@ -0,0 +1,16 @@
+module Jekyll
+  class CssSelectors < Liquid::Tag
+    def initialize(tag_name, args, options)
+      super
+    end
+
+    def render(context)
+      sass = context['site']['sass_output'].detect { |s|
+        s[:file].include? context['page']['sass_file']
+      }
+      sass[:selectors]
+    end
+  end
+end
+
+Liquid::Template.register_tag('css_selectors', Jekyll::CssSelectors)

data/styleguide/_plugins/css_size.rb

@@ -0,0 +1,20 @@
+module Jekyll
+  class CssSize < Liquid::Tag
+    def initialize(tag_name, args, options)
+      super
+    end
+
+    def render(context)
+      sass = context['site']['sass_output'].detect { |s|
+        s[:file].include? context['page']['sass_file']
+      }
+      size = sass[:gzip_size]
+      case
+      when size >= 1000 then "#{(size / 1000.0).round(1)}kb"
+      else "#{size}b"
+      end
+    end
+  end
+end
+
+Liquid::Template.register_tag('css_size', Jekyll::CssSize)

data/styleguide/_plugins/sass_generator.rb

@@ -0,0 +1,39 @@
+require 'sassc'
+require 'zlib'
+
+module Jekyll
+  class SassOutputGenerator < Generator
+    def generate(site)
+      site.config['sass_output'] = load_sass_files
+    end
+
+    private
+
+    def load_sass_files
+      Dir['../assets/stylesheets/shipyard/**/*.sass'].sort.map do |file|
+        sass = %(@import "shipyard/core"\n)
+        sass += File.read(file)
+        compact_css = render(sass, :compact)
+        compressed_css = render(sass, :compressed)
+        {
+          file: file,
+          sass: sass,
+          compact_css: compact_css,
+          compressed_css: compressed_css,
+          gzip_size: Zlib::Deflate.deflate(compressed_css).bytesize,
+          declarations: compressed_css.scan(/[.][a-zA-Z\-][a-zA-Z0-9\-]*{/).size,
+          selectors: compressed_css.scan(/[.][a-zA-Z\-][a-zA-Z0-9\-]*/).size
+        }
+      end
+    end
+
+    def render(sass, style)
+      SassC::Engine.new(
+        sass,
+        syntax: :sass,
+        style: style,
+        load_paths: [Shipyard::stylesheets_path]
+      ).render
+    end
+  end
+end

data/styleguide/_plugins/sass_output.rb

@@ -0,0 +1,21 @@
+module Jekyll
+  class SassOutput < Liquid::Tag
+    def initialize(tag_name, args, options)
+      super
+    end
+
+    def render(context)
+      sass = context['site']['sass_output'].detect { |s|
+        s[:file].include? context['page']['sass_file']
+      }
+      output = sass[:compressed_css]
+      output.gsub! /}/, " }\n"
+      output.gsub! /{/, ' { '
+      output.gsub! /([a-z]*):/, '\1: '
+      output.gsub! /\n\z/, ''
+      output
+    end
+  end
+end
+
+Liquid::Template.register_tag('sass_output', Jekyll::SassOutput)

data/styleguide/components/alerts.md

@@ -1,6 +1,7 @@
 ---
 title: Shipyard Alerts
 description: Alerts should be used to grab a user's attention before proceeding to the next action. They are commonly found at the very top of the page directly above the content.
+sass_file: shipyard/components/_alerts
 ---
 
 {% include page-heading.html page=page %}
@@ -100,3 +101,7 @@ Useful when drawing attention to something that has gone critically wrong.
   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 %}
+
+---
+
+{% include css-stats.html %}

data/styleguide/components/boxes.md

@@ -1,6 +1,7 @@
 ---
 title: Shipyard Boxes
 description: 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 `.box` in order to function properly.
+sass_file: shipyard/components/_boxes
 box_sizes: [xxs, xs, sm, md, lg, xl, xxl]
 ---
 
@@ -90,3 +91,7 @@ Useful when you need a box with rounded corners.
     <strong class="center text-lighter text-sm">.box-{{ size }}</strong>
   </div>
 {% endfor %}
+
+---
+
+{% include css-stats.html %}

data/styleguide/components/buttons.md

@@ -1,5 +1,6 @@
 ---
 title: Shipyard Buttons
+sass_file: shipyard/components/_buttons
 ---
 
 {% include page-heading.html page=page %}
@@ -185,3 +186,7 @@ The button classes can be applied to any type of html tag to achieve the desired
   {% btn Wide Screens, :sm :x3_md %}
   {% btn Giant Screens, :sm :x4_md %}
 </div>
+
+---
+
+{% include css-stats.html %}

data/styleguide/components/code.html

@@ -1,5 +1,6 @@
 ---
 title: Shipyard Code Component
+sass_file: shipyard/components/_code
 ---
 
 {% include page-heading.html page=page %}
@@ -42,3 +43,7 @@ end</code></pre>
   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/horizontal-rules.md

@@ -1,6 +1,7 @@
 ---
 title: Horizontal Rules
 description: Shipyard doesn't make any assumptions on how you want to common tags like an `hr` to styled. As a result, we would recommend extending the `.hr` class in your own SASS files to achieve the results below on all `hr` tags (e.g. `@extend .hr`).
+sass_file: shipyard/components/_horizontal-rules
 text_sizes: [xxs, xs, sm, md, lg, xl, xxl, xxxl]
 text_shades: [normal, light, lighter, lightest]
 ---
@@ -75,3 +76,7 @@ Useful when you have a horizontal rule on a lighter background.
 ```html
 <hr class="hr-light" />
 ```
+
+---
+
+{% include css-stats.html %}

data/styleguide/components/icons.md

@@ -1,6 +1,7 @@
 ---
 title: Shipyard Icons
 description: Shipyard comes with several default icons that you're welcome to use on any project. Each icon has been designed on a pixel grid at the small size possible, but can be scaled up to any size you like simply by changing the `width` and `height` in the CSS.
+sass_file: shipyard/components/_icons
 ---
 
 {% include page-heading.html page=page %}
@@ -103,3 +104,7 @@ One of the most common problems when using an icon is that doesn't line up with
   Create
 </button>
 ```
+
+---
+
+{% include css-stats.html %}

data/styleguide/components/modals/index.md

@@ -1,6 +1,7 @@
 ---
 title: Shipyard Modals
 description: Modals are triggered by applying the following attribute to any button or link (e.g. `modal-trigger="login"`).
+sass_file: shipyard/components/_modals
 ---
 
 {% include page-heading.html page=page %}
@@ -34,4 +35,7 @@ description: Modals are triggered by applying the following attribute to any but
 </div>
 ```
 
+---
+
+{% include css-stats.html %}
 {% include_relative _modal.html css_class="display-none" %}

data/styleguide/components/notes.md

@@ -1,6 +1,7 @@
 ---
 title: Shipyard Notes
 description: Notes should be used to grab a user's attention along side of other content.
+sass_file: shipyard/components/_notes
 ---
 
 {% include page-heading.html page=page %}
@@ -60,3 +61,7 @@ Useful when drawing attention to critical information.
   </p>
   {% btn Call to Action, :sm, class: 'note-cta' %}
 {% endnote %}
+
+---
+
+{% include css-stats.html %}

data/styleguide/components/tables.md

@@ -1,6 +1,7 @@
 ---
 title: Shipyard Tables
 description: Tables are useful for tabular data and can be used simple by applying the `.table` class to any table you're working on.
+sass_file: shipyard/components/_tables
 ---
 
 {% include page-heading.html page=page %}
@@ -27,3 +28,7 @@ description: Tables are useful for tabular data and can be used simple by applyi
     {% endfor %}
   </tbody>
 </table>
+
+---
+
+{% include css-stats.html %}

data/styleguide/utilities/accordion.md

@@ -1,6 +1,7 @@
 ---
 title: Accordions
 description: Useful when you want to open and close large blocks of content in a more elegant way.
+sass_file: shipyard/utilities/_accordion
 sizes:
   -
     name: xs
@@ -48,3 +49,7 @@ sizes:
 /* Accordion: Closed State */
 .accordion-closed { opacity: 0; max-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }
 ```
+
+---
+
+{% include css-stats.html %}

data/styleguide/utilities/border-radius.md

@@ -1,6 +1,7 @@
 ---
 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
 directions:
@@ -90,3 +91,7 @@ The examples below demonstrate the utility classes on each breakpoint.
     {% endfor %}
   </div>
 {% endfor %}
+
+---
+
+{% include css-stats.html %}

data/styleguide/utilities/colors.md

@@ -1,6 +1,7 @@
 ---
 title: Shipyard Colors
 description: Shipyard includes **9 standard colors** by default, and each color can be accessed with the corresponding CSS utility class `.color-shade` or by using the SASS variable `$color-shade` in your SASS files.
+sass_file: shipyard/utilities/_colors
 primary_colors: [Gray, Blue, Teal, Green, Yellow, Orange, Red, Coral, Purple]
 shades: [Lightest, Lighter, Light, Base, Dark, Darker, Darkest]
 base_colors: [Black, White]
@@ -38,3 +39,7 @@ base_colors: [Black, White]
     </li>
   {% endfor %}
 </ul>
+
+---
+
+{% include css-stats.html %}

data/styleguide/utilities/grid.md

@@ -1,6 +1,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
 box_classes: utilities-grid-box col-center box-secondary text-lighter text-sm strong align-center
 example_flex_columns: [10,20,25,33,50]
@@ -249,3 +250,7 @@ Useful when the flow of the content should be different at a certain breakpoint.
   </div>
 </div>
 ```
+
+---
+
+{% include css-stats.html %}

data/styleguide/utilities/margin-padding.md

@@ -1,6 +1,7 @@
 ---
 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]
@@ -104,3 +105,7 @@ The examples below demonstrate how much padding will be added to the left and ri
     </div>
   {% endfor %}
 </div>
+
+---
+
+{% include css-stats.html %}

data/styleguide/utilities/opacity.md

@@ -2,6 +2,7 @@
 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 %}
@@ -19,7 +20,9 @@ options: [0,05,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95]
 </ul>
 
 ```css
-{% for option in page.options reversed -%}
-.o-{{ option | opacity_css_class }} { opacity: {{ option | opacity_css_class: '.' }} }
-{% endfor -%}
+{% sass_output -%}
 ```
+
+---
+
+{% include css-stats.html %}

data/styleguide/utilities/position.md

@@ -1,6 +1,7 @@
 ---
 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]
 ---
 
@@ -17,3 +18,7 @@ Useful when you need to overwrite the default styles of an element or component.
 .{{ utility }} { position: {{ utility }} }
 {% endfor -%}
 ```
+
+---
+
+{% include css-stats.html %}

data/styleguide/utilities/typography.md

@@ -1,5 +1,6 @@
 ---
 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]
 ---
@@ -67,3 +68,7 @@ text_shades: [darkest, darker, dark, normal, light, lighter, lightest]
     </div>
   </div>
 </div>
+
+---
+
+{% include css-stats.html %}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shipyard-framework
 version: !ruby/object:Gem::Version
-  version: 0.5.83
+  version: 0.5.84
 platform: ruby
 authors:
 - Codeship
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-12-12 00:00:00.000000000 Z
+date: 2017-12-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -227,7 +227,6 @@ files:
 - assets/stylesheets/shipyard/components/_forms.sass
 - assets/stylesheets/shipyard/components/_hamburger.sass
 - assets/stylesheets/shipyard/components/_header.sass
-- assets/stylesheets/shipyard/components/_hero.sass
 - assets/stylesheets/shipyard/components/_horizontal-rules.sass
 - assets/stylesheets/shipyard/components/_icons.sass
 - assets/stylesheets/shipyard/components/_input-radio-checkbox.sass
@@ -249,6 +248,7 @@ files:
 - assets/stylesheets/shipyard/functions/_map-merge-options.sass
 - assets/stylesheets/shipyard/functions/_text-color.sass
 - assets/stylesheets/shipyard/mixins/_box-model.sass
+- assets/stylesheets/shipyard/mixins/_buttons.sass
 - assets/stylesheets/shipyard/mixins/_components.sass
 - assets/stylesheets/shipyard/mixins/_icons.sass
 - assets/stylesheets/shipyard/mixins/_positioning.sass
@@ -257,12 +257,13 @@ files:
 - assets/stylesheets/shipyard/mixins/_selectors.sass
 - assets/stylesheets/shipyard/utilities/_accordion.sass
 - assets/stylesheets/shipyard/utilities/_border-radius.sass
+- assets/stylesheets/shipyard/utilities/_center.sass
 - assets/stylesheets/shipyard/utilities/_colors.sass
 - assets/stylesheets/shipyard/utilities/_display.sass
 - assets/stylesheets/shipyard/utilities/_grid.sass
 - assets/stylesheets/shipyard/utilities/_margin-padding.sass
 - assets/stylesheets/shipyard/utilities/_opacity.sass
-- assets/stylesheets/shipyard/utilities/_positioning.sass
+- assets/stylesheets/shipyard/utilities/_position.sass
 - assets/stylesheets/shipyard/utilities/_typography.sass
 - assets/stylesheets/shipyard/variables/_color_utilities.sass
 - assets/stylesheets/shipyard/variables/_colors.scss
@@ -325,12 +326,18 @@ files:
 - styleguide/_assets/js/views/utilities/colors.es6
 - styleguide/_config.yml
 - styleguide/_data/breakpoints.yml
+- styleguide/_includes/css-stats.html
 - styleguide/_includes/page-heading.html
 - styleguide/_layouts/application.html
 - styleguide/_plugins/color_css_class.rb
 - styleguide/_plugins/component_css_class.rb
+- styleguide/_plugins/css_declarations.rb
+- styleguide/_plugins/css_selectors.rb
+- styleguide/_plugins/css_size.rb
 - styleguide/_plugins/icon_item.rb
 - styleguide/_plugins/opacity_css_class.rb
+- styleguide/_plugins/sass_generator.rb
+- styleguide/_plugins/sass_output.rb
 - styleguide/components/alerts.md
 - styleguide/components/boxes.md
 - styleguide/components/buttons.md

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

@@ -1,87 +0,0 @@
-+component('hero')
-  $hero-height: (x0: 120px, x1: 180px, x2: 190px)
-  overflow: hidden
-  text-align: center
-  position: relative
-  background: $gray-darkest
-  transition: height 500ms ease, padding 500ms ease
-  +respond-to(height, merge-and-add($hero-height, $header-height))
-  +respond-to(padding-top, $header-height)
-  +with-heroku-nav(margin-top, (x1: $heroku-nav-height))
-
-  &-container
-    height: 100%
-    position: relative
-    z-index: 1
-
-  &-title
-    margin: 0
-    color: #fff
-    width: 100%
-    overflow: hidden
-    line-height: 1.275
-    white-space: nowrap
-    text-overflow: ellipsis
-    +responsive-padding(left right, $divisor: 1)
-    +respond-to(font-size, (x0: 20px, x1: 24px, x2: 26px))
-    &-margin
-      margin: 0 0 10px
-    &-x0-absolute
-      +breakpoint-x0
-        top: 50%
-        left: 50%
-        position: absolute
-        transform: translate(-50%, -50%)
-    &-link
-      color: inherit
-      &:hover
-        color: lighten($blue-light, 5%)
-
-  &-chart
-    position: absolute
-    right: 0
-    bottom: 0
-    height: auto !important
-    &-container
-      position: absolute
-      height: 100%
-      +responsive-right
-    &-bar
-      stroke: lighten($gray-darkest, 7%)
-      stroke-width: 6px
-      stroke-linecap: round
-      stroke-linejoin: round
-      stroke-dasharray: 0, 10px
-
-  &-content
-    position: relative
-    +width-height(100%)
-    +responsive-padding(left right, $divisor: 1)
-    &-auto
-      @extend .hero-content
-      +breakpoint-x1
-        height: auto
-
-  &-cta
-    +breakpoint-x0
-      position: fixed
-      top: 10px
-      right: 10px
-      z-index: 1000
-      border: none
-      &, &:hover
-        background: none
-    +respond-to(margin, (x1: 10px 5px))
-
-    &-icon
-      stroke: $gray-light
-      +when('cta:hover')
-        stroke: #fff
-      +breakpoint-x0
-        +width-height(20px)
-        +center
-      +breakpoint-x1
-        +width-height(12px)
-        margin-right: 5px
-        position: relative
-        top: 2px