shipyard-framework 0.3.3 → 0.3.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. data/app/helpers/shipyard/alert_helper.rb +52 -0
  3. data/app/helpers/shipyard/button_helper.rb +34 -0
  4. data/app/helpers/shipyard/form_helper.rb +16 -0
  5. data/app/helpers/shipyard/icon_helper.rb +49 -0
  6. data/app/helpers/shipyard/layout_helper.rb +31 -0
  7. data/assets/stylesheets/shipyard/components/_alerts.sass +1 -0
  8. data/assets/stylesheets/shipyard/components/_boxes.sass +3 -0
  9. data/assets/stylesheets/shipyard/components/_tooltips.sass +1 -1
  10. data/assets/stylesheets/shipyard/core/_type.sass +4 -1
  11. data/assets/stylesheets/shipyard/utilities/_colors.sass +4 -0
  12. data/assets/stylesheets/shipyard/variables/_colors.scss +72 -9
  13. data/lib/shipyard-framework.rb +2 -0
  14. data/lib/shipyard-framework/jekyll/alert_tag.rb +20 -0
  15. data/lib/shipyard-framework/jekyll/button_tag.rb +2 -2
  16. data/lib/shipyard-framework/rails/railtie.rb +0 -14
  17. data/lib/shipyard-framework/version.rb +1 -1
  18. data/shipyard.gemspec +1 -1
  19. data/styleguide/.gitignore +3 -0
  20. data/styleguide/.nojekyll +0 -0
  21. data/styleguide/.ruby-version +1 -0
  22. data/styleguide/Gemfile +6 -0
  23. data/styleguide/Gemfile.lock +87 -0
  24. data/styleguide/_config.yml +43 -0
  25. data/styleguide/_layouts/application.html +24 -0
  26. data/styleguide/_sass/layout.sass +35 -0
  27. data/styleguide/_sass/views.sass +27 -0
  28. data/styleguide/assets/css/application.sass +8 -0
  29. data/styleguide/components/alerts.html +12 -0
  30. data/styleguide/components/boxes.html +37 -0
  31. data/styleguide/components/buttons.html +67 -0
  32. data/styleguide/components/empty-states.html +12 -0
  33. data/styleguide/components/forms.html +82 -0
  34. data/styleguide/components/grid.html +44 -0
  35. data/styleguide/components/index.html +16 -0
  36. data/styleguide/components/modals.html +15 -0
  37. data/styleguide/components/tooltips.html +19 -0
  38. data/styleguide/index.html +6 -0
  39. data/styleguide/utilities/colors.html +24 -0
  40. data/styleguide/utilities/index.html +16 -0
  41. data/styleguide/utilities/responsive.html +19 -0
  42. data/styleguide/utilities/typography.html +56 -0
  43. metadata +43 -18
  44. data/lib/shipyard-framework/rails/alert_helper.rb +0 -45
  45. data/lib/shipyard-framework/rails/button_helper.rb +0 -36
  46. data/lib/shipyard-framework/rails/form_helper.rb +0 -18
  47. data/lib/shipyard-framework/rails/icon_helper.rb +0 -51
  48. data/lib/shipyard-framework/rails/layout_helpers.rb +0 -33
