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.
Files changed (54) hide show
  1. data/README.md +2 -12
  2. data/stylesheets/partials/_base.scss +8 -8
  3. data/stylesheets/partials/_generic.scss +7 -7
  4. data/stylesheets/partials/_objects.scss +18 -12
  5. data/stylesheets/partials/base/_code.scss +8 -4
  6. data/stylesheets/partials/base/_forms.scss +47 -14
  7. data/stylesheets/partials/base/_headings.scss +3 -1
  8. data/stylesheets/partials/base/_links.scss +22 -8
  9. data/stylesheets/partials/base/_lists.scss +5 -3
  10. data/stylesheets/partials/base/_main.scss +3 -2
  11. data/stylesheets/partials/base/_paragraphs.scss +2 -2
  12. data/stylesheets/partials/base/_quotes.scss +10 -7
  13. data/stylesheets/partials/base/_smallprint.scss +2 -4
  14. data/stylesheets/partials/base/_tables.scss +32 -19
  15. data/stylesheets/partials/generic/_clearfix.scss +3 -1
  16. data/stylesheets/partials/generic/_debug.scss +168 -0
  17. data/stylesheets/partials/generic/_helper.scss +15 -8
  18. data/stylesheets/partials/generic/_mixins.scss +58 -4
  19. data/stylesheets/partials/generic/_pull.scss +91 -0
  20. data/stylesheets/partials/generic/_push.scss +91 -0
  21. data/stylesheets/partials/generic/_reset.scss +20 -1
  22. data/stylesheets/partials/generic/_shared.scss +14 -3
  23. data/stylesheets/partials/generic/_widths.scss +95 -0
  24. data/stylesheets/partials/objects/_block-list.scss +12 -8
  25. data/stylesheets/partials/objects/_breadcrumb.scss +59 -0
  26. data/stylesheets/partials/objects/_buttons.scss +3 -0
  27. data/stylesheets/partials/objects/_columns.scss +7 -11
  28. data/stylesheets/partials/objects/_complex-link.scss +1 -1
  29. data/stylesheets/partials/objects/_flexbox.scss +13 -1
  30. data/stylesheets/partials/objects/_flyout.scss +4 -2
  31. data/stylesheets/partials/objects/_greybox.scss +54 -0
  32. data/stylesheets/partials/objects/_grids-ie7.scss +47 -0
  33. data/stylesheets/partials/objects/_grids.scss +34 -91
  34. data/stylesheets/partials/objects/_icon-text.scss +7 -7
  35. data/stylesheets/partials/objects/_island.scss +2 -1
  36. data/stylesheets/partials/objects/_lozenges.scss +21 -14
  37. data/stylesheets/partials/objects/_matrix.scss +16 -10
  38. data/stylesheets/partials/objects/_media.scss +2 -1
  39. data/stylesheets/partials/objects/_nav.scss +98 -16
  40. data/stylesheets/partials/objects/_options.scss +39 -0
  41. data/stylesheets/partials/objects/_pagination.scss +1 -1
  42. data/stylesheets/partials/objects/_rules.scss +61 -0
  43. data/stylesheets/partials/objects/_split.scss +2 -2
  44. data/stylesheets/partials/objects/_sprite.scss +30 -15
  45. data/stylesheets/partials/objects/_stats.scss +45 -0
  46. data/stylesheets/partials/objects/_this-or-this.scss +6 -5
  47. data/templates/project/config.rb +5 -0
  48. data/templates/project/index.html +55 -0
  49. data/templates/project/manifest.rb +9 -2
  50. data/templates/project/sass/_vars.scss +68 -0
  51. data/templates/project/{your-project.scss → sass/your-project.scss} +15 -1
  52. data/templates/project/watch.sh +12 -0
  53. metadata +18 -5
  54. data/templates/project/_vars.scss +0 -38
@@ -25,6 +25,9 @@
25
25
  text-decoration:none;
26
26
  }
27
27
 
28
+ /**
29
+ * Basic button modifiers
30
+ */
28
31
  .btn--sml { font-size: .75em; }
29
32
  .btn--lrg { font-size:1.50em; }
30
33
 
@@ -3,20 +3,16 @@
3
3
  \*------------------------------------*/
4
4
  /**
5
5
  * Here we can set elements in columns of text using CSS3, e.g.:
6
- *
7
- <p class=text-cols-2>
6
+ *
7
+ <p class=text-cols--2>
8
8
  *
9
9
  * Demo: jsfiddle.net/inuitcss/E26Yd
10
10
  *
11
11
  */
