shipyard-framework 0.5.63 → 0.5.64

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 77da96d81489555d590d00ec526ae635643dc71e89f82ca8df62a89ec721e8cd
-  data.tar.gz: c28e1672fe9d9ae8ea65b58e9d801341998a5d91848f1bf9780d9055f5ed5625
+  metadata.gz: 2b899dcde9ba640ac775ed7d6e3bdd287802068a498ba6b566d684c89d2a88a7
+  data.tar.gz: 8f3e60766d63e63124f42d8c6b4af63ba77f7ea07d4a8ca90dcb45a855572792
 SHA512:
-  metadata.gz: 0f62e4ed3172c20c23408eca7562ef302bb15dd69c712688e400b81bdcabbc2bd0e1e13fd85762b0aad93793e21ef2ab51ffa117b588d331e3e922cae2ada997
-  data.tar.gz: de621c35d2f5dad50aaf9b1b27fcfc5dfa1c6e224b346ffdf77dc9fe3b6847026ed7673ced9df9fe03992590afc4c3497402fc2aac18dc8f857e153fd5631d22
+  metadata.gz: 669beafa814739847069c86a579b647b4623661731bd2bff294d5656187f0a19067db26d2f6f570732af819114c1c8f9331c25811e415f13f007d042ff9790ac
+  data.tar.gz: 3cc46c5f0a32efddfaa19ed2a0f0dc5dee3e8a4a13728d15ddc9190ea87c510b41986f9db19246df8ef87c17e6b6d6b2c166482a2791afb6dc6b262032503b39

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

@@ -1,8 +1,8 @@
-$widths: (5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80, 85, 90, 95, 100)
+$widths: (0, 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80, 85, 90, 95, 100)
 
 @mixin column-style($property, $width)
-  @if $width == auto
-    #{$property}: auto
+  @if $width == 0 and $property == max-width
+    max-width: none
   @else if $width == 66
     #{$property}: 66.6666666666%
   @else if $width == 33
