shipyard-framework 0.5.87 → 0.6.0

data/styleguide/_plugins/sass_generator.rb

@@ -1,55 +0,0 @@
-require 'sassc'
-require 'zlib'
-
-module Jekyll
-  class SassOutputGenerator < Generator
-    def generate(site)
-      @shipyard_size = 0
-      @stylesheets_path = '../assets/stylesheets/'
-      sass = load_sass_files
-      site.config['sass_output'] = sass
-      site.data.merge!(sass_output: sass)
-    end
-
-    private
-
-    def load_sass_files
-      Dir["#{@stylesheets_path}**/*.sass"].sort.map do |file|
-        sass = %(@import "shipyard/core"\n)
-        sass += File.read(file)
-        compact_css = render(sass, :compact)
-        compressed_css = render(sass, :compressed)
-        gzip_size = Zlib::Deflate.deflate(compressed_css).bytesize
-
-        # Gather all the selectors
-        selectors = compressed_css
-          .gsub(/({[^{}]*})/, ",\n") # Remove declarations
-          .gsub(/@media[^{]*{([^}]*)}/, "\\1") # Remove media queries
-          .gsub(/@keyframes[^{]*{[^}]*}/, '') # Remove keyframes
-          .gsub(/,([^\n])/, ",\n\\1") # Add new lines
-
-        @shipyard_size = gzip_size if file.include?('_shipyard.sass')
-        {
-          'file' => file.gsub(@stylesheets_path, ''),
-          'sass' => sass,
-          'compact_css' => compact_css,
-          'compressed_css' => compressed_css,
-          'selectors' => selectors.scan(/,/).size,
-          'declarations' => compressed_css.scan(/({[^{}]*})/).size,
-          'media_queries' => compressed_css.scan(/@media/).size,
-          'gzip_size' => gzip_size,
-          'percentage' => (gzip_size.to_f / @shipyard_size.to_f * 100.0).round(1)
-        }
-      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

@@ -1,24 +0,0 @@
-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! /([a-z]),/, "\\1,\n\\2"
-      output.gsub! /\),./, "),\n." # Matches :not(...),.class
-      output.gsub! /{/, ' { '
-      output.gsub! /([a-z]):([^:|not])/, '\1: \2'
-      output.gsub! /;/, '; '
-      output.gsub! /\n\z/, ''
-      output
-    end
-  end
-end
-
-Liquid::Template.register_tag('sass_output', Jekyll::SassOutput)

data/styleguide/components/alerts.md

@@ -1,107 +0,0 @@
----
-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 %}
-
----
-
-### Timed Alerts
-Useful when you want to display an alert for a predetermined amount of time.
-{: .section-description }
-
-{% alert :success, :dismissible, id: 'timed-alert-5s', class: 'alert-closed' %}
-  Pack your bags! You'll be on the next flight to Hawaii.
-  <div class="alert-timer alert-timer-on" data-duration="5"></div>
-{% endalert %}
-
-{% alert :success, :dismissible, id: 'timed-alert-10s', class: 'alert-closed' %}
-  Pack your bags! You'll be on the next flight to Tahiti.
-  <div class="alert-timer alert-timer-on" data-duration="10"></div>
-{% endalert %}
-
-{% alert :success, :dismissible, id: 'timed-alert-15s', class: 'alert-closed' %}
-  Pack your bags! You'll be on the next flight to Corsica.
-  <div class="alert-timer alert-timer-on" data-duration="15"></div>
-{% endalert %}
-
-<button class="btn btn-primary mr-10" alert-trigger="#timed-alert-5s">5 Seconds</button>
-<button class="btn btn-primary mr-10" alert-trigger="#timed-alert-10s">10 Seconds</button>
-<button class="btn btn-primary" alert-trigger="#timed-alert-15s">15 Seconds</button>
-
----
-
-### Dismissible
-Used to display notes, tips, and other non-critical information.
-{: .section-description }
-
-{% alert :dismissible %}
-  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.
-{% endalert %}
-
----
-
-### Default `.alert`
-Used to display notes, tips, and other non-critical information.
-{: .section-description }
-
-{% alert %}
-  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: 'alert-cta' %}
-{% endalert %}
-
----
-
-### Info `.alert-info`
-Useful when drawing attention to non-critical information or actions we want the user to take.
-{: .section-description }
-
-{% alert :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: 'alert-cta' %}
-{% endalert %}
-
----
-
-### Success `.alert-success`
-Useful when drawing attention to interactions that have produced successful results.
-{: .section-description }
-
-{% alert :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: 'alert-cta' %}
-{% endalert %}
-
----
-
-### Warning `.alert-warning`
-Useful when drawing attention to critical, time-sensitive information &mdash; even if nothing has gone wrong.
-{: .section-description }
-
-{% alert :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: 'alert-cta' %}
-{% endalert %}
-
----
-
-### Error `.alert-error`
-Useful when drawing attention to something that has gone critically wrong.
-{: .section-description }
-
-{% alert :error %}
-  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 %}
-
----
-
-{% include css-stats.html %}

