shipyard-framework 0.5.53 → 0.5.54
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3a839c8e129d973a4aa72ad436e2f4616b6ac2f5
|
|
4
|
+
data.tar.gz: ae2a1c9e315fd7393a313606bfc28b1ffa3a92d7
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b305580345363534c9effbf60ce0fc4875ae6bc75964c8c6261cd43eb87ab7b9c614b4784205cea38bdb27f67c94994cbbd4396b6307174bd47b4a65356197d0
|
|
7
|
+
data.tar.gz: 2861453d7468188722d291b4a2b785bed27aaed827025e982971cff06a56d00ed0f45ef92fcb78c91d3e972cc13b9ee12b91714593fdebe3842d685bd8b9fdf4
|
|
@@ -35,6 +35,7 @@ $widths: (auto, 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 7
|
|
|
35
35
|
flex-basis: 0
|
|
36
36
|
flex-grow: 1
|
|
37
37
|
flex-shrink: 1
|
|
38
|
+
flex-direction: column
|
|
38
39
|
+responsive-padding(left right)
|
|
39
40
|
|
|
40
41
|
&-container
|
|
@@ -54,10 +55,17 @@ $widths: (auto, 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 7
|
|
|
54
55
|
+all-media-sizes
|
|
55
56
|
+column-sizes
|
|
56
57
|
|
|
57
|
-
|
|
58
|
-
display: flex
|
|
58
|
+
.flex
|
|
59
59
|
+all-media-sizes
|
|
60
|
+
&-row
|
|
61
|
+
display: flex
|
|
62
|
+
flex-direction: row
|
|
63
|
+
&-row-reverse
|
|
64
|
+
display: flex
|
|
65
|
+
flex-direction: row-reverse
|
|
60
66
|
&-col
|
|
67
|
+
display: flex
|
|
61
68
|
flex-direction: column
|
|
62
69
|
&-col-reverse
|
|
70
|
+
display: flex
|
|
63
71
|
flex-direction: column-reverse
|
data/styleguide/Gemfile.lock
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Shipyard Grid
|
|
3
3
|
description: The Shipyard grid is a percentage-based, flexbox grid and is entirely responsive. Each class needs the foundational `.col` class in order to function properly, and also should be contained inside the `.col-container` as well.
|
|
4
|
-
container_classes: col-container margin-top-xs margin-top-x1-sm margin-top-x2-md margin-bottom-md
|
|
5
|
-
box_classes: box-secondary text-light text-sm strong align-center
|
|
4
|
+
container_classes: col-container margin-top-xs margin-top-x1-sm margin-top-x2-md margin-bottom-xs margin-bottom-x1-sm margin-bottom-x2-md
|
|
5
|
+
box_classes: utilities-grid-box box-secondary text-light text-sm strong align-center
|
|
6
6
|
example_flex_columns: [10,20,25,33,50]
|
|
7
7
|
example_sizes: [5,10,15,20,25,30,33,35,40,45,50,55,60,65,66,70,75,80,85,90,95,100]
|
|
8
8
|
example_offsets: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75]
|
|
@@ -150,3 +150,93 @@ example_offsets: [5,10,15,20,25,30,35,40,45,50,55,60,65,70,75]
|
|
|
150
150
|
</div>
|
|
151
151
|
</div>
|
|
152
152
|
```
|
|
153
|
+
|
|
154
|
+
---
|
|
155
|
+
|
|
156
|
+
### Nested Columns
|
|
157
|
+
<p class="text-light margin-bottom-md" markdown="1">Nested grids can be tricky to build and somewhat fragile by nature. For the best results, pay special attention to how you want each column to respond at various screen sizes and test each breakpoint thoroughly.</p>
|
|
158
|
+
|
|
159
|
+
<div class="{{ page.container_classes }}">
|
|
160
|
+
<div class="col col-40 display-flex">
|
|
161
|
+
<div class="{{ page.box_classes }}">40</div>
|
|
162
|
+
</div>
|
|
163
|
+
<div class="col col-60">
|
|
164
|
+
<div class="{{ page.box_classes }} margin-bottom-xs margin-bottom-x1-sm margin-bottom-x2-md">60</div>
|
|
165
|
+
<div class="col-container">
|
|
166
|
+
<div class="col"><div class="{{ page.box_classes }}">20</div></div>
|
|
167
|
+
<div class="col"><div class="{{ page.box_classes }}">20</div></div>
|
|
168
|
+
<div class="col"><div class="{{ page.box_classes }}">20</div></div>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
```html
|
|
174
|
+
<div class="col-container">
|
|
175
|
+
<div class="col col-40">
|
|
176
|
+
<!-- 40% column -->
|
|
177
|
+
</div>
|
|
178
|
+
<div class="col col-60">
|
|
179
|
+
<!-- 60% column -->
|
|
180
|
+
<div class="col-container">
|
|
181
|
+
<div class="col"><!-- auto column --></div>
|
|
182
|
+
<div class="col"><!-- auto column --></div>
|
|
183
|
+
<div class="col"><!-- auto column --></div>
|
|
184
|
+
</div>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
---
|
|
190
|
+
|
|
191
|
+
### Reversible Columns `.flex-{ x1..x4 }-{ col | col-reverse | row | row-reverse }`
|
|
192
|
+
<p class="text-light margin-bottom-md" markdown="1">Useful when the flow of the content should be different at a certain breakpoint.</p>
|
|
193
|
+
|
|
194
|
+
<div class="{{ page.container_classes }}">
|
|
195
|
+
<div class="col flex-col flex-x2-col-reverse">
|
|
196
|
+
<div class="{{ page.box_classes }} bg-teal-lighter">
|
|
197
|
+
<span class="teal-darker display-inline display-x2-none">top (mobile)</span>
|
|
198
|
+
<span class="teal-darker display-none display-x2-inline">bottom (desktop)</span>
|
|
199
|
+
</div>
|
|
200
|
+
<div class="col-container margin-top-xs margin-top-x2-sm margin-bottom-xs margin-bottom-x2-sm flex-row flex-x2-row-reverse">
|
|
201
|
+
<div class="col">
|
|
202
|
+
<div class="{{ page.box_classes }} bg-blue-lighter">
|
|
203
|
+
<span class="blue-darker display-inline display-x2-none">left (mobile)</span>
|
|
204
|
+
<span class="blue-darker display-none display-x2-inline">right (desktop)</span>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
<div class="col">
|
|
208
|
+
<div class="{{ page.box_classes }} bg-green-lighter">
|
|
209
|
+
<span class="green-darker">middle</span>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
<div class="col">
|
|
213
|
+
<div class="{{ page.box_classes }} bg-yellow-lighter">
|
|
214
|
+
<span class="yellow-darker display-inline display-x2-none">right (mobile)</span>
|
|
215
|
+
<span class="yellow-darker display-none display-x2-inline">left (desktop)</span>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
<div class="{{ page.box_classes }} bg-orange-lightest">
|
|
220
|
+
<span class="orange-darker display-inline display-x2-none">bottom (mobile)</span>
|
|
221
|
+
<span class="orange-darker display-none display-x2-inline">top (desktop)</span>
|
|
222
|
+
</div>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
|
|
226
|
+
```html
|
|
227
|
+
<div class="col-container">
|
|
228
|
+
<div class="col flex-col flex-x2-col-reverse">
|
|
229
|
+
<div>
|
|
230
|
+
<!-- top on mobile; bottom on desktop -->
|
|
231
|
+
</div>
|
|
232
|
+
<div class="col-container flex-row flex-x2-row-reverse">
|
|
233
|
+
<div class="col"><!-- left on mobile; right on desktop --></div>
|
|
234
|
+
<div class="col"><!-- middle on all breakpoints --></div>
|
|
235
|
+
<div class="col"><!-- right on mobile; left on desktop --></div>
|
|
236
|
+
</div>
|
|
237
|
+
<div>
|
|
238
|
+
<!-- bottom on mobile; top on desktop -->
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
```
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: shipyard-framework
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.5.
|
|
4
|
+
version: 0.5.54
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Codeship
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2017-10-
|
|
11
|
+
date: 2017-10-24 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: actionview
|