suitcss-rails 1.0.0
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 +7 -0
- data/.gitignore +9 -0
- data/.rspec +2 -0
- data/.travis.yml +4 -0
- data/Gemfile +4 -0
- data/README.md +37 -0
- data/Rakefile +6 -0
- data/app/assets/stylesheets/normalize.css +424 -0
- data/app/assets/stylesheets/suitcss.css +5 -0
- data/app/assets/stylesheets/suitcss/base.css +1 -0
- data/app/assets/stylesheets/suitcss/base/index.css +83 -0
- data/app/assets/stylesheets/suitcss/components.css +4 -0
- data/app/assets/stylesheets/suitcss/components/arrange.css +155 -0
- data/app/assets/stylesheets/suitcss/components/button.css +77 -0
- data/app/assets/stylesheets/suitcss/components/flex-embed.css +74 -0
- data/app/assets/stylesheets/suitcss/components/grid.css +121 -0
- data/app/assets/stylesheets/suitcss/utils.css +9 -0
- data/app/assets/stylesheets/suitcss/utils/after.css +4 -0
- data/app/assets/stylesheets/suitcss/utils/after/index.css +117 -0
- data/app/assets/stylesheets/suitcss/utils/after/lg.css +127 -0
- data/app/assets/stylesheets/suitcss/utils/after/md.css +127 -0
- data/app/assets/stylesheets/suitcss/utils/after/sm.css +127 -0
- data/app/assets/stylesheets/suitcss/utils/align.css +21 -0
- data/app/assets/stylesheets/suitcss/utils/before.css +4 -0
- data/app/assets/stylesheets/suitcss/utils/before/index.css +117 -0
- data/app/assets/stylesheets/suitcss/utils/before/lg.css +127 -0
- data/app/assets/stylesheets/suitcss/utils/before/md.css +127 -0
- data/app/assets/stylesheets/suitcss/utils/before/sm.css +127 -0
- data/app/assets/stylesheets/suitcss/utils/display.css +53 -0
- data/app/assets/stylesheets/suitcss/utils/flex.css +4 -0
- data/app/assets/stylesheets/suitcss/utils/flex/index.css +253 -0
- data/app/assets/stylesheets/suitcss/utils/flex/lg.css +259 -0
- data/app/assets/stylesheets/suitcss/utils/flex/md.css +259 -0
- data/app/assets/stylesheets/suitcss/utils/flex/sm.css +259 -0
- data/app/assets/stylesheets/suitcss/utils/layout.css +66 -0
- data/app/assets/stylesheets/suitcss/utils/link.css +55 -0
- data/app/assets/stylesheets/suitcss/utils/offset.css +2 -0
- data/app/assets/stylesheets/suitcss/utils/position.css +48 -0
- data/app/assets/stylesheets/suitcss/utils/size.css +4 -0
- data/app/assets/stylesheets/suitcss/utils/size/index.css +172 -0
- data/app/assets/stylesheets/suitcss/utils/size/lg.css +176 -0
- data/app/assets/stylesheets/suitcss/utils/size/md.css +176 -0
- data/app/assets/stylesheets/suitcss/utils/size/sm.css +176 -0
- data/app/assets/stylesheets/suitcss/utils/text.css +76 -0
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/lib/suitcss/rails.rb +6 -0
- data/lib/suitcss/rails/version.rb +5 -0
- data/suitcss-rails.gemspec +24 -0
- metadata +133 -0
@@ -0,0 +1,53 @@
|
|
1
|
+
/**
|
2
|
+
* @define utilities
|
3
|
+
* Display-type utilities
|
4
|
+
*/
|
5
|
+
|
6
|
+
.u-block {
|
7
|
+
display: block !important;
|
8
|
+
}
|
9
|
+
|
10
|
+
.u-hidden {
|
11
|
+
display: none !important;
|
12
|
+
}
|
13
|
+
|
14
|
+
/**
|
15
|
+
* Completely remove from the flow but leave available to screen readers.
|
16
|
+
*/
|
17
|
+
|
18
|
+
.u-hiddenVisually {
|
19
|
+
border: 0 !important;
|
20
|
+
clip: rect(1px, 1px, 1px, 1px) !important;
|
21
|
+
height: 1px !important;
|
22
|
+
overflow: hidden !important;
|
23
|
+
padding: 0 !important;
|
24
|
+
position: absolute !important;
|
25
|
+
width: 1px !important;
|
26
|
+
}
|
27
|
+
|
28
|
+
.u-inline {
|
29
|
+
display: inline !important;
|
30
|
+
}
|
31
|
+
|
32
|
+
/**
|
33
|
+
* 1. Fix for Firefox bug: an image styled `max-width:100%` within an
|
34
|
+
* inline-block will display at its default size, and not limit its width to
|
35
|
+
* 100% of an ancestral container.
|
36
|
+
*/
|
37
|
+
|
38
|
+
.u-inlineBlock {
|
39
|
+
display: inline-block !important;
|
40
|
+
max-width: 100%; /* 1 */
|
41
|
+
}
|
42
|
+
|
43
|
+
.u-table {
|
44
|
+
display: table !important;
|
45
|
+
}
|
46
|
+
|
47
|
+
.u-tableCell {
|
48
|
+
display: table-cell !important;
|
49
|
+
}
|
50
|
+
|
51
|
+
.u-tableRow {
|
52
|
+
display: table-row !important;
|
53
|
+
}
|
@@ -0,0 +1,253 @@
|
|
1
|
+
/** @define utilities */
|
2
|
+
|
3
|
+
/* Applies to flex container
|
4
|
+
========================================================================== */
|
5
|
+
|
6
|
+
/**
|
7
|
+
* Container
|
8
|
+
*/
|
9
|
+
|
10
|
+
.u-flex {
|
11
|
+
display: flex !important;
|
12
|
+
}
|
13
|
+
|
14
|
+
.u-flexInline {
|
15
|
+
display: inline-flex !important;
|
16
|
+
}
|
17
|
+
|
18
|
+
/**
|
19
|
+
* Direction: row
|
20
|
+
*/
|
21
|
+
|
22
|
+
.u-flexRow {
|
23
|
+
flex-direction: row !important;
|
24
|
+
}
|
25
|
+
|
26
|
+
.u-flexRowReverse {
|
27
|
+
flex-direction: row-reverse !important;
|
28
|
+
}
|
29
|
+
|
30
|
+
/**
|
31
|
+
* Direction: column
|
32
|
+
*/
|
33
|
+
|
34
|
+
.u-flexCol {
|
35
|
+
flex-direction: column !important;
|
36
|
+
}
|
37
|
+
|
38
|
+
.u-flexColReverse {
|
39
|
+
flex-direction: column-reverse !important;
|
40
|
+
}
|
41
|
+
|
42
|
+
/**
|
43
|
+
* Wrap
|
44
|
+
*/
|
45
|
+
|
46
|
+
.u-flexWrap {
|
47
|
+
flex-wrap: wrap !important;
|
48
|
+
}
|
49
|
+
|
50
|
+
.u-flexNoWrap {
|
51
|
+
flex-wrap: nowrap !important;
|
52
|
+
}
|
53
|
+
|
54
|
+
.u-flexWrapReverse {
|
55
|
+
flex-wrap: wrap-reverse !important;
|
56
|
+
}
|
57
|
+
|
58
|
+
/**
|
59
|
+
* Align items along the main axis of the current line of the flex container
|
60
|
+
*/
|
61
|
+
|
62
|
+
.u-flexJustifyStart {
|
63
|
+
justify-content: flex-start !important;
|
64
|
+
}
|
65
|
+
|
66
|
+
.u-flexJustifyEnd {
|
67
|
+
justify-content: flex-end !important;
|
68
|
+
}
|
69
|
+
|
70
|
+
.u-flexJustifyCenter {
|
71
|
+
justify-content: center !important;
|
72
|
+
}
|
73
|
+
|
74
|
+
.u-flexJustifyBetween {
|
75
|
+
justify-content: space-between !important;
|
76
|
+
}
|
77
|
+
|
78
|
+
.u-flexJustifyAround {
|
79
|
+
justify-content: space-around !important;
|
80
|
+
}
|
81
|
+
|
82
|
+
/**
|
83
|
+
* Align items in the cross axis of the current line of the flex container
|
84
|
+
* Similar to `justify-content` but in the perpendicular direction
|
85
|
+
*/
|
86
|
+
|
87
|
+
.u-flexAlignItemsStart {
|
88
|
+
align-items: flex-start !important;
|
89
|
+
}
|
90
|
+
|
91
|
+
.u-flexAlignItemsEnd {
|
92
|
+
align-items: flex-end !important;
|
93
|
+
}
|
94
|
+
|
95
|
+
.u-flexAlignItemsCenter {
|
96
|
+
align-items: center !important;
|
97
|
+
}
|
98
|
+
|
99
|
+
.u-flexAlignItemsStretch {
|
100
|
+
align-items: stretch !important;
|
101
|
+
}
|
102
|
+
|
103
|
+
.u-flexAlignItemsBaseline {
|
104
|
+
align-items: baseline !important;
|
105
|
+
}
|
106
|
+
|
107
|
+
/**
|
108
|
+
* Aligns items within the flex container when there is extra
|
109
|
+
* space in the cross-axis
|
110
|
+
*
|
111
|
+
* Has no effect when there is only one line of flex items.
|
112
|
+
*/
|
113
|
+
|
114
|
+
.u-flexAlignContentStart {
|
115
|
+
align-content: flex-start !important;
|
116
|
+
}
|
117
|
+
|
118
|
+
.u-flexAlignContentEnd {
|
119
|
+
align-content: flex-end !important;
|
120
|
+
}
|
121
|
+
|
122
|
+
.u-flexAlignContentCenter {
|
123
|
+
align-content: center !important;
|
124
|
+
}
|
125
|
+
|
126
|
+
.u-flexAlignContentStretch {
|
127
|
+
align-content: stretch !important;
|
128
|
+
}
|
129
|
+
|
130
|
+
.u-flexAlignContentBetween {
|
131
|
+
align-content: space-between !important;
|
132
|
+
}
|
133
|
+
|
134
|
+
.u-flexAlignContentAround {
|
135
|
+
align-content: space-around !important;
|
136
|
+
}
|
137
|
+
|
138
|
+
/**
|
139
|
+
* 1. Set the flex-shrink default explicitly to fix IE10 - http://git.io/vllC7
|
140
|
+
*/
|
141
|
+
|
142
|
+
/* postcss-bem-linter: ignore */
|
143
|
+
|
144
|
+
.u-flex > *,
|
145
|
+
.u-flexInline > * {
|
146
|
+
flex-shrink: 1; /* 1 */
|
147
|
+
}
|
148
|
+
|
149
|
+
/* Applies to flex items
|
150
|
+
========================================================================== */
|
151
|
+
|
152
|
+
/**
|
153
|
+
* Override default alignment of single item when specified by `align-items`
|
154
|
+
*/
|
155
|
+
|
156
|
+
.u-flexAlignSelfStart {
|
157
|
+
align-self: flex-start !important;
|
158
|
+
}
|
159
|
+
|
160
|
+
.u-flexAlignSelfEnd {
|
161
|
+
align-self: flex-end !important;
|
162
|
+
}
|
163
|
+
|
164
|
+
.u-flexAlignSelfCenter {
|
165
|
+
align-self: center !important;
|
166
|
+
}
|
167
|
+
|
168
|
+
.u-flexAlignSelfStretch {
|
169
|
+
align-self: stretch !important;
|
170
|
+
}
|
171
|
+
|
172
|
+
.u-flexAlignSelfBaseline {
|
173
|
+
align-self: baseline !important;
|
174
|
+
}
|
175
|
+
|
176
|
+
.u-flexAlignSelfAuto {
|
177
|
+
align-self: auto !important;
|
178
|
+
}
|
179
|
+
|
180
|
+
/**
|
181
|
+
* Change order without editing underlying HTML
|
182
|
+
*/
|
183
|
+
|
184
|
+
.u-flexOrderFirst {
|
185
|
+
order: -1 !important;
|
186
|
+
}
|
187
|
+
|
188
|
+
.u-flexOrderLast {
|
189
|
+
order: 1 !important;
|
190
|
+
}
|
191
|
+
|
192
|
+
.u-flexOrderNone {
|
193
|
+
order: 0 !important;
|
194
|
+
}
|
195
|
+
|
196
|
+
/**
|
197
|
+
* Specify the flex grow factor, which determines how much the flex item will
|
198
|
+
* grow relative to the rest of the flex items in the flex container.
|
199
|
+
*
|
200
|
+
* Supports 1-5 proportions
|
201
|
+
*
|
202
|
+
* 1. Provide all values to avoid IE10 bug with shorthand flex
|
203
|
+
* - http://git.io/vllC7
|
204
|
+
*
|
205
|
+
* Use `0%` to avoid bug in IE10/11 with unitless flex basis. Using this
|
206
|
+
* instead of `auto` as this matches what the default would be with `flex`
|
207
|
+
* shorthand - http://git.io/vllWx
|
208
|
+
*/
|
209
|
+
|
210
|
+
.u-flexGrow1 {
|
211
|
+
flex: 1 1 0% !important; /* 1 */
|
212
|
+
}
|
213
|
+
|
214
|
+
.u-flexGrow2 {
|
215
|
+
flex: 2 1 0% !important;
|
216
|
+
}
|
217
|
+
|
218
|
+
.u-flexGrow3 {
|
219
|
+
flex: 3 1 0% !important;
|
220
|
+
}
|
221
|
+
|
222
|
+
.u-flexGrow4 {
|
223
|
+
flex: 4 1 0% !important;
|
224
|
+
}
|
225
|
+
|
226
|
+
.u-flexGrow5 {
|
227
|
+
flex: 5 1 0% !important;
|
228
|
+
}
|
229
|
+
|
230
|
+
/**
|
231
|
+
* Aligning with `auto` margins
|
232
|
+
* http://www.w3.org/TR/css-flexbox-1/#auto-margins
|
233
|
+
*/
|
234
|
+
|
235
|
+
.u-flexExpand {
|
236
|
+
margin: auto !important;
|
237
|
+
}
|
238
|
+
|
239
|
+
.u-flexExpandLeft {
|
240
|
+
margin-left: auto !important;
|
241
|
+
}
|
242
|
+
|
243
|
+
.u-flexExpandRight {
|
244
|
+
margin-right: auto !important;
|
245
|
+
}
|
246
|
+
|
247
|
+
.u-flexExpandTop {
|
248
|
+
margin-top: auto !important;
|
249
|
+
}
|
250
|
+
|
251
|
+
.u-flexExpandBottom {
|
252
|
+
margin-bottom: auto !important;
|
253
|
+
}
|
@@ -0,0 +1,259 @@
|
|
1
|
+
/**
|
2
|
+
* @define utilities
|
3
|
+
* Size: breakpoint 1 (large)
|
4
|
+
*/
|
5
|
+
|
6
|
+
@media (--lg-viewport) {
|
7
|
+
|
8
|
+
/* Applies to flex container
|
9
|
+
======================================================================== */
|
10
|
+
|
11
|
+
/**
|
12
|
+
* Container
|
13
|
+
*/
|
14
|
+
|
15
|
+
.u-lg-flex {
|
16
|
+
display: flex !important;
|
17
|
+
}
|
18
|
+
|
19
|
+
.u-lg-flexInline {
|
20
|
+
display: inline-flex !important;
|
21
|
+
}
|
22
|
+
|
23
|
+
/**
|
24
|
+
* Direction: row
|
25
|
+
*/
|
26
|
+
|
27
|
+
.u-lg-flexRow {
|
28
|
+
flex-direction: row !important;
|
29
|
+
}
|
30
|
+
|
31
|
+
.u-lg-flexRowReverse {
|
32
|
+
flex-direction: row-reverse !important;
|
33
|
+
}
|
34
|
+
|
35
|
+
/**
|
36
|
+
* Direction: column
|
37
|
+
*/
|
38
|
+
|
39
|
+
.u-lg-flexCol {
|
40
|
+
flex-direction: column !important;
|
41
|
+
}
|
42
|
+
|
43
|
+
.u-lg-flexColReverse {
|
44
|
+
flex-direction: column-reverse !important;
|
45
|
+
}
|
46
|
+
|
47
|
+
/**
|
48
|
+
* Wrap
|
49
|
+
*/
|
50
|
+
|
51
|
+
.u-lg-flexWrap {
|
52
|
+
flex-wrap: wrap !important;
|
53
|
+
}
|
54
|
+
|
55
|
+
.u-lg-flexNoWrap {
|
56
|
+
flex-wrap: nowrap !important;
|
57
|
+
}
|
58
|
+
|
59
|
+
.u-lg-flexWrapReverse {
|
60
|
+
flex-wrap: wrap-reverse !important;
|
61
|
+
}
|
62
|
+
|
63
|
+
/**
|
64
|
+
* Align items along the main axis of the current line of the flex container
|
65
|
+
*/
|
66
|
+
|
67
|
+
.u-lg-flexJustifyStart {
|
68
|
+
justify-content: flex-start !important;
|
69
|
+
}
|
70
|
+
|
71
|
+
.u-lg-flexJustifyEnd {
|
72
|
+
justify-content: flex-end !important;
|
73
|
+
}
|
74
|
+
|
75
|
+
.u-lg-flexJustifyCenter {
|
76
|
+
justify-content: center !important;
|
77
|
+
}
|
78
|
+
|
79
|
+
.u-lg-flexJustifyBetween {
|
80
|
+
justify-content: space-between !important;
|
81
|
+
}
|
82
|
+
|
83
|
+
.u-lg-flexJustifyAround {
|
84
|
+
justify-content: space-around !important;
|
85
|
+
}
|
86
|
+
|
87
|
+
/**
|
88
|
+
* Align items in the cross axis of the current line of the flex container
|
89
|
+
* Similar to `justify-content` but in the perpendicular direction
|
90
|
+
*/
|
91
|
+
|
92
|
+
.u-lg-flexAlignItemsStart {
|
93
|
+
align-items: flex-start !important;
|
94
|
+
}
|
95
|
+
|
96
|
+
.u-lg-flexAlignItemsEnd {
|
97
|
+
align-items: flex-end !important;
|
98
|
+
}
|
99
|
+
|
100
|
+
.u-lg-flexAlignItemsCenter {
|
101
|
+
align-items: center !important;
|
102
|
+
}
|
103
|
+
|
104
|
+
.u-lg-flexAlignItemsStretch {
|
105
|
+
align-items: stretch !important;
|
106
|
+
}
|
107
|
+
|
108
|
+
.u-lg-flexAlignItemsBaseline {
|
109
|
+
align-items: baseline !important;
|
110
|
+
}
|
111
|
+
|
112
|
+
/**
|
113
|
+
* Aligns items within the flex container when there is extra
|
114
|
+
* space in the cross-axis
|
115
|
+
*
|
116
|
+
* Has no effect when there is only one line of flex items.
|
117
|
+
*/
|
118
|
+
|
119
|
+
.u-lg-flexAlignContentStart {
|
120
|
+
align-content: flex-start !important;
|
121
|
+
}
|
122
|
+
|
123
|
+
.u-lg-flexAlignContentEnd {
|
124
|
+
align-content: flex-end !important;
|
125
|
+
}
|
126
|
+
|
127
|
+
.u-lg-flexAlignContentCenter {
|
128
|
+
align-content: center !important;
|
129
|
+
}
|
130
|
+
|
131
|
+
.u-lg-flexAlignContentStretch {
|
132
|
+
align-content: stretch !important;
|
133
|
+
}
|
134
|
+
|
135
|
+
.u-lg-flexAlignContentBetween {
|
136
|
+
align-content: space-between !important;
|
137
|
+
}
|
138
|
+
|
139
|
+
.u-lg-flexAlignContentAround {
|
140
|
+
align-content: space-around !important;
|
141
|
+
}
|
142
|
+
|
143
|
+
/**
|
144
|
+
* 1. Set the flex-shrink default explicitly to fix IE10 - http://git.io/vllC7
|
145
|
+
*/
|
146
|
+
|
147
|
+
/* postcss-bem-linter: ignore */
|
148
|
+
|
149
|
+
.u-lg-flex > *,
|
150
|
+
.u-lg-flexInline > * {
|
151
|
+
flex-shrink: 1; /* 1 */
|
152
|
+
}
|
153
|
+
|
154
|
+
/* Applies to flex items
|
155
|
+
======================================================================== */
|
156
|
+
|
157
|
+
/**
|
158
|
+
* Override default alignment of single item when specified by `align-items`
|
159
|
+
*/
|
160
|
+
|
161
|
+
.u-lg-flexAlignSelfStart {
|
162
|
+
align-self: flex-start !important;
|
163
|
+
}
|
164
|
+
|
165
|
+
.u-lg-flexAlignSelfEnd {
|
166
|
+
align-self: flex-end !important;
|
167
|
+
}
|
168
|
+
|
169
|
+
.u-lg-flexAlignSelfCenter {
|
170
|
+
align-self: center !important;
|
171
|
+
}
|
172
|
+
|
173
|
+
.u-lg-flexAlignSelfStretch {
|
174
|
+
align-self: stretch !important;
|
175
|
+
}
|
176
|
+
|
177
|
+
.u-lg-flexAlignSelfBaseline {
|
178
|
+
align-self: baseline !important;
|
179
|
+
}
|
180
|
+
|
181
|
+
.u-lg-flexAlignSelfAuto {
|
182
|
+
align-self: auto !important;
|
183
|
+
}
|
184
|
+
|
185
|
+
/**
|
186
|
+
* Change order without editing underlying HTML
|
187
|
+
*/
|
188
|
+
|
189
|
+
.u-lg-flexOrderFirst {
|
190
|
+
order: -1 !important;
|
191
|
+
}
|
192
|
+
|
193
|
+
.u-lg-flexOrderLast {
|
194
|
+
order: 1 !important;
|
195
|
+
}
|
196
|
+
|
197
|
+
.u-lg-flexOrderNone {
|
198
|
+
order: 0 !important;
|
199
|
+
}
|
200
|
+
|
201
|
+
/**
|
202
|
+
* Specify the flex grow factor, which determines how much the flex item will
|
203
|
+
* grow relative to the rest of the flex items in the flex container.
|
204
|
+
*
|
205
|
+
* Supports 1-5 proportions
|
206
|
+
*
|
207
|
+
* 1. Provide all values to avoid IE10 bug with shorthand flex
|
208
|
+
* http://git.io/vllC7
|
209
|
+
*
|
210
|
+
* Use `0%` to avoid bug in IE10/11 with unitless flex basis
|
211
|
+
* http://git.io/vllWx
|
212
|
+
*/
|
213
|
+
|
214
|
+
.u-lg-flexGrow1 {
|
215
|
+
flex: 1 1 0% !important; /* 1 */
|
216
|
+
}
|
217
|
+
|
218
|
+
.u-lg-flexGrow2 {
|
219
|
+
flex: 2 1 0% !important;
|
220
|
+
}
|
221
|
+
|
222
|
+
.u-lg-flexGrow3 {
|
223
|
+
flex: 3 1 0% !important;
|
224
|
+
}
|
225
|
+
|
226
|
+
.u-lg-flexGrow4 {
|
227
|
+
flex: 4 1 0% !important;
|
228
|
+
}
|
229
|
+
|
230
|
+
.u-lg-flexGrow5 {
|
231
|
+
flex: 5 1 0% !important;
|
232
|
+
}
|
233
|
+
|
234
|
+
/**
|
235
|
+
* Aligning with `auto` margins
|
236
|
+
* http://www.w3.org/TR/css-flexbox-1/#auto-margins
|
237
|
+
*/
|
238
|
+
|
239
|
+
.u-lg-flexExpand {
|
240
|
+
margin: auto !important;
|
241
|
+
}
|
242
|
+
|
243
|
+
.u-lg-flexExpandLeft {
|
244
|
+
margin-left: auto !important;
|
245
|
+
}
|
246
|
+
|
247
|
+
.u-lg-flexExpandRight {
|
248
|
+
margin-right: auto !important;
|
249
|
+
}
|
250
|
+
|
251
|
+
.u-lg-flexExpandTop {
|
252
|
+
margin-top: auto !important;
|
253
|
+
}
|
254
|
+
|
255
|
+
.u-lg-flexExpandBottom {
|
256
|
+
margin-bottom: auto !important;
|
257
|
+
}
|
258
|
+
|
259
|
+
}
|