shipyard-framework 0.5.3 → 0.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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 %}
|