@@ -0,0 +1,44 @@
1
+ ---
2
+ title: Shipyard Grid
3
+ example_one: [10,20,25,33]
4
+ example_two: [50,55,60,65,70,75,80,85,90,95,100]
5
+ ---
6
+
7
+ <h1>{{ page.title }}</h1>
8
+
9
+ <hr />
10
+
11
+ {% for example in page.example_one %}
12
+ <div class="col-container margin-top-xs margin-top-x1-sm margin-top-x2-md">
13
+ {% assign num = 100 | divided_by: example %}
14
+ {% for i in (1..num) %}
15
+ <div class="col col-{{ example }} align-center">
16
+ <div class="box-secondary text-light text-sm strong">{{ example }}</div>
17
+ </div>
18
+ {% endfor %}
19
+ </div>
20
+ {% endfor %}
21
+
22
+ <div class="col-container margin-top-xs margin-top-x1-sm margin-top-x2-md">
23
+ <div class="col col-66 align-center">
24
+ <div class="box-secondary text-light text-sm strong">66</div>
25
+ </div>
26
+ <div class="col col-33 align-center">
27
+ <div class="box-secondary text-light text-sm strong">33</div>
28
+ </div>
29
+ </div>
30
+
31
+ <hr />
32
+
33
+ {% for i in page.example_two %}
34
+ <div class="col-container margin-top-xs margin-top-x1-sm margin-top-x2-md">
35
+ <div class="col col-{{ i }} align-center">
36
+ <div class="box-secondary text-light text-sm strong">{{ i }}</div>
37
+ </div>
38
+ {% if i < 100 %}
39
+ <div class="col col-{{ 100 | minus: i }} align-center">
40
+ <div class="box-secondary text-light text-sm strong">{{ 100 | minus: i }}</div>
41
+ </div>
42
+ {% endif %}
43
+ </div>
44
+ {% endfor %}
@@ -0,0 +1,16 @@
1
+ ---
2
+ title: Shipyard Components
3
+ components: [Grid, Boxes, Buttons, Empty States, Alerts, Forms, Icons, Modals, Tooltips]
4
+ ---
5
+
6
+ <h1>{{ page.title }}</h1>
7
+ <hr />
8
+ <ul class="col-container">
9
+ {% for component in page.components %}
10
+ <li class="margin-bottom-xs margin-bottom-x1-sm margin-bottom-x2-lg col col-100 col-x1-25">
11
+ <a href="{{ site.baseurl }}/components/{{ component | replace: ' ', '-' | downcase }}" class="box-link box-padding align-center text-xl">
12
+ {{ component }}
13
+ </a>
14
+ </li>
15
+ {% endfor %}
16
+ </ul>
@@ -0,0 +1,15 @@
1
+ ---
2
+ title: Shipyard Modals
3
+ ---
4
+
5
+ <h1>{{ page.title }}</h1>
6
+ <p class="text-light text-lg">
7
+ Modals are triggered by applying the following attribute to any button or link
8
+ (e.g. <code class="code">modal="login"</code>).
9
+ </p>
10
+
11
+ <hr />
12
+
13
+ <div class="box-padding align-center">
14
+ {% btn Trigger Modal, :secondary :margin %}
15
+ </div>
@@ -0,0 +1,19 @@
1
+ ---
2
+ title: Shipyard Tooltips
3
+ ---
4
+
5
+ <h1>{{ page.title }}</h1>
6
+ <p class="text-light text-lg">
7
+ Tooltips are used primarily by setting the tooltip attribute on any element
8
+ (e.g. <code class="code">tooltip="..."</code>).
9
+ </p>
10
+
11
+ <hr />
12
+
13
+ <div class="box-padding align-center">
14
+ {% btn Default Tooltip, :secondary :margin, tooltip: 'What a lovely tooltip' %}
15
+ {% btn Top, :secondary :margin, tooltip: 'What a lovely tooltip' %}
16
+ {% btn Bottom, :secondary :margin, tooltip: 'What a lovely tooltip' %}
17
+ {% btn Left, :secondary :margin, tooltip: 'What a lovely tooltip' %}
18
+ {% btn Right, :secondary :margin, tooltip: 'What a lovely tooltip' %}
19
+ </div>
@@ -0,0 +1,6 @@
1
+ ---
2
+ title: Shipyard
3
+ ---
4
+
5
+ <h2>Installation</h2>
6
+ <p>gem 'shipyard-framework', '~> {% shipyard_version %}'</p>
@@ -0,0 +1,24 @@
1
+ ---
2
+ title: Shipyard Colors
3
+ colors: [Gray, Blue, Teal, Green, Yellow, Orange, Coral, Purple]
4
+ shades: [Lightest, Lighter, Light, Base, Dark, Darker, Darkest]
5
+ ---
6
+
7
+ <h1>{{ page.title }}</h1>
8
+
9
+ <hr />
10
+
11
+ {% for color in page.colors %}
12
+ <ul class="shade-list margin-bottom-xxl">
13
+ {% for shade in page.shades %}
14
+ <li class="shade-item shade-{{ shade | downcase }}">
15
+ <div class="shade-box box bg-{{ color | append: '-' | append: shade | downcase | replace: '-base', '' }}">
16
+ <div class="shade-color bg-{{ color | append: '-' | append: shade | downcase | replace: '-base', '' }}"></div>
17
+ <p class="shade-text text-sm medium margin-top-xs medium {{ color | append: '-' | append: shade | downcase | replace: '-base', '' }}">
18
+ {{ shade | append: ' ' | append: color | replace: 'Base ', '' }}
19
+ </p>
20
+ </div>
21
+ </li>
22
+ {% endfor %}
23
+ </ul>
24
+ {% endfor %}
@@ -0,0 +1,16 @@
1
+ ---
2
+ title: Shipyard Utilities
3
+ utilities: [Responsive, Typography, Colors]
4
+ ---
5
+
6
+ <h1>{{ page.title }}</h1>
7
+ <hr />
8
+ <ul class="col-container">
9
+ {% for utility in page.utilities %}
10
+ <li class="margin-bottom-xs margin-bottom-x1-sm margin-bottom-x2-lg col col-100 col-x1-25">
11
+ <a href="{{ site.baseurl }}/utilities/{{ utility | replace: ' ', '-' | downcase }}" class="box-link box-padding align-center text-xl">
12
+ {{ utility }}
13
+ </a>
14
+ </li>
15
+ {% endfor %}
16
+ </ul>
@@ -0,0 +1,19 @@
1
+ ---
2
+ title: Shipyard Responsive
3
+ ---
4
+
5
+ <h1 class="text-xxxl">Mobile-first Methodology</h1>
6
+ <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>
7
+
8
+ <hr />
9
+
10
+ <h2>Responsive Demo</h2>
11
+ <div class="box-secondary box-padding align-center">
12
+ <button class="btn btn-xs btn-x1-sm btn-x2-md btn-x3-lg btn-x4-xl">
13
+ <span class="display-inline display-x1-none">All Screens (.btn-xs)</span>
14
+ <span class="display-none display-x1-inline display-x2-none">Tablets &amp; Up (.btn-x1-sm)</span>
15
+ <span class="display-none display-x2-inline display-x3-none">Small Laptops &amp; Up (.btn-x2-md)</span>
16
+ <span class="display-none display-x3-inline display-x4-none">Wide Laptos &amp; Up (.btn-x3-lg)</span>
17
+ <span class="display-none display-x4-inline">Large Monitors &amp; Up (.btn-x4-xl)</span>
18
+ </button>
19
+ </div>
@@ -0,0 +1,56 @@
1
+ ---
2
+ title: Shipyard Typography
3
+ text_sizes: [xxs, xs, sm, md, lg, xl, xxl, xxxl]
4
+ text_shades: [normal, light, lighter, lightest]
5
+ ---
6
+
7
+ <h1>{{ page.title }}</h1>
8
+
9
+ <hr />
10
+
11
+ <div class="col-container">
12
+ <div class="col col-20">
13
+ <h1>h1. Heading</h1>
14
+ <h2>h2. Heading</h2>
15
+ <h3>h3. Heading</h3>
16
+ <h4>h4. Heading</h4>
17
+ <h5>h5. Heading</h5>
18
+ <h6>h6. Heading</h6>
19
+ </div>
20
+ <div class="col col-20">
21
+ <h3>Text Sizes</h3>
22
+ {% for size in page.text_sizes %}
23
+ <p class="text-{{ size }}">.text-{{ size }}</p>
24
+ {% endfor %}
25
+ </div>
26
+ <div class="col col-20">
27
+ <h3>Text Shades</h3>
28
+ <div class="box box-padding margin-top-xs">
29
+ <ul class="list strong">
30
+ {% for shade in page.text_shades %}
31
+ <li class="text-{{ shade }}">.text-{{ shade }}</li>
32
+ {% endfor %}
33
+ </ul>
34
+ </div>
35
+ </div>
36
+ <div class="col col-20">
37
+ <h3>Inverse Text Shades</h3>
38
+ <div class="box-secondary box-padding bg-gray-dark margin-top-xs">
39
+ <ul class="list strong">
40
+ {% for shade in page.text_shades %}
41
+ <li class="text-inverse{{ '-' | append: shade | replace: '-normal', '' }}">
42
+ .text-inverse{{ '-' | append: shade | replace: '-normal', '' }}
43
+ </li>
44
+ {% endfor %}
45
+ </ul>
46
+ </div>
47
+ </div>
48
+ <div class="col col-20">
49
+ <h3>Text Alignment</h3>
50
+ <ul>
51
+ <li class="align-left">.align-left</li>
52
+ <li class="align-center">.align-center</li>
53
+ <li class="align-right">.align-right</li>
54
+ </ul>
55
+ </div>
56
+ </div>
metadata CHANGED
@@ -1,47 +1,47 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: shipyard-framework
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.3
4
+ version: 0.3.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - Shipyard
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2017-08-09 00:00:00.000000000 Z
11
+ date: 2017-08-16 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: actionview
15
15
  requirement: !ruby/object:Gem::Requirement
