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 @@
1
+ 2.3.1
@@ -0,0 +1,6 @@
1
+ source 'https://rubygems.org'
2
+
3
+ group :jekyll_plugins do
4
+ gem 'jekyll'
5
+ gem 'shipyard-framework', path: '../'
6
+ end
@@ -0,0 +1,87 @@
1
+ PATH
2
+ remote: ..
3
+ specs:
4
+ shipyard-framework (0.3.3)
5
+ actionview
6
+
7
+ GEM
8
+ remote: https://rubygems.org/
9
+ specs:
10
+ actionview (5.1.3)
11
+ activesupport (= 5.1.3)
12
+ builder (~> 3.1)
13
+ erubi (~> 1.4)
14
+ rails-dom-testing (~> 2.0)
15
+ rails-html-sanitizer (~> 1.0, >= 1.0.3)
16
+ activesupport (5.1.3)
17
+ concurrent-ruby (~> 1.0, >= 1.0.2)
18
+ i18n (~> 0.7)
19
+ minitest (~> 5.1)
20
+ tzinfo (~> 1.1)
21
+ addressable (2.5.1)
22
+ public_suffix (~> 2.0, >= 2.0.2)
23
+ builder (3.2.3)
24
+ colorator (1.1.0)
25
+ concurrent-ruby (1.0.5)
26
+ erubi (1.6.1)
27
+ ffi (1.9.18)
28
+ forwardable-extended (2.6.0)
29
+ i18n (0.8.6)
30
+ jekyll (3.5.1)
31
+ addressable (~> 2.4)
32
+ colorator (~> 1.0)
33
+ jekyll-sass-converter (~> 1.0)
34
+ jekyll-watch (~> 1.1)
35
+ kramdown (~> 1.3)
36
+ liquid (~> 4.0)
37
+ mercenary (~> 0.3.3)
38
+ pathutil (~> 0.9)
39
+ rouge (~> 1.7)
40
+ safe_yaml (~> 1.0)
41
+ jekyll-sass-converter (1.5.0)
42
+ sass (~> 3.4)
43
+ jekyll-watch (1.5.0)
44
+ listen (~> 3.0, < 3.1)
45
+ kramdown (1.14.0)
46
+ liquid (4.0.0)
47
+ listen (3.0.8)
48
+ rb-fsevent (~> 0.9, >= 0.9.4)
49
+ rb-inotify (~> 0.9, >= 0.9.7)
50
+ loofah (2.0.3)
51
+ nokogiri (>= 1.5.9)
52
+ mercenary (0.3.6)
53
+ mini_portile2 (2.2.0)
54
+ minitest (5.10.3)
55
+ nokogiri (1.8.0)
56
+ mini_portile2 (~> 2.2.0)
57
+ pathutil (0.14.0)
58
+ forwardable-extended (~> 2.6)
59
+ public_suffix (2.0.5)
60
+ rails-dom-testing (2.0.3)
61
+ activesupport (>= 4.2.0)
62
+ nokogiri (>= 1.6)
63
+ rails-html-sanitizer (1.0.3)
64
+ loofah (~> 2.0)
65
+ rb-fsevent (0.10.2)
66
+ rb-inotify (0.9.10)
67
+ ffi (>= 0.5.0, < 2)
68
+ rouge (1.11.1)
69
+ safe_yaml (1.0.4)
70
+ sass (3.5.1)
71
+ sass-listen (~> 4.0.0)
72
+ sass-listen (4.0.0)
73
+ rb-fsevent (~> 0.9, >= 0.9.4)
74
+ rb-inotify (~> 0.9, >= 0.9.7)
75
+ thread_safe (0.3.6)
76
+ tzinfo (1.2.3)
77
+ thread_safe (~> 0.1)
78
+
79
+ PLATFORMS
80
+ ruby
81
+
82
+ DEPENDENCIES
83
+ jekyll
84
+ shipyard-framework!
85
+
86
+ BUNDLED WITH
87
+ 1.15.3
@@ -0,0 +1,43 @@
1
+ # Welcome to Jekyll!
2
+ #
3
+ # This config file is meant for settings that affect your whole blog, values
4
+ # which you are expected to set up once and rarely edit after that. If you find
5
+ # yourself editing this file very often, consider using Jekyll's data files
6
+ # feature for the data you need to update frequently.
7
+ #
8
+ # For technical reasons, this file is *NOT* reloaded automatically when you use
9
+ # 'bundle exec jekyll serve'. If you change this file, please restart the server process.
10
+
11
+ # Site settings
12
+ # These are used to personalize your new site. If you look in the HTML files,
13
+ # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
14
+ # You can create any custom variable you would like, and they will be accessible
15
+ # in the templates via {{ site.myvariable }}.
16
+ title: Shipyard
17
+ description: A sweet front-end framework for Ruby on Rails and Jekyll.
18
+ baseurl: /shipyard # the subpath of your site, e.g. /blog
19
+ url: "" # the base hostname & protocol for your site, e.g. http://example.com
20
+ # source: ./app
21
+ # destination: ./tmp
22
+ # plugins_dir: ./app/_plugins
23
+ # layouts_dir: ./app/_layouts
24
+ # includes_dir: ./app/_includes
25
+ sass:
26
+ style: compressed
27
+
28
+ # Build settings
29
+ markdown: kramdown
30
+ plugins_dir:
31
+ - shipyard-framework
32
+
33
+ defaults:
34
+ -
35
+ scope:
36
+ path: "" # an empty string here means all files in the project
37
+ values:
38
+ layout: "application"
39
+
40
+ # Exclude from processing.
41
+ exclude:
42
+ - Gemfile
43
+ - Gemfile.lock
@@ -0,0 +1,24 @@
1
+ ---
2
+ ---
3
+ <html>
4
+ <head>
5
+ <title>{{ page.title }}</title>
6
+ <link rel="stylesheet" media="all" href="{{ site.baseurl }}/assets/css/application.css" />
7
+ </head>
8
+ <body>
9
+ <header>
10
+ <div class="container">
11
+ <h6><a href="{{ site.baseurl }}/">{{ site.title }}</a></h6>
12
+ <ul>
13
+ <li><a href="{{ site.baseurl }}/">Overview</a></li>
14
+ <li><a href="{{ site.baseurl }}/components">Components</a></li>
15
+ <li><a href="{{ site.baseurl }}/utilities">Utilities</a></li>
16
+ </ul>
17
+ </div>
18
+ </header>
19
+ <div class="container">{{ content }}</div>
20
+ <footer class="align-center text-lightest">
21
+ &copy; Shipyard Framework 2017
22
+ </footer>
23
+ </body>
24
+ </html>
@@ -0,0 +1,35 @@
1
+ body
2
+ padding-top: 70px
3
+
4
+ header
5
+ $height: 50px
6
+ background: $gray-darkest
7
+ position: fixed
8
+ top: 0
9
+ left: 0
10
+ right: 0
11
+ height: $height
12
+ line-height: $height
13
+ color: #fff
14
+ z-index: 100
15
+ h6
16
+ font-weight: $bold
17
+ font-size: 24px
18
+ float: left
19
+ ul
20
+ float: right
21
+ font-weight: $medium
22
+ font-size: 18px
23
+ margin-right: -10px
24
+ li
25
+ display: inline
26
+ margin: 0 10px
27
+ a
28
+ color: rgba(#fff,.8)
29
+ &, &:hover
30
+ text-decoration: none
31
+ &:hover
32
+ color: #fff
33
+
34
+ footer
35
+ padding: 30px 0
@@ -0,0 +1,27 @@
1
+ // Utilities: Colors
2
+ +component('shade')
3
+ &-list
4
+ display: table
5
+ width: 100%
6
+ &-item
7
+ text-align: center
8
+ display: table-cell
9
+ width: 10%
10
+ &:not(:first-child)
11
+ border-left: 10px solid transparent
12
+ &:not(:last-child)
13
+ border-right: 10px solid transparent
14
+ &-box
15
+ height: 168px
16
+ padding: 5px
17
+ white-space: nowrap
18
+ &:hover
19
+ cursor: default
20
+ &:not(:hover)
21
+ background: #fff !important
22
+ &-color
23
+ height: 120px
24
+ border-radius: 2px 2px 0 0
25
+ &-text
26
+ +when('box:hover')
27
+ color: #fff
@@ -0,0 +1,8 @@
1
+ ---
2
+ ---
3
+ $font-family: Catamaran, sans-serif
4
+ @import shipyard
5
+ @import url('https://fonts.googleapis.com/css?family=Catamaran')
6
+
7
+ @import layout
8
+ @import views
@@ -0,0 +1,12 @@
1
+ ---
2
+ title: Shipyard Alerts
3
+ ---
4
+
5
+ <h1>{{ page.title }}</h1>
6
+
7
+ <hr />
8
+
9
+ {% alert :info, Ten other people are also viewing tickets for this flight. %}
10
+ {% alert :success, Pack your bags! You'll be on the next flight to Hawaii. %}
11
+ {% alert :warning, There are only 2 seats left on this flight! We recommend to book your tickets as soon as possible. %}
12
+ {% alert :error, This flight is now sold out. Let's get you on the next flight to Kauai. %}
@@ -0,0 +1,37 @@
1
+ ---
2
+ title: Shipyard Boxes
3
+ box_sizes: [xxs, xs, sm, md, lg, xl]
4
+ ---
5
+
6
+ <h1>{{ page.title }}</h1>
7
+
8
+ <hr />
9
+
10
+ <div class="box box-padding">
11
+ <h4>Default Box</h4>
12
+ <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>
13
+ </div>
14
+
15
+ <hr />
16
+
17
+ <div class="box-link box-padding">
18
+ <h4>Linked Box</h4>
19
+ <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>
20
+ </div>
21
+
22
+ <hr />
23
+
24
+ <div class="box-secondary box-padding">
25
+ <h4>Secondary Box</h4>
26
+ <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>
27
+ </div>
28
+
29
+ <hr />
30
+
31
+ <h2>Boxes Sizes</h2>
32
+
33
+ {% for size in page.box_sizes %}
34
+ <div class="box box-{{ size }} margin-top-md">
35
+ <strong class="center text-lighter text-sm">.box-{{ size }}</strong>
36
+ </div>
37
+ {% endfor %}
@@ -0,0 +1,67 @@
1
+ ---
2
+ title: Shipyard Buttons
3
+ ---
4
+
5
+ <h1>{{ page.title }}</h1>
6
+
7
+ <hr />
8
+
9
+ <h2>Button Types</h2>
10
+ <div class="box-padding align-center">
11
+ {% btn Default %}
12
+ {% btn Primary, :primary %}
13
+ {% btn Secondary, :secondary %}
14
+ {% btn Disabled, :disabled %}
15
+ </div>
16
+ <div class="box-secondary box-padding align-center bg-gray-dark">
17
+ {% btn Inverse, :inverse %}
18
+ {% btn Inverse, :inverse_secondary, class: 'margin-left-xs' %}
19
+ </div>
20
+
21
+ <hr />
22
+
23
+ <h2>Button Sizes (default: md)</h2>
24
+ <div class="box-padding align-center">
25
+ {% btn XX-Small, :xxs %}
26
+ {% btn X-Small, :xs %}
27
+ {% btn Small, :sm %}
28
+ {% btn Medium, :md %}
29
+ {% btn Large, :lg %}
30
+ {% btn X-Large, :xl %}
31
+ </div>
32
+
33
+ <h2>XX-Small, Responsive Buttons</h2>
34
+ <div class="box-padding align-center">
35
+ {% btn All Screens, :xxs %}
36
+ {% btn Tablets, :x1_xxs %}
37
+ {% btn Laptops, :x2_xxs %}
38
+ {% btn Wide Screens, :x3_xxs %}
39
+ {% btn Giant Screens, :x4_xxs %}
40
+ </div>
41
+
42
+ <h2>X-Small, Responsive Buttons</h2>
43
+ <div class="box-padding align-center">
44
+ {% btn All Screens, :xs %}
45
+ {% btn Tablets, :x1_xs %}
46
+ {% btn Laptops, :x2_xs %}
47
+ {% btn Wide Screens, :x3_xs %}
48
+ {% btn Giant Screens, :x4_xs %}
49
+ </div>
50
+
51
+ <h2>Small, Responsive Buttons</h2>
52
+ <div class="box-padding align-center">
53
+ {% btn All Screens, :sm %}
54
+ {% btn Tablets, :x1_sm %}
55
+ {% btn Laptops, :x2_sm %}
56
+ {% btn Wide Screens, :x3_sm %}
57
+ {% btn Giant Screens, :x4_sm %}
58
+ </div>
59
+
60
+ <h2>Medium, Responsive Buttons (Default Size)</h2>
61
+ <div class="box-padding align-center">
62
+ {% btn All Screens %}
63
+ {% btn Tablets, :sm :x1_md %}
64
+ {% btn Laptops, :sm :x2_md %}
65
+ {% btn Wide Screens, :sm :x3_md %}
66
+ {% btn Giant Screens, :sm :x4_md %}
67
+ </div>
@@ -0,0 +1,12 @@
1
+ ---
2
+ title: Empty States
3
+ ---
4
+
5
+ <h1>{{ page.title }}</h1>
6
+
7
+ <hr />
8
+
9
+ <div class="empty-container align-center">
10
+ <p class="empty-txt">Get started by creating your first project.</p>
11
+ {% btn Create Project, :primary, class: 'empty-cta' %}
12
+ </div>
@@ -0,0 +1,82 @@
1
+ ---
2
+ title: Shipyard Forms
3
+ ---
4
+
5
+ <h1>{{ page.title }}</h1>
6
+
7
+ <hr />
8
+
9
+ <div class="input-group">
10
+ <label class="label">Textbox</label>
11
+ <input type="text" class="input input-text" placeholder=".input-text" />
12
+ </div>
13
+ <div class="input-group">
14
+ <label class="label">Textbox</label>
15
+ <input type="text" class="input input-text input-full" placeholder=".input .input-text .input-full" />
16
+ </div>
17
+ <div class="input-group">
18
+ <label class="label">Connected Textboxes</label>
19
+ <input type="text" class="input input-text input-full input-text-connect-top" placeholder=".input-text-connect-top" />
20
+ <input type="text" class="input input-text input-full input-text-connect-middle" placeholder=".input-text-connect-middle" />
21
+ <input type="text" class="input input-text input-full input-text-connect-bottom" placeholder=".input-text-connect-bottom" />
22
+ </div>
23
+ <div class="input-group">
24
+ <label class="label">Select Boxes</label>
25
+ <div class="input-select-container">
26
+ <select class="input input-select">
27
+ <option class="input-option-placeholder">.input-select</option>
28
+ {% for i in (1..10) %}
29
+ <option>{{ i }}</option>
30
+ {% endfor %}
31
+ </select>
32
+ </div>
33
+ </div>
34
+ <div class="input-group">
35
+ <h2>Switches</h2>
36
+ <div class="col-container margin-top-xs">
37
+ <div class="col col-20">
38
+ <label class="label">Medium Switches</label>
39
+ <button class="input-switch-md"></button>
40
+ <button class="input-switch-md input-switch-true"></button>
41
+ <button class="input-switch-md input-switch-false"></button>
42
+ </div>
43
+ <div class="col col-20">
44
+ <label class="label">Small Switches</label>
45
+ <button class="input-switch-sm"></button>
46
+ <button class="input-switch-sm input-switch-true"></button>
47
+ <button class="input-switch-sm input-switch-false"></button>
48
+ </div>
49
+ </div>
50
+ </div>
51
+
52
+ <hr />
53
+
54
+ <div class="input-group">
55
+ <label class="label">Textbox</label>
56
+ <p class="label-note">Some critically important notes about this field.</p>
57
+ <input type="text" class="input input-text input-full" placeholder=".input .input-text .input-full" />
58
+ </div>
59
+
60
+ <hr />
61
+
62
+ <h2 class="margin-bottom-xs">Input Boxes</h2>
63
+ <div class="input-box">
64
+ <input type="text" class="input input-text input-full" placeholder=".input .input-text .input-full" />
65
+ </div>
66
+
67
+ <hr />
68
+
69
+ <h2>Form Errors</h2>
70
+ <div class="form-error-container">
71
+ <ul class="form-error-list">
72
+ <li class="form-error-item">
73
+ <span class="form-error-text">Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</span>
74
+ </li>
75
+ <li class="form-error-item">
76
+ <span class="form-error-text">Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</span>
77
+ </li>
78
+ <li class="form-error-item">
79
+ <span class="form-error-text">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>
80
+ </li>
81
+ </ul>
82
+ </div>