shipyard-framework 0.5.3 → 0.5.5

data/styleguide/utilities/grid.md

@@ -0,0 +1,152 @@
+---
+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.
+container_classes: col-container margin-top-xs margin-top-x1-sm margin-top-x2-md margin-bottom-md
+box_classes: box-secondary text-light text-sm strong align-center
+example_flex_columns: [10,20,25,33,50]
+example_sizes: [5,10,15,20,25,30,33,35,40,45,50,55,60,65,66,70,75,80,85,90,95,100]
+example_offsets: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75]
+---
+
+{% include page-heading.html page=page %}
+
+---
+
+### Flexible Columns `.col`
+<p class="text-light margin-bottom-md">By default, the flexbox-based grid will automatically size each column inside the container.</p>
+
+{% for example in page.example_flex_columns %}
+  <div class="{{ page.container_classes }}">
+    {% assign num = 100 | divided_by: example %}
+    {% for i in (1..num) %}
+      <div class="col">
+        <div class="{{ page.box_classes }}">{{ example }}</div>
+      </div>
+    {% endfor %}
+  </div>
+{% endfor %}
+<div class="{{ page.container_classes }}">
+  <div class="col col-66 align-center">
+    <div class="{{ page.box_classes }}">66</div>
+  </div>
+  <div class="col align-center">
+    <div class="{{ page.box_classes }}">auto</div>
+  </div>
+</div>
+
+```html
+<div class="col-container">
+  <div class="col"><!-- column contents --></div>
+  <div class="col"><!-- column contents --></div>
+  <div class="col"><!-- column contents --></div>
+</div>
+```
+
+---
+
+### Column Sizes `.col-{ n }`
+<p class="text-light margin-bottom-md" markdown="1">The column sizes are percentage-based and available in any size from `5-100` in increments of 5.</p>
+
+{% for example in page.example_sizes %}
+  <div class="{{ page.container_classes }}">
+    {% assign num = 100 | divided_by: example %}
+    {% for i in (1..num) %}
+      <div class="col col-{{ example }}">
+        <div class="{{ page.box_classes }}">{{ example }}</div>
+      </div>
+    {% endfor %}
+
+    {% assign remainder = 100 | modulo: example %}
+    {% if remainder > 1 %}
+      <div class="col col-{{ remainder }}">
+        <div class="{{ page.box_classes }}">{{ remainder }}</div>
+      </div>
+    {% endif %}
+  </div>
+{% endfor %}
+
+```html
+<div class="col-container">
+  <div class="col col-33"><!-- column contents --></div>
+  <div class="col col-33"><!-- column contents --></div>
+  <div class="col col-33"><!-- column contents --></div>
+</div>
+```
+
+---
+
+### Offset Columns `.col-offset-{ n }`
+<p class="text-light margin-bottom-md">Useful when you need to push columns to the right to fill some empty space.</p>
+
+{% assign example_offsets = page.example_offsets | reverse %}
+{% for i in example_offsets %}
+  <div class="{{ page.container_classes }}">
+    <div class="col col-{{ i }}">
+      <div class="{{ page.box_classes }}">{{ i }}</div>
+    </div>
+    {% if i < 100 %}
+      <div class="col col-20 col-offset-{{ 80 | minus: i }}">
+        <div class="{{ page.box_classes }}">offset {{ 80 | minus: i }}</div>
+      </div>
+    {% endif %}
+  </div>
+{% endfor %}
+```html
+<div class="col-container">
+  <div class="col col-70"><!-- column contents --></div>
+  <div class="col col-20 col-offset-10"><!-- column contents --></div>
+</div>
+```
+
+---
+
+### Responsive Columns `.col-{ n }-(x1..x4)`
+<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">
+      <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>
+      </div>
+    </div>
+  {% endfor %}
+</div>
+
+```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>
+```
+
+---
+
+### Take-Up-The-Rest Columns `.col-container-nowrap`
+<p class="text-light margin-bottom-md" markdown="1">This type of layout is useful in all kinds of scenarios, especially when you have the auto-sized column contains some kind of call-to-action.</p>
+
+<div class="{{ page.container_classes | replace: 'col-container', 'col-container-nowrap' }}">
+  <div class="col col-100">
+    <div class="{{ page.box_classes }}">Take-up-the-rest Column</div>
+  </div>
+  <div class="col">
+    <div class="white-space-nowrap {{ page.box_classes }}">Variable Column</div>
+  </div>
+</div>
+
+```html
+<div class="col-container-nowrap">
+  <div class="col col-100">
+    <!-- Take-Up-The-Rest Column -->
+  </div>
+  <div class="col">
+    <!-- Variable Column -->
+  </div>
+</div>
+```

