sled 4.5.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (63) hide show
  1. data/LICENSE +13 -0
  2. data/README.md +24 -0
  3. data/lib/generators/inuit/install/USAGE +9 -0
  4. data/lib/generators/inuit/install/install_generator.rb +10 -0
  5. data/lib/generators/inuit/install/templates/inuit_and_override.css.scss +3 -0
  6. data/lib/sled.rb +8 -0
  7. data/lib/sled/version.rb +3 -0
  8. data/vendor/assets/stylesheets/_vars.scss +124 -0
  9. data/vendor/assets/stylesheets/assets/batch/batch.eot +0 -0
  10. data/vendor/assets/stylesheets/assets/batch/batch.svg +360 -0
  11. data/vendor/assets/stylesheets/assets/batch/batch.ttf +0 -0
  12. data/vendor/assets/stylesheets/assets/batch/batch.woff +0 -0
  13. data/vendor/assets/stylesheets/assets/batch/batch_webfont_reference.pdf +0 -0
  14. data/vendor/assets/stylesheets/inuit.css/_inuit.scss +210 -0
  15. data/vendor/assets/stylesheets/inuit.css/base/_code.scss +63 -0
  16. data/vendor/assets/stylesheets/inuit.css/base/_forms.scss +174 -0
  17. data/vendor/assets/stylesheets/inuit.css/base/_headings.scss +60 -0
  18. data/vendor/assets/stylesheets/inuit.css/base/_images.scss +67 -0
  19. data/vendor/assets/stylesheets/inuit.css/base/_links.scss +37 -0
  20. data/vendor/assets/stylesheets/inuit.css/base/_lists.scss +19 -0
  21. data/vendor/assets/stylesheets/inuit.css/base/_main.scss +8 -0
  22. data/vendor/assets/stylesheets/inuit.css/base/_paragraphs.scss +11 -0
  23. data/vendor/assets/stylesheets/inuit.css/base/_quotes.scss +96 -0
  24. data/vendor/assets/stylesheets/inuit.css/base/_smallprint.scss +13 -0
  25. data/vendor/assets/stylesheets/inuit.css/base/_tables.scss +163 -0
  26. data/vendor/assets/stylesheets/inuit.css/generic/_brand.scss +18 -0
  27. data/vendor/assets/stylesheets/inuit.css/generic/_clearfix.scss +15 -0
  28. data/vendor/assets/stylesheets/inuit.css/generic/_debug.scss +168 -0
  29. data/vendor/assets/stylesheets/inuit.css/generic/_helper.scss +112 -0
  30. data/vendor/assets/stylesheets/inuit.css/generic/_mixins.scss +299 -0
  31. data/vendor/assets/stylesheets/inuit.css/generic/_normalize.scss +396 -0
  32. data/vendor/assets/stylesheets/inuit.css/generic/_pull.scss +123 -0
  33. data/vendor/assets/stylesheets/inuit.css/generic/_push.scss +123 -0
  34. data/vendor/assets/stylesheets/inuit.css/generic/_reset.scss +80 -0
  35. data/vendor/assets/stylesheets/inuit.css/generic/_shared.scss +61 -0
  36. data/vendor/assets/stylesheets/inuit.css/generic/_widths.scss +154 -0
  37. data/vendor/assets/stylesheets/inuit.css/objects/_arrows.scss +143 -0
  38. data/vendor/assets/stylesheets/inuit.css/objects/_batch.scss +15 -0
  39. data/vendor/assets/stylesheets/inuit.css/objects/_block-list.scss +40 -0
  40. data/vendor/assets/stylesheets/inuit.css/objects/_breadcrumb.scss +59 -0
  41. data/vendor/assets/stylesheets/inuit.css/objects/_buttons.scss +44 -0
  42. data/vendor/assets/stylesheets/inuit.css/objects/_columns.scss +18 -0
  43. data/vendor/assets/stylesheets/inuit.css/objects/_flexbox.scss +51 -0
  44. data/vendor/assets/stylesheets/inuit.css/objects/_flyout.scss +59 -0
  45. data/vendor/assets/stylesheets/inuit.css/objects/_greybox.scss +54 -0
  46. data/vendor/assets/stylesheets/inuit.css/objects/_grids.scss +99 -0
  47. data/vendor/assets/stylesheets/inuit.css/objects/_icon-text.scss +36 -0
  48. data/vendor/assets/stylesheets/inuit.css/objects/_island.scss +34 -0
  49. data/vendor/assets/stylesheets/inuit.css/objects/_link-complex.scss +28 -0
  50. data/vendor/assets/stylesheets/inuit.css/objects/_lozenges.scss +42 -0
  51. data/vendor/assets/stylesheets/inuit.css/objects/_marginalia.scss +48 -0
  52. data/vendor/assets/stylesheets/inuit.css/objects/_matrix.scss +98 -0
  53. data/vendor/assets/stylesheets/inuit.css/objects/_media.scss +56 -0
  54. data/vendor/assets/stylesheets/inuit.css/objects/_nav.scss +151 -0
  55. data/vendor/assets/stylesheets/inuit.css/objects/_options.scss +41 -0
  56. data/vendor/assets/stylesheets/inuit.css/objects/_pagination.scss +46 -0
  57. data/vendor/assets/stylesheets/inuit.css/objects/_rules.scss +61 -0
  58. data/vendor/assets/stylesheets/inuit.css/objects/_split.scss +35 -0
  59. data/vendor/assets/stylesheets/inuit.css/objects/_sprite.scss +92 -0
  60. data/vendor/assets/stylesheets/inuit.css/objects/_stats.scss +48 -0
  61. data/vendor/assets/stylesheets/inuit.css/objects/_this-or-this.scss +34 -0
  62. data/vendor/assets/stylesheets/style.scss +23 -0
  63. metadata +126 -0
