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
@@ -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