16
16
  requirements:
17
- - - '>='
17
+ - - "~>"
18
18
  - !ruby/object:Gem::Version
19
19
  version: '0'
20
20
  type: :runtime
21
21
  prerelease: false
22
22
  version_requirements: !ruby/object:Gem::Requirement
23
23
  requirements:
24
- - - '>='
24
+ - - "~>"
25
25
  - !ruby/object:Gem::Version
26
26
  version: '0'
27
27
  - !ruby/object:Gem::Dependency
28
28
  name: bundler
29
29
  requirement: !ruby/object:Gem::Requirement
30
30
  requirements:
31
- - - ~>
31
+ - - "~>"
32
32
  - !ruby/object:Gem::Version
33
33
  version: '1.15'
34
- - - '>='
34
+ - - ">="
35
35
  - !ruby/object:Gem::Version
36
36
  version: 1.15.3
37
37
  type: :development
38
38
  prerelease: false
39
39
  version_requirements: !ruby/object:Gem::Requirement
40
40
  requirements:
41
- - - ~>
41
+ - - "~>"
42
42
  - !ruby/object:Gem::Version
43
43
  version: '1.15'
44
- - - '>='
44
+ - - ">="
45
45
  - !ruby/object:Gem::Version
46
46
  version: 1.15.3
