polar-express 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (60) hide show
  1. data/MIT-LICENSE +19 -0
  2. data/README.md +37 -0
  3. data/lib/generators/inuitcss/install/USAGE +9 -0
  4. data/lib/generators/inuitcss/install/install_generator.rb +9 -0
  5. data/lib/generators/inuitcss/install/templates/inuit.css.scss +99 -0
  6. data/lib/polar-express.rb +6 -0
  7. data/vendor/assets/stylesheets/CHANGELOG.md +26 -0
  8. data/vendor/assets/stylesheets/CONTRIBUTING.md +42 -0
  9. data/vendor/assets/stylesheets/LICENSE +13 -0
  10. data/vendor/assets/stylesheets/README.md +367 -0
  11. data/vendor/assets/stylesheets/_defaults.scss +225 -0
  12. data/vendor/assets/stylesheets/_inuit.scss +213 -0
  13. data/vendor/assets/stylesheets/base/_code.scss +63 -0
  14. data/vendor/assets/stylesheets/base/_forms.scss +174 -0
  15. data/vendor/assets/stylesheets/base/_headings.scss +60 -0
  16. data/vendor/assets/stylesheets/base/_images.scss +73 -0
  17. data/vendor/assets/stylesheets/base/_lists.scss +19 -0
  18. data/vendor/assets/stylesheets/base/_main.scss +8 -0
  19. data/vendor/assets/stylesheets/base/_paragraphs.scss +11 -0
  20. data/vendor/assets/stylesheets/base/_quotes.scss +96 -0
  21. data/vendor/assets/stylesheets/base/_smallprint.scss +13 -0
  22. data/vendor/assets/stylesheets/base/_tables.scss +163 -0
  23. data/vendor/assets/stylesheets/component.json +5 -0
  24. data/vendor/assets/stylesheets/generic/_brand.scss +18 -0
  25. data/vendor/assets/stylesheets/generic/_clearfix.scss +15 -0
  26. data/vendor/assets/stylesheets/generic/_debug.scss +168 -0
  27. data/vendor/assets/stylesheets/generic/_helper.scss +184 -0
  28. data/vendor/assets/stylesheets/generic/_mixins.scss +328 -0
  29. data/vendor/assets/stylesheets/generic/_normalize.scss +396 -0
  30. data/vendor/assets/stylesheets/generic/_pull.scss +147 -0
  31. data/vendor/assets/stylesheets/generic/_push.scss +147 -0
  32. data/vendor/assets/stylesheets/generic/_reset.scss +80 -0
  33. data/vendor/assets/stylesheets/generic/_shared.scss +61 -0
  34. data/vendor/assets/stylesheets/generic/_widths.scss +158 -0
  35. data/vendor/assets/stylesheets/objects/_arrows.scss +147 -0
  36. data/vendor/assets/stylesheets/objects/_beautons.scss +226 -0
  37. data/vendor/assets/stylesheets/objects/_block-list.scss +44 -0
  38. data/vendor/assets/stylesheets/objects/_breadcrumb.scss +63 -0
  39. data/vendor/assets/stylesheets/objects/_columns.scss +22 -0
  40. data/vendor/assets/stylesheets/objects/_flexbox.scss +55 -0
  41. data/vendor/assets/stylesheets/objects/_flyout.scss +63 -0
  42. data/vendor/assets/stylesheets/objects/_greybox.scss +58 -0
  43. data/vendor/assets/stylesheets/objects/_grids.scss +69 -0
  44. data/vendor/assets/stylesheets/objects/_icon-text.scss +40 -0
  45. data/vendor/assets/stylesheets/objects/_island.scss +38 -0
  46. data/vendor/assets/stylesheets/objects/_link-complex.scss +32 -0
  47. data/vendor/assets/stylesheets/objects/_lozenges.scss +46 -0
  48. data/vendor/assets/stylesheets/objects/_marginalia.scss +52 -0
  49. data/vendor/assets/stylesheets/objects/_matrix.scss +89 -0
  50. data/vendor/assets/stylesheets/objects/_media.scss +60 -0
  51. data/vendor/assets/stylesheets/objects/_nav.scss +155 -0
  52. data/vendor/assets/stylesheets/objects/_options.scss +45 -0
  53. data/vendor/assets/stylesheets/objects/_pagination.scss +50 -0
  54. data/vendor/assets/stylesheets/objects/_rules.scss +65 -0
  55. data/vendor/assets/stylesheets/objects/_split.scss +39 -0
  56. data/vendor/assets/stylesheets/objects/_sprite.scss +98 -0
  57. data/vendor/assets/stylesheets/objects/_stats.scss +52 -0
  58. data/vendor/assets/stylesheets/objects/_this-or-this.scss +38 -0
  59. data/vendor/assets/stylesheets/style.scss +26 -0
  60. metadata +122 -0