data/styleguide/utilities/{index.html → index.md}

@@ -1,14 +1,17 @@
 ---
 title: Shipyard Utilities
-utilities: [Responsive, Typography, Colors]
+description: The utility classes below can be applied to any component to override or extend the base styles of the component.
+utilities: [Responsive, Grid, Typography, Colors]
+---
+
+{% include page-heading.html page=page %}
+
 ---
 
-<h1>{{ page.title }}</h1>
-<hr />
 <ul class="col-container">
   {% for utility in page.utilities %}
-    <li class="margin-bottom-xs margin-bottom-x1-sm margin-bottom-x2-lg col col-100 col-x1-25">
-      <a href="{{ site.baseurl }}/utilities/{{ utility | replace: ' ', '-' | downcase }}" class="box-link box-padding align-center text-xl">
+    <li class="margin-bottom-xs margin-bottom-x1-sm margin-bottom-x2-lg col col-100 col-x1-33 col-x2-25">
+      <a href="{{ site.baseurl }}/utilities/{{ utility | replace: ' ', '-' | downcase }}" class="box-link box-padding align-center text-md text-x1-lg text-x2-xl">
         {{ utility }}
       </a>
     </li>

data/styleguide/utilities/{responsive.html → responsive.md}

@@ -1,13 +1,14 @@
 ---
-title: Shipyard Responsive
+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.
 ---
 
-<h1 class="text-xxxl">Mobile-first Methodology</h1>
-<p class="text-light text-xl">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.</p>
+{% include page-heading.html page=page %}
 
-<hr />
+---
+
+## Responsive Demo
 
-<h2>Responsive Demo</h2>
 <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>

data/styleguide/utilities/typography.html

@@ -4,7 +4,7 @@ text_sizes: [xxs, xs, sm, md, lg, xl, xxl, xxxl]
 text_shades: [normal, light, lighter, lightest]
 ---
 
-<h1>{{ page.title }}</h1>
+{% include page-heading.html page=page %}
 
 <hr />
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shipyard-framework
 version: !ruby/object:Gem::Version
-  version: 0.5.3
+  version: 0.5.5
 platform: ruby
 authors:
-- Shipyard
+- Codeship
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-09-21 00:00:00.000000000 Z
+date: 2017-10-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -24,6 +24,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: sprockets-es6
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.9.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.9.2
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -47,7 +61,7 @@ dependencies:
         version: '3.5'
     - - ">="
       - !ruby/object:Gem::Version
-        version: 3.5.1
+        version: 3.5.2
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -57,7 +71,7 @@ dependencies:
         version: '3.5'
     - - ">="
       - !ruby/object:Gem::Version
-        version: 3.5.1
+        version: 3.5.2
 - !ruby/object:Gem::Dependency
   name: rspec
   requirement: !ruby/object:Gem::Requirement
@@ -77,6 +91,9 @@ dependencies:
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.2'
+    - - ">="
       - !ruby/object:Gem::Version
         version: 1.2.9
   type: :development
@@ -84,11 +101,62 @@ dependencies:
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.2'
+    - - ">="
       - !ruby/object:Gem::Version
         version: 1.2.9