12
- .text-cols,
13
- .text-cols--2,
14
- .text-cols--3,
15
- .text-cols--4,
16
- .text-cols--5{
12
+ %text-cols{
17
13
  @include vendor(column-gap, $base-spacing-unit +px);
18
14
  }
19
- .text-cols--2 { @include vendor(column-count, 2); }
20
- .text-cols--3 { @include vendor(column-count, 3); }
21
- .text-cols--4 { @include vendor(column-count, 4); }
22
- .text-cols--5 { @include vendor(column-count, 5); }
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); }
@@ -8,7 +8,7 @@
8
8
  * Add hover behaviour to only slected items within links, e.g.:
9
9
  *
10
10
  <a href=log-in class=complex-link>
11
- <i class="s s--user"></i>
11
+ <i class="s s--user"></i>
12
12
  <span class=complex-link__target>Log in</span>
13
13
  </a>
14
14
  *
@@ -28,12 +28,24 @@
28
28
  </div>
29
29
  *
30
30
  * It’s pretty poorly named I’m afraid, but it works…
31
+ *
32
+ * Demo: jsfiddle.net/inuitcss/ufUh2
33
+ *
31
34
  */
32
35
  .flexbox{
33
36
  display:table;
34
37
  width:100%;
35
38
  }
39
+
40
+ /**
41
+ * Nasty hack to circumvent Modernizr conflicts.
42
+ */
43
+ html.flexbox{
44
+ display:block;
45
+ width:auto;
46
+ }
47
+
36
48
  .flexbox__item{
37
49
  display:table-cell;
38
50
  vertical-align:middle;
39
- }
51
+ }
@@ -4,7 +4,7 @@
4
4
  /**
5
5
  * Flyouts are pieces of content that fly out of a parent when said parent is
6
6
  * hovered. They typically appear bottom-left of the parent.
7
- *
7
+ *
8
8
  <div class=flyout>
9
9
  Foo
10
10
  <div class=flyout__content>
@@ -12,7 +12,7 @@
12
12
  <p>Ipsum</p>
13
13
  </div>
14
14
  </div>
15
- *
15
+ *
16
16
  * Extend these objects in your theme stylesheet.
17
17
  *
18
18
  * Demo: jsfiddle.net/inuitcss/B52HG
@@ -42,12 +42,14 @@
42
42
  .flyout--alt:hover{
43
43
  overflow:visible;
44
44
  }
45
+
45
46
  /**
46
47
  * Regular flyouts sit all the way from the top, flush left.
47
48
  */
48
49
  .flyout:hover > .flyout__content{
49
50
  left:0;
50
51
  }
52
+
51
53
  /**
52
54
  * Alternative flyouts sit all the way from the left, flush top.
53
55
  */
@@ -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(12);
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) +px; }
47
+ .greybox--medium,
48
+ .graybox--medium { line-height: (4 * $base-line-height) +px; }
49
+ .greybox--large,
50
+ .graybox--large { line-height: (8 * $base-line-height) +px; }
51
+ .greybox--huge,
52
+ .graybox--huge { line-height:(16 * $base-line-height) +px; }
53
+ .greybox--gigantic,
54
+ .graybox--gigantic { line-height:(32 * $base-line-height) +px; }
@@ -0,0 +1,47 @@
1
+ /*------------------------------------*\
2
+ $GRIDS-IE7
3
+ \*------------------------------------*/
4
+ /*
5
+ * To make the grid system work properly in IE7 we need to add a little more
6
+ * markup to account for the fact that it doesn’t support `box-sizing`, e.g.:
7
+ *
8
+ <!--[if lte IE 7]><div class=ie7-grid><![endif]-->
9
+
10
+ <div class=gw>
11
+
12
+ <div class="g one-third"><div class=g__inner>
13
+ <p>Foo</p>
14
+ </div></div>
15
+
16
+ <div class="g one-third"><div class=g__inner>
17
+ <p>Bar</p>
18
+ </div></div>
19
+
20
+ <div class="g one-third"><div class=g__inner>
21
+ <p>Baz</p>
22
+ </div></div>
23
+
24
+ </div>
25
+
26
+ <!--[if lte IE 7]></div><![endif]-->
27
+ *
28
+ * Demo: jsfiddle.net/inuitcss/9Euvj
29
+ *
30
+ */
31
+ .ie7-grid{
32
+ overflow:hidden;
33
+ }
34
+ .ie7-grid .gw,
35
+ .ie7-grid .grid-wrapper{
36
+ margin-right:-$half-spacing-unit +px;
37
+ margin-left: -$half-spacing-unit +px;
38
+ }
39
+ .ie7-grid .g,
40
+ .ie7-grid .grid{
41
+ padding:0;
42
+ }
43
+ .ie7-grid .g__inner,
44
+ .ie7-grid .grid__inner{
45
+ padding-right:$half-spacing-unit +px;
46
+ padding-left: $half-spacing-unit +px;
47
+ }
@@ -3,26 +3,26 @@
3
3
  \*------------------------------------*/
