shipyard-framework 0.3.3 → 0.3.4

data/styleguide/components/grid.html

@@ -0,0 +1,44 @@
+---
+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/components/index.html

@@ -0,0 +1,16 @@
+---
+title: Shipyard Components
+components: [Grid, Boxes, Buttons, Empty States, Alerts, Forms, Icons, Modals, Tooltips]
+---
+
+<h1>{{ page.title }}</h1>
+<hr />
+<ul class="col-container">
+  {% for component in page.components %}
+    <li class="margin-bottom-xs margin-bottom-x1-sm margin-bottom-x2-lg col col-100 col-x1-25">
+      <a href="{{ site.baseurl }}/components/{{ component | replace: ' ', '-' | downcase }}" class="box-link box-padding align-center text-xl">
+        {{ component }}
+      </a>
+    </li>
+  {% endfor %}
+</ul>

data/styleguide/components/modals.html

@@ -0,0 +1,15 @@
+---
+title: Shipyard Modals
+---
+
+<h1>{{ page.title }}</h1>
+<p class="text-light text-lg">
+  Modals are triggered by applying the following attribute to any button or link
+  (e.g. <code class="code">modal="login"</code>).
+</p>
+
+<hr />
+
+<div class="box-padding align-center">
+  {% btn Trigger Modal, :secondary :margin %}
+</div>

data/styleguide/components/tooltips.html

@@ -0,0 +1,19 @@
+---
+title: Shipyard Tooltips
+---
+
+<h1>{{ page.title }}</h1>
+<p class="text-light text-lg">
+  Tooltips are used primarily by setting the tooltip attribute on any element
+  (e.g. <code class="code">tooltip="..."</code>).
+</p>
+
+<hr />
+
+<div class="box-padding align-center">
+  {% btn Default Tooltip, :secondary :margin, tooltip: 'What a lovely tooltip' %}
+  {% btn Top, :secondary :margin, tooltip: 'What a lovely tooltip' %}
+  {% btn Bottom, :secondary :margin, tooltip: 'What a lovely tooltip' %}
+  {% btn Left, :secondary :margin, tooltip: 'What a lovely tooltip' %}
+  {% btn Right, :secondary :margin, tooltip: 'What a lovely tooltip' %}
+</div>

data/styleguide/index.html

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

data/styleguide/utilities/colors.html

