compass-inuit 4.1.1 → 4.1.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/README.md +2 -12
- data/stylesheets/partials/_base.scss +8 -8
- data/stylesheets/partials/_generic.scss +7 -7
- data/stylesheets/partials/_objects.scss +18 -12
- data/stylesheets/partials/base/_code.scss +8 -4
- data/stylesheets/partials/base/_forms.scss +47 -14
- data/stylesheets/partials/base/_headings.scss +3 -1
- data/stylesheets/partials/base/_links.scss +22 -8
- data/stylesheets/partials/base/_lists.scss +5 -3
- data/stylesheets/partials/base/_main.scss +3 -2
- data/stylesheets/partials/base/_paragraphs.scss +2 -2
- data/stylesheets/partials/base/_quotes.scss +10 -7
- data/stylesheets/partials/base/_smallprint.scss +2 -4
- data/stylesheets/partials/base/_tables.scss +32 -19
- data/stylesheets/partials/generic/_clearfix.scss +3 -1
- data/stylesheets/partials/generic/_debug.scss +168 -0
- data/stylesheets/partials/generic/_helper.scss +15 -8
- data/stylesheets/partials/generic/_mixins.scss +58 -4
- data/stylesheets/partials/generic/_pull.scss +91 -0
- data/stylesheets/partials/generic/_push.scss +91 -0
- data/stylesheets/partials/generic/_reset.scss +20 -1
- data/stylesheets/partials/generic/_shared.scss +14 -3
- data/stylesheets/partials/generic/_widths.scss +95 -0
- data/stylesheets/partials/objects/_block-list.scss +12 -8
- data/stylesheets/partials/objects/_breadcrumb.scss +59 -0
- data/stylesheets/partials/objects/_buttons.scss +3 -0
- data/stylesheets/partials/objects/_columns.scss +7 -11
- data/stylesheets/partials/objects/_complex-link.scss +1 -1
- data/stylesheets/partials/objects/_flexbox.scss +13 -1
- data/stylesheets/partials/objects/_flyout.scss +4 -2
- data/stylesheets/partials/objects/_greybox.scss +54 -0
- data/stylesheets/partials/objects/_grids-ie7.scss +47 -0
- data/stylesheets/partials/objects/_grids.scss +34 -91
- data/stylesheets/partials/objects/_icon-text.scss +7 -7
- data/stylesheets/partials/objects/_island.scss +2 -1
- data/stylesheets/partials/objects/_lozenges.scss +21 -14
- data/stylesheets/partials/objects/_matrix.scss +16 -10
- data/stylesheets/partials/objects/_media.scss +2 -1
- data/stylesheets/partials/objects/_nav.scss +98 -16
- data/stylesheets/partials/objects/_options.scss +39 -0
- data/stylesheets/partials/objects/_pagination.scss +1 -1
- data/stylesheets/partials/objects/_rules.scss +61 -0
- data/stylesheets/partials/objects/_split.scss +2 -2
- data/stylesheets/partials/objects/_sprite.scss +30 -15
- data/stylesheets/partials/objects/_stats.scss +45 -0
- data/stylesheets/partials/objects/_this-or-this.scss +6 -5
- data/templates/project/config.rb +5 -0
- data/templates/project/index.html +55 -0
- data/templates/project/manifest.rb +9 -2
- data/templates/project/sass/_vars.scss +68 -0
- data/templates/project/{your-project.scss → sass/your-project.scss} +15 -1
- data/templates/project/watch.sh +12 -0
- metadata +18 -5
- data/templates/project/_vars.scss +0 -38
@@ -3,49 +3,54 @@
|
|
3
3
|
\*------------------------------------*/
|
4
4
|
/**
|
5
5
|
* Create a grid of items out of a single list, e.g.:
|
6
|
-
*
|
7
|
-
<ul class="matrix
|
6
|
+
*
|
7
|
+
<ul class="matrix three-cols">
|
8
8
|
<li class=all-cols>Lorem</li>
|
9
9
|
<li>Ipsum <a href=#>dolor</a></li>
|
10
10
|
<li><a href=# class=matrix__link>Sit</a></li>
|
11
11
|
<li>Amet</li>
|
12
12
|
<li class=all-cols>Consectetuer</li>
|
13
13
|
</ul>
|
14
|
-
*
|
14
|
+
*
|
15
15
|
* Extend this object in your theme stylesheet.
|
16
16
|
*
|
17
17
|
* Demo: jsfiddle.net/inuitcss/Y2zrU
|
18
18
|
*
|
19
19
|
*/
|
20
|
-
.matrix
|
21
|
-
|
20
|
+
.matrix{
|
21
|
+
|
22
|
+
&,
|
23
|
+
> li{
|
22
24
|
border:0 solid #ccc; /* Override this color in your theme stylesheet */
|
23
25
|
}
|
26
|
+
}
|
24
27
|
.matrix{
|
25
28
|
list-style:none;
|
26
29
|
margin-left:0;
|
27
30
|
border-top-width: 1px;
|
28
31
|
border-left-width:1px;
|
29
32
|
@extend .cf;
|
30
|
-
|
31
|
-
|
33
|
+
|
34
|
+
> li{
|
32
35
|
padding:$half-spacing-unit +px;
|
33
36
|
float:left;
|
34
37
|
border-right-width: 1px;
|
35
38
|
border-bottom-width:1px;
|
36
39
|
@include vendor(box-sizing, border-box);
|
37
40
|
}
|
41
|
+
}
|
38
42
|
.matrix__link{
|
39
43
|
display:block;
|
40
44
|
padding:$half-spacing-unit +px;
|
41
45
|
margin:-$half-spacing-unit +px;
|
42
46
|
}
|
43
47
|
|
48
|
+
|
44
49
|
/**
|
45
50
|
* The `.multi-list` object is a lot like the `.matrix` object only without the
|
46
51
|
* blocky borders and padding.
|
47
|
-
*
|
48
|
-
<ul class="multi-list
|
52
|
+
*
|
53
|
+
<ul class="multi-list four-cols">
|
49
54
|
<li>Lorem</li>
|
50
55
|
<li>Ipsum</li>
|
51
56
|
<li>Dolor</li>
|
@@ -64,6 +69,7 @@
|
|
64
69
|
float:left;
|
65
70
|
}
|
66
71
|
|
72
|
+
|
67
73
|
/**
|
68
74
|
* Apply these classes alongside the `.matrix` or `.multi-list` classes on
|
69
75
|
* lists to determine how wide their columns are.
|
@@ -87,4 +93,4 @@
|
|
87
93
|
.matrix > .all-cols,
|
88
94
|
.multi-list > .all-cols{
|
89
95
|
width:100%;
|
90
|
-
}
|
96
|
+
}
|
@@ -5,7 +5,7 @@
|
|
5
5
|
* Place any image- and text-like content side-by-side, as per:
|
6
6
|
* stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
|
7
7
|
* E.g.:
|
8
|
-
*
|
8
|
+
*
|
9
9
|
<div class=media>
|
10
10
|
<img src=http://placekitten.com/200/300 alt="" class=media__img>
|
11
11
|
<p class=media__body>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
|
@@ -44,6 +44,7 @@
|
|
44
44
|
margin-bottom:0;
|
45
45
|
}
|
46
46
|
|
47
|
+
|
47
48
|
/**
|
48
49
|
* `.img`s in `.islet`s need an appropriately sized margin.
|
49
50
|
*/
|
@@ -5,7 +5,7 @@
|
|
5
5
|
* Nav abstraction as per: csswizardry.com/2011/09/the-nav-abstraction
|
6
6
|
* When used on an `ol` or `ul`, this class throws the list into horizontal mode
|
7
7
|
* e.g.:
|
8
|
-
*
|
8
|
+
*
|
9
9
|
<ul class=nav>
|
10
10
|
<li><a href=#>Home</a></li>
|
11
11
|
<li><a href=#>About</a></li>
|
@@ -20,43 +20,125 @@
|
|
20
20
|
list-style:none;
|
21
21
|
margin-left:0;
|
22
22
|
@extend .cf;
|
23
|
-
|
24
|
-
|
25
|
-
|
23
|
+
|
24
|
+
> li{
|
25
|
+
|
26
|
+
&,
|
27
|
+
> a{
|
26
28
|
display:inline-block;
|
27
29
|
*display:inline;
|
28
30
|
zoom:1;
|
29
31
|
}
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
30
35
|
|
31
36
|
/**
|
32
|
-
* `.stacked` extends `.nav` and throws the list into vertical mode, e.g.:
|
33
|
-
*
|
34
|
-
<ul class="nav
|
37
|
+
* `.nav--stacked` extends `.nav` and throws the list into vertical mode, e.g.:
|
38
|
+
*
|
39
|
+
<ul class="nav nav--stacked">
|
35
40
|
<li><a href=#>Home</a></li>
|
36
41
|
<li><a href=#>About</a></li>
|
37
42
|
<li><a href=#>Portfolio</a></li>
|
38
43
|
<li><a href=#>Contact</a></li>
|
39
44
|
</ul>
|
40
|
-
*
|
45
|
+
*
|
41
46
|
*/
|
42
|
-
|
47
|
+
.nav--stacked{
|
48
|
+
|
49
|
+
> li{
|
43
50
|
display:list-item;
|
44
|
-
|
45
|
-
|
51
|
+
|
52
|
+
> a{
|
46
53
|
display:block;
|
47
54
|
}
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
48
58
|
|
49
59
|
/**
|
50
|
-
* `.banner
|
51
|
-
*
|
52
|
-
<ul class="nav
|
60
|
+
* `.nav--banner` extends `.nav` and centres the list, e.g.:
|
61
|
+
*
|
62
|
+
<ul class="nav nav--banner">
|
53
63
|
<li><a href=#>Home</a></li>
|
54
64
|
<li><a href=#>About</a></li>
|
55
65
|
<li><a href=#>Portfolio</a></li>
|
56
66
|
<li><a href=#>Contact</a></li>
|
57
67
|
</ul>
|
58
|
-
*
|
68
|
+
*
|
59
69
|
*/
|
60
70
|
.nav--banner{
|
61
71
|
text-align:center;
|
62
|
-
}
|
72
|
+
}
|
73
|
+
|
74
|
+
|
75
|
+
/**
|
76
|
+
* Give nav links a big, blocky hit area. Extends `.nav` and needs whitespace
|
77
|
+
* caused by `inline-block` elements collapsing e.g.:
|
78
|
+
*
|
79
|
+
<ul class="nav nav--block">
|
80
|
+
<li><a href=#>Home</a></li><!--
|
81
|
+
--><li><a href=#>About</a></li><!--
|
82
|
+
--><li><a href=#>Portfolio</a></li><!--
|
83
|
+
--><li><a href=#>Contact</a></li>
|
84
|
+
</ul>
|
85
|
+
*
|
86
|
+
*/
|
87
|
+
.nav--block{
|
88
|
+
line-height:1;
|
89
|
+
|
90
|
+
> li{
|
91
|
+
|
92
|
+
> a{
|
93
|
+
padding:$half-spacing-unit +px;
|
94
|
+
}
|
95
|
+
}
|
96
|
+
}
|
97
|
+
|
98
|
+
|
99
|
+
/**
|
100
|
+
* Force a nav to occupy 100% of the available width of its parent. Extends
|
101
|
+
* `.nav`, e.g.:
|
102
|
+
*
|
103
|
+
<ul class="nav nav--fit">
|
104
|
+
<li><a href=#>Home</a></li>
|
105
|
+
<li><a href=#>About</a></li>
|
106
|
+
<li><a href=#>Portfolio</a></li>
|
107
|
+
<li><a href=#>Contact</a></li>
|
108
|
+
</ul>
|
109
|
+
*
|
110
|
+
* Thanks to @pimpl for this idea!
|
111
|
+
*/
|
112
|
+
.nav--fit{
|
113
|
+
display:table;
|
114
|
+
width:100%;
|
115
|
+
|
116
|
+
> li{
|
117
|
+
display:table-cell;
|
118
|
+
|
119
|
+
> a{
|
120
|
+
display:block;
|
121
|
+
}
|
122
|
+
}
|
123
|
+
}
|
124
|
+
|
125
|
+
|
126
|
+
/**
|
127
|
+
* Make a list of keywords. Extends `.nav`, e.g.:
|
128
|
+
*
|
129
|
+
`<ul class="nav nav--keywords>`
|
130
|
+
*
|
131
|
+
*/
|
132
|
+
.nav--keywords{
|
133
|
+
|
134
|
+
> li{
|
135
|
+
|
136
|
+
&:after{
|
137
|
+
content:", ";
|
138
|
+
}
|
139
|
+
|
140
|
+
&:last-child:after{
|
141
|
+
display:none;
|
142
|
+
}
|
143
|
+
}
|
144
|
+
}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$OPTIONS
|
3
|
+
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* Link-group nav, used for displaying related options. Extends `.nav--block`
|
6
|
+
* but could also extend `.nav--fit`. Extend with colours and ‘current states’
|
7
|
+
* in your theme stylesheet.
|
8
|
+
*
|
9
|
+
<ul class="nav options">
|
10
|
+
<li><a></a></li><!--
|
11
|
+
--><li><a></a></li><!--
|
12
|
+
--><li><a></a></li><!--
|
13
|
+
--><li><a></a></li>
|
14
|
+
</ul>
|
15
|
+
*
|
16
|
+
* Demo: jsfiddle.net/inuitcss/vwfaf
|
17
|
+
*
|
18
|
+
*/
|
19
|
+
.options{
|
20
|
+
@extend .nav--block;
|
21
|
+
|
22
|
+
> li{
|
23
|
+
|
24
|
+
> a{
|
25
|
+
border:0 solid #ccc; /* Extend in your theme stylesheet */
|
26
|
+
border-width:1px;
|
27
|
+
border-left-width:0;
|
28
|
+
}
|
29
|
+
|
30
|
+
&:first-child > a{
|
31
|
+
border-left-width:1px;
|
32
|
+
border-radius:$brand-round +px 0 0 $brand-round +px;
|
33
|
+
}
|
34
|
+
|
35
|
+
&:last-child > a{
|
36
|
+
border-radius:0 $brand-round +px $brand-round +px 0;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
}
|
@@ -6,7 +6,7 @@
|
|
6
6
|
* Requires some funky commenting to collapse any white-space caused by the
|
7
7
|
* `display:inline-block;` rules.
|
8
8
|
*
|
9
|
-
<ol class="nav
|
9
|
+
<ol class="nav pagination">
|
10
10
|
<li class=pagination__first>First</li><!--
|
11
11
|
--><li class=pagination__prev>Previous</li><!--
|
12
12
|
--><li><a href=/page/1>1</a></li><!--
|
@@ -0,0 +1,61 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$RULES
|
3
|
+
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* Horizontal rules, extend `hr`.
|
6
|
+
*
|
7
|
+
* Demo: jsfiddle.net/inuitcss/L6GuZ
|
8
|
+
*
|
9
|
+
*/
|
10
|
+
.rule{
|
11
|
+
color:#ccc; /* Sets border color, extend in your theme stylesheet. */
|
12
|
+
border:none;
|
13
|
+
border-bottom-width:1px;
|
14
|
+
border-bottom-style:solid;
|
15
|
+
margin-bottom:($base-spacing-unit - 1) +px;
|
16
|
+
margin-bottom:($base-spacing-unit - 1) / $base-font-size +rem;
|
17
|
+
}
|
18
|
+
|
19
|
+
|
20
|
+
/**
|
21
|
+
* Dotted rules
|
22
|
+
*/
|
23
|
+
.rule--dotted{
|
24
|
+
border-bottom-style:dotted;
|
25
|
+
}
|
26
|
+
|
27
|
+
|
28
|
+
/**
|
29
|
+
* Dashed rules
|
30
|
+
*/
|
31
|
+
.rule--dashed{
|
32
|
+
border-bottom-style:dashed;
|
33
|
+
}
|
34
|
+
|
35
|
+
|
36
|
+
/**
|
37
|
+
* Ornamental rules. Places a § over the rule.
|
38
|
+
*/
|
39
|
+
.rule--ornament{
|
40
|
+
position:relative;
|
41
|
+
|
42
|
+
&:after{
|
43
|
+
content:"§";
|
44
|
+
position:absolute;
|
45
|
+
top: 0;
|
46
|
+
right: 0;
|
47
|
+
left: 0;
|
48
|
+
line-height:0;
|
49
|
+
text-align:center;
|
50
|
+
}
|
51
|
+
|
52
|
+
/**
|
53
|
+
* Pass in an arbitrary ornament though a data attribute, e.g.:
|
54
|
+
*
|
55
|
+
<hr class="rule rule--ornament" data-ornament="!">
|
56
|
+
*
|
57
|
+
*/
|
58
|
+
&[data-ornament]:after{
|
59
|
+
content:attr(data-ornament);
|
60
|
+
}
|
61
|
+
}
|
@@ -4,7 +4,7 @@
|
|
4
4
|
/**
|
5
5
|
* Simple split item for creating two elements floated away from one another,
|
6
6
|
* e.g.:
|
7
|
-
*
|
7
|
+
*
|
8
8
|
<dl class=split>
|
9
9
|
<dt class=split__title>Burger and fries</dt>
|
10
10
|
<dd>£5.99</dd>
|
@@ -14,7 +14,7 @@
|
|
14
14
|
<dd>£2.99</dd>
|
15
15
|
</dl>
|
16
16
|
*
|
17
|
-
<ol class="split
|
17
|
+
<ol class="split results">
|
18
18
|
<li class=first><b class=split__title>1st place</b> Bob</li>
|
19
19
|
<li class=second><b class=split__title>2nd place</b> Lilly</li>
|
20
20
|
<li class=third><b class=split__title>3rd place</b> Ted</li>
|
@@ -4,21 +4,24 @@
|
|
4
4
|
/**
|
5
5
|
* Giving an element a class of `.s` will throw it into ‘sprite’ mode and apply
|
6
6
|
* a background image e.g.:
|
7
|
-
*
|
8
|
-
<a class="s
|
9
|
-
*
|
7
|
+
*
|
8
|
+
<a class="s s--question-mark">More info…</a>
|
9
|
+
*
|
10
10
|
* or
|
11
|
-
*
|
12
|
-
<a href=#><i class="s
|
11
|
+
*
|
12
|
+
<a href=#><i class="s s--question-mark"></i> Help and FAQ</a>
|
13
13
|
*
|
14
14
|
* Giving an element a class of `.i` will throw it into ‘icon’ mode and will
|
15
|
-
* not add a background, but should be used for icon fonts
|
15
|
+
* not add a background, but should be used for icon fonts and is populated
|
16
|
+
* through a `data-char` attribute and the `:after` pseudo-element, e.g.:
|
16
17
|
*
|
17
|
-
<a href=# class=
|
18
|
+
<a href=# class=i data-char="C">Add to favorites</a>
|
18
19
|
*
|
19
20
|
* or
|
20
21
|
*
|
21
|
-
<a href=#><i class=
|
22
|
+
<a href=#><i class=i data-char="C"></i> View your favourites</a>
|
23
|
+
*
|
24
|
+
* Where ‘C’ might map to a star in your particular font.
|
22
25
|
*
|
23
26
|
* These all require extension in your theme stylesheet.
|
24
27
|
*
|
@@ -48,15 +51,27 @@
|
|
48
51
|
background-image:url(/path/to/your/sprite.png);
|
49
52
|
vertical-align:middle;
|
50
53
|
top:-1px;
|
51
|
-
|
52
|
-
|
53
|
-
*
|
54
|
-
*
|
54
|
+
|
55
|
+
/*
|
56
|
+
* H5BP method image replacement:
|
57
|
+
* github.com/h5bp/html5-boilerplate/commit/adecc5da035d6d76b77e3fa95c6abde841073da2
|
55
58
|
*/
|
56
|
-
text-indent:100%;
|
57
|
-
white-space:nowrap;
|
58
59
|
overflow:hidden;
|
60
|
+
*text-indent:-9999px;
|
61
|
+
|
62
|
+
&:before{
|
63
|
+
content:"";
|
64
|
+
display:block;
|
65
|
+
width:0;
|
66
|
+
height:100%;
|
67
|
+
}
|
59
68
|
}
|
69
|
+
|
70
|
+
|
60
71
|
.i{
|
61
72
|
vertical-align:top;
|
62
|
-
|
73
|
+
|
74
|
+
&:after{
|
75
|
+
content:attr(data-char);
|
76
|
+
}
|
77
|
+
}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
/*------------------------------------*\
|
2
|
+
$STATS
|
3
|
+
\*------------------------------------*/
|
4
|
+
/**
|
5
|
+
* Simple object to display key–value statistic-like information, e.g.:
|
6
|
+
*
|
7
|
+
<div class=stat-group>
|
8
|
+
<dl class=stat>
|
9
|
+
<dt class=stat__title>Tweets</dt>
|
10
|
+
<dd class=stat__value>27,740</dd>
|
11
|
+
</dl>
|
12
|
+
|
13
|
+
<dl class=stat>
|
14
|
+
<dt class=stat__title>Following</dt>
|
15
|
+
<dd class=stat__value>11,529</dd>
|
16
|
+
</dl>
|
17
|
+
|
18
|
+
<dl class=stat>
|
19
|
+
<dt class=stat__title>Followers</dt>
|
20
|
+
<dd class=stat__value>12,105</dd>
|
21
|
+
</dl>
|
22
|
+
</div>
|
23
|
+
*
|
24
|
+
* Demo: jsfiddle.net/inuitcss/Bpwu6
|
25
|
+
*
|
26
|
+
*/
|
27
|
+
.stat-group{
|
28
|
+
@extend .cf;
|
29
|
+
margin-left:-$base-spacing-unit +px;
|
30
|
+
}
|
31
|
+
.stat{
|
32
|
+
float:left;
|
33
|
+
margin-left:$base-spacing-unit +px;
|
34
|
+
display:-webkit-box;
|
35
|
+
display: -moz-box;
|
36
|
+
display: box;
|
37
|
+
@include vendor(box-orient, vertical);
|
38
|
+
}
|
39
|
+
.stat__title{
|
40
|
+
@include vendor(box-ordinal-group, 2);
|
41
|
+
}
|
42
|
+
.stat__value{
|
43
|
+
margin-left:0;
|
44
|
+
@include vendor(box-ordinal-group, 1);
|
45
|
+
}
|