@@ -43,7 +43,7 @@ $widths: (5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80,
     flex-wrap: wrap
     +responsive-margin(left right, $divisor: -2)
     +all-media-sizes
-      &-nowrap      
+      &-nowrap
         display: flex
         flex-wrap: nowrap
         +responsive-margin(left right, $divisor: -2)

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

@@ -1,3 +1,7 @@
+// Black & White
+$black: color('black') !default
+$white: color('white') !default
+
 // Gray
 $gray: color('gray') !default
 $gray-light: color('gray', 'light') !default

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

@@ -1,4 +1,10 @@
 $colors: (
+  "black": (
+    base: #000
+  ),
+  "white": (
+    base: #fff
+  ),
   "gray": (
     base: #788594,
     light: #bac5d2,

data/lib/shipyard-framework/helpers/icon_helper.rb

@@ -4,16 +4,6 @@ module Shipyard
     include ActionView::Helpers::TagHelper
 
     def icon(name, options={})
-      process_icon(name, options)
-    end
-
-    def get_icon(name, options={})
-      process_icon(name, options)
-    end
-
-    private
-
-    def process_icon(name, options={})
       if name.is_a? Symbol
         svg = find_icon(symbol: name)
         svg_use_tag svg, options
@@ -23,6 +13,10 @@ module Shipyard
       end
     end
 
+    alias_method :get_icon, :icon
+
+    private
+
     def find_icon(hash)
       icon = $icons.icons.detect { |i| i[hash.keys.first] == hash.values.first }
       raise_error(hash.values.first) unless icon

data/lib/shipyard-framework/version.rb

@@ -1,3 +1,3 @@
 module Shipyard
-  VERSION = '0.5.63'
+  VERSION = '0.5.64'
 end

data/styleguide/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: ..
   specs:
-    shipyard-framework (0.5.63)
+    shipyard-framework (0.5.64)
       actionview (~> 5.0)
       sprockets-es6 (~> 0.9.2)
 

data/styleguide/_assets/css/views.sass

@@ -14,16 +14,10 @@ hr
 // Utilities: Colors
 +component('shade')
   &-list
-    display: table
-    width: 100%
+    +respond-to(margin-left, (x0: -5px, x1: -10px))
+    +respond-to(margin-right, (x0: -5px, x1: -10px))
   &-item
     text-align: center
-    display: table-cell
-    width: 10%
-    &:not(:first-child)
-      border-left: 10px solid transparent
-    &:not(:last-child)
-      border-right: 10px solid transparent
   &-box
     height: 165px
     padding: 5px
@@ -32,6 +26,8 @@ hr
       cursor: default
     &:not(:hover)
       background: #fff !important
+    &.bg-white
+      background: $gray-darkest !important
   &-color
     height: 120px
     border-radius: 2px 2px 0 0
@@ -42,7 +38,7 @@ hr
     transition: 300ms color ease
     +when('box:hover')
       color: #fff
-    +when('light:hover')
+    +when('light:hover, white:hover')
       color: $gray-darker
   &-text
     line-height: 40px

data/styleguide/_plugins/color_css_class.rb

@@ -0,0 +1,13 @@
+module Jekyll
+  module ColorCssClassFilter
+    def color_css_class(color, shade=nil)
+      if shade
+        "#{color}-#{shade}".downcase.chomp '-base'
+      else
+        "#{color}".downcase
+      end
+    end
+  end
+end
+
+Liquid::Template.register_filter(Jekyll::ColorCssClassFilter)

data/styleguide/utilities/colors.md

@@ -1,25 +1,40 @@
 ---
 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.
-colors: [Gray, Blue, Teal, Green, Yellow, Orange, Red, Coral, Purple]
+primary_colors: [Gray, Blue, Teal, Green, Yellow, Orange, Red, Coral, Purple]
 shades: [Lightest, Lighter, Light, Base, Dark, Darker, Darkest]
+base_colors: [Black, White]
 ---
 
 {% include page-heading.html page=page %}
 
 ---
 
-{% for color in page.colors %}
-  <ul class="shade-list margin-bottom-xxl" shade-list>
+{% for color in page.primary_colors %}
+  <ul class="col-container shade-list margin-bottom-lg" shade-list>
     {% for shade in page.shades %}
-      <li class="shade-item shade-{{ shade | downcase }}">
-        <div class="shade-box box bg-{{ color | append: '-' | append: shade | downcase | replace: '-base', '' }} shade-{{ shade | downcase | replace: 'er', '' | replace: 'est', '' }}">
-          <div class="shade-color text-xxl bold bg-{{ color | append: '-' | append: shade | downcase | replace: '-base', '' }}" shade-color></div>
-          <p class="shade-text text-sm medium {{ color | append: '-' | append: shade | downcase | replace: '-base', '' }}">
-            ${{ color | append: '-' | append: shade | downcase | replace: '-base', '' }}
+      <li class="col col-50 col-x1-25 col-x2-0 padding-left-xxs padding-right-xxs padding-left-x1-xs padding-right-x1-xs margin-bottom-xs margin-bottom-x1-md shade-item shade-{{ shade | downcase }} shade-{{ color | color_css_class: shade }}">
+        <div class="shade-box box bg-{{ color | color_css_class: shade }} shade-{{ shade | downcase | replace: 'er', '' | replace: 'est', '' }}">
+          <div class="shade-color text-xxl bold bg-{{ color | color_css_class: shade }}" shade-color></div>
+          <p class="shade-text text-sm medium {{ color | color_css_class: shade }}">
+            ${{ color | color_css_class: shade }}
           </p>
         </div>
       </li>
     {% endfor %}
   </ul>
 {% endfor %}
+
+<ul class="col-container shade-list margin-bottom-lg" shade-list>
+  {% assign shade = 'Base' %}
+  {% for color in page.base_colors %}
+    <li class="col padding-left-xxs padding-right-xxs padding-left-x1-xs padding-right-x1-xs margin-bottom-xs margin-bottom-x1-md shade-item shade-{{ shade | downcase }} shade-{{ color | color_css_class: shade }}">
+      <div class="shade-box box bg-{{ color | color_css_class: shade }} shade-{{ shade | downcase | replace: 'er', '' | replace: 'est', '' }}">
+        <div class="shade-color text-xxl bold bg-{{ color | color_css_class: shade }}" shade-color></div>
+        <p class="shade-text text-sm medium {{ color | color_css_class: shade }}">
+          ${{ color | color_css_class }}
+        </p>
+      </div>
+    </li>
+  {% endfor %}
+</ul>

data/styleguide/utilities/grid.md

@@ -104,13 +104,13 @@ example_offsets: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75]
 <p class="text-light margin-bottom-md" markdown="1">Useful when you want to build a grid that works for any size of screen.</p>
 
 <div class="{{ page.container_classes }}">
-  {% for i in (1..5) %}
-    <div class="col col-100 col-x1-33 col-x2-25 col-x3-20">
+  {% for i in (1..7) %}
+    <div class="col col-100 col-x1-33 col-x2-25 col-x3-0">
       <div class="{{ page.box_classes }}">
         <span class="display-block display-x1-none">100</span>
         <span class="display-none display-x1-block display-x2-none">33</span>
         <span class="display-none display-x2-block display-x3-none">25</span>
-        <span class="display-none display-x3-block">20</span>
+        <span class="display-none display-x3-block">auto</span>
       </div>
     </div>
   {% endfor %}
@@ -118,11 +118,13 @@ example_offsets: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75]
 
 ```html
 <div class="col-container-wrap">
-  <div class="col col-100 col-x1-33 col-x2-25 col-x3-20"><!-- column 1 --></div>
-  <div class="col col-100 col-x1-33 col-x2-25 col-x3-20"><!-- column 2 --></div>
-  <div class="col col-100 col-x1-33 col-x2-25 col-x3-20"><!-- column 3 --></div>
-  <div class="col col-100 col-x1-33 col-x2-25 col-x3-20"><!-- column 4 --></div>
-  <div class="col col-100 col-x1-33 col-x2-25 col-x3-20"><!-- column 5 --></div>
+  <div class="col col-100 col-x1-33 col-x2-25 col-x3-0"><!-- column 1 --></div>
+  <div class="col col-100 col-x1-33 col-x2-25 col-x3-0"><!-- column 2 --></div>
+  <div class="col col-100 col-x1-33 col-x2-25 col-x3-0"><!-- column 3 --></div>
+  <div class="col col-100 col-x1-33 col-x2-25 col-x3-0"><!-- column 4 --></div>
+  <div class="col col-100 col-x1-33 col-x2-25 col-x3-0"><!-- column 5 --></div>
+  <div class="col col-100 col-x1-33 col-x2-25 col-x3-0"><!-- column 6 --></div>
+  <div class="col col-100 col-x1-33 col-x2-25 col-x3-0"><!-- column 7 --></div>
 </div>
 ```
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shipyard-framework
 version: !ruby/object:Gem::Version
-  version: 0.5.63
+  version: 0.5.64
 platform: ruby
 authors:
 - Codeship
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-11-08 00:00:00.000000000 Z
+date: 2017-11-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -301,6 +301,7 @@ files:
 - styleguide/_config.yml
 - styleguide/_includes/page-heading.html
 - styleguide/_layouts/application.html
+- styleguide/_plugins/color_css_class.rb
 - styleguide/_plugins/icon_item.rb
 - styleguide/components/alerts.md
 - styleguide/components/boxes.md