polar-express 0.0.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (60) hide show
  1. data/MIT-LICENSE +19 -0
  2. data/README.md +37 -0
  3. data/lib/generators/inuitcss/install/USAGE +9 -0
  4. data/lib/generators/inuitcss/install/install_generator.rb +9 -0
  5. data/lib/generators/inuitcss/install/templates/inuit.css.scss +99 -0
  6. data/lib/polar-express.rb +6 -0
  7. data/vendor/assets/stylesheets/CHANGELOG.md +26 -0
  8. data/vendor/assets/stylesheets/CONTRIBUTING.md +42 -0
  9. data/vendor/assets/stylesheets/LICENSE +13 -0
  10. data/vendor/assets/stylesheets/README.md +367 -0
  11. data/vendor/assets/stylesheets/_defaults.scss +225 -0
  12. data/vendor/assets/stylesheets/_inuit.scss +213 -0
  13. data/vendor/assets/stylesheets/base/_code.scss +63 -0
  14. data/vendor/assets/stylesheets/base/_forms.scss +174 -0
  15. data/vendor/assets/stylesheets/base/_headings.scss +60 -0
  16. data/vendor/assets/stylesheets/base/_images.scss +73 -0
  17. data/vendor/assets/stylesheets/base/_lists.scss +19 -0
  18. data/vendor/assets/stylesheets/base/_main.scss +8 -0
  19. data/vendor/assets/stylesheets/base/_paragraphs.scss +11 -0
  20. data/vendor/assets/stylesheets/base/_quotes.scss +96 -0
  21. data/vendor/assets/stylesheets/base/_smallprint.scss +13 -0
  22. data/vendor/assets/stylesheets/base/_tables.scss +163 -0
  23. data/vendor/assets/stylesheets/component.json +5 -0
  24. data/vendor/assets/stylesheets/generic/_brand.scss +18 -0
  25. data/vendor/assets/stylesheets/generic/_clearfix.scss +15 -0
  26. data/vendor/assets/stylesheets/generic/_debug.scss +168 -0
  27. data/vendor/assets/stylesheets/generic/_helper.scss +184 -0
  28. data/vendor/assets/stylesheets/generic/_mixins.scss +328 -0
  29. data/vendor/assets/stylesheets/generic/_normalize.scss +396 -0
  30. data/vendor/assets/stylesheets/generic/_pull.scss +147 -0
  31. data/vendor/assets/stylesheets/generic/_push.scss +147 -0
  32. data/vendor/assets/stylesheets/generic/_reset.scss +80 -0
  33. data/vendor/assets/stylesheets/generic/_shared.scss +61 -0
  34. data/vendor/assets/stylesheets/generic/_widths.scss +158 -0
  35. data/vendor/assets/stylesheets/objects/_arrows.scss +147 -0
  36. data/vendor/assets/stylesheets/objects/_beautons.scss +226 -0
  37. data/vendor/assets/stylesheets/objects/_block-list.scss +44 -0
  38. data/vendor/assets/stylesheets/objects/_breadcrumb.scss +63 -0
  39. data/vendor/assets/stylesheets/objects/_columns.scss +22 -0
  40. data/vendor/assets/stylesheets/objects/_flexbox.scss +55 -0
  41. data/vendor/assets/stylesheets/objects/_flyout.scss +63 -0
  42. data/vendor/assets/stylesheets/objects/_greybox.scss +58 -0
  43. data/vendor/assets/stylesheets/objects/_grids.scss +69 -0
  44. data/vendor/assets/stylesheets/objects/_icon-text.scss +40 -0
  45. data/vendor/assets/stylesheets/objects/_island.scss +38 -0
  46. data/vendor/assets/stylesheets/objects/_link-complex.scss +32 -0
  47. data/vendor/assets/stylesheets/objects/_lozenges.scss +46 -0
  48. data/vendor/assets/stylesheets/objects/_marginalia.scss +52 -0
  49. data/vendor/assets/stylesheets/objects/_matrix.scss +89 -0
  50. data/vendor/assets/stylesheets/objects/_media.scss +60 -0
  51. data/vendor/assets/stylesheets/objects/_nav.scss +155 -0
  52. data/vendor/assets/stylesheets/objects/_options.scss +45 -0
  53. data/vendor/assets/stylesheets/objects/_pagination.scss +50 -0
  54. data/vendor/assets/stylesheets/objects/_rules.scss +65 -0
  55. data/vendor/assets/stylesheets/objects/_split.scss +39 -0
  56. data/vendor/assets/stylesheets/objects/_sprite.scss +98 -0
  57. data/vendor/assets/stylesheets/objects/_stats.scss +52 -0
  58. data/vendor/assets/stylesheets/objects/_this-or-this.scss +38 -0
  59. data/vendor/assets/stylesheets/style.scss +26 -0
  60. metadata +122 -0