4
4
  /**
5
5
  * Fluid and nestable grid system, e.g.:
6
- *
6
+ *
7
7
  <div class=gw>
8
8
 
9
- <div class="g one-third">
9
+ <div class="g one-third">
10
10
  <p>One third grid</p>
11
11
  </div>
12
12
 
13
- <div class="g two-thirds">
13
+ <div class="g two-thirds">
14
14
  <p>Two thirds grid</p>
15
15
  </div>
16
16
 
17
- <div class="g one-half">
17
+ <div class="g one-half">
18
18
  <p>One half grid</p>
19
19
  </div>
20
20
 
21
- <div class="g one-quarter">
21
+ <div class="g one-quarter">
22
22
  <p>One quarter grid</p>
23
23
  </div>
24
24
 
25
- <div class="g one-quarter">
25
+ <div class="g one-quarter">
26
26
  <p>One quarter grid</p>
27
27
  </div>
28
28
 
@@ -31,6 +31,8 @@
31
31
  * Demo: jsfiddle.net/inuitcss/CLYUC
32
32
  *
33
33
  */
34
+
35
+
34
36
  /**
35
37
  * Grid wrapper
36
38
  *
@@ -49,6 +51,30 @@
49
51
  margin-bottom:0;
50
52
  @extend .cf;
51
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
+
52
78
  /**
53
79
  * Very infrequently occuring grid wrappers as children of grid wrappers.
54
80
  */
@@ -57,6 +83,7 @@
57
83
  margin-left:0;
58
84
  }
59
85
 
86
+
60
87
  /**
61
88
  * Grid
62
89
  *
@@ -67,88 +94,4 @@
67
94
  float:left;
68
95
  padding-left:$base-spacing-unit +px;
69
96
  @include vendor(box-sizing, border-box);
70
- }
71
-
72
- /**
73
- * Grid sizes in human readable format.
74
- */
75
-
76
- /**
77
- * Whole
78
- */
79
- .one-whole { width:100%; }
80
-
81
- /**
82
- * Halves
83
- */
84
- .one-half { width:50%; }
85
-
86
- /**
87
- * Thirds
88
- */
89
- .one-third { width:33.333%; }
90
- .two-thirds { width:66.666%; }
91
-
92
- /**
93
- * Quarters
94
- */
95
- .one-quarter { width:25%; }
96
- .two-quarters { @extend .one-half; }
97
- .three-quarters { width:75%; }
98
-
99
- /**
100
- * Fifths
101
- */
102
- .one-fifth { width:20%; }
103
- .two-fifths { width:40%; }
104
- .three-fifths { width:60%; }
105
- .four-fifths { width:80%; }
106
-
107
- /**
108
- * Sixths
109
- */
110
- .one-sixth { width:16.666%; }
111
- .two-sixths { @extend .one-third; }
112
- .three-sixths { @extend .one-half; }
113
- .four-sixths { @extend .two-thirds; }
114
- .five-sixths { width:83.333%; }
115
-
116
- /**
117
- * Eighths
118
- */
119
- .one-eighth { width:12.5%; }
120
- .two-eighths { @extend .one-quarter; }
121
- .three-eighths { width:37.5%; }
122
- .four-eighths { @extend .one-half; }
123
- .five-eighths { width:62.5%; }
124
- .six-eighths { @extend .three-quarters; }
125
- .seven-eighths { width:87.5%; }
126
-
127
- /**
128
- * Tenths
129
- */
130
- .one-tenth { width:10%; }
131
- .two-tenths { @extend .one-fifth; }
132
- .three-tenths { width:30%; }
133
- .four-tenths { @extend .one-fifth; }
134
- .five-tenths { @extend .one-half; }
135
- .six-tenths { @extend .three-fifths; }
136
- .seven-tenths { width:70%; }
137
- .eight-tenths { @extend .four-fifths; }
138
- .nine-tenths { width:90%; }
139
-
140
-
141
- /**
142
- * Twelfths
143
- */
144
- .one-twelfth { width:8.333%; }
145
- .two-twelfths { @extend .one-sixth; }
146
- .three-twelfths { @extend .one-quarter; }
147
- .four-twelfths { @extend .one-third; }
148
- .five-twelfths { width:41.666% }
149
- .six-twelfths { @extend .one-half; }
150
- .seven-twelfths { width:58.333%; }
151
- .eight-twelfths { @extend .two-thirds; }
152
- .nine-twelfths { @extend .three-quarters; }
153
- .ten-twelfths { @extend .five-sixths; }
154
- .eleven-twelfths { width:91.666%; }
97
+ }
@@ -4,16 +4,15 @@
4
4
  /**
5
5
  * For text-links etc that have an icon with them. Sometimes whitespace would
6
6
  * suffice in creating a gap between the icon and text, for example:
7
- *
7
+ *
8
8
  <a href=#>
9
- <i class="s s--help"></i> Help &amp; support
9
+ <i class="s s--help"></i> Help &amp; support
10
10
  </a>
11
- *
11
+ *
12
12
  * However we will sometimes want a larger, explicity set gap:
13
13
  <a href=# class=icon-text>
14
- <i class="icon-text__icon s s--help"></i>Help &amp; support
14
+ <i class="icon-text__icon s s--help"></i>Help &amp; support
15
15
  </a>
16
- *
17
16
  *
18
17
  * Demo: jsfiddle.net/inuitcss/Q6Lbf
19
18
  *
@@ -22,15 +21,16 @@
22
21
  margin-right:8px;
23
22
  }
24
23
 
24
+
25
25
  /**
26
26
  * We can also reverse the direction of the margin for icons that appear to the
27
27
  * right of the text content, thus:
28
28
  *
29
29
  <a href=# class=icon-text--rev>
30
- Help &amp; support<i class="icon-text__icon s s--help"></i>
30
+ Help &amp; support<i class="icon-text__icon s s--help"></i>
31
31
  </a>
32
32
  *
33
33
  */