+- !ruby/object:Gem::Dependency
+  name: html-proofer
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.7'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.7.4
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.7'
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.7.4
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.6'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.6'
+- !ruby/object:Gem::Dependency
+  name: jekyll-assets
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.3'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.3'
 description: 
 email:
-- ryanwilke@gmail.com
+- design@codeship.com
 executables: []
 extensions: []
 extra_rdoc_files: []
@@ -96,6 +164,7 @@ files:
 - ".gitignore"
 - ".rspec"
 - ".ruby-version"
+- ".travis.yml"
 - CODE_OF_CONDUCT.md
 - Gemfile
 - LICENSE.txt
@@ -132,9 +201,10 @@ files:
 - assets/icons/tag.svg
 - assets/icons/x.svg
 - assets/javascripts/shipyard.es6
-- assets/javascripts/shipyard/alert.es6
+- assets/javascripts/shipyard/alerts.es6
 - assets/javascripts/shipyard/core.es6
-- assets/javascripts/shipyard/icon.es6
+- assets/javascripts/shipyard/hamburger.es6
+- assets/javascripts/shipyard/scroll.es6
 - assets/stylesheets/_shipyard.sass
 - assets/stylesheets/shipyard/_components.sass
 - assets/stylesheets/shipyard/_core.sass
@@ -147,14 +217,15 @@ files:
 - assets/stylesheets/shipyard/components/_form-errors.sass
 - 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/_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/_tables.sass
 - assets/stylesheets/shipyard/components/_tooltips.sass
 - assets/stylesheets/shipyard/core/_animations.sass
-- assets/stylesheets/shipyard/core/_grid.sass
 - assets/stylesheets/shipyard/core/_reset.sass
 - assets/stylesheets/shipyard/core/_typography.sass
 - assets/stylesheets/shipyard/functions/_color.sass
@@ -167,6 +238,8 @@ files:
 - assets/stylesheets/shipyard/mixins/_selectors.sass
 - assets/stylesheets/shipyard/utilities/_colors.sass
 - assets/stylesheets/shipyard/utilities/_display.sass
+- assets/stylesheets/shipyard/utilities/_grid.sass
+- assets/stylesheets/shipyard/utilities/_margin.sass
 - assets/stylesheets/shipyard/utilities/_positioning.sass
 - assets/stylesheets/shipyard/utilities/_typography.sass
 - assets/stylesheets/shipyard/variables/_color_utilities.sass
@@ -175,16 +248,22 @@ files:
 - assets/stylesheets/shipyard/variables/_grid.sass
 - assets/stylesheets/shipyard/variables/_misc.sass
 - assets/stylesheets/shipyard/variables/_typography.sass
+- ci/build.rb
+- ci/deploy
+- ci/jekyll
 - ci/percy
-- ci/rspec
 - ci/setup
 - 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/jekyll/hooks.rb
+- lib/shipyard-framework/jekyll/shipyard_css_classes.rb
+- lib/shipyard-framework/jekyll/shipyard_variables.rb
+- lib/shipyard-framework/jekyll/tags/alert_tag.rb
+- lib/shipyard-framework/jekyll/tags/box_tag.rb
+- lib/shipyard-framework/jekyll/tags/button_tag.rb
+- lib/shipyard-framework/jekyll/tags/icon_tag.rb
+- lib/shipyard-framework/jekyll/tags/note_tag.rb
+- lib/shipyard-framework/jekyll/tags/shipyard_version_tag.rb
 - lib/shipyard-framework/rails/engine.rb
 - lib/shipyard-framework/rails/railtie.rb
 - lib/shipyard-framework/version.rb
@@ -202,28 +281,34 @@ files:
 - styleguide/.ruby-version
 - styleguide/Gemfile
 - styleguide/Gemfile.lock
+- styleguide/_assets/css/application.sass
+- styleguide/_assets/css/layout.sass
+- styleguide/_assets/css/views.sass
+- styleguide/_assets/js/application.es6
+- styleguide/_assets/js/views/utilities/colors.es6
 - styleguide/_config.yml
+- styleguide/_includes/page-heading.html
 - styleguide/_layouts/application.html
