stratum 0.2.4 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (61) hide show
  1. data/.editorconfig +7 -0
  2. data/.gitignore +2 -2
  3. data/assets/stylesheets/_css3.scss +7 -0
  4. data/assets/stylesheets/_helpers.scss +7 -0
  5. data/assets/stylesheets/_stratum.scss +12 -15
  6. data/assets/stylesheets/css3/_border-radius.scss +2 -2
  7. data/assets/stylesheets/css3/_user-select.scss +12 -0
  8. data/assets/stylesheets/helpers/_box.scss +17 -0
  9. data/assets/stylesheets/{addons → helpers}/_dimensions.scss +7 -4
  10. data/assets/stylesheets/{addons → helpers}/_group.scss +0 -0
  11. data/assets/stylesheets/helpers/_icon-map.scss +11 -0
  12. data/assets/stylesheets/helpers/_icons.scss +177 -0
  13. data/assets/stylesheets/{addons → helpers}/_position.scss +6 -6
  14. data/assets/stylesheets/helpers/_triangle.scss +64 -0
  15. data/assets/stylesheets/{addons → helpers}/_vendor-prefix.scss +0 -0
  16. data/assets/stylesheets/layout/_grid.scss +4 -5
  17. data/assets/stylesheets/layout/{_grid-functions.scss → grid/_functions.scss} +12 -11
  18. data/assets/stylesheets/layout/grid/_guides.scss +123 -0
  19. data/assets/stylesheets/layout/grid/_mixins.scss +83 -0
  20. data/assets/stylesheets/layout/grid/_semantics.scss +5 -0
  21. data/assets/stylesheets/layout/grid/semantics/_core.scss +96 -0
  22. data/assets/stylesheets/layout/grid/semantics/_nested.scss +34 -0
  23. data/assets/stylesheets/layout/grid/semantics/_offsets.scss +50 -0
  24. data/assets/stylesheets/layout/grid/semantics/_overrides.scss +71 -0
  25. data/assets/stylesheets/layout/grid/semantics/_subdivisions.scss +16 -0
  26. data/assets/stylesheets/layout/scaffolding.scss +105 -52
  27. data/bin/stratum +1 -1
  28. data/lib/stratum/generator.rb +74 -0
  29. data/lib/stratum/version.rb +3 -0
  30. data/lib/stratum.rb +2 -73
  31. data/stratum.gemspec +1 -1
  32. metadata +27 -38
  33. data/.gitmodules +0 -3
  34. data/assets/stylesheets/layout/_grid-guides.scss +0 -93
  35. data/assets/stylesheets/layout/_grid-mixins.scss +0 -79
  36. data/assets/stylesheets/layout/_grid-semantics.scss +0 -266
  37. data/lib/version.rb +0 -3
  38. data/tests/Gemfile +0 -6
  39. data/tests/Gemfile.lock +0 -63
  40. data/tests/Guardfile +0 -11
  41. data/tests/_config.yml +0 -5
  42. data/tests/_includes/menu-grids.html +0 -9
  43. data/tests/_includes/shared-grid-samples.html +0 -58
  44. data/tests/_layouts/default.html +0 -21
  45. data/tests/grid/arstechnica.html +0 -70
  46. data/tests/grid/bbc.html +0 -74
  47. data/tests/grid/fluid.html +0 -85
  48. data/tests/grid/guardian.html +0 -248
  49. data/tests/grid/index.html +0 -5
  50. data/tests/grid/pixel.html +0 -29
  51. data/tests/images/arstechnica.png +0 -0
  52. data/tests/images/bbc.png +0 -0
  53. data/tests/images/capture.js +0 -15
  54. data/tests/images/guardian-home.png +0 -0
  55. data/tests/scss/_mock-block.scss +0 -68
  56. data/tests/scss/arstechnica.scss +0 -106
  57. data/tests/scss/bbc.scss +0 -93
  58. data/tests/scss/fluid-grid.scss +0 -50
  59. data/tests/scss/guardian.scss +0 -219
  60. data/tests/scss/main.scss +0 -90
  61. data/tests/scss/pixel-grid.scss +0 -14
