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.
Files changed (50) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +9 -0
  3. data/.rspec +2 -0
  4. data/.travis.yml +4 -0
  5. data/Gemfile +4 -0
  6. data/README.md +37 -0
  7. data/Rakefile +6 -0
  8. data/app/assets/stylesheets/normalize.css +424 -0
  9. data/app/assets/stylesheets/suitcss.css +5 -0
  10. data/app/assets/stylesheets/suitcss/base.css +1 -0
  11. data/app/assets/stylesheets/suitcss/base/index.css +83 -0
  12. data/app/assets/stylesheets/suitcss/components.css +4 -0
  13. data/app/assets/stylesheets/suitcss/components/arrange.css +155 -0
  14. data/app/assets/stylesheets/suitcss/components/button.css +77 -0
  15. data/app/assets/stylesheets/suitcss/components/flex-embed.css +74 -0
  16. data/app/assets/stylesheets/suitcss/components/grid.css +121 -0
  17. data/app/assets/stylesheets/suitcss/utils.css +9 -0
  18. data/app/assets/stylesheets/suitcss/utils/after.css +4 -0
  19. data/app/assets/stylesheets/suitcss/utils/after/index.css +117 -0
  20. data/app/assets/stylesheets/suitcss/utils/after/lg.css +127 -0
  21. data/app/assets/stylesheets/suitcss/utils/after/md.css +127 -0
  22. data/app/assets/stylesheets/suitcss/utils/after/sm.css +127 -0
  23. data/app/assets/stylesheets/suitcss/utils/align.css +21 -0
  24. data/app/assets/stylesheets/suitcss/utils/before.css +4 -0
  25. data/app/assets/stylesheets/suitcss/utils/before/index.css +117 -0
  26. data/app/assets/stylesheets/suitcss/utils/before/lg.css +127 -0
  27. data/app/assets/stylesheets/suitcss/utils/before/md.css +127 -0
  28. data/app/assets/stylesheets/suitcss/utils/before/sm.css +127 -0
  29. data/app/assets/stylesheets/suitcss/utils/display.css +53 -0
  30. data/app/assets/stylesheets/suitcss/utils/flex.css +4 -0
  31. data/app/assets/stylesheets/suitcss/utils/flex/index.css +253 -0
  32. data/app/assets/stylesheets/suitcss/utils/flex/lg.css +259 -0
  33. data/app/assets/stylesheets/suitcss/utils/flex/md.css +259 -0
  34. data/app/assets/stylesheets/suitcss/utils/flex/sm.css +259 -0
  35. data/app/assets/stylesheets/suitcss/utils/layout.css +66 -0
  36. data/app/assets/stylesheets/suitcss/utils/link.css +55 -0
  37. data/app/assets/stylesheets/suitcss/utils/offset.css +2 -0
  38. data/app/assets/stylesheets/suitcss/utils/position.css +48 -0
  39. data/app/assets/stylesheets/suitcss/utils/size.css +4 -0
  40. data/app/assets/stylesheets/suitcss/utils/size/index.css +172 -0
  41. data/app/assets/stylesheets/suitcss/utils/size/lg.css +176 -0
  42. data/app/assets/stylesheets/suitcss/utils/size/md.css +176 -0
  43. data/app/assets/stylesheets/suitcss/utils/size/sm.css +176 -0
  44. data/app/assets/stylesheets/suitcss/utils/text.css +76 -0
  45. data/bin/console +14 -0
  46. data/bin/setup +8 -0
  47. data/lib/suitcss/rails.rb +6 -0
  48. data/lib/suitcss/rails/version.rb +5 -0
  49. data/suitcss-rails.gemspec +24 -0
  50. 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,4 @@
1
+ @import "flex/index";
2
+ @import "flex/sm";
3
+ @import "flex/md";
4
+ @import "flex/lg";
@@ -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
+ }