@@ -0,0 +1,18 @@
1
+ /*------------------------------------*\
2
+ $BRAND
3
+ \*------------------------------------*/
4
+ /**
5
+ * `.brand` is a quick and simple way to apply your brand face and/or color to
6
+ * any element using a handy helper class.
7
+ */
8
+ .brand{
9
+ font-family:$brand-face +!important;
10
+ color:$brand-color +!important;
11
+ }
12
+ .brand-face{
13
+ font-family:$brand-face +!important;
14
+ }
15
+ .brand-color,
16
+ .brand-colour{
17
+ color:$brand-color +!important;
18
+ }
@@ -0,0 +1,15 @@
1
+ /*------------------------------------*\
2
+ $CLEARFIX
3
+ \*------------------------------------*/
4
+ /**
5
+ * Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
6
+ * Extend the clearfix class with Sass to avoid the `.cf` class appearing over
7
+ * and over in your markup.
8
+ */
9
+ .cf{
10
+ &:after{
11
+ content:"";
12
+ display:table;
13
+ clear:both;
14
+ }
15
+ }
@@ -0,0 +1,168 @@
1
+ @if $debug-mode == true{
2
+ /*------------------------------------*\
3
+ $DEBUG
4
+ \*------------------------------------*/
5
+ /**
6
+ * Enable this stylesheet to visually detect any improperly nested or
7
+ * potentially invalid markup, or any potentially inaccessible code.
8
+ *
9
+ * Red == definite error
10
+ * Yellow == double-check
11
+ * None == should be fine
12
+ *
13
+ * Please note that this method of checking markup quality should not be relied
14
+ * upon entirely. Validate your markup!
15
+ */
16
+
17
+
18
+ /**
19
+ * Are there any empty elements in your page?
20
+ */
21
+ :empty{
22
+ outline:5px solid yellow;
23
+ }
24
+
25
+
26
+ /**
27
+ * Images require `alt` attributes, empty `alt`s are fine but should be
28
+ * double-checked, no `alt` is bad and is flagged red.
29
+ */
30
+ img{
31
+ outline:5px solid red;
32
+ }
33
+ img[alt]{
34
+ outline:none;
35
+ }
36
+ img[alt=""]{
37
+ outline:5px solid yellow;
38
+ }
39
+
40
+
41
+ /**
42
+ * Links sometimes, though not always, benefit from `title` attributes. Links
43
+ * without are never invalid but it’s a good idea to check.
44
+ */
45
+ a{
46
+ outline:5px solid yellow;
47
+ }
48
+ a[title]{
49
+ outline:none;
50
+ }
51
+
52
+
53
+ /**
54
+ * Double-check any links whose `href` is something questionable.
55
+ */
56
+ a[href="#"],
57
+ a[href*="javascript"]{
58
+ outline:5px solid yellow;
59
+ }
60
+
61
+
62
+ /**
63
+ * The `target` attribute ain’t too nice...
64
+ */
65
+ a[target]{
66
+ outline:5px solid yellow;
67
+ }
68
+
69
+
70
+ /**
71
+ * Ensure any lists only contain `li`s as children.
72
+ */
73
+ ul,
74
+ ol{
75
+ > *:not(li){
76
+ outline:5px solid red;
77
+ }
78
+ }
79
+
80
+
81
+ /**
82
+ * It’s always nice to give `th`s `scope` attributes.
83
+ */
84
+ th{
85
+ outline:5px solid yellow;
86
+ }
87
+ th[scope]{
88
+ outline:none;
89
+ }
90
+
91
+
92
+ /**
93
+ * `tr`s as children of `table`s ain’t great, did you need a `thead`/`tbody`?
94
+ */
95
+ table > tr{
96
+ outline:5px solid yellow;
97
+ }
98
+
99
+
100
+ /**
101
+ * `tfoot` needs to come *before* `tbody`.
102
+ */
103
+ tbody + tfoot{
104
+ outline:5px solid yellow;
105
+ }
106
+
107
+
108
+ /**
109
+ * Forms require `action` attributes
110
+ */
111
+ form{
112
+ outline:5px solid red;
113
+ }
114
+ form[action]{
115
+ outline:none;
116
+ }
117
+
118
+
119
+ /**
120
+ * Various form-field types have required attributes. `input`s need `type`
121
+ * attributes, `textarea`s need `rows` and `cols` attributes and submit buttons
122
+ * need a `value` attribute.
123
+ */
124
+ textarea,
125
+ input{
126
+ outline:5px solid red;
127
+ }
128
+ input[type]{
129
+ outline:none;
130
+ }
131
+ textarea[rows][cols]{
132
+ outline:none;
133
+ }
134
+ input[type=submit]{
135
+ outline:5px solid red;
136
+ }
137
+ input[type=submit][value]{
138
+ outline:none;
139
+ }
140
+
141
+
142
+ /**
143
+ * Avoid inline styles where possible.
144
+ */
145
+ [style]{
146
+ outline:5px solid yellow;
147
+ }
148
+
149
+
150
+ /**
151
+ * You should avoid using IDs for CSS, is this doing any styling?
152
+ */
153
+ [id]{
154
+ outline:5px solid yellow;
155
+ }
156
+
157
+
158
+ /**
159
+ * Are you using the grid system correctly?
160
+ */
161
+ .gw > :not(.g),
162
+ .grid-wrapper > :not(.grid),
163
+ .gw--rev > :not(.g),
164
+ .grid-wrapper--rev > :not(.grid){
165
+ outline:5px solid red;
166
+ }
167
+
168
+ }/* endif */
@@ -0,0 +1,112 @@
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
+ .float--right { float:right!important; }
14
+ .float--left { float:left !important; }
15
+
16
+ .text--left { text-align:left !important; }
17
+ .text--center { text-align:center!important; }
18
+ .text--right { text-align:right !important; }
19
+
20
+ .flush { margin: 0!important; }
21
+ .flush--top { margin-top: 0!important; }
22
+ .flush--right { margin-right: 0!important; }
23
+ .flush--bottom { margin-bottom:0!important; }
24
+ .flush--left { margin-left: 0!important; }
25
+ .flush--ends { margin-top: 0!important; margin-bottom:0!important; }
26
+ .flush--sides { margin-right: 0!important; margin-left: 0!important; }
27
+
28
+
29
+ /**
30
+ * Pull items full width of `.island` parents.
31
+ */
32
+ .full-bleed{
33
+ margin-right:-$base-spacing-unit!important;
34
+ margin-left: -$base-spacing-unit!important;
35
+
36
+ .islet &{
37
+ margin-right:-($half-spacing-unit)!important;
38
+ margin-left: -($half-spacing-unit)!important;
39
+ }
40
+ }
41
+
42
+
43
+ /**
44
+ * Add a help cursor to any element that gives the user extra information on
45
+ * `:hover`.
46
+ */
47
+ .informative{
48
+ cursor:help;
49
+ }
50
+
51
+
52
+ /**
53
+ * Mute an object by reducing its opacity.
54
+ */
55
+ .muted{
56
+ opacity:0.5;
57
+ filter:alpha(opacity = 50);
58
+ }
59
+
60
+
61
+ /**
62
+ * Align items to the right where they imply progression/movement forward, e.g.:
63
+ *
64
+ <p class=proceed><a href=#>Read more...</a></p>
65
+ *
66
+ */
67
+ .proceed{
68
+ text-align:right;
69
+ }
70
+
71
+
72
+ /**
73
+ * Add a right-angled quote to links that imply movement, e.g.:
74
+ *
75
+ <a href=# class=go>Read more</a>
76
+ *
77
+ */
78
+ .go:after{
79
+ content:" »";
80
+ }
81
+
82
+
83
+ /**
84
+ * Apply capital case to an element (usually a `strong`).
85
+ */
86
+ .caps{
87
+ text-transform:uppercase;
88
+ }
89
+
90
+
91
+ /**
92
+ * Hide content off-screen without resorting to `display:none;`
93
+ */
94
+ .accessibility { position:absolute; left:-99999px; }
95
+ [dir=rtl] .accessibility { left:auto; right:-99999px; }
96
+
97
+
98
+ /**
99
+ * Hide content based on breakpoint
100
+ */
101
+ .hide{
102
+ position:absolute;
103
+ left:-9999px;
104
+ }
105
+ @each $state in palm, lap, lap-and-up, portable, desk, desk-wide{
106
+ @include media-query(#{$state}){
107
+ .hide--#{$state}{
108
+ position:absolute;
109
+ left:-9999px;
110
+ }
111
+ }
112
+ }
@@ -0,0 +1,299 @@
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){
14
+ font-size:$font-size;
15
+ font-size:($font-size / $base-font-size)*1rem;
16
+ line-height:ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
17
+ }
18
+
19
+
20
+ /**
21
+ * Create vendor-prefixed CSS in one go, e.g.
22
+ *
23
+ `@include vendor(border-radius, 4px);`
24
+ *
25
+ */
26
+ @mixin vendor($property, $value...){
27
+ -webkit-#{$property}:$value;
28
+ -moz-#{$property}:$value;
29
+ -ms-#{$property}:$value;
30
+ -o-#{$property}:$value;
31
+ #{$property}:$value;
32
+ }
33
+
34
+
35
+ /**
36
+ * Create CSS keyframe animations for all vendors in one go, e.g.:
37
+ *
38
+ .foo{
39
+ @include vendor(animation, shrink 3s);
40
+ }
41
+
42
+ @include keyframe(shrink){
43
+ from{
44
+ font-size:5em;
45
+ }
46
+ }
47
+ *
48
+ * Courtesy of @integralist: twitter.com/integralist/status/260484115315437569
49
+ */
50
+ @mixin keyframe ($animation-name){
51
+ @-webkit-keyframes $animation-name{
52
+ @content;
53
+ }
54
+
55
+ @-moz-keyframes $animation-name{
56
+ @content;
57
+ }
58
+
59
+ @-ms-keyframes $animation-name{
60
+ @content;
61
+ }
62
+
63
+ @-o-keyframes $animation-name{
64
+ @content;
65
+ }
66
+
67
+ @keyframes $animation-name{
68
+ @content;
69
+ }
70
+ }
71
+
72
+
73
+ /**
74
+ * Force overly long spans of text to truncate, e.g.:
75
+ *
76
+ `@include truncate(100%);`
77
+ *
78
+ * Where `$truncation-boundary` is a united measurement.
79
+ */
80
+ @mixin truncate($truncation-boundary){
81
+ max-width:$truncation-boundary;
82
+ white-space:nowrap;
83
+ overflow:hidden;
84
+ text-overflow:ellipsis;
85
+ }
86
+
87
+
88
+ /**
89
+ * CSS arrows!!! But... before you read on, you might want to grab a coffee...
90
+ *
91
+ * This mixin creates a CSS arrow on a given element. We can have the arrow
92
+ * appear in one of 12 locations, thus:
93
+ *
94
+ * 01 02 03
95
+ * +------------------+
96
+ * 12 | | 04
97
+ * | |
98
+ * 11 | | 05
99
+ * | |
100
+ * 10 | | 06
101
+ * +------------------+
102
+ * 09 08 07
103
+ *
104
+ * You pass this position in along with a desired arrow color and optional
105
+ * border color, for example:
106
+ *
107
+ * `@include arrow(top, left, red)`
108
+ *
109
+ * for just a single, red arrow, or:
110
+ *
111
+ * `@include arrow(bottom, center, red, black)`
112
+ *
113
+ * which will create a red triangle with a black border which sits at the bottom
114
+ * center of the element. Call the mixin thus:
115
+ *
116
+ .foo{
117
+ background-color:#BADA55;
118
+ border:1px solid #ACE;
119
+ @include arrow(top, left, #BADA55, #ACE);
120
+ }
121
+ *
122
+ */
123
+ @mixin arrow($arrow-edge, $arrow-location, $arrow-color, $border-color: $arrow-color){
124
+
125
+ @if $arrow-edge == top{
126
+
127
+ @extend %arrow--top;
128
+
129
+ &:before{
130
+ border-bottom-color:$border-color!important;
131
+ }
132
+
133
+ &:after{
134
+ border-bottom-color:$arrow-color!important;
135
+ }
136
+
137
+ @if $arrow-location == left{
138
+ @extend %arrow--left;
139
+ }
140
+
141
+ @if $arrow-location == center{
142
+ @extend %arrow--center;
143
+ }
144
+
145
+ @if $arrow-location == right{
146
+ @extend %arrow--right;
147
+ }
148
+
149
+ }
150
+
151
+ @if $arrow-edge == right{
152
+
153
+ @extend %arrow--far;
154
+
155
+ &:before{
156
+ border-left-color:$border-color!important;
157
+ }
158
+
159
+ &:after{
160
+ border-left-color:$arrow-color!important;
161
+ }
162
+
163
+ @if $arrow-location == top{
164
+ @extend %arrow--upper;
165
+ }
166
+
167
+ @if $arrow-location == center{
168
+ @extend %arrow--middle;
169
+ }
170
+
171
+ @if $arrow-location == bottom{
172
+ @extend %arrow--lower;
173
+ }
174
+
175
+ }
176
+
177
+ @if $arrow-edge == bottom{
178
+
179
+ @extend %arrow--bottom;
180
+
181
+ &:before{
182
+ border-top-color:$border-color!important;
183
+ }
184
+
185
+ &:after{
186
+ border-top-color:$arrow-color!important;
187
+ }
188
+
189
+ @if $arrow-location == left{
190
+ @extend %arrow--left;
191
+ }
192
+
193
+ @if $arrow-location == center{
194
+ @extend %arrow--center;
195
+ }
196
+
197
+ @if $arrow-location == right{
198
+ @extend %arrow--right;
199
+ }
200
+
201
+ }
202
+
203
+ @if $arrow-edge == left{
204
+
205
+ @extend %arrow--near;
206
+
207
+ &:before{
208
+ border-right-color:$border-color!important;
209
+ }
210
+
211
+ &:after{
212
+ border-right-color:$arrow-color!important;
213
+ }
214
+
215
+ @if $arrow-location == top{
216
+ @extend %arrow--upper;
217
+ }
218
+
219
+ @if $arrow-location == center{
220
+ @extend %arrow--middle;
221
+ }
222
+
223
+ @if $arrow-location == bottom{
224
+ @extend %arrow--lower;
225
+ }
226
+
227
+ }
228
+
229
+ }
230
+
231
+
232
+ /**
233
+ * Media query mixin.
234
+ *
235
+ * It’s not great practice to define solid breakpoints up-front, preferring to
236
+ * modify your design when it needs it, rather than assuming you’ll want a
237
+ * change at ‘mobile’. However, as inuit.css is required to take a hands off
238
+ * approach to design decisions, this is the closest we can get to baked-in
239
+ * responsiveness. It’s flexible enough to allow you to set your own breakpoints
240
+ * but solid enough to be frameworkified.
241
+ *
242
+ * We define some broad breakpoints in our vars file that are picked up here
243
+ * for use in a simple media query mixin. Our options are:
244
+ *
245
+ * palm
246
+ * lap
247
+ * lap-and-up
248
+ * portable
249
+ * desk
250
+ * desk-wide
251
+ *
252
+ * Not using a media query will, naturally, serve styles to all devices.
253
+ *
254
+ * `@include media-query(palm){ [styles here] }`
255
+ *
256
+ * We work out your end points for you:
257
+ */
258
+ $palm-end: $lap-start - 1px;
259
+ $lap-end: $desk-start - 1px;
260
+
261
+ @mixin media-query($media-query){
262
+
263
+ @if $media-query == palm{
264
+
265
+ @media only screen and (max-width:$palm-end) { @content; }
266
+
267
+ }
268
+
269
+ @if $media-query == lap{
270
+
271
+ @media only screen and (min-width:$lap-start) and (max-width:$lap-end) { @content; }
272
+
273
+ }
274
+
275
+ @if $media-query == lap-and-up{
276
+
277
+ @media only screen and (min-width:$lap-start) { @content; }
278
+
279
+ }
280
+
281
+ @if $media-query == portable{
282
+
283
+ @media only screen and (max-width:$lap-end) { @content; }
284
+
285
+ }
286
+
287
+ @if $media-query == desk{
288
+
289
+ @media only screen and (min-width:$desk-start) { @content; }
290
+
291
+ }
292
+
293
+ @if $media-query == desk-wide{
294
+
295
+ @media only screen and (min-width: $desk-wide-start) { @content; }
296
+
297
+ }
298
+
299
+ }