@@ -1,29 +0,0 @@
1
- ---
2
- layout: default
3
- title: Pixel Grid Examples
4
- id: pixel
5
- css: pixel-grid
6
- menu: grids
7
- ---
8
-
9
- <div id="page">
10
- <div class="l-container">
11
- {% include shared-grid-samples.html %}
12
- </div>
13
-
14
- <div class="l-container m-fluid">
15
- <header>
16
- <h2>No row (gutterless), forced-fluid</h2>
17
- <code>.m-fluid</code>
18
- </header>
19
- <div class="l-col m-6">
20
- <span>6 columns</span>
21
- </div>
22
- <div class="l-col m-3">
23
- <span>3 columns</span>
24
- </div>
25
- <div class="l-col m-3">
26
- <span>3 columns</span>
27
- </div>
28
- </div>
29
- </div>
Binary file
data/tests/images/bbc.png DELETED
Binary file
@@ -1,15 +0,0 @@
1
- var page = require('webpage').create(),
2
- system = require('system'),
3
- address, output;
4
-
5
- if(system.args.lengt < 2) {
6
- console.log('Usage: capture.js URL filename');
7
- } else {
8
- address = system.args[1];
9
- output = system.args[2];
10
-
11
- page.open(address, function() {
12
- page.render(output);
13
- phantom.exit();
14
- });
15
- }
Binary file
@@ -1,68 +0,0 @@
1
- // Mock block
2
-
3
- @mixin block($color: #333, $height: 100px, $padding: 0) {
4
- $v-guides-color: desaturate(darken($color, 10), 40);
5
-
6
- -webkit-transition: 400ms;
7
- background-color: rgba($color, .3);
8
- position: relative;
9
- min-height: $height;
10
- -webkit-transition: box-shadow 800ms, background 500ms;
11
- overflow: hidden;
12
-
13
- > span {
14
- -webkit-transition: 300ms;
15
- position: absolute;
16
- left: 0;
17
- right: 0;
18
- top: 50%;
19
- color: rgba(black, .6);
20
- text-align: center;
21
- margin: -10px auto 0;
22
- z-index: 2;
23
- opacity: 0;
24
- cursor: default;
25
- font-weight: bold;
26
- text-shadow: 0 0 2px rgba(lighten($color, 60), .4);
27
-
28
- &::before,
29
- &::after {
30
- -webkit-transition: 600ms;
31
- background: $v-guides-color;
32
- content: "";
33
- position: absolute;
34
- top: 50%;
35
- height: 1px;
36
- }
37
- &::before {
38
- margin-left: -2%;
39
- }
40
- &::after {
41
- margin-left: 2%;
42
- }
43
- }
44
-
45
- &::before {
46
- @include position(absolute, fill);
47
- content: "";
48
- background: rgba(white, .25);
49
- margin: $padding;
50
- }
51
-
52
- &:hover {
53
- background-color: rgba($color, .5);
54
- box-shadow: inset 0 0 0px 1px $v-guides-color, 0 1px 8px rgba(black, .3);
55
-
56
- > span {
57
- opacity: 1;
58
-
59
- &::before,
60
- &::after {
61
- width: 98%;
62
- }
63
- &::before {
64
- margin-left: -100%;
65
- }
66
- }
67
- }
68
- }
@@ -1,106 +0,0 @@
1
- // Grid settings
2
- $grid-guides-color: #8aa8c0;
3
- $grid-guides-opacity: .2;
4
-
5
- $grid-type: pixel;
6
- $grid-size: 1020px;
7
- $grid-total-columns: 8;
8
- $grid-desired-gutter: 40px;
9
- $grid-baseline: 19px;
10
-
11
- @import "stratum";
12
- @import "layout/scaffolding";
13
-
14
- @import "mock-block";
15
-
16
- // @include GRID-GUIDES;
17
-
18
- body {
19
- font: 12px/1.36 Helvetica, Arial, sans-serif;
20
- color: #444;
21
- background: #eaeaea;
22
- padding: 0;
23
- margin: 0;
24
- }
25
-
26
- // Reference
27
-
28
- .reference {
29
- position: absolute;
30
- left: 0;
31
- right: 0;
32
- opacity: .35;
33
- z-index: -1;
34
-
35
- img {
36
- margin: 0 auto;
37
- display: block;
38
- }
39
- }
40
-
41
- // Layout
42
-
43
- #page {
44
- padding: 0;
45
-
46
- .masthead {
47
- @include block($height: 125px);
48
- }
49
-
50
- > nav {
51
- @include block(blue, $height: 30px);
52
- }
53
-
54
- > .content {
55
- padding: 0 19px;
56
- min-width: 0;
57
- width: auto;
58
-
59
- > .head {
60
- @include block($height: 58px);
61
- margin: 15px 0;
62
- }
63
-
64
- .sidebar {
65
- @include block(#baaf32, $height: 2418px);
66
- margin-bottom: 20px;
67
- }
68
-
69
- .l-container {
70
- @include grid-container(640px);
71
- }
72
-
73
- .p-article {
74
- @include block(#baaf32, $height: 1773px);
75
- margin-bottom: 10px
76
- }
77
-
78
- .sidebar {
79
- width: 300px;
80
- }
81
-
82
- .related {
83
- .l-col {
84
- padding: 0 10px;
85
- margin: 10px 0;
86
- }
87
- .item {
88
- @include block(purple, $height: 245px);
89
- }
90
- .l-col.p-title {
91
- margin: 57px 0 0;
92
-
93
- .item {
94
- min-height: 33px;
95
- }
96
- }
97
- }
98
- }
99
-
100
- .mastfoot {
101
- background: rgba(#222, .2);
102
- .l-col {
103
- @include block(#777, $height: 223px, $padding: 20px);
104
- }
105
- }
106
- }
data/tests/scss/bbc.scss DELETED
@@ -1,93 +0,0 @@
1
- // Grid settings
2
- $grid-guides-color: #8aa8c0;
3
- $grid-guides-opacity: .2;
4
-
5
- $grid-type: pixel;
6
- $grid-size: 976px;
7
- $grid-total-columns: 8;
8
- $grid-desired-gutter: 20px;
9
- $grid-baseline: 19px;
10
-
11
- @import "stratum";
12
- @import "layout/scaffolding";
13
-
14
- @import "mock-block";
15
-
16
- @include GRID-GUIDES;
17
-
18
- body {
19
- font: 12px/1.36 Helvetica, Arial, sans-serif;
20
- color: #444;
21
- background: #eaeaea;
22
- padding: 0;
23
- margin: 0;
24
- }
25
-
26
- // Reference
27
-
28
- .reference {
29
- position: absolute;
30
- left: 0;
31
- right: 0;
32
- opacity: .35;
33
- z-index: -1;
34
-
35
- img {
36
- margin: 0 auto;
37
- display: block;
38
- }
39
- }
40
-
41
- // Layout
42
-
43
- #page {
44
- padding: 0;
45
-
46
- .top-banner {
47
- @include block($height: 96px);
48
- }
49
-
50
- .nav {
51
- @include block(blue, $height: 39px);
52
-
53
- .l-container .l-col {
54
- @include block(navy, $height: 39px);
55
- }
56
- }
57
-
58
- .hero {
59
- > .head,
60
- > .dashboard,
61
- > nav {
62
- margin-top: 10px;
63
- margin-bottom: 10px;
64
- }
65
-
66
- > .head .l-col {
67
- @include block(green, $height: 75px);
68
- }
69
-
70
- > .dashboard {
71
- .p-item {
72
- @include block(purple, $height: 217px, $padding: 7px);
73
- }
74
-
75
- .m-right .p-item {
76
- height: 434px;
77
- }
78
- }
79
-
80
- > nav {
81
- @include block($height: 63px);
82
- }
83
- }
84
-
85
- .content .l-col {
86
- @include block(#baaf32, $height: 511px, $padding: $grid-gutter/2);
87
- }
88
-
89
- .footer {
90
- @include block(#444, $height: 105px, $padding: $grid-gutter/2);
91
- margin-top: 10px;
92
- }
93
- }
@@ -1,50 +0,0 @@
1
- $grid-type: fluid;
2
-
3
- @import "stratum";
4
- @import "layout/scaffolding";
5
-
6
- @import "mock-block";
7
-
8
- @include GRID-GUIDES;
9
-
10
-
11
- .l-container {
12
- width: 80%;
13
- min-width: 0;
14
-
15
- &.m-pixel {
16
- width: $grid-size;
17
- min-width: $grid-size;
18
- }
19
- }
20
- .l-container .l-col {
21
- @include block($height: 120px, $padding: $grid-gutter/2);
22
-
23
- &.m-12 {
24
- @include block(#777, $height: 150px);
25
- }
26
- }
27
-
28
-
29
- .l-container .l-container {
30
- @include group(true);
31
-
32
- h2 {
33
- margin: 20px $grid-gutter 10px;
34
- }
35
-
36
- .l-col {
37
- @include block(#ba5232, $height: 150px, $padding: $grid-gutter/2);
38
- }
39
- }
40
-
41
- .l-container .l-container,
42
- .l-row .l-row {
43
- .l-col {
44
- position: relative;
45
-
46
- &:hover {
47
- z-index: 10;
48
- }
49
- }
50
- }
@@ -1,219 +0,0 @@
1
- // Grid settings
2
- $grid-guides-color: #8aa8c0;
3
- $grid-guides-opacity: .2;
4
-
5
- $grid-type: pixel;
6
- $grid-size: 940px;
7
- $grid-total-columns: 12;
8
- $grid-desired-gutter: 20px;
9
- $grid-baseline: 15px;
10
-
11
- @import "stratum";
12
- @import "layout/scaffolding";
13
-
14
- @import "mock-block";
15
-
16
- // @include GRID-GUIDES;
17
-
18
- body {
19
- font: 12px/1.36 Helvetica, Arial, sans-serif;
20
- color: #444;
21
- background: white;
22
- padding: 0;
23
- margin: 0;
24
- }
25
-
26
- // Reference
27
-
28
- .reference {
29
- position: absolute;
30
- left: -1px;
31
- right: 0;
32
- opacity: .35;
33
- z-index: -1;
34
-
35
- img {
36
- margin: 0 auto;
37
- display: block;
38
- }
39
- }
40
-
41
- // Layout
42
-
43
- #page {
44
- padding: 0;
45
-
46
- .top-bar {
47
- @include block(green, 30px);
48
- margin-bottom: 35px;
49
- }
50
-
51
- .header .p-info,
52
- .ticker {
53
- @include block(#aaa, 20px);
54
- margin: 5px 0;
55
- }
56
-
57
- .header {
58
- .p-logo,
59
- .p-weather {
60
- @include block(blue, 70px);
61
- }
62
- }
63
-
64
- .nav {
65
- .p-main,
66
- .p-sub {
67
- @include block(#660e1a, 24px);
68
- }
69
- .p-main {
70
- margin: 7px 0 6px;
71
- }
72
- }
73
-
74
- .content {
75
- margin-top: 25px;
76
-
77
- .left {
78
- .item {
79
- @include block(#c9b480);
80
- margin-bottom: 25px;
81
- }
82
- .m-1 {
83
- min-height: 2940px;
84
- }
85
- .m-2 {
86
- min-height: 1592px;
87
- }
88
- .m-3 {
89
- min-height: 507px;
90
- }
91
- }
92
-
93
- .main {
94
- .item {
95
- @include block(#bb77b1);
96
- margin-bottom: 11px;
97
- }
98
- .m-feat {
99
- min-height: 341px;
100
- margin-bottom: 31px;
101
- }
102
-
103
- .l-row {
104
- .m-2 {
105
- .m-1 {
106
- min-height: 182px;
107
- }
108
- .m-2 {
109
- min-height: 218px;
110
- }
111
- .m-3 {
112
- min-height: 182px;
113
- }
114
- .m-4 {
115
- min-height: 272px;
116
- }
117
- .m-5 {
118
- min-height: 216px;
119
- margin-top: 51px;
120
- }
121
- }
122
-
123
- .m-4 {
124
- .item {
125
- margin-bottom: 30px;
126
- }
127
- .m-1 {
128
- min-height: 776px;
129
- }
130
- .m-2 {
131
- min-height: 183px;
132
- }
133
- .m-3 {
134
- min-height: 1098px;
135
- }
136
- .m-4 {
137
- min-height: 603px;
138
- }
139
- .m-5 {
140
- min-height: 719px;
141
- }
142
- .m-6 {
143
- min-height: 321px;
144
- }
145
- .m-7 {
146
- min-height: 378px;
147
- }
148
- .m-8 {
149
- min-height: 375px;
150
- }
151
- }
152
- }
153
- }
154
-
155
- .right {
156
- .item {
157
- @include block(#769cbb);
158
- margin-bottom: 10px;
159
- }
160
- .m-1 {
161
- min-height: 172px;
162
- }
163
- .m-2 {
164
- min-height: 435px;
165
- }
166
- .m-3 {
167
- min-height: 262px;
168
- }
169
- .m-4 {
170
- min-height: 230px;
171
- }
172
- .m-5 {
173
- min-height: 390px;
174
- }
175
- .m-6 {
176
- min-height: 306px;
177
- }
178
- .m-7 {
179
- min-height: 62px;
180
- }
181
- .m-8 {
182
- min-height: 129px;
183
- }
184
- .m-9 {
185
- min-height: 608px;
186
- }
187
- .m-10 {
188
- min-height: 191px;
189
- }
190
- .m-11 {
191
- min-height: 153px;
192
- }
193
- .m-12 {
194
- min-height: 158px;
195
- }
196
- .m-13 {
197
- min-height: 140px;
198
- }
199
- }
200
- }
201
-
202
- .shop,
203
- .simple-news {
204
- margin: 13px 0 20px;
205
-
206
- header {
207
- @include block(#49bb99, 50px);
208
- margin-bottom: 10px;
209
- }
210
- .l-col {
211
- @include block(#76bba6, 162px);
212
- }
213
- }
214
-
215
- .mastfoot {
216
- @include block($height: 52px);
217
- margin-top: 25px;
218
- }
219
- }
data/tests/scss/main.scss DELETED
@@ -1,90 +0,0 @@
1
- @import "stratum";
2
-
3
- body {
4
- font: 12px/1.36 Helvetica, Arial, sans-serif;
5
- color: #444;
6
- background: #eee;
7
- margin: 0;
8
- padding: 0;
9
- }
10
-
11
- h1, h2 {
12
- margin: ($grid-baseline * 2) 0 $grid-baseline;
13
- }
14
-
15
- .l-container {
16
- > h2,
17
- > header {
18
- border-top: 1px solid rgba(black, .2);
19
- padding-top: $grid-baseline;
20
- margin-top: $grid-baseline;
21
-
22
- h2 {
23
- margin-top: 0;
24
- }
25
-
26
- &:first-child,
27
- .l-col & {
28
- border: none;
29
- }
30
- }
31
- }
32
-
33
- #page {
34
- padding: 20px 0;
35
- }
36
-
37
- #masthead {
38
- background: #444;
39
- font-size: 13px;
40
- box-shadow: 0 1px 3px rgba(black, .6);
41
-
42
- ul {
43
- @extend %l-container;
44
- @include group;
45
- list-style: none;
46
- margin: 0 auto;
47
- padding: 0;
48
- }
49
-
50
- li {
51
- float: left;
52
- }
53
-
54
- a {
55
- color: #ddd;
56
- float: left;
57
- padding: 8px 10px;
58
- text-decoration: none;
59
- }
60
-
61
- .active a,
62
- a:hover {
63
- background: #363636;
64
- color: white;
65
- }
66
-
67
- .active a {
68
- background: #222;
69
- }
70
- }
71
-
72
- header {
73
- font-size: 1.5em;
74
- color: #777;
75
-
76
- h2 {
77
- display: inline-block;
78
- font-size: 1em;
79
- color: #333;
80
- }
81
-
82
- code {
83
- border-radius: 4px;
84
- margin: 0 5px;
85
- padding: 3px;
86
- background: rgba(#eee, .5);
87
- color: #ba5232;
88
- font-size: .9em;
89
- }
90
- }
@@ -1,14 +0,0 @@
1
- $grid-type: pixel;
2
-
3
-
4
- @import "stratum";
5
- @import "layout/scaffolding";
6
-
7
- @import "mock-block";
8
-
9
- @include GRID-GUIDES;
10
-
11
-
12
- .l-container .l-col {
13
- @include block($height: 120px, $padding: $grid-gutter/2);
14
- }