47
47
  description:
@@ -51,13 +51,18 @@ executables: []
51
51
  extensions: []
52
52
  extra_rdoc_files: []
53
53
  files:
54
- - .gitignore
55
- - .rspec
54
+ - ".gitignore"
55
+ - ".rspec"
56
56
  - CODE_OF_CONDUCT.md
57
57
  - Gemfile
58
58
  - LICENSE.txt
59
59
  - README.md
60
60
  - Rakefile
61
+ - app/helpers/shipyard/alert_helper.rb
62
+ - app/helpers/shipyard/button_helper.rb
63
+ - app/helpers/shipyard/form_helper.rb
64
+ - app/helpers/shipyard/icon_helper.rb
65
+ - app/helpers/shipyard/layout_helper.rb
61
66
  - app/views/shipyard/_alerts.slim
62
67
  - assets/icons/arrows/arrow-down.svg
63
68
  - assets/icons/gear.svg
@@ -119,19 +124,39 @@ files:
119
124
  - assets/stylesheets/shipyard/variables/_typography.sass
120
125
  - lib/shipyard-framework.rb
121
126
  - lib/shipyard-framework/icons.rb
127
+ - lib/shipyard-framework/jekyll/alert_tag.rb
122
128
  - lib/shipyard-framework/jekyll/button_tag.rb
123
129
  - lib/shipyard-framework/jekyll/shipyard_version_tag.rb
124
- - lib/shipyard-framework/rails/alert_helper.rb
125
- - lib/shipyard-framework/rails/button_helper.rb
126
130
  - lib/shipyard-framework/rails/engine.rb
127
- - lib/shipyard-framework/rails/form_helper.rb
128
- - lib/shipyard-framework/rails/icon_helper.rb
129
- - lib/shipyard-framework/rails/layout_helpers.rb
130
131
  - lib/shipyard-framework/rails/railtie.rb
131
132
  - lib/shipyard-framework/version.rb
132
133
  - shipyard.gemspec
133
134
  - spec/shipyard_spec.rb
134
135
  - spec/spec_helper.rb