-- styleguide/_sass/layout.sass
-- styleguide/_sass/views.sass
-- styleguide/assets/css/application.sass
+- styleguide/_plugins/icon_item.rb
 - styleguide/components/alerts.md
 - styleguide/components/boxes.md
-- styleguide/components/buttons.html
+- styleguide/components/buttons.md
 - styleguide/components/code.html
 - styleguide/components/empty-states.html
 - styleguide/components/forms.html
-- styleguide/components/grid.html
-- styleguide/components/index.html
+- styleguide/components/icons.md
+- styleguide/components/index.md
 - styleguide/components/modals.html
 - styleguide/components/notes.md
-- styleguide/components/tooltips.html
-- styleguide/index.html
-- styleguide/utilities/colors.html
-- styleguide/utilities/index.html
-- styleguide/utilities/responsive.html
+- styleguide/components/tables.md
+- styleguide/components/tooltips.md
+- styleguide/index.md
+- styleguide/utilities/colors.md
+- styleguide/utilities/grid.md
+- styleguide/utilities/index.md
+- styleguide/utilities/responsive.md
 - styleguide/utilities/typography.html
-homepage: https://github.com/shipyard-framework
+homepage: https://github.com/codeship/shipyard
 licenses:
 - MIT
 metadata: {}
@@ -243,7 +328,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.6.11
+rubygems_version: 2.6.14
 signing_key: 
 specification_version: 4
 summary: A lightweight CSS framework for developing mobile-first projects in Ruby

data/assets/javascripts/shipyard/alert.es6

@@ -1,19 +0,0 @@
-class Alert extends Shipyard {
-  constructor () {
-    super()
-    var alerts = document.querySelectorAll('[data-shipyard="alert"]');
-    for (var alert of alerts) {
-      new Vue({
-        el: alert,
-        data: {
-          visible: true
-        },
-        methods: {
-          close () {
-            this.visible = false;
-          }
-        }
-      });
-    }
-  }
-}

data/assets/javascripts/shipyard/icon.es6

@@ -1,50 +0,0 @@
-Vue.component('icon', {
-  template: `
-    <svg :class="iconClass" :viewBox="viewBox" preserveAspectRatio="xMinYMin meet" v-html="innerHtml"></svg>
-  `,
-
-  props: {
-    name: String,
-    size: String, // {width}x{height} (e.g. 4x8, 8x8, 16x16)
-    type: {
-      default: '',
-      type: String
-    },
-    html: String
-  },
-
-  computed: {
-    iconClass () {
-      let cssClasses = [];
-      cssClasses.push('icon');
-      cssClasses.push(`icon-${this.name}`);
-      if (this.type.length > 0) {
-        this.type.trim().split(' ').forEach((type) => {
-          cssClasses.push(`icon-${type}`);
-        });
-      }
-      return cssClasses;
-    },
-
-    viewBox () {
-      return `0 0 ${this.size.replace(/x/, ' ')}`;
-    },
-
-    href () {
-      return `/assets/icons.svg#${this.name}`;
-    },
-
-    innerHtml () {
-      if (this.html && this.name == 'queued') {
-        return this.svgInnerHtml;
-      } else {
-        return `<use xlink:href="${this.href}"></use>`;
-      }
-    },
-
-    svgInnerHtml () {
-      if (this.html) var html = this.html.match(/<svg[^>]*>([\s\S]*?)<\/svg>/);
-      if (html) return html[1];
-    }
-  }
-});

data/ci/rspec

@@ -1 +0,0 @@
-bundle exec rspec

data/styleguide/_sass/layout.sass

