stratum 0.2.4 → 0.3.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.
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
@@ -0,0 +1,83 @@
1
+ @import "functions";
2
+
3
+ // Grid initialisation
4
+ // -------------------
5
+ $grid-gutter: grid-column-gutter();
6
+ $grid-half-gutter: $grid-gutter / 2;
7
+ $grid-column: grid-column-width();
8
+
9
+
10
+ // Mixins
11
+ // ------
12
+
13
+ // Grid container to set grid bounds
14
+ @mixin grid-container($width: $grid-size) {
15
+ @extend %-clearfix;
16
+ @include box-sizing(content-box);
17
+ width: $width;
18
+ margin: {
19
+ left: auto;
20
+ right: auto;
21
+ }
22
+ }
23
+
24
+
25
+ // Grid row
26
+ // $type: pixel | fluid
27
+ @mixin grid-row($type: $grid-type) {
28
+ @extend %-clearfix;
29
+ @include grid-gutters($type, row);
30
+ clear: both;
31
+ }
32
+
33
+
34
+ // Make grid column
35
+ @mixin grid-column {
36
+ @include box-sizing(border-box);
37
+ min-height: 1px;
38
+ float: left;
39
+ }
40
+
41
+
42
+ // Grid gutters
43
+ // $element: column | row
44
+ @mixin grid-gutters($type: $grid-type, $element: column) {
45
+ $-gutter: 0;
46
+ $-modifier: if($element == column, 1, -1);
47
+
48
+ @if $type == fluid {
49
+ $-gutter: grid-percentage($grid-half-gutter * $-modifier);
50
+ } @else if $type == pixel {
51
+ $-gutter: $grid-half-gutter * $-modifier;
52
+ }
53
+
54
+ margin-left: $-gutter;
55
+ margin-right: $-gutter;
56
+ }
57
+
58
+
59
+ // Calculate single column width (in pixels) multipled by number of columns it spans (indluding gutters)
60
+ @mixin grid-column-width($span: 1, $type: $grid-type, $gutter: $grid-gutter, $total-columns: $grid-total-columns) {
61
+ width: grid-columns-width($span, $grid-column, $gutter, $type, $total-columns);
62
+ }
63
+
64
+
65
+ // Offset column
66
+ @mixin grid-column-offset($direction, $span: 1, $grid-type: $grid-type) {
67
+ $-offset: grid-columns-width($span, $type: $grid-type);
68
+ $-gutter: $grid-gutter;
69
+
70
+ // Fluid grid
71
+ @if $grid-type == fluid {
72
+ $-gutter: grid-percentage($-gutter);
73
+ }
74
+
75
+ #{$direction}: -($-offset + $-gutter);
76
+ }
77
+
78
+
79
+ // INTERNAL
80
+ // Clearfix
81
+ %-clearfix {
82
+ @include group;
83
+ }
@@ -0,0 +1,5 @@
1
+ @import "semantics/core";
2
+ @import "semantics/overrides";
3
+ @import "semantics/subdivisions";
4
+ @import "semantics/offsets";
5
+ @import "semantics/nested";
@@ -0,0 +1,96 @@
1
+ // Grid core components
2
+ // --------------------
3
+
4
+ // These placeholder selectors can be used to convert any element into
5
+ // grid component. To use `@extend` element with appropriate placeholder.
6
+ // It will automatically take care of the parent and descending components
7
+ // as long as the correct grid components are used.
8
+
9
+ // You should think about this file as an API for grid mixins and functions.
10
+ // As long as correct grid elements are used, defined in this file, building
11
+ // grid-based layout should be a painless process.
12
+
13
+ // For examples of usage of these components see `layout/scaffolding.scss`
14
+
15
+ // The structure of the grid is as follows:
16
+
17
+ // %l-container – A grid is always contained in one of these
18
+ // They use global grid settings and can be overriden with:
19
+ //
20
+ // %l-row – Grid consists of a number of rows
21
+ // They are required for correct column margins, but can be omitted,
22
+ // in which case the grid with no `%l-row` becomes gutterless
23
+ // %l-gutterless – Convert grid row into gutterless (no column margins)
24
+ //
25
+ // %l-col – Column: unit of the grid
26
+ // %l-col-<$i> – Column size (e.g. `%l-col-4` spans four single columns, including three gutters)
27
+ //
28
+ // %l-last-col-right – This settings forces last column to float to right, which helps to eliminate
29
+ // pixel gap caused by rounding in fluid grids and ensures first and last column
30
+ // occupy full width of grid container.
31
+ // Applied to grid container (@extend).
32
+
33
+
34
+ // Grid anatomy
35
+ %l-container {
36
+ @include grid-container;
37
+
38
+ %l-container { width: auto }
39
+
40
+ %l-row { @include grid-row }
41
+ %l-col { @include grid-column }
42
+ }
43
+
44
+
45
+ // Float last column to right if `%l-last-col-right` extended
46
+ // Applied to `%l-container`
47
+ %l-col + %l-col:last-child {
48
+ %l-last-col-right%l-container & {
49
+ float: right;
50
+ }
51
+ }
52
+
53
+
54
+ // Defines column margins
55
+ // Only applied to descendants of rows
56
+ %l-row %l-col {
57
+ @include grid-gutters;
58
+ }
59
+
60
+
61
+ // Column sizes
62
+ @for $i from 1 through $grid-total-columns {
63
+ %l-col-#{$i} {
64
+ // Columns with gutters
65
+ %l-row & {
66
+ @include grid-column-width($i, $grid-type);
67
+ }
68
+
69
+ // Columns without gutters
70
+ %l-container &,
71
+ %l-gutterless & {
72
+ @include grid-column-width($i, $grid-type, $gutter: 0);
73
+ }
74
+ }
75
+ }
76
+
77
+
78
+ %l-container {
79
+ // Gutterless row
80
+ %l-gutterless,
81
+ %l-gutterless %l-row {
82
+ @extend %-drop-margins;
83
+ }
84
+
85
+ // Gutterless columns
86
+ %l-gutterless %l-col {
87
+ @extend %-drop-margins;
88
+ }
89
+ }
90
+
91
+
92
+ // INTERNAL
93
+ // Placeholder for gutterless columns
94
+ %-drop-margins {
95
+ @include grid-gutters(none);
96
+ }
@@ -0,0 +1,34 @@
1
+ // Nested grids
2
+ // ------------
3
+
4
+
5
+ $grid-nested-grids: true;
6
+
7
+ %l-container {
8
+ // Always set nested grids to fluid
9
+ &%l-container %l-container %l-row {
10
+ @include grid-row(fluid);
11
+ }
12
+ }
13
+
14
+
15
+ // Column sizes (within columns)
16
+ @for $i from 1 through $grid-total-columns {
17
+ %l-col-#{$i} {
18
+ %l-grid-fluid & {
19
+ @for $n from 1 through $grid-total-columns {
20
+ %l-row %l-col-#{$n} {
21
+ @include grid-column-width($n, fluid, $total-columns: $i);
22
+ @include grid-gutters(fluid);
23
+ }
24
+ }
25
+ }
26
+ @if $grid-type == fluid {
27
+ @for $n from 1 through $grid-total-columns {
28
+ %l-row %l-col-#{$n} {
29
+ @include grid-column-width($n, fluid, $total-columns: $i);
30
+ }
31
+ }
32
+ }
33
+ }
34
+ }
@@ -0,0 +1,50 @@
1
+ // Column offsets
2
+ // --------------
3
+
4
+ // l-col-pull-<$i> – Pull column to left by <column size>
5
+ // l-col-push-<$i> – Push column to right by <column size>
6
+
7
+
8
+ $grid-offsets: true;
9
+
10
+
11
+ // Column sizes
12
+ @for $i from 1 through $grid-total-columns {
13
+ %l-col-push-#{$i} {
14
+ @extend %-col-positioned;
15
+
16
+ %l-container & {
17
+ @include grid-column-offset(right, $i);
18
+ }
19
+ }
20
+
21
+ %l-col-pull-#{$i} {
22
+ @extend %-col-positioned;
23
+
24
+ %l-container & {
25
+ @include grid-column-offset(left, $i);
26
+ }
27
+ }
28
+
29
+ %l-grid-pixel %l-row %l-col-pull-#{$i} {
30
+ @include grid-column-offset(left, $i, pixel);
31
+ }
32
+
33
+ %l-grid-pixel %l-row %l-col-push-#{$i} {
34
+ @include grid-column-offset(right, $i, pixel);
35
+ }
36
+
37
+ %l-grid-fluid %l-row %l-col-pull-#{$i} {
38
+ @include grid-column-offset(left, $i, fluid);
39
+ }
40
+
41
+ %l-grid-fluid %l-row %l-col-push-#{$i} {
42
+ @include grid-column-offset(right, $i, fluid);
43
+ }
44
+ }
45
+
46
+
47
+ // INTERNAL
48
+ %-col-positioned {
49
+ position: relative;
50
+ }
@@ -0,0 +1,71 @@
1
+ // Grid overrides
2
+ // --------------
3
+
4
+ // %l-grid-pixel – Force pixel grid (applied to grid container)
5
+ // %l-grid-fluid – Force fluid grid (applied to grid container)
6
+
7
+
8
+ $grid-overrides: true;
9
+
10
+ // Pixel
11
+ %l-grid-pixel {
12
+ %l-row {
13
+ @include grid-gutters(pixel, row);
14
+
15
+ %l-col {
16
+ @include grid-gutters(pixel);
17
+ }
18
+
19
+ &%l-gutterless {
20
+ @include grid-gutters(none);
21
+
22
+ %l-col {
23
+ @include grid-gutters(none);
24
+ }
25
+ }
26
+ }
27
+ }
28
+
29
+ // Fluid
30
+ %l-grid-fluid {
31
+ %l-row {
32
+ @include grid-gutters(fluid, row);
33
+
34
+ %l-col {
35
+ @include grid-gutters(fluid);
36
+ }
37
+
38
+ &%l-gutterless {
39
+ @include grid-gutters(none);
40
+
41
+ %l-col {
42
+ @include grid-gutters(none);
43
+ }
44
+ }
45
+ }
46
+ }
47
+
48
+ // Column sizes
49
+ @for $i from 1 through $grid-total-columns {
50
+ %l-col-#{$i} {
51
+ // Pixel
52
+ %l-grid-pixel %l-row & {
53
+ @include grid-column-width($i, pixel);
54
+ }
55
+ // Pixel no gutters
56
+ %l-grid-pixel &,
57
+ %l-grid-pixel %l-gutterless & {
58
+ @include grid-column-width($i, pixel, $gutter: 0);
59
+ }
60
+
61
+ // Fluid
62
+ %l-grid-fluid %l-row & {
63
+ @include grid-column-width($i, fluid);
64
+ }
65
+ // Fluid no gutters
66
+ %l-grid-fluid &,
67
+ %l-grid-fluid %l-gutterless & {
68
+ @include grid-column-width($i, fluid, $gutter: 0);
69
+ }
70
+ }
71
+ }
@@ -0,0 +1,16 @@
1
+ // Column subdivisions
2
+ // -------------------
3
+
4
+ // %l-col-<n>-of-<n> - column size of parent total (e.g. 2-of-8 is 2/8 and equals 25%)
5
+
6
+
7
+ $grid-subdivisions: true;
8
+
9
+ // Column size ratios
10
+ @for $i from 1 through $grid-total-columns {
11
+ @for $n from 1 through $grid-total-columns {
12
+ %l-col-#{$i}-of-#{$n} {
13
+ @include grid-column-width($i, fluid, $gutter: 0, $total-columns: $n);
14
+ }
15
+ }
16
+ }
@@ -1,83 +1,136 @@
1
1
  // Scaffolding stylesheet