@@ -0,0 +1,24 @@
+---
+title: Shipyard Colors
+colors: [Gray, Blue, Teal, Green, Yellow, Orange, 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', '' }}">
+          <div class="shade-color 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 %}

data/styleguide/utilities/index.html

@@ -0,0 +1,16 @@
+---
+title: Shipyard Utilities
+utilities: [Responsive, Typography, Colors]
+---
+
+<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">
+        {{ utility }}
+      </a>
+    </li>
+  {% endfor %}
+</ul>

data/styleguide/utilities/responsive.html

@@ -0,0 +1,19 @@
+---
+title: Shipyard Responsive
+---
+
+<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>
+
+<hr />
+
+<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>
+    <span class="display-none display-x1-inline display-x2-none">Tablets &amp; Up (.btn-x1-sm)</span>
+    <span class="display-none display-x2-inline display-x3-none">Small Laptops &amp; Up (.btn-x2-md)</span>
+    <span class="display-none display-x3-inline display-x4-none">Wide Laptos &amp; Up (.btn-x3-lg)</span>
+    <span class="display-none display-x4-inline">Large Monitors &amp; Up (.btn-x4-xl)</span>
+  </button>
+</div>

data/styleguide/utilities/typography.html

@@ -0,0 +1,56 @@
+---
+title: Shipyard Typography
+text_sizes: [xxs, xs, sm, md, lg, xl, xxl, xxxl]
+text_shades: [normal, light, lighter, lightest]
+---
+
+<h1>{{ page.title }}</h1>
+
+<hr />
+
+<div class="col-container">
+  <div class="col col-20">
+    <h1>h1. Heading</h1>
+    <h2>h2. Heading</h2>
+    <h3>h3. Heading</h3>
+    <h4>h4. Heading</h4>
+    <h5>h5. Heading</h5>
+    <h6>h6. Heading</h6>
+  </div>
+  <div class="col col-20">
+    <h3>Text Sizes</h3>
+    {% for size in page.text_sizes %}
+      <p class="text-{{ size }}">.text-{{ size }}</p>
+    {% endfor %}
+  </div>
+  <div class="col col-20">
+    <h3>Text Shades</h3>
+    <div class="box box-padding margin-top-xs">
+      <ul class="list strong">
+        {% for shade in page.text_shades %}
+          <li class="text-{{ shade }}">.text-{{ shade }}</li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+  <div class="col col-20">
+    <h3>Inverse Text Shades</h3>
+    <div class="box-secondary box-padding bg-gray-dark margin-top-xs">
+      <ul class="list strong">
+        {% for shade in page.text_shades %}
+          <li class="text-inverse{{ '-' | append: shade | replace: '-normal', '' }}">
+            .text-inverse{{ '-' | append: shade | replace: '-normal', '' }}
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+  <div class="col col-20">
+    <h3>Text Alignment</h3>
+    <ul>
+      <li class="align-left">.align-left</li>
+      <li class="align-center">.align-center</li>
+      <li class="align-right">.align-right</li>
+    </ul>
+  </div>
+</div>

metadata

@@ -1,47 +1,47 @@
 --- !ruby/object:Gem::Specification
 name: shipyard-framework
 version: !ruby/object:Gem::Version
-  version: 0.3.3
+  version: 0.3.4
 platform: ruby
 authors:
 - Shipyard
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-08-09 00:00:00.000000000 Z
+date: 2017-08-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - '>='
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '0'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '1.15'
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 1.15.3
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ~>
+    - - "~>"
       - !ruby/object:Gem::Version
         version: '1.15'
-    - - '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: 1.15.3
 description: 
@@ -51,13 +51,18 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- .gitignore
-- .rspec
+- ".gitignore"
+- ".rspec"
 - CODE_OF_CONDUCT.md
 - Gemfile
 - LICENSE.txt
 - README.md
 - Rakefile
+- app/helpers/shipyard/alert_helper.rb
+- app/helpers/shipyard/button_helper.rb
+- app/helpers/shipyard/form_helper.rb
+- app/helpers/shipyard/icon_helper.rb
+- app/helpers/shipyard/layout_helper.rb
 - app/views/shipyard/_alerts.slim
 - assets/icons/arrows/arrow-down.svg
 - assets/icons/gear.svg
@@ -119,19 +124,39 @@ files:
 - assets/stylesheets/shipyard/variables/_typography.sass
 - lib/shipyard-framework.rb
 - lib/shipyard-framework/icons.rb
+- lib/shipyard-framework/jekyll/alert_tag.rb
 - lib/shipyard-framework/jekyll/button_tag.rb
 - lib/shipyard-framework/jekyll/shipyard_version_tag.rb
-- lib/shipyard-framework/rails/alert_helper.rb
-- lib/shipyard-framework/rails/button_helper.rb
 - lib/shipyard-framework/rails/engine.rb
-- lib/shipyard-framework/rails/form_helper.rb
-- lib/shipyard-framework/rails/icon_helper.rb
-- lib/shipyard-framework/rails/layout_helpers.rb
 - lib/shipyard-framework/rails/railtie.rb
 - lib/shipyard-framework/version.rb
 - shipyard.gemspec
 - spec/shipyard_spec.rb
 - spec/spec_helper.rb
+- styleguide/.gitignore
+- styleguide/.nojekyll
+- styleguide/.ruby-version
+- styleguide/Gemfile
+- styleguide/Gemfile.lock
+- styleguide/_config.yml
+- styleguide/_layouts/application.html
+- styleguide/_sass/layout.sass
+- styleguide/_sass/views.sass
+- styleguide/assets/css/application.sass
+- styleguide/components/alerts.html
+- styleguide/components/boxes.html
+- styleguide/components/buttons.html
+- styleguide/components/empty-states.html
+- styleguide/components/forms.html
+- styleguide/components/grid.html
+- styleguide/components/index.html
+- styleguide/components/modals.html
+- styleguide/components/tooltips.html
+- styleguide/index.html
+- styleguide/utilities/colors.html
+- styleguide/utilities/index.html
+- styleguide/utilities/responsive.html
+- styleguide/utilities/typography.html
 homepage: https://github.com/shipyard-framework
 licenses:
 - MIT
@@ -142,17 +167,17 @@ require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.0.14.1
+rubygems_version: 2.5.1
 signing_key: 
 specification_version: 4
 summary: A lightweight CSS framework for developing mobile-first projects in Ruby

data/lib/shipyard-framework/rails/alert_helper.rb

@@ -1,45 +0,0 @@
-module Shipyard
-  module Rails
-    module AlertHelper
-      def flash_alert(*args, &block)
-        alert_txt = capture(&block) if block_given?
-        options = {}
-        options[:role] ||= 'alert'
-        options[:data] ||= {}
-        options[:data][:shipyard] = 'alert'
-        options['v-show'] = 'visible'
-        class_list = ['alert']
-
-        args.each do |arg|
-          if arg.is_a? Symbol
-            class_list << "alert-#{alert_type(arg)}"
-          elsif arg.is_a? Hash
-            options = options.merge(arg) if arg.is_a?(Hash)
-          else
-            alert_txt = arg
-          end
-        end
-
-        options[:class] = "#{class_list.join(' ')} #{options[:class]}"
-
-        content_tag :div, options do
-          concat content_tag(:p, raw(alert_txt), class: 'alert-txt')
-          concat content_tag(:button,
-                             icon('x', class: 'alert-close-icon icon-outline-inverse center'),
-                             class: 'alert-close v-center',
-                             '@click': 'close')
-        end
-      end
-
-      private
-
-      def alert_type(type)
-        case type.to_sym
-        when :notice then :success
-        when :alert then :error
-        else type.to_s.tr('_', '-')
-        end
-      end
-    end
-  end
-end

data/lib/shipyard-framework/rails/button_helper.rb

@@ -1,36 +0,0 @@
-module Shipyard
-  module Rails
-    module ButtonHelper
-      include ActionView::Helpers::TagHelper
-
-      def btn(text, *args, &block)
-        if block_given?
-          args << text
-          name = capture(&block)
-        end
-
-        # Save any options that were passed in.
-        options = {}
-        args.each do |arg|
-          options = options.merge(arg) if arg.is_a?(Hash)
-        end
-
-        # Output the appropriate button.
-        tag = options.key?(:href) ? :a : :button
-        content_tag tag, text, btn_options(args, options)
-      end
-
-      private
-
-      def btn_options(args, options)
-        options[:class] ||= ''
-        options[:class] += ' btn'
-        args.each do |arg|
-          options[:class] += " btn-#{arg.to_s.tr('_', '-')}" if arg.is_a?(Symbol)
-        end
-        options[:class].strip!
-        options
-      end
-    end
-  end
-end