shipyard-framework 0.5.87 → 0.6.0

data/styleguide/_assets/css/vendor.sass

@@ -1,4 +0,0 @@
-$font-family: "museo-sans-rounded", "Museo Sans Rounded", Arial, sans-serif
-$font-monospace: 'Roboto Mono', monospace
-@import shipyard
-@import shipyard/components/header

data/styleguide/_assets/css/views.sass

@@ -1,103 +0,0 @@
-// Code "Span"
-code.highlighter-rouge
-  @extend .code-inline
-  margin: 0 3px
-
-// Code "Block"
-.code-block
-  margin: 15px 0
-
-hr
-  @extend .hr
-  +respond-to(margin, (x0: 30px 0, x1: 40px 0, x2: 50px 0))
-
-// Shared
-.section-description
-  @extend .text-light
-  @extend .mb-20
-
-// Utilities: Colors
-+component('shade')
-  &-list
-    +respond-to(margin-left, (x0: -5px, x1: -10px))
-    +respond-to(margin-right, (x0: -5px, x1: -10px))
-  &-item
-    text-align: center
-  &-box
-    height: 165px
-    padding: 5px
-    white-space: nowrap
-    &:hover
-      cursor: default
-    &:not(:hover)
-      background: #fff !important
-    &.bg-white
-      background: $gray-darkest !important
-  &-color
-    height: 120px
-    border-radius: 2px 2px 0 0
-    color: transparent
-    transition: 300ms color ease
-    +when('box:hover')
-      color: #fff
-    +when('light:hover, white:hover')
-      color: $gray-darker
-  &-text
-    line-height: 40px
-    transition: 300ms color ease
-    +when('box:hover')
-      color: rgba(#fff,.7)
-    +when('light:hover')
-      color: rgba($gray-darker,.6)
-
-+component('utilities-margin-padding')
-  &-box
-    line-height: 40px
-
-+component('utilities-grid')
-  &-box
-    width: 100%
-    flex-grow: 1
-    min-height: 30px
-
-+component('utilities-typography')
-  &-hr
-    margin: 0 30px
-    &-box
-      &,
-      &-dark,
-      &-light,
-      &-default
-        padding: 30px 0
-        margin: 15px 0
-      &-dark
-        background: $gray-lighter
-      &-light
-        background: #fff
-      &-default
-        border: 2px solid $border-color-light
-
-+component('modal-billing')
-  &-yearly-promo
-    text-transform: uppercase
-
-+component('modal-downgrade')
-  &-coupon
-    padding: 0
-    margin: 0 4px !important
-    white-space: normal
-    &-txt
-      padding: 0 8px
-      font-family: $font-family
-  &-tag
-    padding: 5px
-    display: inline-block
-    border-radius: 3px 0 0 3px
-
-+component('components-checkboxes')
-  &-switch-col
-    line-height: 1.2
-
-+component('css-stat')
-  &-item
-    line-height: 1.3

data/styleguide/_assets/img/arrows/down.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6">
-  <path d="M5,6a1,1,0,0,1-.71-.29l-4-4A1,1,0,0,1,1.71.29L5,3.59,8.29.29A1,1,0,0,1,9.71,1.71l-4,4A1,1,0,0,1,5,6Z"/>
-</svg>

data/styleguide/_assets/img/checkmark.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
-  <polyline vector-effect="non-scaling-stroke" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="1 4.25 3.25 7 7 1.5" />
-</svg>

data/styleguide/_assets/js/application.es6

@@ -1,6 +0,0 @@
-//= require shipyard
-//= require views/components/alert-trigger
-//= require views/utilities/colors
-
-shipyard.alertTriggers = new Shipyard('[alert-trigger]', AlertTrigger)
-shipyard.colors = new Shipyard('[shade-color]', ShadeColor)

data/styleguide/_assets/js/views/components/alert-trigger.es6

@@ -1,20 +0,0 @@
-class AlertTrigger extends Shipyard {
-  constructor (el) {
-    super(el)
-    this.alert = shipyard.alerts.filter(this.attr('alert-trigger'))
-    this.on('click', (e) => { this.click(e) })
-  }
-
-  click (e) {
-    e.preventDefault()
-    this.addClass('btn-loading')
-    this.el.blur()
-    this.alert.trigger('show', {
-      afterClose: () => { this.reset() }
-    })
-  }
-
-  reset () {
-    this.removeClass('btn-loading')
-  }
-}

data/styleguide/_assets/js/views/utilities/colors.es6

@@ -1,14 +0,0 @@
-class ShadeColor extends Shipyard {
-  constructor (el) {
-    super(el)
-    this.html(this.rgbToHex(this.css('background-color')))
-  }
-
-  rgbToHex (rgb) {
-    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}`;
-  }
-}

data/styleguide/_config.yml

@@ -1,67 +0,0 @@
-# Welcome to Jekyll!
-#
-# This config file is meant for settings that affect your whole blog, values
-# which you are expected to set up once and rarely edit after that. If you find
-# yourself editing this file very often, consider using Jekyll's data files
-# feature for the data you need to update frequently.
-#
-# For technical reasons, this file is *NOT* reloaded automatically when you use
-# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
-
-# Site settings
-# These are used to personalize your new site. If you look in the HTML files,
-# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
-# You can create any custom variable you would like, and they will be accessible
-# in the templates via {{ site.myvariable }}.
-title: Shipyard
-description: A sweet front-end framework for Ruby on Rails and Jekyll.
-baseurl: /shipyard # the subpath of your site, e.g. /blog
-url: "" # the base hostname & protocol for your site, e.g. http://example.com
-# source: ./app
-# destination: ./tmp
-# plugins_dir: ./app/_plugins
-# layouts_dir: ./app/_layouts
-# includes_dir: ./app/_includes
-sass:
-  style: compressed
-
-# Build settings
-markdown: kramdown
-kramdown:
-  syntax_highlighter: rouge
-  syntax_highlighter_opts:
-    default_lang: html
-    block:
-      css: class
-      wrap: true
-      disable: false
-      css_class: 'code-block'
-    span:
-      css: class
-      wrap: true
-      disable: false
-      css_class: 'code-inline'
-plugins:
-  - jekyll-assets
-  - shipyard-framework
-
-assets:
-  autowrite: true
-  assets:
-    - "*.svg"
-  sources:
-    - _assets/js
-    - _assets/css
-    - _assets/img
-
-defaults:
-  -
-    scope:
-      path: "" # an empty string here means all files in the project
-    values:
-      layout: "application"
-
-# Exclude from processing.
-exclude:
-  - Gemfile
-  - Gemfile.lock

data/styleguide/_data/breakpoints.yml

@@ -1,15 +0,0 @@
--
-  modifier: null
-  label: All Screens
--
-  modifier: x1
-  label: Tablets
--
-  modifier: x2
-  label: Laptops
--
-  modifier: x3
-  label: Large Screens
--
-  modifier: x4
-  label: Giant Monitors

data/styleguide/_includes/css-stats.html

@@ -1,14 +0,0 @@
-<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/_includes/page-heading.html

@@ -1,4 +0,0 @@
-<h1>{{ page.title }}</h1>
-{% if page.description %}
-  <p class="text-light text-lg mt-15" markdown="1">{{ page.description }}</p>
-{% endif %}

data/styleguide/_layouts/application.html

@@ -1,45 +0,0 @@
----
-navigation:
-- name: Home
-  url: /
-- name: Components
-  url: /components/
-- name: Utilities
-  url: /utilities/
----
-<html lang="en" class="{% shipyard_css_classes %}">
-  <head>
-    <meta charset="utf-8" />
-    <title>{{ page.title }}</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <meta name="theme-color" content="#20a5a8" />
-    {% css fonts media:screen rel:preload async %}
-    {% css syntax media:screen rel:preload async %}
-    {% css application media:screen %}
-  </head>
-  <body>
-    <header class="header">
-      <div class="container">
-        <h6 class="header-logo"><a href="{{ site.baseurl }}/">{{ site.title }}</a></h6>
-        <button class="hamburger" shipyard="hamburger">
-          <span class="hamburger-button">Menu</span>
-        </button>
-        <ul class="header-list">
-          {% for link in layout.navigation %}
-            <li class="header-item {% if page.url == link.url %}header-item-current{% endif %}">
-              <a href="{{ site.baseurl | append: link.url }}" class="header-link">{{ link.name }}</a>
-            </li>
-          {% endfor %}
-          <li class="header-item header-item-cta">
-            <a href="https://github.com/codeship/shipyard" target="_blank" class="header-link-cta" rel="noopener">Download</a>
-          </li>
-        </ul>
-      </div>
-    </header>
-    <div class="container">{{ content }}</div>
-    <footer class="align-center text-lightest">
-      &copy; Shipyard Framework 2017
-    </footer>
-    {% js application %}
-  </body>
-</html>

data/styleguide/_plugins/color_css_class.rb

@@ -1,13 +0,0 @@
-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/_plugins/component_css_class.rb

@@ -1,9 +0,0 @@
-module Jekyll
-  module ComponentCssClassFilter
-    def component_css_class(element, breakpoint, modifier=nil)
-      [element, breakpoint, modifier].reject(&:blank?).join('-')
-    end
-  end
-end
-
-Liquid::Template.register_filter(Jekyll::ComponentCssClassFilter)

data/styleguide/_plugins/css_declarations.rb

@@ -1,16 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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)} <span class="text-lightest">kb</span>)
-      else %(#{size} <span class="text-lightest">B</span>)
-      end
-    end
-  end
-end
-
-Liquid::Template.register_tag('css_size', Jekyll::CssSize)

data/styleguide/_plugins/human_size_filter.rb

@@ -1,12 +0,0 @@
-module Jekyll
-  module HumanSizeFilter
-    def number_to_human_size(num, css='text-lightest')
-      case
-      when num >= 1000 then %(#{(num / 1000.0).round(1)} <span class="#{css}">kb</span>)
-      else %(#{num} <span class="#{css}">B</span>)
-      end
-    end
-  end
-end
-
-Liquid::Template.register_filter(Jekyll::HumanSizeFilter)

data/styleguide/_plugins/icon_item.rb

@@ -1,28 +0,0 @@
-require 'shipyard-framework/helpers/icon_helper'
-
-module Jekyll
-  class IconItem < Liquid::Tag
-    include Shipyard::IconHelper
-
-    def initialize(tag_name, args, options)
-      super
-      args = args.strip.split(',')
-      @name = eval(args[0])
-      @tooltip = args[0]
-      @options = args[1] ? eval("{#{args[1]}}") : {}
-      @css = 'bg-gray' if @name == 'bitbucket-white'
-    end
-
-    def render(context)
-      %(
-        <li class="col col-50 col-x1-20 mb-10 mb-x1-20 mb-x2-30" tooltip="#{@tooltip}">
-          <div class="box box-md box-x1-xxl #{@css}">
-            #{icon @name, @options}
-          </div>
-        </li>
-      )
-    end
-  end
-end
-
-Liquid::Template.register_tag('iconitem', Jekyll::IconItem)

data/styleguide/_plugins/opacity_css_class.rb

@@ -1,12 +0,0 @@
-module Jekyll
-  module OpacityCssClassFilter
-    def opacity_css_class(value, decimal='')
-      css = ''
-      css += decimal if value > 0
-      css += value == 5 ? "0#{value}" : "#{value}"
-      css
-    end
-  end
-end
-
-Liquid::Template.register_filter(Jekyll::OpacityCssClassFilter)