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.
- data/LICENSE +13 -0
- data/README.md +24 -0
- data/lib/generators/inuit/install/USAGE +9 -0
- data/lib/generators/inuit/install/install_generator.rb +10 -0
- data/lib/generators/inuit/install/templates/inuit_and_override.css.scss +3 -0
- data/lib/sled.rb +8 -0
- data/lib/sled/version.rb +3 -0
- data/vendor/assets/stylesheets/_vars.scss +124 -0
- data/vendor/assets/stylesheets/assets/batch/batch.eot +0 -0
- data/vendor/assets/stylesheets/assets/batch/batch.svg +360 -0
- data/vendor/assets/stylesheets/assets/batch/batch.ttf +0 -0
- data/vendor/assets/stylesheets/assets/batch/batch.woff +0 -0
- data/vendor/assets/stylesheets/assets/batch/batch_webfont_reference.pdf +0 -0
- data/vendor/assets/stylesheets/inuit.css/_inuit.scss +210 -0
- data/vendor/assets/stylesheets/inuit.css/base/_code.scss +63 -0
- data/vendor/assets/stylesheets/inuit.css/base/_forms.scss +174 -0
- data/vendor/assets/stylesheets/inuit.css/base/_headings.scss +60 -0
- data/vendor/assets/stylesheets/inuit.css/base/_images.scss +67 -0
- data/vendor/assets/stylesheets/inuit.css/base/_links.scss +37 -0
- data/vendor/assets/stylesheets/inuit.css/base/_lists.scss +19 -0
- data/vendor/assets/stylesheets/inuit.css/base/_main.scss +8 -0
- data/vendor/assets/stylesheets/inuit.css/base/_paragraphs.scss +11 -0
- data/vendor/assets/stylesheets/inuit.css/base/_quotes.scss +96 -0
- data/vendor/assets/stylesheets/inuit.css/base/_smallprint.scss +13 -0
- data/vendor/assets/stylesheets/inuit.css/base/_tables.scss +163 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_brand.scss +18 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_clearfix.scss +15 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_debug.scss +168 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_helper.scss +112 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_mixins.scss +299 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_normalize.scss +396 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_pull.scss +123 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_push.scss +123 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_reset.scss +80 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_shared.scss +61 -0
- data/vendor/assets/stylesheets/inuit.css/generic/_widths.scss +154 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_arrows.scss +143 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_batch.scss +15 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_block-list.scss +40 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_breadcrumb.scss +59 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_buttons.scss +44 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_columns.scss +18 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_flexbox.scss +51 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_flyout.scss +59 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_greybox.scss +54 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_grids.scss +99 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_icon-text.scss +36 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_island.scss +34 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_link-complex.scss +28 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_lozenges.scss +42 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_marginalia.scss +48 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_matrix.scss +98 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_media.scss +56 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_nav.scss +151 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_options.scss +41 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_pagination.scss +46 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_rules.scss +61 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_split.scss +35 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_sprite.scss +92 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_stats.scss +48 -0
- data/vendor/assets/stylesheets/inuit.css/objects/_this-or-this.scss +34 -0
- data/vendor/assets/stylesheets/style.scss +23 -0
- metadata +126 -0
@@ -0,0 +1,15 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$BATCH
|
3
|
+
\*------------------------------------*/
|
4
|
+
@if $batch == true{
|
5
|
+
@font-face{
|
6
|
+
font-family:Batch;
|
7
|
+
src:url('assets/batch/batch.eot');
|
8
|
+
src:url('assets/batch/batch.eot?#iefix') format('embedded-opentype'),
|
9
|
+
url('assets/batch/batch.woff') format('woff'),
|
10
|
+
url('assets/batch/batch.ttf') format('truetype'),
|
11
|
+
url('assets/batch/batch.svg#batchregular') format('svg');
|
12
|
+
font-weight:normal;
|
13
|
+
font-style:normal;
|
14
|
+
}
|
15
|
+
}
|
@@ -0,0 +1,40 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$BLOCK-LIST
|
3
|
+
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* Create big blocky lists of content, e.g.:
|
6
|
+
*
|
7
|
+
<ul class=block-list>
|
8
|
+
<li>Foo</li>
|
9
|
+
<li>Bar</li>
|
10
|
+
<li>Baz</li>
|
11
|
+
<li><a href=# class=block-list__link>Foo Bar Baz</a></li>
|
12
|
+
</ul>
|
13
|
+
*
|
14
|
+
* Extend this object in your theme stylesheet.
|
15
|
+
*
|
16
|
+
* Demo: jsfiddle.net/inuitcss/hR57q
|
17
|
+
*
|
18
|
+
*/
|
19
|
+
.block-list{
|
20
|
+
|
21
|
+
&,
|
22
|
+
> li{
|
23
|
+
border:0 solid #ccc; /* Override this color in your theme stylesheet */
|
24
|
+
}
|
25
|
+
}
|
26
|
+
.block-list{
|
27
|
+
list-style:none;
|
28
|
+
margin-left:0;
|
29
|
+
border-top-width:1px;
|
30
|
+
|
31
|
+
> li{
|
32
|
+
border-bottom-width:1px;
|
33
|
+
padding:$half-spacing-unit;
|
34
|
+
}
|
35
|
+
}
|
36
|
+
.block-list__link{
|
37
|
+
display:block;
|
38
|
+
padding:$half-spacing-unit;
|
39
|
+
margin:-$half-spacing-unit;
|
40
|
+
}
|
@@ -0,0 +1,59 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$BREADCRUMB
|
3
|
+
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* Simple breadcrumb styling to apply to (ordered) lists. Extends `.nav`, e.g.:
|
6
|
+
*
|
7
|
+
<ol class="nav breadcrumb">
|
8
|
+
<li><a href=#>Home</a></li>
|
9
|
+
<li><a href=#>About</a></li>
|
10
|
+
<li><a href=#>The Board</a></li>
|
11
|
+
<li class=current><a href=#>Directors</a></li>
|
12
|
+
</ol>
|
13
|
+
*
|
14
|
+
* Demo: jsfiddle.net/inuitcss/rkAY9
|
15
|
+
*
|
16
|
+
*/
|
17
|
+
.breadcrumb > li + li:before{
|
18
|
+
content:"» ";
|
19
|
+
}
|
20
|
+
|
21
|
+
|
22
|
+
/**
|
23
|
+
* For denoting a path-like structure, GitHub style, e.g.:
|
24
|
+
*
|
25
|
+
<ol class="nav breadcrumb--path">
|
26
|
+
<li class=breadcrumb__root><a href=#>inuit.css</a></li>
|
27
|
+
<li><a href=#>inuit.css</a></li>
|
28
|
+
<li><a href=#>partials</a></li>
|
29
|
+
<li class=current><a href=#>objects</a></li>
|
30
|
+
</ol>
|
31
|
+
*
|
32
|
+
*/
|
33
|
+
.breadcrumb--path > li + li:before{
|
34
|
+
content:"/ ";
|
35
|
+
}
|
36
|
+
|
37
|
+
|
38
|
+
/**
|
39
|
+
* Assign a delimiter on the fly through a data attribute, e.g.:
|
40
|
+
*
|
41
|
+
<ol class="nav breadcrumb">
|
42
|
+
<li><a href=#>Home</a></li>
|
43
|
+
<li data-breadcrumb="|"><a href=#>About</a></li>
|
44
|
+
<li data-breadcrumb="|"><a href=#>The Board</a></li>
|
45
|
+
<li data-breadcrumb="|" class=current><a href=#>Directors</a></li>
|
46
|
+
</ol>
|
47
|
+
*
|
48
|
+
*/
|
49
|
+
.breadcrumb > li + li[data-breadcrumb]:before{
|
50
|
+
content:attr(data-breadcrumb)" ";
|
51
|
+
}
|
52
|
+
|
53
|
+
|
54
|
+
/**
|
55
|
+
* Denote the root of the tree.
|
56
|
+
*/
|
57
|
+
.breadcrumb__root{
|
58
|
+
font-weight:bold;
|
59
|
+
}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$BUTTONS
|
3
|
+
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* Basic button structural styling. Extend in your theme stylesheet.
|
6
|
+
*
|
7
|
+
* Demo: jsfiddle.net/inuitcss/RqHcp
|
8
|
+
*
|
9
|
+
*/
|
10
|
+
.btn{
|
11
|
+
font:inherit;
|
12
|
+
cursor:pointer;
|
13
|
+
border:none;
|
14
|
+
display:inline-block;
|
15
|
+
margin: 0;
|
16
|
+
line-height:1;
|
17
|
+
/**
|
18
|
+
* Set padding in ems so we can change the size of a button by merely
|
19
|
+
* altering its `font-size`.
|
20
|
+
*/
|
21
|
+
padding:0.5em;
|
22
|
+
}
|
23
|
+
.btn,
|
24
|
+
.btn:hover{
|
25
|
+
text-decoration:none;
|
26
|
+
}
|
27
|
+
|
28
|
+
/**
|
29
|
+
* Basic button modifiers
|
30
|
+
*/
|
31
|
+
.btn--sml { font-size: .75em; }
|
32
|
+
.btn--lrg { font-size:1.50em; }
|
33
|
+
|
34
|
+
.btn--full{
|
35
|
+
display:block;
|
36
|
+
text-align:center;
|
37
|
+
/**
|
38
|
+
* The following is so that `.btn-full` works properly on `input`s as well
|
39
|
+
* as `a`s.
|
40
|
+
*/
|
41
|
+
padding-right:0;
|
42
|
+
padding-left: 0;
|
43
|
+
width:100%;
|
44
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$COLUMNS
|
3
|
+
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* Here we can set elements in columns of text using CSS3, e.g.:
|
6
|
+
*
|
7
|
+
<p class=text-cols--2>
|
8
|
+
*
|
9
|
+
* Demo: jsfiddle.net/inuitcss/E26Yd
|
10
|
+
*
|
11
|
+
*/
|
12
|
+
%text-cols{
|
13
|
+
@include vendor(column-gap, $base-spacing-unit);
|
14
|
+
}
|
15
|
+
.text-cols--2 { @extend %text-cols; @include vendor(column-count, 2); }
|
16
|
+
.text-cols--3 { @extend %text-cols; @include vendor(column-count, 3); }
|
17
|
+
.text-cols--4 { @extend %text-cols; @include vendor(column-count, 4); }
|
18
|
+
.text-cols--5 { @extend %text-cols; @include vendor(column-count, 5); }
|
@@ -0,0 +1,51 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$FLEXBOX
|
3
|
+
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* Until we can utilise flexbox natively we can kinda, sorta, attempt to emulate
|
6
|
+
* it, in a way... e.g.:
|
7
|
+
*
|
8
|
+
<header class=flexbox>
|
9
|
+
|
10
|
+
<div class=flexbox__item>
|
11
|
+
<b>Welcome to</b>
|
12
|
+
</div>
|
13
|
+
|
14
|
+
<div class=flexbox__item>
|
15
|
+
<img src="//csswizardry.com/inuitcss/img/logo.jpg" alt="inuit.css">
|
16
|
+
</div>
|
17
|
+
|
18
|
+
</header>
|
19
|
+
*
|
20
|
+
* We can also combine our grid system classes with `.flexbox__item` classes,
|
21
|
+
* e.g.:
|
22
|
+
*
|
23
|
+
<div class=flexbox>
|
24
|
+
<div class="flexbox__item one-quarter">
|
25
|
+
</div>
|
26
|
+
<div class="flexbox__item three-quarters">
|
27
|
+
</div>
|
28
|
+
</div>
|
29
|
+
*
|
30
|
+
* It’s pretty poorly named I’m afraid, but it works…
|
31
|
+
*
|
32
|
+
* Demo: jsfiddle.net/inuitcss/ufUh2
|
33
|
+
*
|
34
|
+
*/
|
35
|
+
.flexbox{
|
36
|
+
display:table;
|
37
|
+
width:100%;
|
38
|
+
}
|
39
|
+
|
40
|
+
/**
|
41
|
+
* Nasty hack to circumvent Modernizr conflicts.
|
42
|
+
*/
|
43
|
+
html.flexbox{
|
44
|
+
display:block;
|
45
|
+
width:auto;
|
46
|
+
}
|
47
|
+
|
48
|
+
.flexbox__item{
|
49
|
+
display:table-cell;
|
50
|
+
vertical-align:middle;
|
51
|
+
}
|
@@ -0,0 +1,59 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$FLYOUT
|
3
|
+
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* Flyouts are pieces of content that fly out of a parent when said parent is
|
6
|
+
* hovered. They typically appear bottom-left of the parent.
|
7
|
+
*
|
8
|
+
<div class=flyout>
|
9
|
+
Foo
|
10
|
+
<div class=flyout__content>
|
11
|
+
<h1>Lorem</h1>
|
12
|
+
<p>Ipsum</p>
|
13
|
+
</div>
|
14
|
+
</div>
|
15
|
+
*
|
16
|
+
* Extend these objects in your theme stylesheet.
|
17
|
+
*
|
18
|
+
* Demo: jsfiddle.net/inuitcss/B52HG
|
19
|
+
*
|
20
|
+
*/
|
21
|
+
.flyout,
|
22
|
+
.flyout--alt{
|
23
|
+
position:relative;
|
24
|
+
overflow:hidden;
|
25
|
+
}
|
26
|
+
.flyout__content{
|
27
|
+
/**
|
28
|
+
* Position the flyouts off-screen. This is typically better than
|
29
|
+
* `display:none;`.
|
30
|
+
*/
|
31
|
+
position:absolute;
|
32
|
+
top:100%;
|
33
|
+
left:-99999px;
|
34
|
+
}
|
35
|
+
|
36
|
+
/**
|
37
|
+
* Bring the flyouts into view when you hover their parents.
|
38
|
+
* Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’
|
39
|
+
* (`.flyout--alt`).
|
40
|
+
*/
|
41
|
+
.flyout:hover,
|
42
|
+
.flyout--alt:hover{
|
43
|
+
overflow:visible;
|
44
|
+
}
|
45
|
+
|
46
|
+
/**
|
47
|
+
* Regular flyouts sit all the way from the top, flush left.
|
48
|
+
*/
|
49
|
+
.flyout:hover > .flyout__content{
|
50
|
+
left:0;
|
51
|
+
}
|
52
|
+
|
53
|
+
/**
|
54
|
+
* Alternative flyouts sit all the way from the left, flush top.
|
55
|
+
*/
|
56
|
+
.flyout--alt:hover > .flyout__content{
|
57
|
+
top:0;
|
58
|
+
left:100%;
|
59
|
+
}
|
@@ -0,0 +1,54 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$GREYBOX
|
3
|
+
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* Quickly throw together greybox wireframes. Use in conjunction with other
|
6
|
+
* inuit.css objects to create simple greybox prototypes, e.g.:
|
7
|
+
*
|
8
|
+
<div class="island greybox greybox--medium">Header</div>
|
9
|
+
|
10
|
+
<ul class="nav nav--fit nav--block greybox">
|
11
|
+
<li><a href=#>Home</a></li>
|
12
|
+
<li><a href=#>About</a></li>
|
13
|
+
<li><a href=#>Portfolio</a></li>
|
14
|
+
<li><a href=#>Contact</a></li>
|
15
|
+
</ul>
|
16
|
+
*
|
17
|
+
* The beauty of combining the greyboxing with inuit.css objects is that any
|
18
|
+
* prototyping can quickly be converted into/used as production code.
|
19
|
+
*
|
20
|
+
* For a more complete prototyping framework, consider Adam Whitcroft’s Proto:
|
21
|
+
* adamwhitcroft.com/proto
|
22
|
+
*
|
23
|
+
* Demo: jsfiddle.net/inuitcss/qCXfh/
|
24
|
+
*
|
25
|
+
*/
|
26
|
+
.greybox,
|
27
|
+
.graybox{
|
28
|
+
@include font-size(12px);
|
29
|
+
font-family:sans-serif;
|
30
|
+
text-align:center;
|
31
|
+
background-color:rgba(0,0,0,0.2);
|
32
|
+
color:#fff;
|
33
|
+
}
|
34
|
+
.greybox a,
|
35
|
+
.graybox a{
|
36
|
+
color:#fff;
|
37
|
+
text-decoration:underline;
|
38
|
+
}
|
39
|
+
|
40
|
+
|
41
|
+
/**
|
42
|
+
* All greyboxes will occupy 100% of their parent’s width, but to alter their
|
43
|
+
* heights we apply incrementally larger line-heights:
|
44
|
+
*/
|
45
|
+
.greybox--small,
|
46
|
+
.graybox--small { line-height: 2 * $base-line-height; }
|
47
|
+
.greybox--medium,
|
48
|
+
.graybox--medium { line-height: 4 * $base-line-height; }
|
49
|
+
.greybox--large,
|
50
|
+
.graybox--large { line-height: 8 * $base-line-height; }
|
51
|
+
.greybox--huge,
|
52
|
+
.graybox--huge { line-height:16 * $base-line-height; }
|
53
|
+
.greybox--gigantic,
|
54
|
+
.graybox--gigantic { line-height:32 * $base-line-height; }
|
@@ -0,0 +1,99 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$GRIDS
|
3
|
+
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* Fluid and nestable grid system, e.g.:
|
6
|
+
*
|
7
|
+
<div class=gw>
|
8
|
+
|
9
|
+
<div class="g one-third">
|
10
|
+
<p>One third grid</p>
|
11
|
+
</div>
|
12
|
+
|
13
|
+
<div class="g two-thirds">
|
14
|
+
<p>Two thirds grid</p>
|
15
|
+
</div>
|
16
|
+
|
17
|
+
<div class="g one-half">
|
18
|
+
<p>One half grid</p>
|
19
|
+
</div>
|
20
|
+
|
21
|
+
<div class="g one-quarter">
|
22
|
+
<p>One quarter grid</p>
|
23
|
+
</div>
|
24
|
+
|
25
|
+
<div class="g one-quarter">
|
26
|
+
<p>One quarter grid</p>
|
27
|
+
</div>
|
28
|
+
|
29
|
+
</div>
|
30
|
+
*
|
31
|
+
* Demo: jsfiddle.net/inuitcss/CLYUC
|
32
|
+
*
|
33
|
+
*/
|
34
|
+
|
35
|
+
|
36
|
+
/**
|
37
|
+
* Grid wrapper
|
38
|
+
*
|
39
|
+
* Shorthand and verbose
|
40
|
+
*/
|
41
|
+
.gw,
|
42
|
+
.grid-wrapper{
|
43
|
+
/**
|
44
|
+
* Negative margin to negate the padding on the first grid child.
|
45
|
+
*/
|
46
|
+
margin-left:-$base-spacing-unit;
|
47
|
+
/**
|
48
|
+
* The following declarations allow us to use the `.gw` class on lists.
|
49
|
+
*/
|
50
|
+
list-style:none;
|
51
|
+
margin-bottom:0;
|
52
|
+
@extend .cf;
|
53
|
+
}
|
54
|
+
|
55
|
+
|
56
|
+
/**
|
57
|
+
* Reverse grid order
|
58
|
+
*
|
59
|
+
<div class="gw gw--rev">
|
60
|
+
|
61
|
+
<div class="g one-third">
|
62
|
+
<p>Appears on the right</p>
|
63
|
+
</div>
|
64
|
+
|
65
|
+
<div class="g two-thirds">
|
66
|
+
<p>Appears on the left</p>
|
67
|
+
</div>
|
68
|
+
|
69
|
+
</div>
|
70
|
+
*
|
71
|
+
*/
|
72
|
+
.gw--rev > .g,
|
73
|
+
.grid-wrapper--rev > .grid{
|
74
|
+
float:right;
|
75
|
+
}
|
76
|
+
|
77
|
+
|
78
|
+
/**
|
79
|
+
* Very infrequently occuring grid wrappers as children of grid wrappers.
|
80
|
+
*/
|
81
|
+
.gw > .gw,
|
82
|
+
.grid-wrapper > .grid-wrapper{
|
83
|
+
margin-left:0;
|
84
|
+
}
|
85
|
+
|
86
|
+
|
87
|
+
/**
|
88
|
+
* Grid
|
89
|
+
*
|
90
|
+
* Shorthand and verbose
|
91
|
+
*/
|
92
|
+
.g,
|
93
|
+
.grid{
|
94
|
+
float:left;
|
95
|
+
padding-left:$base-spacing-unit;
|
96
|
+
@if $global-border-box == false{
|
97
|
+
@include vendor(box-sizing, border-box);
|
98
|
+
}
|
99
|
+
}
|