stratum 0.1.1 → 0.2.0
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/.gitignore +3 -0
- data/.gitmodules +4 -0
- data/LICENSE +21 -0
- data/assets/stylesheets/_stratum.scss +13 -7
- data/assets/stylesheets/css3/_box-sizing.scss +8 -0
- data/assets/stylesheets/forms/_input-placeholder.scss +14 -0
- data/assets/stylesheets/layout/_grid-functions.scss +54 -0
- data/assets/stylesheets/layout/_grid-guides.scss +84 -0
- data/assets/stylesheets/layout/_grid-mixins.scss +96 -0
- data/assets/stylesheets/layout/_grid-semantics.scss +239 -0
- data/assets/stylesheets/layout/_grid.scss +18 -220
- data/assets/stylesheets/layout/_responsive.scss +2 -0
- data/assets/stylesheets/layout/scaffolding.scss +34 -97
- data/assets/stylesheets/utils/_group.scss +19 -0
- data/assets/stylesheets/utils/_vendor-prefix.scss +18 -0
- data/lib/stratum.rb +35 -7
- data/lib/version.rb +1 -1
- data/stratum.gemspec +19 -11
- metadata +35 -7
- data/assets/stylesheets/layout/_functions.scss +0 -60
- data/assets/stylesheets/layout/grid-debug.scss +0 -92
- data/assets/stylesheets/misc/_clearfix.scss +0 -7
- data/assets/stylesheets/misc/_forms.scss +0 -12
@@ -1,228 +1,26 @@
|
|
1
|
-
//
|
2
|
-
//
|
3
|
-
// -----------------------------------------------------------------------------
|
4
|
-
// » grid-row($type: outer)
|
5
|
-
// Converts into grid row
|
6
|
-
// $type: outer - first outer containing row
|
7
|
-
// $type: inner - inner container rows
|
8
|
-
//
|
9
|
-
// » grid-column($variation: normal)
|
10
|
-
// Converts into grid column (generic for any size)
|
11
|
-
// $column: last - flushed right,
|
12
|
-
// $column: end - last but follows previous columns
|
13
|
-
// $column: inner - column in inner row
|
14
|
-
// $column: centered - centered column
|
15
|
-
//
|
16
|
-
// » grid-column-width($span: 1)
|
17
|
-
// Renders column width (specific size)
|
18
|
-
// » grid-offset-by-column($span: 1, $direction: left)
|
19
|
-
// Calculates column offset by $span columns
|
20
|
-
// $span: <integer> - span number of columns
|
21
|
-
// $direction: left - offset from left
|
22
|
-
// $direction: right - offset from right
|
23
|
-
//
|
24
|
-
// » grid-column-borders($color: rgba(black, .2))
|
25
|
-
// Renders borders on descendent columns
|
26
|
-
// $color: value - border color (#hex or Sass colour function)
|
27
|
-
//
|
28
|
-
// -----------------------------------------------------------------------------
|
1
|
+
// Grid defaults settings
|
2
|
+
// ----------------------
|
29
3
|
|
30
|
-
|
31
|
-
@import "responsive";
|
32
|
-
@import "../misc/clearfix";
|
4
|
+
// Set these settings in `stratum.scss`
|
33
5
|
|
34
|
-
|
35
|
-
// --------------
|
6
|
+
$grid-responsive: false !default;
|
36
7
|
|
37
|
-
$grid-
|
38
|
-
$grid-large: 1200px !default;
|
8
|
+
$grid-size: 980px !default;
|
39
9
|
|
40
|
-
$grid-type:
|
41
|
-
$grid-total-columns:
|
42
|
-
$grid-baseline:
|
43
|
-
$grid-desired-gutter:
|
10
|
+
$grid-type: fluid !default;
|
11
|
+
$grid-total-columns: 12 !default;
|
12
|
+
$grid-baseline: 20px !default;
|
13
|
+
$grid-desired-gutter: 20px !default;
|
44
14
|
|
45
|
-
|
46
|
-
$grid-
|
47
|
-
$grid-
|
48
|
-
$grid-
|
49
|
-
$grid-
|
50
|
-
$grid-column-large: grid-single-column-width($grid-large, $grid-total-columns, $grid-gutter-large);
|
15
|
+
// Debug settings
|
16
|
+
$grid-guides: true !default;
|
17
|
+
$grid-guides-color: #c84e5b !default;
|
18
|
+
$grid-guides-opacity: .2 !default;
|
19
|
+
$grid-guides-position: back !default;
|
51
20
|
|
52
|
-
$grid-column: $grid-column-medium !default;
|
53
21
|
|
54
|
-
|
55
|
-
$grid-guides-color: #c84e5b !default;
|
56
|
-
$grid-guides-opacity: .2 !default;
|
57
|
-
$grid-guides-position: back !default;
|
22
|
+
@import "grid-functions";
|
58
23
|
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
// Mixins
|
63
|
-
// ------
|
64
|
-
|
65
|
-
// Grid container to set grid bounds
|
66
|
-
@mixin grid-container($width: $grid-medium) {
|
67
|
-
@include clearfix;
|
68
|
-
@if $grid-type != flexible {
|
69
|
-
width: $width;
|
70
|
-
min-width: $width;
|
71
|
-
max-width: 100%;
|
72
|
-
@include large-screen {
|
73
|
-
width: $grid-large;
|
74
|
-
}
|
75
|
-
}
|
76
|
-
margin: {
|
77
|
-
left: auto;
|
78
|
-
right: auto;
|
79
|
-
}
|
80
|
-
}
|
81
|
-
|
82
|
-
// Converts element into grid row
|
83
|
-
@mixin grid-row($variant: inner) {
|
84
|
-
@include clearfix;
|
85
|
-
@include grid-column-margins($variant, -1);
|
86
|
-
}
|
87
|
-
|
88
|
-
// Converts into grid column
|
89
|
-
// $variation - can be normal, last, end, inner or centered
|
90
|
-
@mixin grid-column($variation: normal) {
|
91
|
-
@if $variation == last {
|
92
|
-
float: right;
|
93
|
-
} @else if $variation == end {
|
94
|
-
float: left;
|
95
|
-
} @else if $variation == centered {
|
96
|
-
float: none;
|
97
|
-
} @else {
|
98
|
-
min-height: 1px;
|
99
|
-
float: left;
|
100
|
-
}
|
101
|
-
@include grid-column-margins($variation);
|
102
|
-
}
|
103
|
-
|
104
|
-
// Apply column margins
|
105
|
-
@mixin grid-column-margins($variation, $modifier: 1) {
|
106
|
-
@if $variation != collapse {
|
107
|
-
@if $variation == centered {
|
108
|
-
margin-left: auto;
|
109
|
-
margin-right: auto;
|
110
|
-
} @else if $variation == flexible {
|
111
|
-
margin-left: grid-calculate-percentage($grid-half-gutter-m * $modifier);
|
112
|
-
margin-right: grid-calculate-percentage($grid-half-gutter-m * $modifier);
|
113
|
-
} @else {
|
114
|
-
@if $variation == inner {
|
115
|
-
@if $grid-type == flexible {
|
116
|
-
margin-left: grid-calculate-percentage($grid-half-gutter-m * $modifier);
|
117
|
-
margin-right: grid-calculate-percentage($grid-half-gutter-m * $modifier);
|
118
|
-
} @else {
|
119
|
-
margin-left: $grid-half-gutter-m * $modifier;
|
120
|
-
margin-right: $grid-half-gutter-m * $modifier;
|
121
|
-
|
122
|
-
@include large-screen {
|
123
|
-
margin-left: $grid-half-gutter-l * $modifier;
|
124
|
-
margin-right: $grid-half-gutter-l * $modifier;
|
125
|
-
}
|
126
|
-
}
|
127
|
-
}
|
128
|
-
}
|
129
|
-
}
|
130
|
-
}
|
131
|
-
|
132
|
-
// Calculate single column width (in pixels) multipled by number of columns it spans (indluding gutters)
|
133
|
-
@mixin grid-column-width($span: 1) {
|
134
|
-
width: grid-column-span-width($span, $grid-column-medium, $grid-gutter-medium);
|
135
|
-
@include large-screen {
|
136
|
-
width: grid-column-span-width($span, $grid-column-large, $grid-gutter-large);
|
137
|
-
}
|
138
|
-
}
|
139
|
-
|
140
|
-
// Calculate single column width in percent
|
141
|
-
@mixin grid-column-width-flexi($span: 1, $collapse-margins: false) {
|
142
|
-
// Calculate width in percentages from the total grid width and gutter (based on medium),
|
143
|
-
// offset by provided gutter width
|
144
|
-
@if $collapse-margins {
|
145
|
-
width: grid-calculate-percentage(grid-column-span-width($span, $grid-column-medium + $grid-gutter-medium, 0));
|
146
|
-
} @else {
|
147
|
-
width: grid-calculate-percentage(grid-column-span-width($span, $grid-column-medium, $grid-gutter-medium));
|
148
|
-
}
|
149
|
-
}
|
150
|
-
|
151
|
-
|
152
|
-
// Calculate offset width based on number of columns it spans (including gutters)
|
153
|
-
// $span <number>, $direction: <left/right>, $type <positive/negative>
|
154
|
-
@mixin grid-offset-by-column($span: 1, $direction: left, $type: positive, $first: false) {
|
155
|
-
$offset: 0;
|
156
|
-
|
157
|
-
@if $type == positive {
|
158
|
-
// normal offset
|
159
|
-
$offset: grid-column-span-width($span, $grid-column-medium, $grid-gutter-medium) + ($grid-gutter-medium * 3 / 2);
|
160
|
-
} @else {
|
161
|
-
// negative offset
|
162
|
-
// left
|
163
|
-
@if $direction == left {
|
164
|
-
$offset: -(grid-column-span-width($span, $grid-column-medium, $grid-gutter-medium) + ($grid-gutter-medium));
|
165
|
-
@if $first {
|
166
|
-
$offset: $offset + $grid-gutter-medium / 2;
|
167
|
-
}
|
168
|
-
// right
|
169
|
-
} @else {
|
170
|
-
$offset: -(grid-column-span-width($span, $grid-column-medium, $grid-gutter-medium) + ($grid-gutter-medium / 2));
|
171
|
-
margin-left: abs($offset) + $grid-gutter-medium * 3 / 2;
|
172
|
-
}
|
173
|
-
}
|
174
|
-
margin-#{$direction}: $offset;
|
175
|
-
|
176
|
-
@include large-screen {
|
177
|
-
@if $type == positive {
|
178
|
-
// normal offset
|
179
|
-
$offset: grid-column-span-width($span, $grid-column-large, $grid-gutter-large) + ($grid-gutter-large * 3 / 2);
|
180
|
-
} @else {
|
181
|
-
// negative offset
|
182
|
-
// left
|
183
|
-
@if $direction == left {
|
184
|
-
$offset: -(grid-column-span-width($span, $grid-column-large, $grid-gutter-large) + ($grid-gutter-large * $span));
|
185
|
-
@if $first {
|
186
|
-
$offset: $offset + $grid-gutter-large / 2;
|
187
|
-
}
|
188
|
-
// right
|
189
|
-
} @else {
|
190
|
-
$offset: -(grid-column-span-width($span, $grid-column-large, $grid-gutter-large) + ($grid-gutter-large / 2));
|
191
|
-
margin-left: abs($offset) + ($grid-gutter-large * 2) + ($grid-gutter-large / 2);
|
192
|
-
}
|
193
|
-
}
|
194
|
-
margin-#{$direction}: $offset;
|
195
|
-
}
|
196
|
-
|
197
|
-
@if $grid-type == flexible {
|
198
|
-
$offset: grid-calculate-percentage(grid-column-span-width($span, $grid-column-medium, $grid-gutter-medium) + ($grid-gutter-medium * 3 / 2));
|
199
|
-
}
|
200
|
-
}
|
201
|
-
|
202
|
-
|
203
|
-
// Renders borders between columns (except the first and the last ones)
|
204
|
-
// $grid-size, $color
|
205
|
-
@mixin grid-column-borders($column-gutter, $color: #ccc, $style: solid, $size: 1px) {
|
206
|
-
.col {
|
207
|
-
position: relative;
|
208
|
-
}
|
209
|
-
.col:before, .col:after {
|
210
|
-
content: "";
|
211
|
-
position: absolute;
|
212
|
-
width: 1px;
|
213
|
-
top: 0;
|
214
|
-
bottom: 0;
|
215
|
-
border: 0 $style $color;
|
216
|
-
}
|
217
|
-
.col:before {
|
218
|
-
border-left-width: $size;
|
219
|
-
left: -$column-gutter/2 - $size/2 - 1;
|
220
|
-
}
|
221
|
-
.col:after {
|
222
|
-
border-right-width: $size;
|
223
|
-
right: -$column-gutter/2 - $size/2 - 1;
|
224
|
-
}
|
225
|
-
.col:first-child:before, .col:last-child:after {
|
226
|
-
display: none;
|
227
|
-
}
|
228
|
-
}
|
24
|
+
@import "grid-mixins";
|
25
|
+
@import "grid-semantics";
|
26
|
+
@import "grid-guides";
|
@@ -1,114 +1,51 @@
|
|
1
|
-
|
1
|
+
// # Scaffolding stylesheet
|
2
|
+
// Exports `l-` prefixed classes useful for prototyping layouts
|
2
3
|
|
3
|
-
//
|
4
|
+
// Grid container & rows
|
4
5
|
.l-container {
|
5
|
-
@
|
6
|
-
|
7
|
-
@include grid-row;
|
8
|
-
}
|
9
|
-
// Flexible rows
|
10
|
-
.m-flexible, .m-flexible .l-row {
|
11
|
-
min-width: 0;
|
12
|
-
@include grid-row(flexible);
|
13
|
-
}
|
14
|
-
}
|
15
|
-
|
6
|
+
@extend %l-container;
|
7
|
+
@extend %l-last-col-right;
|
16
8
|
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
}
|
21
|
-
// Centred column
|
22
|
-
.l-col.m-centered, .l-col.centered:last-child {
|
23
|
-
@include grid-column(centered);
|
24
|
-
}
|
25
|
-
// Last column
|
26
|
-
.l-col + .l-col:last-child, .l-col.m-last {
|
27
|
-
@include grid-column(last);
|
28
|
-
}
|
29
|
-
// Ending column (follows others)
|
30
|
-
.l-col + .l-col.m-end {
|
31
|
-
@include grid-column(end);
|
32
|
-
}
|
33
|
-
// Columns in the inner row
|
34
|
-
.l-row .m-col {
|
35
|
-
@include grid-column-margins(inner);
|
36
|
-
}
|
37
|
-
// Flexible columns
|
38
|
-
.m-flexible .l-col {
|
39
|
-
@include grid-column-margins(flexible);
|
40
|
-
}
|
41
|
-
// Flexible columns with no margins
|
42
|
-
.m-collapse .l-col, .l-container > .l-col {
|
43
|
-
@include grid-column-margins(flexible, 0);
|
44
|
-
}
|
9
|
+
> .l-row {
|
10
|
+
@extend %l-row;
|
11
|
+
}
|
45
12
|
|
13
|
+
&.m-pixel {
|
14
|
+
@extend %l-grid-pixel;
|
15
|
+
}
|
46
16
|
|
47
|
-
|
48
|
-
@
|
49
|
-
.m-#{$i} {
|
50
|
-
@if $grid-type == pixel {
|
51
|
-
@include grid-column-width($i);
|
52
|
-
} @else {
|
53
|
-
@include grid-column-width-flexi($i);
|
54
|
-
}
|
17
|
+
&.m-fluid {
|
18
|
+
@extend %l-grid-fluid;
|
55
19
|
}
|
56
|
-
|
57
|
-
.l-
|
58
|
-
@
|
20
|
+
|
21
|
+
.l-col {
|
22
|
+
@extend %l-col;
|
59
23
|
}
|
60
|
-
|
61
|
-
|
62
|
-
@
|
24
|
+
|
25
|
+
&.m-marginless {
|
26
|
+
@extend %l-marginless;
|
63
27
|
}
|
64
28
|
}
|
65
29
|
|
66
|
-
|
67
|
-
// = Offsets:
|
30
|
+
// Grid columns
|
68
31
|
@for $i from 1 through $grid-total-columns {
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
@include grid-offset-by-column($i, left);
|
73
|
-
}
|
74
|
-
// To left
|
75
|
-
.l-row .l-col.m-#{$i}-to-left,
|
76
|
-
.l-row .l-col.m-#{$i}-to-left.m-end {
|
77
|
-
@include grid-offset-by-column($i, left, negative);
|
78
|
-
&:first-child {
|
79
|
-
@include grid-offset-by-column($i, left, negative, $first: true);
|
32
|
+
.l-col {
|
33
|
+
&.m-#{$i} {
|
34
|
+
@extend %l-col-#{$i};
|
80
35
|
}
|
81
|
-
}
|
82
|
-
// From right
|
83
|
-
.l-row .l-col.m-#{$i}-from-right,
|
84
|
-
.l-row .l-col.m-#{$i}-from-right.m-end,
|
85
|
-
.l-row .l-col.m-#{$i}-from-right.m-last {
|
86
|
-
@include grid-offset-by-column($i, right);
|
87
|
-
}
|
88
|
-
// To right
|
89
|
-
.l-row .l-col.m-#{$i}-to-right,
|
90
|
-
.l-row .l-col.m-#{$i}-to-right.m-end {
|
91
|
-
@include grid-offset-by-column($i, right, negative);
|
92
|
-
}
|
93
|
-
}
|
94
|
-
|
95
36
|
|
96
|
-
|
97
|
-
|
98
|
-
|
37
|
+
&.m-from-left-#{$i} {
|
38
|
+
@extend %l-col-from-left-#{$i};
|
39
|
+
}
|
40
|
+
&.m-to-left-#{$i} {
|
41
|
+
@extend %l-col-to-left-#{$i};
|
42
|
+
}
|
99
43
|
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
margin: {
|
106
|
-
left: 0;
|
107
|
-
right: 0;
|
108
|
-
};
|
109
|
-
:before, :after {
|
110
|
-
border: 0;
|
44
|
+
&.m-from-right-#{$i} {
|
45
|
+
@extend %l-col-from-right-#{$i};
|
46
|
+
}
|
47
|
+
&.m-to-right-#{$i} {
|
48
|
+
@extend %l-col-to-right-#{$i};
|
111
49
|
}
|
112
50
|
}
|
113
51
|
}
|
114
|
-
|
@@ -0,0 +1,19 @@
|
|
1
|
+
// Group floats (clearfix)
|
2
|
+
// ============================================================================
|
3
|
+
|
4
|
+
// `$prevent-margin-collapse` adds `::before` pseudo element
|
5
|
+
// which prevents margins from collapsing (much like `overflow: hidden`)
|
6
|
+
|
7
|
+
@mixin group($prevent-margin-collapse: false) {
|
8
|
+
@if $prevent-margin-collapse {
|
9
|
+
&::before {
|
10
|
+
content: " ";
|
11
|
+
display: table;
|
12
|
+
}
|
13
|
+
}
|
14
|
+
&::after {
|
15
|
+
content: " ";
|
16
|
+
display: table;
|
17
|
+
clear: both;
|
18
|
+
}
|
19
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
@mixin vendor-prefix($property, $value, $prefixes) {
|
2
|
+
$allowed-prefixes: moz, webkit, ms, o, spec;
|
3
|
+
|
4
|
+
@each $prefix in $prefixes {
|
5
|
+
$result: invalid;
|
6
|
+
|
7
|
+
@each $allowed-prefix in $allowed-prefixes {
|
8
|
+
@if $prefix == $allowed-prefix {
|
9
|
+
$result: if($prefix == "spec", "", "-#{$prefix}-");
|
10
|
+
}
|
11
|
+
}
|
12
|
+
@if($result != invalid) {
|
13
|
+
#{$result}#{$property}: $value;
|
14
|
+
} @else {
|
15
|
+
@warn("Prefix '-#{$prefix}' is invalid");
|
16
|
+
}
|
17
|
+
}
|
18
|
+
}
|
data/lib/stratum.rb
CHANGED
@@ -2,17 +2,41 @@ require_relative 'version.rb'
|
|
2
2
|
require 'pathname'
|
3
3
|
require 'fileutils'
|
4
4
|
require 'thor'
|
5
|
-
require 'pry'
|
6
5
|
|
7
6
|
module Stratum
|
8
7
|
class Generator < Thor
|
9
8
|
map ['-v', '--version'] => :version
|
10
9
|
|
11
|
-
desc 'install', 'Install Stratum
|
12
|
-
|
10
|
+
desc 'install', 'Install Stratum (./stratum); `stratum help install` for options'
|
11
|
+
option :path, :type => :string, :aliases => '-p', :banner => './', :desc => 'Installation path'
|
12
|
+
option :force, :aliases => '-f', :type => :boolean, :desc => 'Force installation (overwrite existing)'
|
13
13
|
def install
|
14
|
-
|
15
|
-
|
14
|
+
if install_path.exist? && !options[:force]
|
15
|
+
puts "Stratum installation already exists. Use -f to force"
|
16
|
+
else
|
17
|
+
copy_files
|
18
|
+
puts "Stratum installed to #{install_path}"
|
19
|
+
end
|
20
|
+
end
|
21
|
+
|
22
|
+
desc 'update', 'Update Stratum'
|
23
|
+
def update
|
24
|
+
remove(true)
|
25
|
+
end
|
26
|
+
|
27
|
+
desc 'remove', 'Remove Stratum'
|
28
|
+
def remove(replace = false)
|
29
|
+
if stratum_exists?
|
30
|
+
FileUtils.rm_rf("stratum")
|
31
|
+
if replace
|
32
|
+
copy_files
|
33
|
+
puts "Stratum updated"
|
34
|
+
else
|
35
|
+
puts "Stratum has been removed"
|
36
|
+
end
|
37
|
+
else
|
38
|
+
puts "Stratum installation is not found in current directory"
|
39
|
+
end
|
16
40
|
end
|
17
41
|
|
18
42
|
desc 'version', 'Show Stratum version'
|
@@ -22,6 +46,10 @@ module Stratum
|
|
22
46
|
|
23
47
|
private
|
24
48
|
|
49
|
+
def stratum_exists?
|
50
|
+
install_path.exist?
|
51
|
+
end
|
52
|
+
|
25
53
|
def install_path
|
26
54
|
@install_path ||= if options[:path]
|
27
55
|
Pathname.new(File.join(options[:path], 'stratum'))
|
@@ -32,10 +60,10 @@ module Stratum
|
|
32
60
|
|
33
61
|
def copy_files
|
34
62
|
FileUtils.mkdir_p(install_path)
|
35
|
-
FileUtils.cp_r(
|
63
|
+
FileUtils.cp_r(assets_stylesheets, install_path)
|
36
64
|
end
|
37
65
|
|
38
|
-
def
|
66
|
+
def assets_stylesheets
|
39
67
|
current_dir = File.dirname(File.dirname(__FILE__))
|
40
68
|
stylesheets = File.join(current_dir, "assets", "stylesheets")
|
41
69
|
|