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.
@@ -1,228 +1,26 @@
1
- // -----------------------------------------------------------------------------
2
- // • Stratum Grid Mixins Tyom Semonov <mail@tyom.net>
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
- @import "functions";
31
- @import "responsive";
32
- @import "../misc/clearfix";
4
+ // Set these settings in `stratum.scss`
33
5
 
34
- // Grid defaults
35
- // --------------
6
+ $grid-responsive: false !default;
36
7
 
37
- $grid-medium: 980px !default;
38
- $grid-large: 1200px !default;
8
+ $grid-size: 980px !default;
39
9
 
40
- $grid-type: pixel !default;
41
- $grid-total-columns: 12 !default;
42
- $grid-baseline: 20px !default;
43
- $grid-desired-gutter: 20px !default;
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
- $grid-gutter-medium: grid-column-gutter($grid-medium, $grid-desired-gutter);
46
- $grid-gutter-large: grid-column-gutter($grid-large, $grid-desired-gutter);
47
- $grid-half-gutter-m: $grid-gutter-medium / 2;
48
- $grid-half-gutter-l: $grid-gutter-large / 2;
49
- $grid-column-medium: grid-single-column-width($grid-medium, $grid-total-columns, $grid-gutter-medium);
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
- $grid-guides: false !default;
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
- // @debug "gutter medium:" $grid-gutter-large;
60
- // @debug "column medium:" $grid-column-large;
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,3 +1,5 @@
1
+ $grid-responsive: true;
2
+
1
3
  @mixin smartphone {
2
4
  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
3
5
  @content;
@@ -1,114 +1,51 @@
1
- @import "grid";
1
+ // # Scaffolding stylesheet
2
+ // Exports `l-` prefixed classes useful for prototyping layouts
2
3
 
3
- // = Rows
4
+ // Grid container & rows
4
5
  .l-container {
5
- @include grid-container;
6
- .l-row {
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
- // = Columns
18
- .l-col {
19
- @include grid-column;
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
- // = Column sizes
48
- @for $i from 1 through $grid-total-columns {
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
- // Ad hoc flexible grid
57
- .l-flexible .m-#{$i} {
58
- @include grid-column-width-flexi($i, false);
20
+
21
+ .l-col {
22
+ @extend %l-col;
59
23
  }
60
- .m-flexible.m-collapse .m-#{$i},
61
- .l-container > .m-#{$i} {
62
- @include grid-column-width-flexi($i, true);
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
- // From left
70
- .l-row .l-col.m-#{$i}-from-left,
71
- .l-row .l-col.m-#{$i}-from-left.m-end {
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
- // Borders
97
- .m-column-borders {
98
- @include grid-column-borders($grid-gutter-medium);
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
- @include large-screen {
101
- @include grid-column-borders($grid-gutter-large);
102
- }
103
- // Remove borders within row with borders
104
- .m-no-borders {
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
+ }
@@ -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 into current directory'
12
- method_options :path => :string
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
- copy_files
15
- puts "Stratum installed to #{install_path}"
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(stratum_stylesheets, install_path)
63
+ FileUtils.cp_r(assets_stylesheets, install_path)
36
64
  end
37
65
 
38
- def stratum_stylesheets
66
+ def assets_stylesheets
39
67
  current_dir = File.dirname(File.dirname(__FILE__))
40
68
  stylesheets = File.join(current_dir, "assets", "stylesheets")
41
69