2
- // ============================================================================
2
+ // ----------------------
3
+
3
4
  // Exports `l-` prefixed classes useful for prototyping layouts
4
5
 
5
6
 
6
- // Grid container & rows
7
- .l-container {
8
- @extend %l-container;
9
- @extend %l-last-col-right;
7
+ // Create variables
8
+ $grid-nested-grids: null !default;
9
+ $grid-offsets: null !default;
10
+ $grid-overrides: null !default;
11
+ $grid-subdivisions: null !default;
10
12
 
11
- .l-row {
12
- @extend %l-row;
13
- }
14
- .l-col {
15
- @extend %l-col;
16
- }
13
+ $grid-scaffolding-debug: true !default;
17
14
 
18
- // # Modifiers
15
+ // DEBUG
19
16
 
20
- // Grid types
21
- .l-row.m-gutterless {
22
- @extend %l-gutterless;
23
- }
24
- &.m-pixel {
25
- @extend %l-grid-pixel;
17
+ // Helper to warn of disabled features
18
+ %-feature-warning {
19
+ position: relative !important;
20
+
21
+ &::before {
22
+ @include position(absolute, fill);
23
+ display: block !important;
24
+ margin: 0 !important;
25
+ text-shadow: 0 -1px 0 rgba(white, .4) !important;
26
+ background: rgba(red, .8) !important;
27
+ padding-top: 20px !important;
28
+ font-size: 20px !important;
29
+ text-align: center !important;
30
+ color: black !important;
31
+ z-index: 10 !important;
26
32
  }
27
- &.m-fluid {
28
- @extend %l-grid-fluid;
33
+ }
34
+ @mixin feature-warning($text) {
35
+ @extend %-feature-warning;
36
+
37
+ &::before {
38
+ content: $text !important;
29
39
  }
40
+ }
30
41
 
31
- // Grid guides
32
- &.m-show-guides {
33
- @include show-grid-guides;
42
+ // SCAFFOLDING
34
43
 
35
- &.m-front {
36
- @include show-grid-guides(front);
37
- }
38
- }
44
+ // Grid container & rows
45
+ .l-container {
46
+ @extend %l-container;
47
+ @extend %l-last-col-right;
48
+
49
+ .l-row { @extend %l-row }
50
+ .l-col { @extend %l-col }
51
+ }
52
+
53
+
54
+ // Gutterless row
55
+ .l-row.m-gutterless {
56
+ @extend %l-gutterless;
39
57
  }
40
58
 
59
+
41
60
  // Span-based column modifiers
42
61
  @for $i from 1 through $grid-total-columns {
43
- .l-col {
44
- &.m-#{$i} {
45
- @extend %l-col-#{$i};
46
- }
62
+ // Columns
63
+ .m-#{$i} {
64
+ @extend %l-col-#{$i};
65
+ }
47
66
 
48
- &.m-from-left-#{$i} {
49
- @extend %l-col-from-left-#{$i};
67
+ @if $grid-offsets {
68
+ .m-push-#{$i} {
69
+ @extend %l-col-push-#{$i};
50
70
  }
51
- &.m-to-left-#{$i} {
52
- @extend %l-col-to-left-#{$i};
71
+ .m-pull-#{$i} {
72
+ @extend %l-col-pull-#{$i};
53
73
  }
74
+ } @else if $grid-scaffolding-debug {
75
+ .m-push-#{$i},
76
+ .m-pull-#{$i} {
77
+ @include feature-warning("`$grid-offsets` is not enabled");
78
+ }
79
+ }
80
+ }
54
81
 
