sled 4.5.5

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 (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,36 @@
1
+ /*------------------------------------*\
2
+ $ICON-TEXT
3
+ \*------------------------------------*/
4
+ /**
5
+ * For text-links etc that have an icon with them. Sometimes whitespace would
6
+ * suffice in creating a gap between the icon and text, for example:
7
+ *
8
+ <a href=#>
9
+ <i class="s s--help"></i> Help &amp; support
10
+ </a>
11
+ *
12
+ * However we will sometimes want a larger, explicity set gap:
13
+ <a href=# class=icon-text>
14
+ <i class="icon-text__icon s s--help"></i>Help &amp; support
15
+ </a>
16
+ *
17
+ * Demo: jsfiddle.net/inuitcss/Q6Lbf
18
+ *
19
+ */
20
+ .icon-text > .icon-text__icon{
21
+ margin-right:$half-spacing-unit / 2;
22
+ }
23
+
24
+
25
+ /**
26
+ * We can also reverse the direction of the margin for icons that appear to the
27
+ * right of the text content, thus:
28
+ *
29
+ <a href=# class=icon-text--rev>
30
+ Help &amp; support<i class="icon-text__icon s s--help"></i>
31
+ </a>
32
+ *
33
+ */
34
+ .icon-text--rev > .icon-text__icon{
35
+ margin-left:$half-spacing-unit / 2;
36
+ }
@@ -0,0 +1,34 @@
1
+ /*------------------------------------*\
2
+ $ISLAND
3
+ \*------------------------------------*/
4
+ /**
5
+ * Simple, boxed off content, as per: csswizardry.com/2011/10/the-island-object
6
+ * E.g.:
7
+ *
8
+ <div class=island>
9
+ I am boxed off.
10
+ </div>
11
+ *
12
+ * Demo: jsfiddle.net/inuitcss/u8pV3
13
+ *
14
+ */
15
+ .island,
16
+ .islet{
17
+ display:block;
18
+ @extend .cf;
19
+ }
20
+ .island{
21
+ padding:$base-spacing-unit;
22
+ }
23
+ .island > :last-child,
24
+ .islet > :last-child{
25
+ margin-bottom:0;
26
+ }
27
+
28
+
29
+ /**
30
+ * Just like `.island`, only smaller.
31
+ */
32
+ .islet{
33
+ padding:$half-spacing-unit;
34
+ }
@@ -0,0 +1,28 @@
1
+ /*------------------------------------*\
2
+ $LINK-COMPLEX
3
+ \*------------------------------------*/
4
+ /**
5
+ * As inspired by @necolas:
6
+ * github.com/necolas/suit-utils/blob/master/link.css#L18
7
+ *
8
+ * Add hover behaviour to only selected items within links, e.g.:
9
+ *
10
+ <a href=log-in class=link-complex>
11
+ <i class="s s--user"></i>
12
+ <span class=link-complex__target>Log in</span>
13
+ </a>
14
+ *
15
+ * Demo: jsfiddle.net/inuitcss/rt9M3
16
+ *
17
+ */
18
+ .link-complex,
19
+ .link-complex:hover,
20
+ .link-complex:active,
21
+ .link-complex:focus{
22
+ text-decoration:none;
23
+ }
24
+ .link-complex:hover .link-complex__target,
25
+ .link-complex:active .link-complex__target,
26
+ .link-complex:focus .link-complex__target{
27
+ text-decoration:underline;
28
+ }
@@ -0,0 +1,42 @@
1
+ /*------------------------------------*\
2
+ $LOZENGES
3
+ \*------------------------------------*/
4
+ /**
5
+ * Create pill- and lozenge-like runs of text, e.g.:
6
+ *
7
+ <p>This <span class=pill>here</span> is a pill!</p>
8
+ *
9
+ <p>This <span class=loz>here</span> is also a lozenge!</p>
10
+ *
11
+ * Pills have fully rounded ends, lozenges have only their corners rounded.
12
+ *
13
+ * Demo: jsfiddle.net/inuitcss/N3pGm
14
+ *
15
+ */
16
+ .pill{
17
+ display:inline-block;
18
+ /**
19
+ * These numbers set in ems mean that, at its narrowest, a lozenge will be
20
+ * the same width as the `line-height` set on the `html` element.
21
+ * This allows us to use the `.loz` in almost any `font-size` we wish.
22
+ */
23
+ min-width: ($line-height-ratio * 0.666667) * 1em;
24
+ padding-right:($line-height-ratio * 0.166667) * 1em;
25
+ padding-left: ($line-height-ratio * 0.166667) * 1em;
26
+ /* =1.50em */
27
+ text-align:center;
28
+ background-color:#ccc; /* Override this color in your theme stylesheet */
29
+ color:#fff; /* Override this color in your theme stylesheet */
30
+
31
+ /**
32
+ * Normally we’d use border-radius:100%; but instead here we just use an
33
+ * overly large number; `border-radius:100%;` would create an oval on
34
+ * non-square elements whereas we just want to round the ends of an element.
35
+ */
36
+ border-radius:100px;
37
+ }
38
+
39
+ .loz{
40
+ @extend .pill;
41
+ border-radius:$brand-round;
42
+ }
@@ -0,0 +1,48 @@
1
+ /*------------------------------------*\
2
+ $MARGINALIA
3
+ \*------------------------------------*/
4
+ /**
5
+ * Marginalia are, per definition, notes in the margin of a document. The
6
+ * `marginalia__body` class can be applied to all kinds of content, like text or
7
+ * images, and is joined by a width class:
8
+ *
9
+ <div class="marginalia">
10
+ <div class="marginalia__body desk-one-fifth"></div>
11
+ </div>
12
+ *
13
+ * Demo: jsfiddle.net/inuitcss/AemkH
14
+ *
15
+ */
16
+ .marginalia{
17
+ @include font-size($milli-size);
18
+ }
19
+
20
+ /**
21
+ * Wait for a certain breakpoint to trigger ‘proper' marginalia. Up to this point,
22
+ * marginalia are inline with the other text.
23
+ */
24
+ @media (min-width: $desk-start){
25
+ .marginalia{
26
+ position:relative;
27
+ }
28
+
29
+ .marginalia__body,
30
+ .marginalia__body--right{
31
+ position:absolute;
32
+ }
33
+
34
+ .marginalia__body{
35
+ right:100%;
36
+ padding-right:$base-spacing-unit;
37
+ text-align:right;
38
+ }
39
+
40
+ /**
41
+ * Align marginalia to the right of the text.
42
+ */
43
+ .marginalia__body--right{
44
+ left:100%;
45
+ padding-left:$base-spacing-unit;
46
+ text-align:left;
47
+ }
48
+ }
@@ -0,0 +1,98 @@
1
+ /*------------------------------------*\
2
+ $MATRIX
3
+ \*------------------------------------*/
4
+ /**
5
+ * Create a grid of items out of a single list, e.g.:
6
+ *
7
+ <ul class="matrix three-cols">
8
+ <li class=all-cols>Lorem</li>
9
+ <li>Ipsum <a href=#>dolor</a></li>
10
+ <li><a href=# class=matrix__link>Sit</a></li>
11
+ <li>Amet</li>
12
+ <li class=all-cols>Consectetuer</li>
13
+ </ul>
14
+ *
15
+ * Extend this object in your theme stylesheet.
16
+ *
17
+ * Demo: jsfiddle.net/inuitcss/Y2zrU
18
+ *
19
+ */
20
+ .matrix{
21
+
22
+ &,
23
+ > li{
24
+ border:0 solid #ccc; /* Override this color in your theme stylesheet */
25
+ }
26
+ }
27
+ .matrix{
28
+ list-style:none;
29
+ margin-left:0;
30
+ border-top-width: 1px;
31
+ border-left-width:1px;
32
+ @extend .cf;
33
+
34
+ > li{
35
+ padding:$half-spacing-unit;
36
+ float:left;
37
+ border-right-width: 1px;
38
+ border-bottom-width:1px;
39
+ @if $global-border-box == false{
40
+ @include vendor(box-sizing, border-box);
41
+ }
42
+ }
43
+ }
44
+ .matrix__link{
45
+ display:block;
46
+ padding:$half-spacing-unit;
47
+ margin:-$half-spacing-unit;
48
+ }
49
+
50
+
51
+ /**
52
+ * The `.multi-list` object is a lot like the `.matrix` object only without the
53
+ * blocky borders and padding.
54
+ *
55
+ <ul class="multi-list four-cols">
56
+ <li>Lorem</li>
57
+ <li>Ipsum</li>
58
+ <li>Dolor</li>
59
+ <li>Sit</li>
60
+ </ul>
61
+ *
62
+ * Demo: jsfiddle.net/inuitcss/Y2zrU
63
+ *
64
+ */
65
+ .multi-list{
66
+ list-style:none;
67
+ margin-left:0;
68
+ @extend .cf;
69
+ }
70
+ .multi-list > li{
71
+ float:left;
72
+ }
73
+
74
+
75
+ /**
76
+ * Apply these classes alongside the `.matrix` or `.multi-list` classes on
77
+ * lists to determine how wide their columns are.
78
+ */
79
+ .two-cols > li{
80
+ width:50%;
81
+ }
82
+ .three-cols > li{
83
+ width:33.333%;
84
+ }
85
+ .four-cols > li{
86
+ width:25%;
87
+ }
88
+ .five-cols > li{
89
+ width:20%;
90
+ }
91
+ /**
92
+ * Unfortunately we have to qualify this selector in order to bring its
93
+ * specificity above the `.[number]-cols > li` selectors above.
94
+ */
95
+ .matrix > .all-cols,
96
+ .multi-list > .all-cols{
97
+ width:100%;
98
+ }
@@ -0,0 +1,56 @@
1
+ /*------------------------------------*\
2
+ $MEDIA
3
+ \*------------------------------------*/
4
+ /**
5
+ * Place any image- and text-like content side-by-side, as per:
6
+ * stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
7
+ * E.g.:
8
+ *
9
+ <div class=media>
10
+ <img src=http://placekitten.com/200/300 alt="" class=media__img>
11
+ <p class=media__body>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
12
+ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
13
+ </div>
14
+ *
15
+ * Demo: jsfiddle.net/inuitcss/cf4Qs
16
+ *
17
+ */
18
+ .media{
19
+ display:block;
20
+ @extend .cf;
21
+ }
22
+ .media__img{
23
+ float:left;
24
+ margin-right:$base-spacing-unit;
25
+ }
26
+ /**
27
+ * Reversed image location (right instead of left).
28
+ */
29
+ .media__img--rev{
30
+ float:right;
31
+ margin-left:$base-spacing-unit;
32
+ }
33
+
34
+ .media__img img,
35
+ .media__img--rev img{
36
+ display:block;
37
+ }
38
+
39
+ .media__body{
40
+ overflow:hidden;
41
+ }
42
+ .media__body,
43
+ .media__body > :last-child{
44
+ margin-bottom:0;
45
+ }
46
+
47
+
48
+ /**
49
+ * `.img`s in `.islet`s need an appropriately sized margin.
50
+ */
51
+ .islet .media__img{
52
+ margin-right:$half-spacing-unit;
53
+ }
54
+ .islet .media__img--rev{
55
+ margin-left:$half-spacing-unit;
56
+ }
@@ -0,0 +1,151 @@
1
+ /*------------------------------------*\
2
+ $NAV
3
+ \*------------------------------------*/
4
+ /**
5
+ * Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction
6
+ * When used on an `ol` or `ul`, this class throws the list into horizontal mode
7
+ * e.g.:
8
+ *
9
+ <ul class=nav>
10
+ <li><a href=#>Home</a></li>
11
+ <li><a href=#>About</a></li>
12
+ <li><a href=#>Portfolio</a></li>
13
+ <li><a href=#>Contact</a></li>
14
+ </ul>
15
+ *
16
+ * Demo: jsfiddle.net/inuitcss/Vnph4
17
+ *
18
+ */
19
+ .nav{
20
+ list-style:none;
21
+ margin-left:0;
22
+ @extend .cf;
23
+
24
+ > li{
25
+
26
+ &,
27
+ > a{
28
+ display:inline-block;
29
+ *display:inline;
30
+ zoom:1;
31
+ }
32
+ }
33
+ }
34
+
35
+
36
+ /**
37
+ * `.nav--stacked` extends `.nav` and throws the list into vertical mode, e.g.:
38
+ *
39
+ <ul class="nav nav--stacked">
40
+ <li><a href=#>Home</a></li>
41
+ <li><a href=#>About</a></li>
42
+ <li><a href=#>Portfolio</a></li>
43
+ <li><a href=#>Contact</a></li>
44
+ </ul>
45
+ *
46
+ */
47
+ .nav--stacked{
48
+
49
+ > li{
50
+ display:list-item;
51
+
52
+ > a{
53
+ display:block;
54
+ }
55
+ }
56
+ }
57
+
58
+
59
+ /**
60
+ * `.nav--banner` extends `.nav` and centres the list, e.g.:
61
+ *
62
+ <ul class="nav nav--banner">
63
+ <li><a href=#>Home</a></li>
64
+ <li><a href=#>About</a></li>
65
+ <li><a href=#>Portfolio</a></li>
66
+ <li><a href=#>Contact</a></li>
67
+ </ul>
68
+ *
69
+ */
70
+ .nav--banner{
71
+ text-align:center;
72
+ }
73
+
74
+
75
+ /**
76
+ * Give nav links a big, blocky hit area. Extends `.nav`, e.g.:
77
+ *
78
+ <ul class="nav nav--block">
79
+ <li><a href=#>Home</a></li>
80
+ <li><a href=#>About</a></li>
81
+ <li><a href=#>Portfolio</a></li>
82
+ <li><a href=#>Contact</a></li>
83
+ </ul>
84
+ *
85
+ */
86
+ .nav--block{
87
+ line-height:1;
88
+ /**
89
+ * Remove whitespace caused by `inline-block`.
90
+ */
91
+ letter-spacing:-0.31em;
92
+ word-spacing:-0.43em;
93
+ white-space:nowrap;
94
+
95
+ > li{
96
+ letter-spacing:normal;
97
+ word-spacing:normal;
98
+
99
+ > a{
100
+ padding:$half-spacing-unit;
101
+ }
102
+ }
103
+ }
104
+
105
+
106
+ /**
107
+ * Force a nav to occupy 100% of the available width of its parent. Extends
108
+ * `.nav`, e.g.:
109
+ *
110
+ <ul class="nav nav--fit">
111
+ <li><a href=#>Home</a></li>
112
+ <li><a href=#>About</a></li>
113
+ <li><a href=#>Portfolio</a></li>
114
+ <li><a href=#>Contact</a></li>
115
+ </ul>
116
+ *
117
+ * Thanks to @pimpl for this idea!
118
+ */
119
+ .nav--fit{
120
+ display:table;
121
+ width:100%;
122
+
123
+ > li{
124
+ display:table-cell;
125
+
126
+ > a{
127
+ display:block;
128
+ }
129
+ }
130
+ }
131
+
132
+
133
+ /**
134
+ * Make a list of keywords. Extends `.nav`, e.g.:
135
+ *
136
+ `<ul class="nav nav--keywords>`
137
+ *
138
+ */
139
+ .nav--keywords{
140
+
141
+ > li{
142
+
143
+ &:after{
144
+ content:", ";
145
+ }
146
+
147
+ &:last-child:after{
148
+ display:none;
149
+ }
150
+ }
151
+ }