@@ -1,35 +0,0 @@
-body
-  padding-top: 70px
-
-header
-  $height: 50px
-  background: $gray-darkest
-  position: fixed
-  top: 0
-  left: 0
-  right: 0
-  height: $height
-  line-height: $height
-  color: #fff
-  z-index: 100
-  h6
-    font-weight: $bold
-    font-size: 24px
-    float: left
-  ul
-    float: right
-    font-weight: $medium
-    font-size: 18px
-    margin-right: -10px
-  li
-    display: inline
-    margin: 0 10px
-  a
-    color: rgba(#fff,.8)
-    &, &:hover
-      text-decoration: none
-    &:hover
-      color: #fff
-
-footer
-  padding: 30px 0

data/styleguide/assets/css/application.sass

@@ -1,10 +0,0 @@
----
----
-$font-family: Catamaran, sans-serif
-$font-monospace: 'Roboto Mono', monospace
-@import shipyard
-@import url('https://fonts.googleapis.com/css?family=Catamaran')
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono')
-
-@import layout
-@import views

data/styleguide/components/grid.html

@@ -1,44 +0,0 @@
----
-title: Shipyard Grid
-example_one: [10,20,25,33]
-example_two: [50,55,60,65,70,75,80,85,90,95,100]
----
-
-<h1>{{ page.title }}</h1>
-
-<hr />
-
-{% for example in page.example_one %}
-  <div class="col-container margin-top-xs margin-top-x1-sm margin-top-x2-md">
-    {% assign num = 100 | divided_by: example %}
-    {% for i in (1..num) %}
-      <div class="col col-{{ example }} align-center">
-        <div class="box-secondary text-light text-sm strong">{{ example }}</div>
-      </div>
-    {% endfor %}
-  </div>
-{% endfor %}
-
-<div class="col-container margin-top-xs margin-top-x1-sm margin-top-x2-md">
-  <div class="col col-66 align-center">
-    <div class="box-secondary text-light text-sm strong">66</div>
-  </div>
-  <div class="col col-33 align-center">
-    <div class="box-secondary text-light text-sm strong">33</div>
-  </div>
-</div>
-
-<hr />
-
-{% for i in page.example_two %}
-  <div class="col-container margin-top-xs margin-top-x1-sm margin-top-x2-md">
-    <div class="col col-{{ i }} align-center">
-      <div class="box-secondary text-light text-sm strong">{{ i }}</div>
-    </div>
-    {% if i < 100 %}
-      <div class="col col-{{ 100 | minus: i }} align-center">
-        <div class="box-secondary text-light text-sm strong">{{ 100 | minus: i }}</div>
-      </div>
-    {% endif %}
-  </div>
-{% endfor %}

data/styleguide/index.html

@@ -1,6 +0,0 @@
----
-title: Shipyard
----
-
-<h2>Installation</h2>
-<p>gem 'shipyard-framework', '~> {% shipyard_version %}'</p>

data/styleguide/utilities/colors.html

@@ -1,41 +0,0 @@
----
-title: Shipyard Colors
-colors: [Gray, Blue, Teal, Green, Yellow, Orange, Red, Coral, Purple]
-shades: [Lightest, Lighter, Light, Base, Dark, Darker, Darkest]
----
-
-<h1>{{ page.title }}</h1>
-
-<hr />
-
-{% for color in page.colors %}
-  <ul class="shade-list margin-bottom-xxl">
-    {% 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', '' }}"></div>
-          <p class="shade-text text-sm medium margin-top-xs medium {{ color | append: '-' | append: shade | downcase | replace: '-base', '' }}">
-            {{ shade | append: ' ' | append: color | replace: 'Base ', '' }}
-          </p>
-        </div>
-      </li>
-    {% endfor %}
-  </ul>
-{% endfor %}
-
-<script type="text/javascript">
-  $.fn.backgroundColorHex = function(){
-    let rgb = this.css('background-color');
-    if (rgb.match(/rgba/)) return '#';
-    let hex = rgb.substr(4, rgb.indexOf(')') - 4).split(',').map(
-                (color) => String('0' + parseInt(color).toString(16)).slice(-2)
-              ).join('');
-    return `#${hex}`;
-  };
-
-  $(document).ready(function(){
-    $('.shade-color').each(function(index, shade){
-      $(shade).html($(shade).backgroundColorHex());
-    });
-  });
-</script>