34
34
  .icon-text--rev > .icon-text__icon{
35
35
  margin-left:8px;
36
- }
36
+ }
@@ -4,7 +4,7 @@
4
4
  /**
5
5
  * Simple, boxed off content, as per: csswizardry.com/2011/10/the-island-object
6
6
  * E.g.:
7
- *
7
+ *
8
8
  <div class=island>
9
9
  I am boxed off.
10
10
  </div>
@@ -25,6 +25,7 @@
25
25
  margin-bottom:0;
26
26
  }
27
27
 
28
+
28
29
  /**
29
30
  * Just like `.island`, only smaller.
30
31
  */
@@ -2,25 +2,27 @@
2
2
  $LOZENGES
3
3
  \*------------------------------------*/
4
4
  /**
5
- * Create pill-like runs of text, e.g.:
6
- *
7
- <p>This <span class=loz>here</span> is a lozenge!</p>
8
- *
9
- <h1>This <span class=loz>here</span> is also a lozenge!</h1>
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.
10
12
  *
11
13
  * Demo: jsfiddle.net/inuitcss/N3pGm
12
- *
14
+ *
13
15
  */
14
- .loz{
16
+ .pill{
15
17
  display:inline-block;
16
18
  /**
17
19
  * These numbers set in ems mean that, at its narrowest, a lozenge will be
18
- * the same width as the 1.5 `line-height` set on the `html` element.
19
- * This allows us to use the `.loz` in any `font-size` we wish.
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.
20
22
  */
21
- min-width: 1.00em;
22
- padding-right:0.25em;
23
- padding-left: 0.25em;
23
+ min-width: ($line-height-ratio * 0.666667) +em;
24
+ padding-right:($line-height-ratio * 0.166667) +em;
25
+ padding-left: ($line-height-ratio * 0.166667) +em;
24
26
  /* =1.50em */
25
27
  text-align:center;
26
28
  background-color:#ccc; /* Override this color in your theme stylesheet */
@@ -31,5 +33,10 @@
31
33
  * overly large number; `border-radius:100%;` would create an oval on
32
34
  * non-square elements whereas we just want to round the ends of an element.
33
35
  */
34
- @include vendor(border-radius, 100px);
35
- }
36
+ border-radius:100px;
37
+ }
38
+
39
+ .loz{
40
+ @extend .pill;
41
+ border-radius:$brand-round +px;
42
+ }