shipyard-framework 0.5.3 → 0.5.5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +1 -0
- data/.travis.yml +36 -0
- data/README.md +6 -15
- data/Rakefile +13 -3
- data/app/helpers/shipyard/alert_helper.rb +14 -11
- data/app/helpers/shipyard/icon_helper.rb +9 -3
- data/assets/javascripts/shipyard/alerts.es6 +13 -0
- data/assets/javascripts/shipyard/core.es6 +34 -1
- data/assets/javascripts/shipyard/hamburger.es6 +10 -0
- data/assets/javascripts/shipyard/scroll.es6 +12 -0
- data/assets/javascripts/shipyard.es6 +7 -4
- data/assets/stylesheets/shipyard/_components.sass +1 -0
- data/assets/stylesheets/shipyard/_core.sass +0 -1
- data/assets/stylesheets/shipyard/_utilities.sass +2 -0
- data/assets/stylesheets/shipyard/components/_alerts.sass +4 -0
- data/assets/stylesheets/shipyard/components/_boxes.sass +3 -3
- data/assets/stylesheets/shipyard/components/_buttons.sass +17 -21
- data/assets/stylesheets/shipyard/components/_code.sass +1 -0
- data/assets/stylesheets/shipyard/components/_hamburger.sass +2 -1
- data/assets/stylesheets/shipyard/components/_header.sass +60 -0
- data/assets/stylesheets/shipyard/components/_tables.sass +20 -0
- data/assets/stylesheets/shipyard/core/_typography.sass +1 -0
- data/assets/stylesheets/shipyard/mixins/_box-model.sass +3 -0
- data/assets/stylesheets/shipyard/{core → utilities}/_grid.sass +13 -4
- data/assets/stylesheets/shipyard/utilities/_margin.sass +7 -0
- data/assets/stylesheets/shipyard/utilities/_typography.sass +0 -8
- data/assets/stylesheets/shipyard/variables/_components.scss +12 -0
- data/assets/stylesheets/shipyard/variables/_misc.sass +1 -0
- data/ci/build.rb +5 -0
- data/ci/deploy +31 -0
- data/ci/jekyll +16 -0
- data/ci/percy +5 -6
- data/ci/setup +3 -0
- data/lib/shipyard-framework/icons.rb +18 -28
- data/lib/shipyard-framework/jekyll/hooks.rb +11 -0
- data/lib/shipyard-framework/jekyll/shipyard_css_classes.rb +16 -0
- data/lib/shipyard-framework/jekyll/shipyard_variables.rb +7 -0
- data/lib/shipyard-framework/jekyll/{alert_tag.rb → tags/alert_tag.rb} +2 -2
- data/lib/shipyard-framework/jekyll/{box_tag.rb → tags/box_tag.rb} +1 -1
- data/lib/shipyard-framework/jekyll/{button_tag.rb → tags/button_tag.rb} +1 -1
- data/lib/shipyard-framework/jekyll/tags/icon_tag.rb +20 -0
- data/lib/shipyard-framework/jekyll/{note_tag.rb → tags/note_tag.rb} +1 -1
- data/lib/shipyard-framework/jekyll/{shipyard_version_tag.rb → tags/shipyard_version_tag.rb} +0 -0
- data/lib/shipyard-framework/rails/railtie.rb +8 -4
- data/lib/shipyard-framework/version.rb +1 -1
- data/lib/shipyard-framework.rb +32 -7
- data/shipyard.gemspec +9 -8
- data/spec/helpers/alert_helper_spec.rb +10 -2
- data/spec/helpers/icon_helper_spec.rb +6 -6
- data/styleguide/Gemfile +2 -1
- data/styleguide/Gemfile.lock +38 -10
- data/styleguide/_assets/css/application.sass +9 -0
- data/styleguide/_assets/css/layout.sass +6 -0
- data/styleguide/{_sass → _assets/css}/views.sass +10 -6
- data/styleguide/_assets/js/application.es6 +2 -0
- data/styleguide/_assets/js/views/utilities/colors.es6 +21 -0
- data/styleguide/_config.yml +7 -0
- data/styleguide/_includes/page-heading.html +4 -0
- data/styleguide/_layouts/application.html +26 -9
- data/styleguide/_plugins/icon_item.rb +19 -0
- data/styleguide/components/alerts.md +12 -2
- data/styleguide/components/boxes.md +2 -2
- data/styleguide/components/{buttons.html → buttons.md} +11 -10
- data/styleguide/components/code.html +1 -1
- data/styleguide/components/empty-states.html +2 -2
- data/styleguide/components/forms.html +1 -1
- data/styleguide/components/icons.md +158 -0
- data/styleguide/components/{index.html → index.md} +5 -5
- data/styleguide/components/modals.html +2 -5
- data/styleguide/components/notes.md +2 -2
- data/styleguide/components/tables.md +29 -0
- data/styleguide/components/{tooltips.html → tooltips.md} +4 -7
- data/styleguide/index.md +27 -0
- data/styleguide/utilities/colors.md +25 -0
- data/styleguide/utilities/grid.md +152 -0
- data/styleguide/utilities/{index.html → index.md} +8 -5
- data/styleguide/utilities/{responsive.html → responsive.md} +6 -5
- data/styleguide/utilities/typography.html +1 -1
- metadata +113 -28
- data/assets/javascripts/shipyard/alert.es6 +0 -19
- data/assets/javascripts/shipyard/icon.es6 +0 -50
- data/ci/rspec +0 -1
- data/styleguide/_sass/layout.sass +0 -35
- data/styleguide/assets/css/application.sass +0 -10
- data/styleguide/components/grid.html +0 -44
- data/styleguide/index.html +0 -6
- data/styleguide/utilities/colors.html +0 -41
data/styleguide/_config.yml
CHANGED
|
@@ -1,19 +1,35 @@
|
|
|
1
1
|
---
|
|
2
|
+
navigation:
|
|
3
|
+
- name: Home
|
|
4
|
+
url: /
|
|
5
|
+
- name: Components
|
|
6
|
+
url: /components/
|
|
7
|
+
- name: Utilities
|
|
8
|
+
url: /utilities/
|
|
2
9
|
---
|
|
3
|
-
<html>
|
|
10
|
+
<html lang="en" class="{% shipyard_css_classes %}">
|
|
4
11
|
<head>
|
|
12
|
+
<meta charset="utf-8" />
|
|
5
13
|
<title>{{ page.title }}</title>
|
|
6
|
-
<
|
|
7
|
-
|
|
14
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
15
|
+
{% css application %}
|
|
8
16
|
</head>
|
|
9
17
|
<body>
|
|
10
|
-
<header>
|
|
18
|
+
<header class="header">
|
|
11
19
|
<div class="container">
|
|
12
|
-
<h6><a href="{{ site.baseurl }}/">{{ site.title }}</a></h6>
|
|
13
|
-
<
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
20
|
+
<h6 class="header-logo"><a href="{{ site.baseurl }}/">{{ site.title }}</a></h6>
|
|
21
|
+
<button class="hamburger" shipyard="hamburger">
|
|
22
|
+
<span class="hamburger-button">Menu</span>
|
|
23
|
+
</button>
|
|
24
|
+
<ul class="header-list">
|
|
25
|
+
{% for link in layout.navigation %}
|
|
26
|
+
<li class="header-item {% if page.url == link.url %}header-item-current{% endif %}">
|
|
27
|
+
<a href="{{ site.baseurl | append: link.url }}" class="header-link">{{ link.name }}</a>
|
|
28
|
+
</li>
|
|
29
|
+
{% endfor %}
|
|
30
|
+
<li class="header-item header-item-cta">
|
|
31
|
+
<a href="https://github.com/codeship/shipyard" target="_blank" class="header-link-cta">Download</a>
|
|
32
|
+
</li>
|
|
17
33
|
</ul>
|
|
18
34
|
</div>
|
|
19
35
|
</header>
|
|
@@ -21,5 +37,6 @@
|
|
|
21
37
|
<footer class="align-center text-lightest">
|
|
22
38
|
© Shipyard Framework 2017
|
|
23
39
|
</footer>
|
|
40
|
+
{% js application %}
|
|
24
41
|
</body>
|
|
25
42
|
</html>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
module Jekyll
|
|
2
|
+
class IconItem < Liquid::Block
|
|
3
|
+
def initialize(tag_name, markdown, options)
|
|
4
|
+
super
|
|
5
|
+
end
|
|
6
|
+
|
|
7
|
+
def render(context)
|
|
8
|
+
%(
|
|
9
|
+
<li class="col col-50 col-x1-20 margin-bottom-xs margin-bottom-x1-md margin-bottom-x2-lg">
|
|
10
|
+
<div class="box box-md box-x1-xxl">
|
|
11
|
+
#{super}
|
|
12
|
+
</div>
|
|
13
|
+
</li>
|
|
14
|
+
)
|
|
15
|
+
end
|
|
16
|
+
end
|
|
17
|
+
end
|
|
18
|
+
|
|
19
|
+
Liquid::Template.register_tag('iconitem', Jekyll::IconItem)
|
|
@@ -1,9 +1,19 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Shipyard Alerts
|
|
3
|
+
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.
|
|
3
4
|
---
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
{% include page-heading.html page=page %}
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
### Dismissible
|
|
11
|
+
<p class="text-light margin-bottom-sm">Used to display notes, tips, and other non-critical information.</p>
|
|
12
|
+
|
|
13
|
+
{% alert :dismissible %}
|
|
14
|
+
Ten other people are also viewing tickets for <a href="#">this flight</a>.
|
|
15
|
+
Use the code <code class="code-inline">Travel_Light_2017</code> before you book your flight.
|
|
16
|
+
{% endalert %}
|
|
7
17
|
|
|
8
18
|
---
|
|
9
19
|
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Shipyard Boxes
|
|
3
|
+
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.
|
|
3
4
|
box_sizes: [xxs, xs, sm, md, lg, xl]
|
|
4
5
|
---
|
|
5
6
|
|
|
6
|
-
|
|
7
|
-
<p class="text-light text-lg margin-top-xxs">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 <code class="code-inline">.box</code> in order to function properly.</p>
|
|
7
|
+
{% include page-heading.html page=page %}
|
|
8
8
|
|
|
9
9
|
---
|
|
10
10
|
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
title: Shipyard Buttons
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
{% include page-heading.html page=page %}
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
---
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
## Button Types
|
|
10
10
|
<div class="box-padding align-center">
|
|
11
11
|
{% btn Default %}
|
|
12
12
|
{% btn Primary, :primary %}
|
|
@@ -14,13 +14,14 @@ title: Shipyard Buttons
|
|
|
14
14
|
{% btn Disabled, :disabled %}
|
|
15
15
|
{% btn CTA, :cta %}
|
|
16
16
|
{% btn Caution, :caution %}
|
|
17
|
+
{% btn Link, :link %}
|
|
17
18
|
</div>
|
|
18
19
|
<div class="box-secondary box-padding align-center bg-gray-dark">
|
|
19
20
|
{% btn Inverse, :inverse %}
|
|
20
21
|
{% btn Inverse, :inverse_secondary, class: 'margin-left-xs' %}
|
|
21
22
|
</div>
|
|
22
23
|
|
|
23
|
-
|
|
24
|
+
---
|
|
24
25
|
|
|
25
26
|
<div class="box-padding align-center">
|
|
26
27
|
{% btn Button %}
|
|
@@ -28,9 +29,9 @@ title: Shipyard Buttons
|
|
|
28
29
|
<input type="button" class="btn" value="Input" />
|
|
29
30
|
</div>
|
|
30
31
|
|
|
31
|
-
|
|
32
|
+
---
|
|
32
33
|
|
|
33
|
-
|
|
34
|
+
## Button Sizes (default: md)
|
|
34
35
|
<div class="box-padding align-center">
|
|
35
36
|
{% btn XX-Small, :xxs %}
|
|
36
37
|
{% btn X-Small, :xs %}
|
|
@@ -40,7 +41,7 @@ title: Shipyard Buttons
|
|
|
40
41
|
{% btn X-Large, :xl %}
|
|
41
42
|
</div>
|
|
42
43
|
|
|
43
|
-
|
|
44
|
+
## XX-Small, Responsive Buttons
|
|
44
45
|
<div class="box-padding align-center">
|
|
45
46
|
{% btn All Screens, :xxs %}
|
|
46
47
|
{% btn Tablets, :x1_xxs %}
|
|
@@ -49,7 +50,7 @@ title: Shipyard Buttons
|
|
|
49
50
|
{% btn Giant Screens, :x4_xxs %}
|
|
50
51
|
</div>
|
|
51
52
|
|
|
52
|
-
|
|
53
|
+
## X-Small, Responsive Buttons
|
|
53
54
|
<div class="box-padding align-center">
|
|
54
55
|
{% btn All Screens, :xs %}
|
|
55
56
|
{% btn Tablets, :x1_xs %}
|
|
@@ -58,7 +59,7 @@ title: Shipyard Buttons
|
|
|
58
59
|
{% btn Giant Screens, :x4_xs %}
|
|
59
60
|
</div>
|
|
60
61
|
|
|
61
|
-
|
|
62
|
+
## Small, Responsive Buttons
|
|
62
63
|
<div class="box-padding align-center">
|
|
63
64
|
{% btn All Screens, :sm %}
|
|
64
65
|
{% btn Tablets, :x1_sm %}
|
|
@@ -67,7 +68,7 @@ title: Shipyard Buttons
|
|
|
67
68
|
{% btn Giant Screens, :x4_sm %}
|
|
68
69
|
</div>
|
|
69
70
|
|
|
70
|
-
|
|
71
|
+
## Medium, Responsive Buttons (Default Size)
|
|
71
72
|
<div class="box-padding align-center">
|
|
72
73
|
{% btn All Screens %}
|
|
73
74
|
{% btn Tablets, :sm :x1_md %}
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
title: Empty States
|
|
3
3
|
---
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
{% include page-heading.html page=page %}
|
|
6
6
|
|
|
7
7
|
<hr />
|
|
8
8
|
|
|
9
9
|
<div class="empty-container align-center">
|
|
10
|
-
<p class="empty-txt">Get started by creating your first project.</p>
|
|
10
|
+
<p class="empty-txt">Welcome to Shipyard!<br /> Get started by creating your first project.</p>
|
|
11
11
|
{% btn Create Project, :primary, class: 'empty-cta' %}
|
|
12
12
|
</div>
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Shipyard Icons
|
|
3
|
+
description: Shipyard comes with several default icons that you're welcome to use on any project. Each icon has been designed on a pixel grid at the small size possible, but can be scaled up to any size you like simply by changing the `width` and `height` in the CSS.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
{% include page-heading.html page=page %}
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
### Common Icons
|
|
11
|
+
<p class="text-light margin-bottom-md" markdown="1">The following icons are the most frequently used in just about any application.</p>
|
|
12
|
+
|
|
13
|
+
<ul class="icon-list col-container">
|
|
14
|
+
{% iconitem %}
|
|
15
|
+
{% icon :plus, class: 'center' %}
|
|
16
|
+
{% endiconitem %}
|
|
17
|
+
|
|
18
|
+
{% iconitem %}
|
|
19
|
+
{% icon :restart, class: 'center' %}
|
|
20
|
+
{% endiconitem %}
|
|
21
|
+
|
|
22
|
+
{% iconitem %}
|
|
23
|
+
{% icon :gear, class: 'center' %}
|
|
24
|
+
{% endiconitem %}
|
|
25
|
+
|
|
26
|
+
{% iconitem %}
|
|
27
|
+
{% icon :lock, class: 'center' %}
|
|
28
|
+
{% endiconitem %}
|
|
29
|
+
|
|
30
|
+
{% iconitem %}
|
|
31
|
+
{% icon :tag, class: 'center' %}
|
|
32
|
+
{% endiconitem %}
|
|
33
|
+
|
|
34
|
+
{% iconitem %}
|
|
35
|
+
{% icon :x, class: 'center' %}
|
|
36
|
+
{% endiconitem %}
|
|
37
|
+
|
|
38
|
+
{% iconitem %}
|
|
39
|
+
{% icon :arrow_down, class: 'center' %}
|
|
40
|
+
{% endiconitem %}
|
|
41
|
+
</ul>
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
### Brand Icons
|
|
46
|
+
<p class="text-light margin-bottom-md" markdown="1">If you need to style several paths inside of the icon, it's important to make sure you use the *injected* version of the icon.</p>
|
|
47
|
+
|
|
48
|
+
<ul class="icon-list col-container">
|
|
49
|
+
{% iconitem %}
|
|
50
|
+
{% icon :bitbucket, class: 'center' %}
|
|
51
|
+
{% endiconitem %}
|
|
52
|
+
|
|
53
|
+
{% iconitem %}
|
|
54
|
+
{% icon :campfire_color, class: 'center' %}
|
|
55
|
+
{% endiconitem %}
|
|
56
|
+
|
|
57
|
+
{% iconitem %}
|
|
58
|
+
{% icon :codeship, class: 'center' %}
|
|
59
|
+
{% endiconitem %}
|
|
60
|
+
|
|
61
|
+
{% iconitem %}
|
|
62
|
+
{% icon :email_color, class: 'center' %}
|
|
63
|
+
{% endiconitem %}
|
|
64
|
+
|
|
65
|
+
{% iconitem %}
|
|
66
|
+
{% icon :flowdock_color, class: 'center' %}
|
|
67
|
+
{% endiconitem %}
|
|
68
|
+
|
|
69
|
+
{% iconitem %}
|
|
70
|
+
{% icon :github, class: 'center' %}
|
|
71
|
+
{% endiconitem %}
|
|
72
|
+
|
|
73
|
+
{% iconitem %}
|
|
74
|
+
{% icon :gitlab, class: 'center' %}
|
|
75
|
+
{% endiconitem %}
|
|
76
|
+
|
|
77
|
+
{% iconitem %}
|
|
78
|
+
{% icon :grove_color, class: 'center' %}
|
|
79
|
+
{% endiconitem %}
|
|
80
|
+
|
|
81
|
+
{% iconitem %}
|
|
82
|
+
{% icon :hipchat, class: 'center' %}
|
|
83
|
+
{% endiconitem %}
|
|
84
|
+
|
|
85
|
+
{% iconitem %}
|
|
86
|
+
{% icon :hipchat_color, class: 'center' %}
|
|
87
|
+
{% endiconitem %}
|
|
88
|
+
|
|
89
|
+
{% iconitem %}
|
|
90
|
+
{% icon :slack, class: 'center' %}
|
|
91
|
+
{% endiconitem %}
|
|
92
|
+
|
|
93
|
+
{% iconitem %}
|
|
94
|
+
{% icon :slack_color, class: 'center' %}
|
|
95
|
+
{% endiconitem %}
|
|
96
|
+
|
|
97
|
+
{% iconitem %}
|
|
98
|
+
{% icon :webhook, class: 'center' %}
|
|
99
|
+
{% endiconitem %}
|
|
100
|
+
|
|
101
|
+
{% iconitem %}
|
|
102
|
+
{% icon :webhook_color, class: 'center' %}
|
|
103
|
+
{% endiconitem %}
|
|
104
|
+
</ul>
|
|
105
|
+
|
|
106
|
+
---
|
|
107
|
+
|
|
108
|
+
### Multi-color Icons
|
|
109
|
+
<p class="text-light margin-bottom-md" markdown="1">If you need to style several paths inside of the icon, it's important to make sure you use the *injected* version of the icon.</p>
|
|
110
|
+
|
|
111
|
+
<ul class="icon-list col-container">
|
|
112
|
+
{% iconitem %}
|
|
113
|
+
{% icon 'email-color', class: 'icon-xl center' %}
|
|
114
|
+
{% endiconitem %}
|
|
115
|
+
</ul>
|
|
116
|
+
```html
|
|
117
|
+
<%= icon 'email-color' %>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
---
|
|
121
|
+
|
|
122
|
+
### Icon Sizes
|
|
123
|
+
<p class="text-light margin-bottom-md">The icon size utility classes can be applied to any icon, and are useful when you want to override the default icon size.</p>
|
|
124
|
+
|
|
125
|
+
<ul class="icon-list col-container">
|
|
126
|
+
{% iconitem %}
|
|
127
|
+
{% icon :gear, class: 'center icon-xxs' %}
|
|
128
|
+
{% endiconitem %}
|
|
129
|
+
|
|
130
|
+
{% iconitem %}
|
|
131
|
+
{% icon :gear, class: 'center icon-xs' %}
|
|
132
|
+
{% endiconitem %}
|
|
133
|
+
|
|
134
|
+
{% iconitem %}
|
|
135
|
+
{% icon :gear, class: 'center icon-sm' %}
|
|
136
|
+
{% endiconitem %}
|
|
137
|
+
|
|
138
|
+
{% iconitem %}
|
|
139
|
+
{% icon :gear, class: 'center icon-md' %}
|
|
140
|
+
{% endiconitem %}
|
|
141
|
+
|
|
142
|
+
{% iconitem %}
|
|
143
|
+
{% icon :gear, class: 'center icon-lg' %}
|
|
144
|
+
{% endiconitem %}
|
|
145
|
+
|
|
146
|
+
{% iconitem %}
|
|
147
|
+
{% icon :gear, class: 'center icon-xl' %}
|
|
148
|
+
{% endiconitem %}
|
|
149
|
+
</ul>
|
|
150
|
+
|
|
151
|
+
```html
|
|
152
|
+
<%= icon :gear, class: 'icon-xxs' %>
|
|
153
|
+
<%= icon :gear, class: 'icon-xs' %>
|
|
154
|
+
<%= icon :gear, class: 'icon-sm' %>
|
|
155
|
+
<%= icon :gear, class: 'icon-md' %>
|
|
156
|
+
<%= icon :gear, class: 'icon-lg' %>
|
|
157
|
+
<%= icon :gear, class: 'icon-xl' %>
|
|
158
|
+
```
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Shipyard Components
|
|
3
|
-
components: [
|
|
3
|
+
components: [Boxes, Buttons, Empty States, Alerts, Notes, Forms, Icons, Modals, Tooltips, Code, Tables]
|
|
4
4
|
---
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
{% include page-heading.html page=page %}
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
---
|
|
9
9
|
|
|
10
10
|
<ul class="col-container">
|
|
11
11
|
{% for component in page.components %}
|
|
12
|
-
<li class="margin-bottom-xs margin-bottom-x1-sm margin-bottom-x2-lg col col-100 col-x1-25">
|
|
13
|
-
<a href="{{ site.baseurl }}/components/{{ component | replace: ' ', '-' | downcase }}" class="box-link box-padding align-center text-xl">
|
|
12
|
+
<li class="margin-bottom-xs margin-bottom-x1-sm margin-bottom-x2-lg col col-100 col-x1-33 col-x2-25">
|
|
13
|
+
<a href="{{ site.baseurl }}/components/{{ component | replace: ' ', '-' | downcase }}" class="box-link box-padding align-center text-md text-x1-lg text-x2-xl">
|
|
14
14
|
{{ component }}
|
|
15
15
|
</a>
|
|
16
16
|
</li>
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Shipyard Modals
|
|
3
|
+
description: Modals are triggered by applying the following attribute to any button or link (e.g. `modal="login"`).
|
|
3
4
|
---
|
|
4
5
|
|
|
5
|
-
|
|
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-inline">modal="login"</code>).
|
|
9
|
-
</p>
|
|
6
|
+
{% include page-heading.html page=page %}
|
|
10
7
|
|
|
11
8
|
<hr />
|
|
12
9
|
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Shipyard Notes
|
|
3
|
+
description: Notes should be used to grab a user's attention along side of other content.
|
|
3
4
|
---
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
<p class="text-light text-lg margin-top-xxs">Notes should be used to grab a user's attention along side of other content.</p>
|
|
6
|
+
{% include page-heading.html page=page %}
|
|
7
7
|
|
|
8
8
|
---
|
|
9
9
|
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Shipyard Tables
|
|
3
|
+
description: Tables are useful for tabular data and can be used simple by applying the `.table` class to any table you're working on.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
{% include page-heading.html page=page %}
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
<table class="table">
|
|
11
|
+
<thead>
|
|
12
|
+
<th>Flight #</th>
|
|
13
|
+
<th>Airline</th>
|
|
14
|
+
<th>Departure</th>
|
|
15
|
+
<th>Arrival</th>
|
|
16
|
+
<th>Notes</th>
|
|
17
|
+
</thead>
|
|
18
|
+
<tbody>
|
|
19
|
+
{% for i in (1..15) %}
|
|
20
|
+
<tr>
|
|
21
|
+
<td>FR1890</td>
|
|
22
|
+
<td>AirFrance</td>
|
|
23
|
+
<td>8:00pm @ BOS</td>
|
|
24
|
+
<td>10:30am @ CDG</td>
|
|
25
|
+
<td>On Time</td>
|
|
26
|
+
</tr>
|
|
27
|
+
{% endfor %}
|
|
28
|
+
</tbody>
|
|
29
|
+
</table>
|
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Shipyard Tooltips
|
|
3
|
+
description: Tooltips are used primarily by setting the tooltip attribute on any element (e.g. `tooltip="..."`).
|
|
3
4
|
---
|
|
4
5
|
|
|
5
|
-
|
|
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-inline">tooltip="..."</code>).
|
|
9
|
-
</p>
|
|
6
|
+
{% include page-heading.html page=page %}
|
|
10
7
|
|
|
11
|
-
|
|
8
|
+
---
|
|
12
9
|
|
|
13
|
-
<div class="
|
|
10
|
+
<div class="align-center">
|
|
14
11
|
{% btn Default Tooltip, :secondary :margin, tooltip: 'What a lovely tooltip' %}
|
|
15
12
|
{% btn Top, :secondary :margin, tooltip: 'What a lovely tooltip' %}
|
|
16
13
|
{% btn Bottom, :secondary :margin, tooltip: 'What a lovely tooltip' %}
|
data/styleguide/index.md
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Shipyard
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
Add this line to your application's Gemfile:
|
|
8
|
+
|
|
9
|
+
```ruby
|
|
10
|
+
gem 'shipyard-framework', '~> {% shipyard_version %}
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Then add this line to your application's CSS file(s):
|
|
14
|
+
|
|
15
|
+
```css
|
|
16
|
+
@import "shipyard"
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Then add this line to your application's JavaScript file(s):
|
|
20
|
+
|
|
21
|
+
```javascript
|
|
22
|
+
//= require shipyard
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Jekyll Tools
|
|
26
|
+
- `shipyard_css_classes`
|
|
27
|
+
- `site.env`
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Shipyard Colors
|
|
3
|
+
description: Shipyard includes **9 standard colors** by default, and each color can be accessed with the corresponding CSS utility class `.color-shade` or by using the SASS variable `$color-shade` in your SASS files.
|
|
4
|
+
colors: [Gray, Blue, Teal, Green, Yellow, Orange, Red, Coral, Purple]
|
|
5
|
+
shades: [Lightest, Lighter, Light, Base, Dark, Darker, Darkest]
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
{% include page-heading.html page=page %}
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
{% for color in page.colors %}
|
|
13
|
+
<ul class="shade-list margin-bottom-xxl" shade-list>
|
|
14
|
+
{% for shade in page.shades %}
|
|
15
|
+
<li class="shade-item shade-{{ shade | downcase }}">
|
|
16
|
+
<div class="shade-box box bg-{{ color | append: '-' | append: shade | downcase | replace: '-base', '' }} shade-{{ shade | downcase | replace: 'er', '' | replace: 'est', '' }}">
|
|
17
|
+
<div class="shade-color text-xxl bold bg-{{ color | append: '-' | append: shade | downcase | replace: '-base', '' }}" shade-color></div>
|
|
18
|
+
<p class="shade-text text-sm medium {{ color | append: '-' | append: shade | downcase | replace: '-base', '' }}">
|
|
19
|
+
${{ color | append: '-' | append: shade | downcase | replace: '-base', '' }}
|
|
20
|
+
</p>
|
|
21
|
+
</div>
|
|
22
|
+
</li>
|
|
23
|
+
{% endfor %}
|
|
24
|
+
</ul>
|
|
25
|
+
{% endfor %}
|