data/styleguide/components/boxes.md

@@ -1,97 +0,0 @@
----
-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]
----
-
-{% include page-heading.html page=page %}
-
----
-
-### Default `.box`
-Useful when needing to draw extra attention to a particular group of content.
-{: .section-description }
-
-{% 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`
-Useful when needing to draw extra attention to a particular group of content.
-{: .section-description }
-
-{% 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`
-Useful when linking important components to another page or another group of content.
-{: .section-description }
-
-{% box :link %}
-  <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 & Active `.box-link-active`
-Useful when linking important components to another page or another group of content.
-{: .section-description }
-
-{% box :link, :link_active %}
-  <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 & Selected `.box-link-selected`
-Useful when highlighting a linked box that's been selected by the user.
-{: .section-description }
-
-{% box :link, :link_selected %}
-  <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`
-Useful when connecting secondary information to the default box styles.
-{: .section-description }
-
-{% box :secondary %}
-  <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: ', ' }}]`
-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.
-{: .section-description }
-
-{% for size in page.box_sizes %}
-  <div class="box box-{{ size }} mt-20">
-    <strong class="center text-lighter text-sm">.box-{{ size }}</strong>
-  </div>
-{% endfor %}
-
----
-
-### Rounded `.box-rounded`
-Useful when you need a box with rounded corners.
-{: .section-description }
-
-{% for size in page.box_sizes %}
-  <div class="box box-rounded box-{{ size }} mt-20">
-    <strong class="center text-lighter text-sm">.box-{{ size }}</strong>
-  </div>
-{% endfor %}
-
----
-
-{% include css-stats.html %}

data/styleguide/components/buttons.md

@@ -1,192 +0,0 @@
----
-title: Shipyard Buttons
-sass_file: shipyard/components/_buttons
----
-
-{% include page-heading.html page=page %}
-
----
-
-## Common Buttons
-Shipyard gives you more buttons than you can shake a stick at.
-{: .section-description }
-
-<div class="mb-20">
-  {% btn Default, :default, class: 'mr-10' %}
-  {% btn Primary, :primary, class: 'mr-10' %}
-  {% btn Primary Dark, :primary_dark, class: 'mr-10' %}
-  {% btn CTA, :cta, class: 'mr-10' %}
-  {% btn Caution, :caution, class: 'mr-10' %}
-  {% btn Disabled, :disabled, class: 'mr-10' %}
-  {% btn Link, :link %}
-</div>
-
-```html
-{% btn Default %}
-{% btn Primary, :primary %}
-{% btn Primary Dark, :primary_dark %}
-{% btn CTA, :cta %}
-{% btn Caution, :caution %}
-{% btn Disabled, :disabled %}
-{% btn Link, :link %}
-```
-
----
-
-## Secondary Buttons
-Useful when you have a button on a darker background.
-{: .section-description }
-
-<div class="mb-20">
-  {% btn Secondary, :secondary, class: 'mr-10' %}
-  {% btn Secondary Dark, :secondary_dark, class: 'mr-10' %}
-  {% btn Secondary Link, :secondary_link %}
-</div>
-
-```html
-{% btn Secondary, :secondary %}
-{% btn Secondary Dark, :secondary_dark %}
-{% btn Secondary Link, :secondary_link %}
-```
-
----
-
-## Inverse Buttons
-Useful when you have a button on a darker background.
-{: .section-description }
-
-<div class="box-secondary box-padding bg-gray-dark mb-20">
-  {% btn Inverse, :inverse, class: 'mr-10' %}
-  {% btn Inverse Secondary, :inverse_secondary %}
-</div>
-
-```html
-{% btn Inverse, :inverse %}
-{% btn Inverse Secondary, :inverse_secondary %}
-```
-
----
-
-## Rounded Buttons
-Useful when you want a button with completely rounded corners.
-{: .section-description }
-
-<div class="mb-20">
-  {% btn Default, :rounded, class: 'mr-10' %}
-  {% btn Primary, :primary :rounded, class: 'mr-10' %}
-  {% btn CTA, :cta :rounded, class: 'mr-10' %}
-  {% btn Caution, :caution :rounded, class: 'mr-10' %}
-  {% btn Secondary, :secondary :rounded %}
-</div>
-
-```html
-{% btn Rounded, :rounded %}
-```
-
----
-
-## Loading Buttons
-Useful when you have a button that triggers an asynchronous action.
-{: .section-description }
-
-<div class="mb-20">
-  {% btn Default, :loading, class: 'mr-10' %}
-  {% btn Primary, :primary :loading, class: 'mr-10' %}
-  {% btn CTA, :cta :loading, class: 'mr-10' %}
-  {% btn Caution, :caution :loading, class: 'mr-10' %}
-  {% btn Secondary, :secondary :loading, class: 'mr-10' %}
-  {% btn Secondary Link, :secondary_link :loading, class: 'mr-10' %}
-</div>
-
-```html
-{% btn Default, :loading %}
-```
-
----
-
-### Full-Screen Buttons
-Often really useful on mobile screens or in combination with other grids.
-{: .section-description }
-
-<div class="mb-20">
-  {% btn Save Changes, :full %}
-</div>
-
-```html
-{% btn Save Changes, :full %}
-```
-
----
-
-### Common Buttons Tags
-The button classes can be applied to any type of html tag to achieve the desired result. The most common examples being the `button`, `a`, and `input` tags as seen in the example below.
-{: .section-description }
-
-<div class="mb-30">
-  {% btn Button %}
-  <a href="#" class="btn">Link</a>
-  <input type="button" class="btn" value="Input" />
-  <input type="submit" class="btn" value="Submit" />
-  <input type="reset" class="btn" value="Reset" />
-</div>
-
-```html
-{% btn Button %}
-<a href="#" class="btn">Link</a>
-<input type="button" class="btn" value="Input" />
-<input type="submit" class="btn" value="Input" />
-<input type="reset" class="btn" value="Input" />
-```
-
----
-
-## Button Sizes (default: md)
-
-<div class="box-padding align-center">
-  {% btn XX-Small, :xxs %}
-  {% btn X-Small, :xs %}
-  {% btn Small, :sm %}
-  {% btn Medium, :md %}
-  {% btn Large, :lg %}
-  {% btn X-Large, :xl %}
-</div>
-
-## XX-Small, Responsive Buttons
-<div class="box-padding align-center">
-  {% btn All Screens, :xxs %}
-  {% btn Tablets, :x1_xxs %}
-  {% btn Laptops, :x2_xxs %}
-  {% btn Wide Screens, :x3_xxs %}
-  {% btn Giant Screens, :x4_xxs %}
-</div>
-
-## X-Small, Responsive Buttons
-<div class="box-padding align-center">
-  {% btn All Screens, :xs %}
-  {% btn Tablets, :x1_xs %}
-  {% btn Laptops, :x2_xs %}
-  {% btn Wide Screens, :x3_xs %}
-  {% btn Giant Screens, :x4_xs %}
-</div>
-
-## Small, Responsive Buttons
-<div class="box-padding align-center">
-  {% btn All Screens, :sm %}
-  {% btn Tablets, :x1_sm %}
-  {% btn Laptops, :x2_sm %}
-  {% btn Wide Screens, :x3_sm %}
-  {% btn Giant Screens, :x4_sm %}
-</div>
-
-## Medium, Responsive Buttons (Default Size)
-<div class="box-padding align-center">
-  {% btn All Screens %}
-  {% btn Tablets, :sm :x1_md %}
-  {% btn Laptops, :sm :x2_md %}
-  {% btn Wide Screens, :sm :x3_md %}
-  {% btn Giant Screens, :sm :x4_md %}
-</div>
-
----
-
-{% include css-stats.html %}