136
+ - styleguide/.gitignore
137
+ - styleguide/.nojekyll
138
+ - styleguide/.ruby-version
139
+ - styleguide/Gemfile
140
+ - styleguide/Gemfile.lock
141
+ - styleguide/_config.yml
142
+ - styleguide/_layouts/application.html
143
+ - styleguide/_sass/layout.sass
144
+ - styleguide/_sass/views.sass
145
+ - styleguide/assets/css/application.sass
146
+ - styleguide/components/alerts.html
147
+ - styleguide/components/boxes.html
148
+ - styleguide/components/buttons.html
149
+ - styleguide/components/empty-states.html
150
+ - styleguide/components/forms.html
151
+ - styleguide/components/grid.html
152
+ - styleguide/components/index.html
153
+ - styleguide/components/modals.html
154
+ - styleguide/components/tooltips.html
155
+ - styleguide/index.html
156
+ - styleguide/utilities/colors.html
157
+ - styleguide/utilities/index.html
158
+ - styleguide/utilities/responsive.html
159
+ - styleguide/utilities/typography.html
135
160
  homepage: https://github.com/shipyard-framework
136
161
  licenses:
137
162
  - MIT
@@ -142,17 +167,17 @@ require_paths:
142
167
  - lib
143
168
  required_ruby_version: !ruby/object:Gem::Requirement
144
169
  requirements:
145
- - - '>='
170
+ - - ">="
146
171
  - !ruby/object:Gem::Version
147
172
  version: '0'
148
173
  required_rubygems_version: !ruby/object:Gem::Requirement
149
174
  requirements:
150
- - - '>='
175
+ - - ">="
151
176
  - !ruby/object:Gem::Version
152
177
  version: '0'
153
178
  requirements: []
154
179
  rubyforge_project:
155
- rubygems_version: 2.0.14.1
180
+ rubygems_version: 2.5.1
156
181
  signing_key:
157
182
  specification_version: 4
158
183
  summary: A lightweight CSS framework for developing mobile-first projects in Ruby
@@ -1,45 +0,0 @@
1
- module Shipyard
2
- module Rails
3
- module AlertHelper
4
- def flash_alert(*args, &block)
5
- alert_txt = capture(&block) if block_given?
6
- options = {}
7
- options[:role] ||= 'alert'
8
- options[:data] ||= {}
9
- options[:data][:shipyard] = 'alert'
10
- options['v-show'] = 'visible'
11
- class_list = ['alert']
12
-
13
- args.each do |arg|
14
- if arg.is_a? Symbol
15
- class_list << "alert-#{alert_type(arg)}"
16
- elsif arg.is_a? Hash
17
- options = options.merge(arg) if arg.is_a?(Hash)
18
- else
19
- alert_txt = arg
20
- end
21
- end
22
-
23
- options[:class] = "#{class_list.join(' ')} #{options[:class]}"
24
-
25
- content_tag :div, options do
26
- concat content_tag(:p, raw(alert_txt), class: 'alert-txt')
27
- concat content_tag(:button,
28
- icon('x', class: 'alert-close-icon icon-outline-inverse center'),
29
- class: 'alert-close v-center',
30
- '@click': 'close')
31
- end
32
- end
33
-
34
- private
35
-
36
- def alert_type(type)
37
- case type.to_sym
38
- when :notice then :success
39
- when :alert then :error
40
- else type.to_s.tr('_', '-')
41
- end
42
- end
43
- end
44
- end
45
- end
@@ -1,36 +0,0 @@
1
- module Shipyard
2
- module Rails
3
- module ButtonHelper
4
- include ActionView::Helpers::TagHelper
5
-
6
- def btn(text, *args, &block)
7
- if block_given?
8
- args << text
9
- name = capture(&block)
10
- end
11
-
12
- # Save any options that were passed in.
13
- options = {}
14
- args.each do |arg|
15
- options = options.merge(arg) if arg.is_a?(Hash)
16
- end
17
-
18
- # Output the appropriate button.
19
- tag = options.key?(:href) ? :a : :button
20
- content_tag tag, text, btn_options(args, options)
21
- end
22
-
23
- private
24
-
25
- def btn_options(args, options)
26
- options[:class] ||= ''
27
- options[:class] += ' btn'
28
- args.each do |arg|
29
- options[:class] += " btn-#{arg.to_s.tr('_', '-')}" if arg.is_a?(Symbol)
30
- end
31
- options[:class].strip!
32
- options
33
- end
34
- end
35
- end
36
- end