@@ -0,0 +1,60 @@
1
+ /*------------------------------------*\
2
+ $HEADINGS
3
+ \*------------------------------------*/
4
+ /**
5
+ * As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css
6
+ *
7
+ * When we define a heading we also define a corresponding class to go with it.
8
+ * This allows us to apply, say, `class=alpha` to a `h3`; a double-stranded
9
+ * heading hierarchy.
10
+ */
11
+ h1,.alpha{
12
+ @include font-size($h1-size);
13
+ }
14
+ h2,.beta{
15
+ @include font-size($h2-size);
16
+ }
17
+ h3,.gamma{
18
+ @include font-size($h3-size);
19
+ }
20
+ h4,.delta{
21
+ @include font-size($h4-size);
22
+ }
23
+ h5,.epsilon{
24
+ @include font-size($h5-size);
25
+ }
26
+ h6,.zeta{
27
+ @include font-size($h6-size);
28
+ }
29
+
30
+
31
+ /**
32
+ * Heading groups and generic any-heading class.
33
+ * To target any heading of any level simply apply a class of `.hN`, e.g.:
34
+ *
35
+ <hgroup>
36
+ <h1 class=hN>inuit.css</h1>
37
+ <h2 class=hN>Best. Framework. Ever!</h2>
38
+ </hgroup>
39
+ *
40
+ */
41
+ .hN{
42
+ }
43
+ hgroup .hN{
44
+ margin-bottom:0;
45
+ }
46
+
47
+
48
+ /**
49
+ * A series of classes for setting massive type; for use in heroes, mastheads,
50
+ * promos, etc.
51
+ */
52
+ .giga{
53
+ @include font-size($giga-size);
54
+ }
55
+ .mega{
56
+ @include font-size($mega-size);
57
+ }
58
+ .kilo{
59
+ @include font-size($kilo-size);
60
+ }
@@ -0,0 +1,73 @@
1
+ /*------------------------------------*\
2
+ $IMAGES
3
+ \*------------------------------------*/
4
+ /**
5
+ * Demo: jsfiddle.net/inuitcss/yMtur
6
+ */
7
+ /**
8
+ * Fluid images.
9
+ */
10
+ img{
11
+ max-width:100%;
12
+ }
13
+
14
+
15
+ /**
16
+ * Non-fluid images if you specify `width` and/or `height` attributes.
17
+ */
18
+ img[width],
19
+ img[height]{
20
+ max-width:none;
21
+ }
22
+
23
+
24
+ /**
25
+ * Rounded images.
26
+ */
27
+ .img--round { border-radius:$brand-round; }
28
+
29
+
30
+ /**
31
+ * Image placement variations.
32
+ */
33
+ .img--right{
34
+ float:right;
35
+ margin-bottom:$base-spacing-unit;
36
+ margin-left:$base-spacing-unit;
37
+ }
38
+ .img--left{
39
+ float:left;
40
+ margin-right:$base-spacing-unit;
41
+ margin-bottom:$base-spacing-unit;
42
+ }
43
+ .img--center{
44
+ display:block;
45
+ margin-right:auto;
46
+ margin-bottom:$base-spacing-unit;
47
+ margin-left:auto;
48
+ }
49
+
50
+
51
+ /**
52
+ * Keep your images on your baseline.
53
+ *
54
+ * Please note, these will not work too nicely with fluid images and will
55
+ * distort when resized below a certain width. Use with caution.
56
+ */
57
+ .img--short{
58
+ height:5 * $base-spacing-unit;
59
+ }
60
+ .img--medium{
61
+ height:10 * $base-spacing-unit;
62
+ }
63
+ .img--tall{
64
+ height:15 * $base-spacing-unit;
65
+ }
66
+
67
+
68
+ /**
69
+ * Images in `figure` elements.
70
+ */
71
+ figure > img{
72
+ display:block;
73
+ }
@@ -0,0 +1,19 @@
1
+ /*------------------------------------*\
2
+ $LISTS
3
+ \*------------------------------------*/
4
+ /**
5
+ * Remove vertical spacing from nested lists.
6
+ */
7
+ li{
8
+ > ul,
9
+ > ol{
10
+ margin-bottom:0;
11
+ }
12
+ }
13
+
14
+ /**
15
+ * Have a numbered `ul` without the semantics implied by using an `ol`.
16
+ */
17
+ /*ul*/.numbered-list{
18
+ list-style-type:decimal;
19
+ }
@@ -0,0 +1,8 @@
1
+ /*------------------------------------*\
2
+ $MAIN
3
+ \*------------------------------------*/
4
+ html{
5
+ font:#{($base-font-size/16px)*1em}/#{$line-height-ratio} $base-font-family;
6
+ overflow-y:scroll;
7
+ min-height:100%;
8
+ }
@@ -0,0 +1,11 @@
1
+ /*------------------------------------*\
2
+ $PARAGRAPHS
3
+ \*------------------------------------*/
4
+ /**
5
+ * The `.lede` class is used to make the introductory text (usually a paragraph)
6
+ * of a document slightly larger.
7
+ */
8
+ .lede,
9
+ .lead{
10
+ @include font-size($base-font-size * 1.125);
11
+ }
@@ -0,0 +1,96 @@
1
+ /*------------------------------------*\
2
+ $QUOTES
3
+ \*------------------------------------*/
4
+ /**
5
+ * If English quotes are set in `_vars.scss`, define them here.
6
+ */
7
+ @if $english-quotes == true{
8
+ $open-quote: \201C;
9
+ $close-quote: \201D;
10
+ }
11
+
12
+
13
+ /**
14
+ * Big up @boblet: html5doctor.com/blockquote-q-cite
15
+ */
16
+
17
+ /**
18
+ * Inline quotes.
19
+ */
20
+ q{
21
+ quotes:"\2018" "\2019" "#{$open-quote}" "#{$close-quote}";
22
+
23
+ &:before{
24
+ content:"\2018";
25
+ content:open-quote;
26
+ }
27
+ &:after{
28
+ content:"\2019";
29
+ content:close-quote;
30
+ }
31
+
32
+ q:before{
33
+ content:"\201C";
34
+ content:open-quote;
35
+ }
36
+ q:after{
37
+ content:"\201D";
38
+ content:close-quote;
39
+ }
40
+ }
41
+
42
+ blockquote{
43
+ quotes:"#{$open-quote}" "#{$close-quote}";
44
+
45
+ p:before{
46
+ content:"#{$open-quote}";
47
+ content:open-quote;
48
+ }
49
+ p:after{
50
+ content:"";
51
+ content:no-close-quote;
52
+ }
53
+ p:last-of-type:after{
54
+ content:"#{$close-quote}";
55
+ content:close-quote;
56
+ }
57
+
58
+ q:before{
59
+ content:"\2018";
60
+ content:open-quote;
61
+ }
62
+ q:after{
63
+ content:"\2019";
64
+ content:close-quote;
65
+ }
66
+ }
67
+
68
+
69
+ /**
70
+ *
71
+ <blockquote>
72
+ <p>Insanity: doing the same thing over and over again and expecting
73
+ different results.</p>
74
+ <b class=source>Albert Einstein</b>
75
+ </blockquote>
76
+ *
77
+ */
78
+ blockquote{
79
+ /**
80
+ * .4em is roughly equal to the width of the opening “ that we wish to hang.
81
+ */
82
+ text-indent:-0.41em;
83
+
84
+ p:last-of-type{
85
+ margin-bottom:0;
86
+ }
87
+ }
88
+
89
+ .source{
90
+ display:block;
91
+ text-indent:0;
92
+
93
+ &:before{
94
+ content:"\2014";
95
+ }
96
+ }
@@ -0,0 +1,13 @@
1
+ /*------------------------------------*\
2
+ $SMALLPRINT
3
+ \*------------------------------------*/
4
+ /**
5
+ * A series of classes for setting tiny type; for use in smallprint etc.
6
+ */
7
+ .smallprint,
8
+ .milli{
9
+ @include font-size($milli-size);
10
+ }
11
+ .micro{
12
+ @include font-size($micro-size);
13
+ }
@@ -0,0 +1,163 @@
1
+ /*------------------------------------*\
2
+ $TABLES
3
+ \*------------------------------------*/
4
+ /**
5
+ * We have a lot at our disposal for making very complex table constructs, e.g.:
6
+ *
7
+ <table class="table--bordered table--striped table--data">
8
+ <colgroup>
9
+ <col class=t10>
10
+ <col class=t10>
11
+ <col class=t10>
12
+ <col>
13
+ </colgroup>
14
+ <thead>
15
+ <tr>
16
+ <th colspan=3>Foo</th>
17
+ <th>Bar</th>
18
+ </tr>
19
+ <tr>
20
+ <th>Lorem</th>
21
+ <th>Ipsum</th>
22
+ <th class=numerical>Dolor</th>
23
+ <th>Sit</th>
24
+ </tr>
25
+ </thead>
26
+ <tbody>
27
+ <tr>
28
+ <th rowspan=3>Sit</th>
29
+ <td>Dolor</td>
30
+ <td class=numerical>03.788</td>
31
+ <td>Lorem</td>
32
+ </tr>
33
+ <tr>
34
+ <td>Dolor</td>
35
+ <td class=numerical>32.210</td>
36
+ <td>Lorem</td>
37
+ </tr>
38
+ <tr>
39
+ <td>Dolor</td>
40
+ <td class=numerical>47.797</td>
41
+ <td>Lorem</td>
42
+ </tr>
43
+ <tr>
44
+ <th rowspan=2>Sit</th>
45
+ <td>Dolor</td>
46
+ <td class=numerical>09.640</td>
47
+ <td>Lorem</td>
48
+ </tr>
49
+ <tr>
50
+ <td>Dolor</td>
51
+ <td class=numerical>12.117</td>
52
+ <td>Lorem</td>
53
+ </tr>
54
+ </tbody>
55
+ </table>
56
+ *
57
+ */
58
+ table{
59
+ width:100%;
60
+ }
61
+ th,
62
+ td{
63
+ padding:$base-spacing-unit / 4;
64
+ @media screen and (min-width:480px){
65
+ padding:$half-spacing-unit;
66
+ }
67
+ text-align:left;
68
+ }
69
+
70
+
71
+ /**
72
+ * Cell alignments
73
+ */
74
+ [colspan]{
75
+ text-align:center;
76
+ }
77
+ [colspan="1"]{
78
+ text-align:left;
79
+ }
80
+ [rowspan]{
81
+ vertical-align:middle;
82
+ }
83
+ [rowspan="1"]{
84
+ vertical-align:top;
85
+ }
86
+ .numerical{
87
+ text-align:right;
88
+ }
89
+
90
+ /**
91
+ * In the HTML above we see several `col` elements with classes whose numbers
92
+ * represent a percentage width for that column. We leave one column free of a
93
+ * class so that column can soak up the effects of any accidental breakage in
94
+ * the table.
95
+ */
96
+ .t5 { width: 5% }
97
+ .t10 { width:10% }
98
+ .t12 { width:12.5% } /* 1/8 */
99
+ .t15 { width:15% }
100
+ .t20 { width:20% }
101
+ .t25 { width:25% } /* 1/4 */
102
+ .t30 { width:30% }
103
+ .t33 { width:33.333% } /* 1/3 */
104
+ .t35 { width:35% }
105
+ .t37 { width:37.5% } /* 3/8 */
106
+ .t40 { width:40% }
107
+ .t45 { width:45% }
108
+ .t50 { width:50% } /* 1/2 */
109
+ .t55 { width:55% }
110
+ .t60 { width:60% }
111
+ .t62 { width:62.5% } /* 5/8 */
112
+ .t65 { width:65% }
113
+ .t66 { width:66.666% } /* 2/3 */
114
+ .t70 { width:70% }
115
+ .t75 { width:75% } /* 3/4*/
116
+ .t80 { width:80% }
117
+ .t85 { width:85% }
118
+ .t87 { width:87.5% } /* 7/8 */
119
+ .t90 { width:90% }
120
+ .t95 { width:95% }
121
+
122
+
123
+ /**
124
+ * Bordered tables
125
+ */
126
+ .table--bordered{
127
+
128
+ th,
129
+ td{
130
+ border:1px solid $base-ui-color;
131
+
132
+ &:empty{
133
+ border:none;
134
+ }
135
+ }
136
+
137
+ thead tr:last-child th{
138
+ border-bottom-width:2px;
139
+ }
140
+
141
+ tbody tr th:last-of-type{
142
+ border-right-width:2px;
143
+ }
144
+ }
145
+
146
+
147
+ /**
148
+ * Striped tables
149
+ */
150
+ .table--striped{
151
+
152
+ tbody tr:nth-of-type(odd){
153
+ background-color:#ffc; /* Override this color in your theme stylesheet */
154
+ }
155
+ }
156
+
157
+
158
+ /**
159
+ * Data table
160
+ */
161
+ .table--data{
162
+ font:12px/1.5 sans-serif;
163
+ }
@@ -0,0 +1,5 @@
1
+ {
2
+ "name": "inuit.css",
3
+ "version": "5.0.1",
4
+ "dependencies": {}
5
+ }
@@ -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 */