@@ -0,0 +1,184 @@
1
+ /*------------------------------------*\
2
+ $HELPER
3
+ \*------------------------------------*/
4
+ /**
5
+ * A series of helper classes to use arbitrarily. Only use a helper class if an
6
+ * element/component doesn’t already have a class to which you could apply this
7
+ * styling, e.g. if you need to float `.main-nav` left then add `float:left;` to
8
+ * that ruleset as opposed to adding the `.float--left` class to the markup.
9
+ *
10
+ * A lot of these classes carry `!important` as you will always want them to win
11
+ * out over other selectors.
12
+ */
13
+
14
+
15
+ /**
16
+ * Add/remove floats
17
+ */
18
+ .float--right { float:right!important; }
19
+ .float--left { float:left !important; }
20
+ .float--none { float:none !important; }
21
+
22
+
23
+ /**
24
+ * Text alignment
25
+ */
26
+ .text--left { text-align:left !important; }
27
+ .text--center { text-align:center!important; }
28
+ .text--right { text-align:right !important; }
29
+
30
+
31
+ /**
32
+ * Font weights
33
+ */
34
+ .weight--light { font-weight:300!important; }
35
+ .weight--normal { font-weight:400!important; }
36
+ .weight--semibold { font-weight:600!important; }
37
+
38
+
39
+ /**
40
+ * Add/remove margins
41
+ */
42
+ .push { margin: $base-spacing-unit!important; }
43
+ .push--top { margin-top: $base-spacing-unit!important; }
44
+ .push--right { margin-right: $base-spacing-unit!important; }
45
+ .push--bottom { margin-bottom:$base-spacing-unit!important; }
46
+ .push--left { margin-left: $base-spacing-unit!important; }
47
+ .push--ends { margin-top: $base-spacing-unit!important; margin-bottom:$base-spacing-unit!important; }
48
+ .push--sides { margin-right: $base-spacing-unit!important; margin-left: $base-spacing-unit!important; }
49
+
50
+ .push-half { margin: $half-spacing-unit!important; }
51
+ .push-half--top { margin-top: $half-spacing-unit!important; }
52
+ .push-half--right { margin-right: $half-spacing-unit!important; }
53
+ .push-half--bottom { margin-bottom:$half-spacing-unit!important; }
54
+ .push-half--left { margin-left: $half-spacing-unit!important; }
55
+ .push-half--ends { margin-top: $half-spacing-unit!important; margin-bottom:$half-spacing-unit!important; }
56
+ .push-half--sides { margin-right: $half-spacing-unit!important; margin-left: $half-spacing-unit!important; }
57
+
58
+ .flush { margin: 0!important; }
59
+ .flush--top { margin-top: 0!important; }
60
+ .flush--right { margin-right: 0!important; }
61
+ .flush--bottom { margin-bottom:0!important; }
62
+ .flush--left { margin-left: 0!important; }
63
+ .flush--ends { margin-top: 0!important; margin-bottom:0!important; }
64
+ .flush--sides { margin-right: 0!important; margin-left: 0!important; }
65
+
66
+
67
+ /**
68
+ * Add/remove paddings
69
+ */
70
+ .soft { padding: $base-spacing-unit!important; }
71
+ .soft--top { padding-top: $base-spacing-unit!important; }
72
+ .soft--right { padding-right: $base-spacing-unit!important; }
73
+ .soft--bottom { padding-bottom:$base-spacing-unit!important; }
74
+ .soft--left { padding-left: $base-spacing-unit!important; }
75
+ .soft--ends { padding-top: $base-spacing-unit!important; padding-bottom:$base-spacing-unit!important; }
76
+ .soft--sides { padding-right: $base-spacing-unit!important; padding-left: $base-spacing-unit!important; }
77
+
78
+ .soft-half { padding: $half-spacing-unit!important; }
79
+ .soft-half--top { padding-top: $half-spacing-unit!important; }
80
+ .soft-half--right { padding-right: $half-spacing-unit!important; }
81
+ .soft-half--bottom { padding-bottom:$half-spacing-unit!important; }
82
+ .soft-half--left { padding-left: $half-spacing-unit!important; }
83
+ .soft-half--ends { padding-top: $half-spacing-unit!important; padding-bottom:$half-spacing-unit!important; }
84
+ .soft-half--sides { padding-right: $half-spacing-unit!important; padding-left: $half-spacing-unit!important; }
85
+
86
+ .hard { padding: 0!important; }
87
+ .hard--top { padding-top: 0!important; }
88
+ .hard--right { padding-right: 0!important; }
89
+ .hard--bottom { padding-bottom:0!important; }
90
+ .hard--left { padding-left: 0!important; }
91
+ .hard--ends { padding-top: 0!important; padding-bottom:0!important; }
92
+ .hard--sides { padding-right: 0!important; padding-left: 0!important; }
93
+
94
+
95
+ /**
96
+ * Pull items full width of `.island` parents.
97
+ */
98
+ .full-bleed{
99
+ margin-right:-$base-spacing-unit!important;
100
+ margin-left: -$base-spacing-unit!important;
101
+
102
+ .islet &{
103
+ margin-right:-($half-spacing-unit)!important;
104
+ margin-left: -($half-spacing-unit)!important;
105
+ }
106
+ }
107
+
108
+
109
+ /**
110
+ * Add a help cursor to any element that gives the user extra information on
111
+ * `:hover`.
112
+ */
113
+ .informative{
114
+ cursor:help!important;
115
+ }
116
+
117
+
118
+ /**
119
+ * Mute an object by reducing its opacity.
120
+ */
121
+ .muted{
122
+ opacity:0.5!important;
123
+ filter:alpha(opacity = 50)!important;
124
+ }
125
+
126
+
127
+ /**
128
+ * Align items to the right where they imply progression/movement forward, e.g.:
129
+ *
130
+ <p class=proceed><a href=#>Read more...</a></p>
131
+ *
132
+ */
133
+ .proceed{
134
+ text-align:right!important;
135
+ }
136
+
137
+
138
+ /**
139
+ * Add a right-angled quote to links that imply movement, e.g.:
140
+ *
141
+ <a href=# class=go>Read more</a>
142
+ *
143
+ */
144
+ .go:after{
145
+ content:"\00A0" "\00BB"!important;
146
+ }
147
+
148
+
149
+ /**
150
+ * Apply capital case to an element (usually a `strong`).
151
+ */
152
+ .caps{
153
+ text-transform:uppercase!important;
154
+ }
155
+
156
+
157
+ /**
158
+ * Hide content off-screen without resorting to `display:none;`, also provide
159
+ * breakpoint specific hidden elements.
160
+ */
161
+ @mixin accessibility{
162
+ border:0!important;
163
+ clip:rect(0 0 0 0)!important;
164
+ height:1px!important;
165
+ margin:-1px!important;
166
+ overflow:hidden!important;
167
+ padding:0!important;
168
+ position: absolute!important;
169
+ width:1px!important;
170
+ }
171
+ .accessibility,
172
+ .visuallyhidden{
173
+ @include accessibility;
174
+ }
175
+ @if $responsive{
176
+ @each $state in palm, lap, lap-and-up, portable, desk, desk-wide{
177
+ @include media-query(#{$state}){
178
+ .accessibility--#{$state},
179
+ .visuallyhidden--#{$state}{
180
+ @include accessibility;
181
+ }
182
+ }
183
+ }
184
+ }
@@ -0,0 +1,328 @@
1
+ /*------------------------------------*\
2
+ $MIXINS
3
+ \*------------------------------------*/
4
+ /**
5
+ * Create a fully formed type style (sizing and vertical rhythm) by passing in a
6
+ * single value, e.g.:
7
+ *
8
+ `@include font-size(10px);`
9
+ *
10
+ * Thanks to @redclov3r for the `line-height` Sass:
11
+ * twitter.com/redclov3r/status/250301539321798657
12
+ */
13
+ @mixin font-size($font-size, $line-height:true){
14
+ font-size:$font-size;
15
+ font-size:($font-size / $base-font-size)*1rem;
16
+ @if $line-height == true{
17
+ line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
18
+ }
19
+ }
20
+
21
+
22
+ /**
23
+ * Style any number of headings in one fell swoop, e.g.:
24
+ *
25
+ .foo{
26
+ @include headings(1, 3){
27
+ color:#BADA55;
28
+ }
29
+ }
30
+ *
31
+ * With thanks to @lar_zzz, @paranoida, @rowanmanning and ultimately
32
+ * @thierrylemoulec for refining and improving my initial mixin.
33
+ */
34
+ @mixin headings($from: 1, $to: 6){
35
+ %base-heading {
36
+ @content
37
+ }
38
+
39
+ @if $from >= 1 and $to <= 6{
40
+ @for $i from $from through $to{
41
+ h#{$i}{
42
+ @extend %base-heading;
43
+ }
44
+ }
45
+ }
46
+ }
47
+
48
+
49
+ /**
50
+ * Create vendor-prefixed CSS in one go, e.g.
51
+ *
52
+ `@include vendor(border-radius, 4px);`
53
+ *
54
+ */
55
+ @mixin vendor($property, $value...){
56
+ -webkit-#{$property}:$value;
57
+ -moz-#{$property}:$value;
58
+ -ms-#{$property}:$value;
59
+ -o-#{$property}:$value;
60
+ #{$property}:$value;
61
+ }
62
+
63
+
64
+ /**
65
+ * Create CSS keyframe animations for all vendors in one go, e.g.:
66
+ *
67
+ .foo{
68
+ @include vendor(animation, shrink 3s);
69
+ }
70
+
71
+ @include keyframe(shrink){
72
+ from{
73
+ font-size:5em;
74
+ }
75
+ }
76
+ *
77
+ * Courtesy of @integralist: twitter.com/integralist/status/260484115315437569
78
+ */
79
+ @mixin keyframe ($animation-name){
80
+ @-webkit-keyframes $animation-name{
81
+ @content;
82
+ }
83
+
84
+ @-moz-keyframes $animation-name{
85
+ @content;
86
+ }
87
+
88
+ @-ms-keyframes $animation-name{
89
+ @content;
90
+ }
91
+
92
+ @-o-keyframes $animation-name{
93
+ @content;
94
+ }
95
+
96
+ @keyframes $animation-name{
97
+ @content;
98
+ }
99
+ }
100
+
101
+
102
+ /**
103
+ * Force overly long spans of text to truncate, e.g.:
104
+ *
105
+ `@include truncate(100%);`
106
+ *
107
+ * Where `$truncation-boundary` is a united measurement.
108
+ */
109
+ @mixin truncate($truncation-boundary){
110
+ max-width:$truncation-boundary;
111
+ white-space:nowrap;
112
+ overflow:hidden;
113
+ text-overflow:ellipsis;
114
+ }
115
+
116
+
117
+ /**
118
+ * CSS arrows!!! But... before you read on, you might want to grab a coffee...
119
+ *
120
+ * This mixin creates a CSS arrow on a given element. We can have the arrow
121
+ * appear in one of 12 locations, thus:
122
+ *
123
+ * 01 02 03
124
+ * +------------------+
125
+ * 12 | | 04
126
+ * | |
127
+ * 11 | | 05
128
+ * | |
129
+ * 10 | | 06
130
+ * +------------------+
131
+ * 09 08 07
132
+ *
133
+ * You pass this position in along with a desired arrow color and optional
134
+ * border color, for example:
135
+ *
136
+ * `@include arrow(top, left, red)`
137
+ *
138
+ * for just a single, red arrow, or:
139
+ *
140
+ * `@include arrow(bottom, center, red, black)`
141
+ *
142
+ * which will create a red triangle with a black border which sits at the bottom
143
+ * center of the element. Call the mixin thus:
144
+ *
145
+ .foo{
146
+ background-color:#BADA55;
147
+ border:1px solid #ACE;
148
+ @include arrow(top, left, #BADA55, #ACE);
149
+ }
150
+ *
151
+ */
152
+ @mixin arrow($arrow-edge, $arrow-location, $arrow-color, $border-color: $arrow-color){
153
+
154
+ @if $arrow-edge == top{
155
+
156
+ @extend %arrow--top;
157
+
158
+ &:before{
159
+ border-bottom-color:$border-color!important;
160
+ }
161
+
162
+ &:after{
163
+ border-bottom-color:$arrow-color!important;
164
+ }
165
+
166
+ @if $arrow-location == left{
167
+ @extend %arrow--left;
168
+ }
169
+
170
+ @if $arrow-location == center{
171
+ @extend %arrow--center;
172
+ }
173
+
174
+ @if $arrow-location == right{
175
+ @extend %arrow--right;
176
+ }
177
+
178
+ }
179
+
180
+ @if $arrow-edge == right{
181
+
182
+ @extend %arrow--far;
183
+
184
+ &:before{
185
+ border-left-color:$border-color!important;
186
+ }
187
+
188
+ &:after{
189
+ border-left-color:$arrow-color!important;
190
+ }
191
+
192
+ @if $arrow-location == top{
193
+ @extend %arrow--upper;
194
+ }
195
+
196
+ @if $arrow-location == center{
197
+ @extend %arrow--middle;
198
+ }
199
+
200
+ @if $arrow-location == bottom{
201
+ @extend %arrow--lower;
202
+ }
203
+
204
+ }
205
+
206
+ @if $arrow-edge == bottom{
207
+
208
+ @extend %arrow--bottom;
209
+
210
+ &:before{
211
+ border-top-color:$border-color!important;
212
+ }
213
+
214
+ &:after{
215
+ border-top-color:$arrow-color!important;
216
+ }
217
+
218
+ @if $arrow-location == left{
219
+ @extend %arrow--left;
220
+ }
221
+
222
+ @if $arrow-location == center{
223
+ @extend %arrow--center;
224
+ }
225
+
226
+ @if $arrow-location == right{
227
+ @extend %arrow--right;
228
+ }
229
+
230
+ }
231
+
232
+ @if $arrow-edge == left{
233
+
234
+ @extend %arrow--near;
235
+
236
+ &:before{
237
+ border-right-color:$border-color!important;
238
+ }
239
+
240
+ &:after{
241
+ border-right-color:$arrow-color!important;
242
+ }
243
+
244
+ @if $arrow-location == top{
245
+ @extend %arrow--upper;
246
+ }
247
+
248
+ @if $arrow-location == center{
249
+ @extend %arrow--middle;
250
+ }
251
+
252
+ @if $arrow-location == bottom{
253
+ @extend %arrow--lower;
254
+ }
255
+
256
+ }
257
+
258
+ }
259
+
260
+
261
+ /**
262
+ * Media query mixin.
263
+ *
264
+ * It’s not great practice to define solid breakpoints up-front, preferring to
265
+ * modify your design when it needs it, rather than assuming you’ll want a
266
+ * change at ‘mobile’. However, as inuit.css is required to take a hands off
267
+ * approach to design decisions, this is the closest we can get to baked-in
268
+ * responsiveness. It’s flexible enough to allow you to set your own breakpoints
269
+ * but solid enough to be frameworkified.
270
+ *
271
+ * We define some broad breakpoints in our vars file that are picked up here
272
+ * for use in a simple media query mixin. Our options are:
273
+ *
274
+ * palm
275
+ * lap
276
+ * lap-and-up
277
+ * portable
278
+ * desk
279
+ * desk-wide
280
+ *
281
+ * Not using a media query will, naturally, serve styles to all devices.
282
+ *
283
+ * `@include media-query(palm){ [styles here] }`
284
+ *
285
+ * We work out your end points for you:
286
+ */
287
+ $palm-end: $lap-start - 1px;
288
+ $lap-end: $desk-start - 1px;
289
+
290
+ @mixin media-query($media-query){
291
+
292
+ @if $media-query == palm{
293
+
294
+ @media only screen and (max-width:$palm-end) { @content; }
295
+
296
+ }
297
+
298
+ @if $media-query == lap{
299
+
300
+ @media only screen and (min-width:$lap-start) and (max-width:$lap-end) { @content; }
301
+
302
+ }
303
+
304
+ @if $media-query == lap-and-up{
305
+
306
+ @media only screen and (min-width:$lap-start) { @content; }
307
+
308
+ }
309
+
310
+ @if $media-query == portable{
311
+
312
+ @media only screen and (max-width:$lap-end) { @content; }
313
+
314
+ }
315
+
316
+ @if $media-query == desk{
317
+
318
+ @media only screen and (min-width:$desk-start) { @content; }
319
+
320
+ }
321
+
322
+ @if $media-query == desk-wide{
323
+
324
+ @media only screen and (min-width: $desk-wide-start) { @content; }
325
+
326
+ }
327
+
328
+ }