55
- &.m-from-right-#{$i} {
56
- @extend %l-col-from-right-#{$i};
82
+
83
+ // - Optional
84
+ // Grid type overrides
85
+ .l-container {
86
+ @if $grid-overrides {
87
+ &.m-pixel {
88
+ @extend %l-grid-pixel;
57
89
  }
58
- &.m-to-right-#{$i} {
59
- @extend %l-col-to-right-#{$i};
90
+ &.m-fluid {
91
+ @extend %l-grid-fluid;
92
+ }
93
+ } @else if $grid-scaffolding-debug {
94
+ &.m-pixel,
95
+ &.m-fluid {
96
+ @include feature-warning("`$grid-overrides` is not enabled");
60
97
  }
61
98
  }
62
99
  }
63
100
 
64
- // fractional column modifiers
65
- @for $total from 1 through $grid-total-columns {
66
- .l-col {
67
- &.m-1-of-#{$total} {
68
- @extend %l-col-1-of-#{$total};
69
- }
70
- @for $col from 1 through $total {
71
- &.m-#{$col}-of-#{$total} {
72
- @if $total > $col {
73
- @extend %l-col-#{$col}-of-#{$total};
101
+
102
+ // - Optional
103
+ // Column subdivisions
104
+ @if $grid-subdivisions {
105
+ @for $total from 1 through $grid-total-columns {
106
+ .l-col {
107
+ &.m-1-of-#{$total} {
108
+ @extend %l-col-1-of-#{$total};
109
+ }
110
+ @for $col from 1 through $total {
111
+ &.m-#{$col}-of-#{$total} {
112
+ @if $total > $col {
113
+ @extend %l-col-#{$col}-of-#{$total};
114
+ }
74
115
  }
75
116
  }
76
117
  }
77
118
  }
78
119
  }
79
120
 
80
- // Centre column
81
- .l-col.m-centered {
82
- @extend %l-col-center;
121
+
122
+ @if $grid-scaffolding-debug and not $grid-nested-grids {
123
+ .l-col > .l-container {
124
+ @include feature-warning("`$grid-nested-grids` is not enabled");
125
+ }
126
+ }
127
+
128
+
129
+ // Grid guides
130
+ .m-show-guides {
131
+ @include show-grid-guides;
132
+ // Bring guides to front
133
+ &.m-front {
134
+ @include show-grid-guides(front);
135
+ }
83
136
  }
data/bin/stratum CHANGED
@@ -1,5 +1,5 @@
1
1
  #!/usr/bin/env ruby
2
2
 
3
- require_relative '../lib/stratum.rb'
3
+ require_relative '../lib/stratum/generator'
4
4
 
5
5
  Stratum::Generator.start
@@ -0,0 +1,74 @@
1
+ require_relative 'version'
2
+
3
+ require 'pathname'
4
+ require 'fileutils'
5
+ require 'thor'
6
+
7
+ module Stratum
8
+ class Generator < Thor
9
+ map ['-v', '--version'] => :version
10
+
11
+ desc 'install', 'Install Stratum (./stratum); `stratum help install` for options'
12
+ option :path, :type => :string, :aliases => '-p', :banner => './', :desc => 'Installation path'
13
+ option :force, :type => :boolean, :aliases => '-f', :desc => 'Force installation (overwrite existing)'
14
+ def install
15
+ if install_path.exist? && !options[:force]
16
+ puts "Stratum installation already exists. Use -f to force"
17
+ else
18
+ copy_files
19
+ puts "Stratum installed to #{install_path}"
20
+ end
21
+ end
22
+
23
+ desc 'update', 'Update Stratum'
24
+ def update
25
+ remove(true)
26
+ end
27
+
28
+ desc 'remove', 'Remove Stratum'
29
+ def remove(replace = false)
30
+ if stratum_exists?
31
+ FileUtils.rm_rf("stratum")
32
+ if replace
33
+ copy_files
34
+ puts "Stratum updated"
35
+ else
36
+ puts "Stratum has been removed"
37
+ end
38
+ else
39
+ puts "Stratum installation is not found in current directory"
40
+ end
41
+ end
42
+
43
+ desc 'version', 'Show Stratum version'
44
+ def version
45
+ say "Stratum #{Stratum::VERSION}"
46
+ end
47
+
48
+ private
49
+
50
+ def stratum_exists?
51
+ install_path.exist?
52
+ end
53
+
54
+ def install_path
55
+ @install_path ||= if options[:path]
56
+ Pathname.new(File.join(options[:path], 'stratum'))
57
+ else
58
+ Pathname.new('stratum')
59
+ end
60
+ end
61
+
62
+ def copy_files
63
+ FileUtils.mkdir_p(install_path)
64
+ FileUtils.cp_r(assets_stylesheets, install_path)
65
+ end
66
+
67
+ def assets_stylesheets
68
+ current_dir = File.dirname(File.dirname(__FILE__))
69
+ stylesheets = File.join(current_dir, "..", "assets", "stylesheets")
70
+
71
+ Dir["#{stylesheets}/*"]
72
+ end
73
+ end
74
+ end
@@ -0,0 +1,3 @@
1
+ module Stratum
2
+ VERSION = "0.3.0"
3
+ end