zen-grids 2.0.0.beta.1 → 2.0.0.beta.2

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 (62) hide show
  1. checksums.yaml +7 -7
  2. data/.travis.yml +13 -0
  3. data/README.md +81 -0
  4. data/bower.json +14 -12
  5. data/sache.json +5 -0
  6. data/templates/project/_base-elements.scss +22 -0
  7. data/templates/project/_components.scss +73 -0
  8. data/templates/project/_init.scss +14 -4
  9. data/templates/project/_layouts.scss +143 -0
  10. data/templates/project/_visually-hidden.scss +2 -18
  11. data/templates/project/example.html +53 -24
  12. data/templates/project/manifest.rb +3 -2
  13. data/templates/project/styles.scss +3 -2
  14. data/tests/Gemfile +11 -0
  15. data/tests/README.md +16 -0
  16. data/tests/Rakefile +25 -0
  17. data/tests/config.rb +22 -0
  18. data/tests/controls/compass-compatibility.css +112 -0
  19. data/{templates/unit-tests/test-results → tests/controls}/function-zen-direction-switch.css +1 -1
  20. data/{templates/unit-tests/test-results → tests/controls}/function-zen-grid-item-width.css +0 -0
  21. data/{templates/unit-tests/test-results → tests/controls}/function-zen-half-gutter.css +0 -0
  22. data/{templates/unit-tests/test-results → tests/controls}/function-zen-unit-width.css +0 -0
  23. data/{templates/unit-tests/test-results → tests/controls}/zen-float.css +0 -0
  24. data/{templates/unit-tests/test-results/zen-grid-flow-item.css → tests/controls/zen-flow-item-width.css} +21 -55
  25. data/tests/controls/zen-grid-background.css +52 -0
  26. data/{templates/unit-tests/test-results → tests/controls}/zen-grid-container.css +20 -5
  27. data/{templates/unit-tests/test-results → tests/controls}/zen-grid-item-base.css +9 -12
  28. data/{templates/unit-tests/test-results → tests/controls}/zen-grid-item.css +14 -2
  29. data/{templates/unit-tests/test-results → tests/controls}/zen-new-row.css +0 -0
  30. data/tests/tests/compass-compatibility.scss +55 -0
  31. data/{templates/unit-tests/sass → tests/tests}/function-zen-direction-switch.scss +1 -0
  32. data/{templates/unit-tests/sass → tests/tests}/function-zen-grid-item-width.scss +6 -6
  33. data/{templates/unit-tests/sass → tests/tests}/function-zen-half-gutter.scss +2 -2
  34. data/{templates/unit-tests/sass → tests/tests}/function-zen-unit-width.scss +12 -12
  35. data/{templates/unit-tests/sass → tests/tests}/zen-float.scss +3 -3
  36. data/tests/tests/zen-flow-item-width.scss +85 -0
  37. data/tests/tests/zen-grid-background.scss +85 -0
  38. data/tests/tests/zen-grid-container.scss +49 -0
  39. data/tests/tests/zen-grid-item-base.scss +65 -0
  40. data/tests/tests/zen-grid-item.scss +101 -0
  41. data/{templates/unit-tests/sass → tests/tests}/zen-new-row.scss +3 -3
  42. data/tests/unit_tests.rb +57 -0
  43. data/zen-grids.gemspec +4 -45
  44. data/zen-grids/_background.scss +97 -157
  45. data/zen-grids/_flow.scss +39 -22
  46. data/zen-grids/_functions.scss +119 -0
  47. data/zen-grids/_grids.scss +71 -171
  48. data/zen-grids/_variables.scss +65 -0
  49. data/zen-grids/internal/_functions-compass-polyfill.scss +70 -0
  50. data/zen-grids/internal/_variables-background.scss +57 -0
  51. metadata +80 -69
  52. data/README.txt +0 -88
  53. data/templates/project/_layout.scss +0 -117
  54. data/templates/project/_modules.scss +0 -78
  55. data/templates/unit-tests/README.txt +0 -16
  56. data/templates/unit-tests/manifest.rb +0 -37
  57. data/templates/unit-tests/sass/zen-grid-background.scss +0 -80
  58. data/templates/unit-tests/sass/zen-grid-container.scss +0 -44
  59. data/templates/unit-tests/sass/zen-grid-flow-item.scss +0 -78
  60. data/templates/unit-tests/sass/zen-grid-item-base.scss +0 -59
  61. data/templates/unit-tests/sass/zen-grid-item.scss +0 -91
  62. data/templates/unit-tests/test-results/zen-grid-background.css +0 -60
@@ -0,0 +1,85 @@
1
+ /**
2
+ * @file
3
+ * Test zen-grid-background()
4
+ */
5
+
6
+ @import "zen-grids/background";
7
+
8
+ #test-zen-grid-background {
9
+ /* Test zen-grid-background() with 1 column grid and 20px gutter */
10
+ $zen-grid-numbers: top !global;
11
+ @include zen-grid-background();
12
+ $zen-grid-numbers: both !global;
13
+
14
+ /* Test zen-grid-background() with margin gutter method, 5 column grid and 5% gutter */
15
+ $zen-columns: 5 !global;
16
+ $zen-gutters: 5% !global;
17
+ $zen-gutter-method: margin !global;
18
+ $zen-grid-numbers: top !global;
19
+ @include zen-grid-background();
20
+ $zen-columns: 1 !global;
21
+ $zen-gutters: 20px !global;
22
+ $zen-gutter-method: padding !global;
23
+ $zen-grid-numbers: both !global;
24
+
25
+ // Turn off numbers for all other tests.
26
+ $zen-grid-numbers: none !global;
27
+
28
+ /* Test zen-grid-background() with 12 column grid and 20px gutter */
29
+ $zen-columns: 12 !global;
30
+ @include zen-grid-background();
31
+ $zen-columns: 1 !global;
32
+
33
+ /* Test zen-grid-background(), 5 column grid, 10% gutter and black grid color */
34
+ $zen-columns: 5 !global;
35
+ $zen-gutters: 10% !global;
36
+ $zen-grid-color: #000 !global;
37
+ @include zen-grid-background();
38
+ $zen-columns: 1 !global;
39
+ $zen-gutters: 20px !global;
40
+ $zen-grid-color: rgba(#ffdede, 0.8) !global;
41
+
42
+ /* Test zen-grid-background() with 5 column grid and 40px gutter */
43
+ $zen-columns: 5 !global;
44
+ $zen-gutters: 40px !global;
45
+ @include zen-grid-background();
46
+ $zen-columns: 1 !global;
47
+ $zen-gutters: 20px !global;
48
+
49
+ /* Test zen-grid-background(), 5 column grid and 10% gutter and $zen-switch-direction */
50
+ $zen-columns: 5 !global;
51
+ $zen-gutters: 10% !global;
52
+ $zen-switch-direction: true !global;
53
+ @include zen-grid-background();
54
+ $zen-columns: 1 !global;
55
+ $zen-gutters: 20px !global;
56
+ $zen-switch-direction: false !global;
57
+
58
+ /* Test zen-grid-background() with 5 column grid and 40px gutter and $zen-switch-direction */
59
+ $zen-columns: 5 !global;
60
+ $zen-gutters: 40px !global;
61
+ $zen-switch-direction: true !global;
62
+ @include zen-grid-background();
63
+ $zen-columns: 1 !global;
64
+ $zen-gutters: 20px !global;
65
+ $zen-switch-direction: false !global;
66
+
67
+ /* Test zen-grid-background() with $zen-grid-width: 1000px, 5 column grid and 40px gutter */
68
+ $zen-grid-width: 1000px !global;
69
+ $zen-columns: 5 !global;
70
+ $zen-gutters: 40px !global;
71
+ @include zen-grid-background();
72
+ $zen-grid-width: 100% !global;
73
+ $zen-columns: 1 !global;
74
+ $zen-gutters: 20px !global;
75
+
76
+ /* Test zen-grid-background() with all 24 grid numbers */
77
+ $zen-columns: 24 !global;
78
+ @include zen-grid-background();
79
+ $zen-columns: 1 !global;
80
+
81
+ /* Test zen-grid-background() with $display-zen-grid-background: false */
82
+ $display-zen-grid-background: false !global;
83
+ @include zen-grid-background();
84
+ $display-zen-grid-background: true !global;
85
+ }
@@ -0,0 +1,49 @@
1
+ /**
2
+ * @file
3
+ * Test zen-grid-container()
4
+ */
5
+
6
+ @import "zen-grids";
7
+
8
+ #test-zen-grid-container {
9
+ /* Test zen-grid-container() */
10
+ @include zen-grid-container();
11
+ }
12
+
13
+ #test-zen-grid-container-2 {
14
+ /* Test zen-grid-container() with IE 7 support */
15
+ $browser-minimum-versions: (ie: "7") !global;
16
+ @include zen-grid-container();
17
+ $browser-minimum-versions: (ie: null) !global;
18
+ }
19
+
20
+ #test-zen-grid-container-3 {
21
+ /* Test zen-grid-container() with IE 6 support */
22
+ $browser-minimum-versions: (ie: "6") !global;
23
+ @include zen-grid-container();
24
+ $browser-minimum-versions: (ie: null) !global;
25
+ }
26
+
27
+ #test-zen-grid-container-4 {
28
+ /* Test zen-grid-container() with $context: grid-item */
29
+ @include zen-grid-container(grid-item);
30
+ }
31
+
32
+ #test-zen-grid-container-5 {
33
+ /* Test zen-grid-container() with $context: flow and $gutters: 21px */
34
+ @include zen-grid-container(flow, $gutters: 21px);
35
+ }
36
+
37
+ #test-zen-grid-container-6 {
38
+ /* Test zen-grid-container() with $context: flow and $gutters: 21px and $zen-switch-direction: true */
39
+ $zen-switch-direction: true !global;
40
+ @include zen-grid-container(flow, $gutters: 21px);
41
+ $zen-switch-direction: false !global;
42
+ }
43
+
44
+ #test-zen-grid-container-7 {
45
+ /* Test zen-grid-container() with $zen-gutter-method: margin */
46
+ $zen-gutter-method: margin !global;
47
+ @include zen-grid-container();
48
+ $zen-gutter-method: padding !global;
49
+ }
@@ -0,0 +1,65 @@
1
+ /**
2
+ * @file
3
+ * Test zen-grid-item-base()
4
+ */
5
+
6
+ @import "zen-grids";
7
+
8
+ #test-zen-grid-item-base {
9
+ /* Test zen-grid-item-base() */
10
+ @include zen-grid-item-base();
11
+
12
+ /* Test zen-grid-item-base() with $zen-box-sizing: content-box */
13
+ $zen-box-sizing: content-box !global;
14
+ @include zen-grid-item-base();
15
+ $zen-box-sizing: border-box !global;
16
+
17
+ /* Test zen-grid-item-base() with $zen-box-sizing: universal-border-box */
18
+ $zen-box-sizing: universal-border-box !global;
19
+ @include zen-grid-item-base();
20
+ $zen-box-sizing: border-box !global;
21
+
22
+ /* Test zen-grid-item-base() with IE 7 support */
23
+ $browser-minimum-versions: (ie: "7") !global;
24
+ @warn "The following test will generate a warning.";
25
+ @include zen-grid-item-base();
26
+ $browser-minimum-versions: (ie: null) !global;
27
+
28
+ /* Test zen-grid-item-base() with $box-sizing-polyfill-path: "/boxsizing.htc" and IE 7 support */
29
+ $box-sizing-polyfill-path: "/boxsizing.htc" !global;
30
+ $browser-minimum-versions: (ie: "7") !global;
31
+ @include zen-grid-item-base();
32
+ $box-sizing-polyfill-path: "" !global;
33
+ $browser-minimum-versions: (ie: null) !global;
34
+
35
+ /* Test zen-grid-item-base() with $box-sizing-polyfill-path: "/boxsizing.htc" and IE 6 support */
36
+ $box-sizing-polyfill-path: "/boxsizing.htc" !global;
37
+ $browser-minimum-versions: (ie: "6") !global;
38
+ @include zen-grid-item-base();
39
+ $box-sizing-polyfill-path: "" !global;
40
+ $browser-minimum-versions: (ie: null) !global;
41
+
42
+ /* Test zen-grid-item-base() with $zen-gutters: 15px */
43
+ $zen-gutters: 15px !global;
44
+ @include zen-grid-item-base();
45
+ $zen-gutters: 20px !global;
46
+
47
+ /* Test zen-grid-item-base() with $zen-gutters: 15px and $zen-direction: right */
48
+ $zen-gutters: 15px !global;
49
+ $zen-direction: right !global;
50
+ @include zen-grid-item-base();
51
+ $zen-gutters: 20px !global;
52
+ $zen-direction: left !global;
53
+
54
+ /* Test zen-grid-item-base() with $zen-gutters: 15px and $zen-switch-direction: true */
55
+ $zen-gutters: 15px !global;
56
+ $zen-switch-direction: true !global;
57
+ @include zen-grid-item-base();
58
+ $zen-gutters: 20px !global;
59
+ $zen-switch-direction: false !global;
60
+
61
+ /* Test zen-grid-item-base() with $zen-gutter-method: margin */
62
+ $zen-gutter-method: margin !global;
63
+ @include zen-grid-item-base();
64
+ $zen-gutter-method: padding !global;
65
+ }
@@ -0,0 +1,101 @@
1
+ /**
2
+ * @file
3
+ * Test zen-grid-item()
4
+ */
5
+
6
+ @import "zen-grids";
7
+
8
+ #test-zen-grid-item {
9
+ /* Test zen-grid-item(6, 4) with 12 column grid and 20px gutter */
10
+ $zen-columns: 12 !global;
11
+ @include zen-grid-item(6, 4);
12
+ $zen-columns: 1 !global;
13
+
14
+ /* Test zen-grid-item(6, 4) with 12 column grid and 20px gutter and $zen-box-sizing: universal-border-box */
15
+ $zen-columns: 12 !global;
16
+ $zen-box-sizing: universal-border-box !global;
17
+ @include zen-grid-item(6, 4);
18
+ $zen-columns: 1 !global;
19
+ $zen-box-sizing: border-box !global;
20
+
21
+ /* Test zen-grid-item(3, 3) with box-sizing: content-box, 5 column grid and 10% gutter */
22
+ $zen-columns: 5 !global;
23
+ $zen-gutters: 10% !global;
24
+ $zen-box-sizing: content-box !global;
25
+ @include zen-grid-item(3, 3);
26
+ $zen-columns: 1 !global;
27
+ $zen-gutters: 20px !global;
28
+ $zen-box-sizing: border-box !global;
29
+
30
+ /* Turn off $zen-auto-include-grid-item-base */
31
+ $zen-auto-include-grid-item-base: false !global;
32
+
33
+ /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter */
34
+ $zen-columns: 5 !global;
35
+ $zen-gutters: 40px !global;
36
+ @include zen-grid-item(3, 3);
37
+ $zen-columns: 1 !global;
38
+ $zen-gutters: 20px !global;
39
+
40
+ /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter */
41
+ $zen-columns: 5 !global;
42
+ $zen-gutters: 40px !global;
43
+ @include zen-grid-item(3, 3, right);
44
+ $zen-columns: 1 !global;
45
+ $zen-gutters: 20px !global;
46
+
47
+ /* Test zen-grid-item(3, 3) with 5 column grid and 40px gutter and $zen-switch-direction */
48
+ $zen-columns: 5 !global;
49
+ $zen-gutters: 40px !global;
50
+ $zen-switch-direction: true !global;
51
+ @include zen-grid-item(3, 3);
52
+ $zen-columns: 1 !global;
53
+ $zen-gutters: 20px !global;
54
+ $zen-switch-direction: false !global;
55
+
56
+ /* Test zen-grid-item(3, 3, right) with 5 column grid and 40px gutter and $zen-switch-direction */
57
+ $zen-columns: 5 !global;
58
+ $zen-gutters: 40px !global;
59
+ $zen-switch-direction: true !global;
60
+ @include zen-grid-item(3, 3, right);
61
+ $zen-columns: 1 !global;
62
+ $zen-gutters: 20px !global;
63
+ $zen-switch-direction: false !global;
64
+
65
+ /* Test zen-grid-item(3, 2.5) with 5 column grid and 40px gutter */
66
+ $zen-columns: 5 !global;
67
+ $zen-gutters: 40px !global;
68
+ @include zen-grid-item(3, 2.5);
69
+ $zen-columns: 1 !global;
70
+ $zen-gutters: 20px !global;
71
+
72
+ /* Test zen-grid-item(3, 3) with $zen-grid-width: 1000px, 5 column grid and 40px gutter */
73
+ $zen-grid-width: 1000px !global;
74
+ $zen-columns: 5 !global;
75
+ $zen-gutters: 40px !global;
76
+ @include zen-grid-item(3, 3);
77
+ $zen-grid-width: 100% !global;
78
+ $zen-columns: 1 !global;
79
+ $zen-gutters: 20px !global;
80
+
81
+ /* Test zen-grid-item(3, 3) with $zen-gutter-method: margin, 5 column grid and 5% gutter */
82
+ $zen-gutter-method: margin !global;
83
+ $zen-columns: 5 !global;
84
+ $zen-gutters: 5% !global;
85
+ @include zen-grid-item(3, 3);
86
+ $zen-gutter-method: padding !global;
87
+ $zen-columns: 1 !global;
88
+ $zen-gutters: 20px !global;
89
+
90
+ /* Test zen-grid-item(3, 2.5) with $zen-gutter-method: margin, 5 column grid and 5% gutter */
91
+ $zen-gutter-method: margin !global;
92
+ $zen-columns: 5 !global;
93
+ $zen-gutters: 5% !global;
94
+ @include zen-grid-item(3, 2.5);
95
+ $zen-gutter-method: padding !global;
96
+ $zen-columns: 1 !global;
97
+ $zen-gutters: 20px !global;
98
+
99
+ /* Test zen-grid-item(1, 1) with $gutters: 10px and $zen-auto-include-grid-item-base: false */
100
+ @include zen-grid-item(1, 1, $gutters: 10px);
101
+ }
@@ -10,9 +10,9 @@
10
10
  @include zen-new-row();
11
11
 
12
12
  /* Test zen-new-row() with $zen-direction: right */
13
- $zen-direction: right;
13
+ $zen-direction: right !global;
14
14
  @include zen-new-row();
15
- $zen-direction: left;
15
+ $zen-direction: left !global;
16
16
 
17
17
  /* Test zen-new-row(left) */
18
18
  @include zen-new-row(left);
@@ -21,6 +21,6 @@
21
21
  @include zen-new-row(left, $switch-direction: TRUE);
22
22
 
23
23
  /* Test zen-new-row(left) with: $zen-switch-direction: TRUE; */
24
- $zen-switch-direction: TRUE;
24
+ $zen-switch-direction: TRUE !global;
25
25
  @include zen-new-row(left);
26
26
  }
@@ -0,0 +1,57 @@
1
+ # Navigator | Copyright 2013 Team Sass | MIT License | https://github.com/Team-Sass/navigator
2
+
3
+ require 'compass'
4
+ require 'compass/exec'
5
+ require 'test/unit'
6
+ require 'diffy'
7
+ require 'colorize'
8
+ require 'pathname'
9
+
10
+ class TestCompassOutput < Test::Unit::TestCase
11
+
12
+ Compass.add_configuration 'config.rb'
13
+ Compass.configuration.project_path = Dir.pwd
14
+
15
+ # Remove all current Diff files
16
+ Dir.glob("#{Dir.pwd}/output/**/*.css.diff").each { |f| File.delete(f) }
17
+
18
+ Compass.compiler.sass_files.each do |sass_file|
19
+ test_name = File.basename(sass_file, '.*')
20
+
21
+ define_method "test_#{test_name}_compile " do
22
+ # Compiled CSS file path
23
+ test_file_pwd = Compass.compiler.corresponding_css_file(sass_file)
24
+
25
+ # Relative path of compiled CSS file from Tests directory
26
+ relative_pwd = Pathname.new(test_file_pwd).relative_path_from(Pathname.new("#{Dir.pwd}/output")).to_s
27
+
28
+ # Control files path
29
+ control_file_pwd = "#{Dir.pwd}/controls/" + relative_pwd
30
+
31
+ # The base path of the sub folders, making the folders if needed
32
+ base_pwd = relative_pwd.sub(File.basename(relative_pwd), '')
33
+ FileUtils.mkdir_p "#{Dir.pwd}/output/#{base_pwd}"
34
+
35
+ # Compiles Sass file
36
+ Compass.compiler.compile sass_file, test_file_pwd # Raises exception upon error
37
+
38
+ begin
39
+ # Assert that our test output matches our control output
40
+ passed = assert FileUtils.compare_file(test_file_pwd, control_file_pwd), "Compiled output for #{File.basename(sass_file)} does not match control output!".red
41
+ ensure
42
+ # If there is a failure, generate a diff of the files and put it with the compiled file
43
+ if !passed
44
+ test_file = File.open(test_file_pwd).read;
45
+ control_file = File.open(control_file_pwd).read;
46
+ diff_pwd = "#{Dir.pwd}/output/#{relative_pwd}.diff"
47
+ diff_content = Diffy::Diff.new(control_file, test_file, :include_diff_info => true)
48
+
49
+ File.open(diff_pwd, 'w') { |f| f.write(diff_content.to_s(:text)) }
50
+
51
+ puts "Control->Compiled diff output to ".yellow + " tests/output/#{relative_pwd}.diff ".colorize( :color => :blue, :background => :black)
52
+ end
53
+ end
54
+ end
55
+ end
56
+ end
57
+
data/zen-grids.gemspec CHANGED
@@ -9,55 +9,14 @@ Gem::Specification.new do |s|
9
9
  s.homepage = 'http://zengrids.com'
10
10
  s.rubyforge_project =
11
11
 
12
- s.version = '2.0.0.beta.1'
13
- s.date = '2013-07-22'
12
+ s.version = '2.0.0.beta.2'
13
+ s.date = '2014-03-11'
14
14
  s.licenses = ['GPL-2']
15
15
 
16
16
  s.authors = ['John Albin Wilkins']
17
17
  s.email = 'virtually.johnalbin@gmail.com'
18
18
 
19
- s.add_runtime_dependency('sass', ">= 3.2")
19
+ s.add_runtime_dependency('sass', ">= 3.3")
20
20
 
21
- s.files = %w[
22
- bower.json
23
- LICENSE.txt
24
- README.txt
25
- lib/zen-grids.rb
26
- _zen-grids.scss
27
- zen-grids/_background.scss
28
- zen-grids/_flow.scss
29
- zen-grids/_grids.scss
30
- templates/project/_init.scss
31
- templates/project/_layout.scss
32
- templates/project/_modules.scss
33
- templates/project/_visually-hidden.scss
34
- templates/project/example.html
35
- templates/project/manifest.rb
36
- templates/project/styles.scss
37
- templates/unit-tests/manifest.rb
38
- templates/unit-tests/README.txt
39
- templates/unit-tests/sass/function-zen-direction-switch.scss
40
- templates/unit-tests/sass/function-zen-grid-item-width.scss
41
- templates/unit-tests/sass/function-zen-half-gutter.scss
42
- templates/unit-tests/sass/function-zen-unit-width.scss
43
- templates/unit-tests/sass/zen-new-row.scss
44
- templates/unit-tests/sass/zen-float.scss
45
- templates/unit-tests/sass/zen-grid-background.scss
46
- templates/unit-tests/sass/zen-grid-container.scss
47
- templates/unit-tests/sass/zen-grid-flow-item.scss
48
- templates/unit-tests/sass/zen-grid-item-base.scss
49
- templates/unit-tests/sass/zen-grid-item.scss
50
- templates/unit-tests/test-results/function-zen-direction-switch.css
51
- templates/unit-tests/test-results/function-zen-grid-item-width.css
52
- templates/unit-tests/test-results/function-zen-half-gutter.css
53
- templates/unit-tests/test-results/function-zen-unit-width.css
54
- templates/unit-tests/test-results/zen-new-row.css
55
- templates/unit-tests/test-results/zen-float.css
56
- templates/unit-tests/test-results/zen-grid-background.css
57
- templates/unit-tests/test-results/zen-grid-container.css
58
- templates/unit-tests/test-results/zen-grid-flow-item.css
59
- templates/unit-tests/test-results/zen-grid-item-base.css
60
- templates/unit-tests/test-results/zen-grid-item.css
61
- zen-grids.gemspec
62
- ]
21
+ s.files = `git ls-files -z`.split "\0"
63
22
  end
@@ -3,78 +3,14 @@
3
3
  //
4
4
 
5
5
 
6
- @import "grids";
7
- @import "compass/css3/images";
8
-
9
- // Specify the color of the background grid.
10
- $zen-grid-color : #ffdede !default;
11
-
12
- // Specify which set of numbers to display with the background grid. Can be set
13
- // to: both, top, or none.
14
- $zen-grid-numbers : both !default;
15
-
16
- // Create an image set of 25 numbers for the grid using data URIs. Users who are
17
- // crazy enough to use a 26-column grid or larger are free to extend this set.
18
- $zen-grid-number-images : () !default;
19
-
20
- // If the set is empty, add our default set of 25.
21
- @if length($zen-grid-number-images) == 0 {
22
- // The number 1.
23
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAARVJREFUeNpi/P//PwMMMDIyMpALYOawEKEWpIYPiAWg7M9A/B6If4LMwaaYkGHiQKwFxJpAzA3E94H4LBA/BOJfWJ0Kw0iAFYhFgFgHiIOBuPHGjRtvf//+/X/WrFmHgHxPqIsxzGHC4TJ+IDYCYu+EhIQ4oGG5ysrKQiCJX79+cQApXqilDMR6mROI5Z8+fVotJibGS0rk4HLhd1AYSUtLd8rLyy/78uXLb0oN/AjE54D44LNnz27euXPnHaUGglz0BoifAvEHaniZbDBq4BA0EJR8vjAxMf2FCbCxsf2AljhYEzsjgfIQlKe1gVgPiCWAGGTwbWylDcwcQgayQIssASj9D5qLMMpDYg0kucSmeqQABBgAsyJrV7MArsMAAAAASUVORK5CYII='));
24
- // The number 2.
25
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAdBJREFUeNqslL9LQlEUx3367AdamdCQaVjQ0uAQBS+hxbVBhEcESoOG/0SDS9HakDYGEU0huLa1GW4tGtkkURBlQRn4LPseOBdej0u+ygsffByvH98995zj6Ha7DqIfizyKkCmKYv1eBaPAB4ZpP3gDz/zZ+Y1wAEyBeTAH/OATPIBrUAP3oG0VOiRHVli2nslkTmu12pNhGF2iUqncxePxI3yngwDv7SkcAstYeSEy02w229FodB97NN77TeiU5NYDJlOp1KII5HK5y2QyWaZnr9frxvMSv6HH+mOZkPI3EgwGfSJQr9db5g2hUGiMZW47wg/QUlXVMAd1XQ+I50aj8cI3bUhrx5JD+ucI2ADb4DASiZyZ80j5pTzLcigTOlkaBqtgp1gs3ghZqVS6QmyTTm73lkXpTIBEOp0umm9Y07QDxFdkF/KTcBAsgC3k61UI8/n8BWJJrlOnXaEo7BQJhKxarTYR2+OiDnM1OOwWtkbFS0cUwlgsdo74MdgFa2AauOwIqW8ThUKhLOsUIpvNnmBPlIdGz06h1fH7/a6/jDDZtKEjz/ClzFrfAuudpw1d0C03wo/jS2HpOM9Da3tRd1CnPNodX/+a2H0XfgkwAIVYVeQ1/9a6AAAAAElFTkSuQmCC'));
26
- // The number 3.
27
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAe5JREFUeNqslM1LAkEYxnX7lL62CAmTwENkhyKwDkZg185dgvDQwS7RUQkvkRfzKNQfIF5CukjRJelk4EWwDmVUEJinaNlSMLPWnhdmYFvWGqiFH44z8z7zzjPvjKXZbFqI//hIx8rFrFarfkwCNiCDPtABNFADKngFH6KC1BgEE2ASOEE3E1DALbgCZfBuFLSYbJmC51wu1046nb5pNBpNTrFYVEKh0DHGV8AoW/xXQTsFJJPJC72YHq/Xu485Xrb4N0HJxFvybsjtdtt5Rzwev04kEvf8v9/v97CFbcbgdhPBT/AmSZLGOxRFaRgyoa22scP7VbACih6PZ5cdzAjoSqVS03xCoVB4wM8zLWxaOwYPaZEBMAXWI5HIud6/TCZTQv82mBX18MfP5/M5Y7HYAprDlLlIhpTdPNgEe+AQHOVyuSeeJZUT+taAQyRDuhnufD6/heANsBwOh8ey2ewTn+BwOPrZCXcYg80EycMeTdNa2lGpVN5ZNWgiglQitWq1Wtd3yrLcydvlclll1VAX8ZAehCUYf9rqpgQCgQPMWQS9IlePtuyiCxGNRs9UVa1zoVKpVA0GgycYWwVjrLiFnq9OFjADxlkm5NcLuAOX4NHstWklyEVlBvfvjb2HL8xri8iW//Ri/7vglwADAMZnRpCsTg8QAAAAAElFTkSuQmCC'));
28
- // The number 4.
29
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAW5JREFUeNqslDFLw0AYhpOaSFuiDjqViiUKVhACDpJCQycX/TVChCz+Evf8ALtlCGZyCW6uOiR4QusgSgtmiO/BBZJ4l1qSg4dwd19e7vvuvU9K01SiNDGojpyJybLMi9kEu2AHqGwtAZ/gA/ysI6iAPjgHx6DD1pfgGTwCUhaUKlLeBheO49wnSZLmwfotGPJSblWUZAscmKY55Ox1ciUoDJGgwmrXm0wmg3UuRiTYpWK2bY80TVN93yd1BWm6/fF4fEgnQRDM6ggW0iWELKbT6byOYCFdz/OIwJ9d3sW0BOn2LMvS6cR13TeBpfaZ4f96p+TDI3ATRdF32X8ZcRx/IeYa6P/x4YbIY7kfZZEXeYL0rS7wFIUdg+0tWWxxj/OW98AZOM0ag2EYgzAMr7IAVVXv8PHAA5jnU1Y4B6Cd5Am8sJvU2+32ZSnmHbyy2JUnLOzTGwcjcMLqVtltVgnyemJlP5Sa7tiNC/4KMAAbxb+98QKR2gAAAABJRU5ErkJggg=='));
30
- // The number 5.
31
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAc5JREFUeNqslM9KAlEUxp0xzSTNDHMoCiIKKRChXbgIAldKEK5y4Up9A5dufAMRRB8gwnW7lkV/EBcR0WzaBMEQFRNFlkNO34E7MU23msyBHzNz58x373fOPdeh67qDGMRFOkOccQEMg3EwBlyW7xp4AHega/2ZJ0gCM2AFLIARy/cOkMEJuAZvX5ZpsRwEyUajsa9pms4jn89vI2bVOhnpiJwVkt2JcDg82U8eeZZpEqd5IJPJHDebzVtmj3J3BBReDsU/LoAEn1keSazXl2AikQghd0mw2Wq10vF4nAo2DTx9CWaz2XnjORaLSYVCYR2Pc8BnR5BsdURR/NgO1Wr1rFKpnBvvkUiEChYCXjtFobx0U6nUHu4XxgSlUmnZCJAkycfEXHYE3dQh7XY7HY1Gp2igXC63e72e1Y2T55BnmQI9ZgG/3+/Fu5OTGltVfqFelWX5xhgIBAJuc4CiKI+4PbG+dvzWeqNgLZfL7XzXevV6/QAxG9RRVi2eIFmbBVvFYnEXK703hFRVfa3Vaoe0k8Aiy/cnQcEQEwTBWhjauEvsxAmyicjmJTgFVyw9uh1BYwf4KYXsVBFYu6nsPOyaxX6y/K8TW3QM+HoXYACXiuXQRCn2XAAAAABJRU5ErkJggg=='));
32
- // The number 6.
33
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcZJREFUeNqslLFLw0AUxpPWKNZag6igqYKgCA61dhScHbV0URwcCo7+DV1K5y6FTlIcdQl0dhKkdBAHsaJ1MBQdJEZNKmnQ+B3cQZte2wx98OPIu5ePe+/dO8F1XYEwDCM6I332yd4EkOkaBA74BB/AJhq8n3g2ChbAGlgBs9T3A57BDXgBTfDXdUxPygGwCPbT6fR5tVp9dRzHZRQKhWvsHYMNevIOLZ4gCdpOJpOn7ULtlMvlO8QcgnmvYICTbogEplKpTeYolUpPmUzmln3H4/ElLFO0DII3PV79IuFwOMQchmG0stlsXZIklRCNRs/gfqc1HSgogTFFUSaZIxaLyZqm7SDd3UqlsgVB0kwLtLh3x1PDZXCCZrz1qqGqqg+IOfJbwy5DDev5fP6efScSCQXLnLfLvVLuMlJDXdcdTmmCfgRJ/r+8KfBjPEFyErvRaHwPGl2/o0c692WaZpM5ZFnuuG+WZdm0y46fLg+clGKxeIWYPTDjZ/TYLB9gli9qtZrOhNAcO5fLXdIrs+qdFKIjMjFRFL3TQq7GOv1xmnbUBI+AjKHmfcL6CbL6Ruh7OE5CaH0NSotXPmHYL3ZAGLL9CzAANR4i5o9tHM8AAAAASUVORK5CYII='));
34
- // The number 7.
35
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAbBJREFUeNqslL1Kw1AUx5O2ih8BsWoRAw6SgAHJKvQFunWqQ18gs5Oj4DP4DuLomqWTjhVEKYVapDRBrdXUqtU2avyfelNCbGwTvfDj9N5L/j1f9/CO43C0eJ7n/rIGOgGCk2ABzIEJ73fgDbTAI7DHEYwDEWyCdTDtEfwAFrgAp6DpF+z/GGy+FwmkNU07sG3b8WMYxhPut8GaP2QiFiFXFMqMLxU/lT2LQl4FW2AX7IPDUqnUIg/r9foz9jtAHtdDytMNOAZH4EQUxY4sy1QgrlKp3MNQ2N1hDiYCIuuBa/BCBcrn8yvuBTy9hSHR12Efjsoh5WpRVdWBYLFYNFmlIwlSxecVRUm5B4VC4QrmgfVjKEG6E0BSkqQkHVSrVatWq1Eq2izXoQSnSCybzcqCIPRbpFwuN1m4HfZqQglS/lKZTEZyD0zTtNiz6/4WVtCaBUvI37J7oOv6Jcwd85Abt7HdP9qgxrYsq0cNTRb7PaAOc2TU06PzRC6XE938NRqNNvOOmvozyMGg8RXzTByFvVsqyDk4Y20Tah76Z2KcNXKLtcx7FMF/ndiRBb8EGABjzN026ymFhAAAAABJRU5ErkJggg=='));
36
- // The number 8.
37
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAahJREFUeNqslLFOwlAUhi0IGpGUoEMTjYnGmLgYEhhN4+qkzpo48Qg8gimMTMDI5hO4GJ3UgUkXOhgGJCYYI5bYRKBD/Y85JeXmokW8ycdtzz39ezn/7VFc152hoSjKzLSDtJQfBCNABQkwz7EBsJjBJIJRsAp2wCYLh4ANHsE9eBJFv7XoxxPlEQZr4DiXy120Wi3bcRyXsCyrbxjGNa1xTjiIYAzo2Wz23BMSoTXk7IFFUTAkqS3VazmVSq17gWq12igWi6Z3r+v6NiYNLIgPywQVMY6/OlIrVVXn2LRQEME+6DabzVcvkEgkov6Eer3+jOkN9KRnR1LDXWCYpvku1q9Wq71g7YxzYkFMWQJHpVLpbpwp5XL5FjmHnPurKfRWLZPJDE0hQ/ympNPpDUwrIC4+PCsRDHPBhye90+k4/gRN0+J8ZCJBTHF9TDxkO6TdfNq23fcCyWRyZCftdvuDP0MniMvUDPYLhcLlOFMqlcoNcg5kpsgEaddkyEk+n78Sv2VyH2unYIubyNTdpgEeuNv0/LWeph92+dqdpMH+e8f+k+CXAAMABxE8L2GVSOsAAAAASUVORK5CYII='));
38
- // The number 9.
39
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAaVJREFUeNqslEFLAkEUx910N8tclk5FEEQUGB3qC0gXbx70WBie9CP4FfTq3Q/QTYPFU/UFOiQh5EEI1iAsWLZ0Q1tq+7+YCVtG19KBH8O+2f0xs/PeC7iuGyDmMcgTmrBOayrQwBKQwABY4AU44z4SDQVsgD2wA1aZkERtcAsewLtwm54jB8EmOCkUCnqr1TIdx3GJTqfTL5VKl1jLgC3vhr49AuEKOMrlcmdc5AXSC7yTZDv/JVwQHHcZrMXj8RgPVKtVo1wu3/HnVCp1yHaoej8WCWWSqqoa5gHDMGzTNH8uIRKJLLKTKNMIKSZHo9GwT5ZIDF/hTEOUNh+UDr1eb8ADmqYpswhJ9Nztdp8w71Igm81uTysUHfmNkjafz5/rut4even/Cimx6RaD6XT6WpZlnWg0Gpa3Jhi+Qqrb9Xq9nkESH4NkpVKJjb5g2/YQU19UeqJ/SPk2aDabj4lEYl/0D2u12g2me/A6TS2HWBWcFovFK8uyhn+pZYnLJEnydhtqEAes21BVfPp1m0lCLtUYykhKje2H47rNTB177qX3JcAAagDd/y1YjuwAAAAASUVORK5CYII='));
40
- // The number 10.
41
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAdZJREFUeNrclD9IAlEcxzW7tLiyrCXrgoiGaInIIQKhwc0xkCYDcXYVDRqaGp2dXASpKYgGlxBbcmvJqCPKSCE4PbMyr7q+D35P5Lj+EC714MO73+/33vfen9/7WSxdblYTXx8YJli8TtjJ1w908Ahq1L9+JsjEJsEimAU2IINrMEI+F3gH9+ASnIM70DIKjYMlsOHxeFK1Wu1F0zQ9GAzuw7cVCoX2isWiwnyMQqFQhm8XsXUwRT9vr3ICrIFttHy1Wm3xiYFAIO/z+bLcNhIOhzOYtwoGmVgPMeT1ej0YsBmNRldEURT433Rdt0F0mtupVEpOJBJn3Pb7/QvoJCByQXYe9VwuVxAEYQdbPDLekiRJA/wbR9FSFEXjttvtHqLV2bmgTgd8DHLpdPrUKOh0OoVvMsXGL7iXnOyGymCM0uDXrafbif1PBFVV1b4I6x38TLBUKj112i6Xq33rjUajyTr+9Hq/rR5W61smk7lCfs4wOxKJzHXGkWYn6G7Ag9kK2daeOx0Oh0PJZrP5eDx+IMtylfsrlcpjLBY7TCaT7K1fgCezasMKxDKYpzL1TBXFWG3YPJVi7CHc8i2bla9R9jiAQCtWTeohm9ekeqjSuD/SPgQYANoDxDJkiCZZAAAAAElFTkSuQmCC'));
42
- // The number 11.
43
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWxJREFUeNrslE1LhEAYx9eXlcK2jQgTRDwYRC90iL5EdOwQdBBP3foEnTr2DcQP0KE+RUHHgm5GRoTpqfcVLMXd/hNjjKJshz3soQd+jPMf53FmfObfao04uAZdBNNghj73wCvIQadG/wKDpoTkxXmwDJaADO7BNfgECxX9EjyAtJqoDebAKtgGh57nPWdZNnAc5wL9PWCxuuu65+hv0hX/BM8k7IJ1sGXbtoVJ+6ZpzpKBJEnINjcsy9ph9TRNJ+gRtNntFTEJjDAMDxRF6bBLz/NcCIJgV1VVedhPYVeYkLPQNO3IMIzjOI6zYkAQhFzX9RPop6w+LOE7uAJnURTd+L7/8rsNUSQHHkJ/ZPWm8iiCfPmJTARvpdriuD6a+C91yI+6sP8TjmFCsUYj5RPzPJ8XgiRJxBRI/WU1eo/OabQvcqdXwBpQqWXdgjswBRYresltmuxLpg5C2j69RR/UBLoVveSH4x/fAgwA+s1/zoQYuDcAAAAASUVORK5CYII='));
44
- // The number 12.
45
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmJJREFUeNrMlM+LUlEUx5/Oe9KkjVOUyZhKM22mQhdRDC5atJidmOZOBXHhxj+goIW6khauDP+AUHctWiS4CYJQw2hoaOGURGU6QY3OkGXjr9f30rnOwxxGokUXPtx7z333vHvu+d4jCP+4qabYRLAAFmn8jdCQbR7I4DvYpX5wmEPm4Cy4CFaBFnwAH8FJsAJOgRH4At6CKvgMekpHEjgNLoNbIF6tVnf6/b6cTqdLmMdCodBD2FrMxqhUKtsul+sB1rxgafJwzNk6uB0MBh8pNyaTydd2u/0xnytpt9s9h8NxH/vWwDEeokD3Ym00GncNBsMJ5Z9kWVYHAoHzfB6NRjdrtdqPbDa7ptPpJJ/Pd7VYLD6h8H+q6bsuuyuTyXTParXmOp1OX+nUYrFo+Zg5U66ZzWY93TW7NoE73AMvwdNms7mFTa1x1lSqkSiKA6UTr9e7xMf1en2PMt1XhswmX0GDpHCQdlHseTyePE3P2Gw2k9vttvD1TCbzAt02OR2f8NCmVquH6N6DV6AZi8VW+Fo+n39TKpU2MPwE9mdyiJBlksRxSGfV6XQuMzu750QiwZKxBVok9nHIRzUm6oV4PL7ODblcbqNcLj/D8B0lVZjphKPRaI7pNJVK3TAajVrK9G4kEilRmJLyYEc6HAwGGgj7gt/vt3EbnG3SY7gCrgEjmJv5hBD2MhMxtxUKhet4KT5wJxwO34TpHBWPP+6QyadDmf39yCVpX6/Xa/62fDHVXwI2CmNIGRSoysxPfN+lavOcNDycVr60VPe0VKa6ivcuTYmIvZSdyfL1/7ZfAgwAPr/v4RS2v5YAAAAASUVORK5CYII='));
46
- // The number 13.
47
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAl9JREFUeNrUlM+LUlEUx98z3zRTNiMVkTq4C4xkFpWCFBqu20ghRYrt+gsUkZK0hbh00WqEcGPgzhhatIgUJTAEaTEaTRA4ziym/DGazficZ98b58arnJBo04UP991z7j0ev/fcIwj/eIhTbHNATzD/AHwFC+AEkIBCti7YBePDArJgy+AiOAeOgC3QBifJN08BmO09WActMPo1kAFcBndtNlum2+3uy7I88fl8L0wm05N8Pv+OrTmNRqMdCoXWsP8WMKmTE8lwEzzCKHU6nRE/6PV6X6fT6Q11MDUOh+Mxzjkoc0FDLDqdThs23A+Hw1d0Op2kTt9qtS7x71QqVc9kMh/42u/3X8J0hjT+HowJvFssFt9IkpQMBAKvfro1UVQ0Go3C1+12W4YcP/SaTCYiac1iCVpmAzugDIbZbHYBGVzjB7Ra7Z7dbn9Kf+k0OJrL5Va4v1arfcT0GezxDAW6oW3QBF/UGSLgEFMD1OPxuAGyXPd4PGbmKxQKm6urq+t05kAd8K+Gy+VaTiaTV3nmMwUcj8fHMFnA+Wg0ug2d16rV6ifut1gsZiq547MGnK9UKrfxV++BG5FIxFwqlXa432g0LtINSzMFxC1qFEU5dF+/3x+RfsrMGvZ6PVm91uv1c/y71Wqx99wH+7xs/tw9RPGgXC5vud1uppMQi8VW1H7Ub53e+3DaeSb+A/XTQqE/g+1hIpF4yd83o9lsDoLB4HP47gAzFfdv3cZA7/ICCc1a1AbV51nqQDrSq0e+t2CTd5tp7esUWKJbk+nggH5AT3sEehld8svCfzO+CTAAQZUW1CtBkesAAAAASUVORK5CYII='));
48
- // The number 14.
49
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAgdJREFUeNrMlLtPIlEUxmFYdxlh1zeaABkT3Oj6IrFiC4FQammMsTGUNBZ0JBsLS/8FSgvspYKCBBsbNLEwYsSYjcBsIj7QiUZGmP2OuWMmehWMW+xNfrkz95755p7HPSbTPx5mzton8A10sucbcAk00A06QBuzVUEVnIMaT5AE+sEo+AFs4ATsgQbwgmEgMvs7sA+2gWwUoj/2gnEwB1bz+fy5qqpaPB7fwvsCmI/FYpu0ZgTrK2BEFxLYTG5MgdlwOLwEsWWPx0PumWq1mhWTEwz5fL4RTohEQwgeXdQXpVKp9MvhcHzlfGQHXYFAYLBZUgRDLH47nc41SZISiqKouoGmaRTnL9FodMJut7dlMhm5FUHK1C7Ilsvlw0KhcKEbNBoNC2Xd7/dL9J7NZs9aEaQTVUAJXBkN6vX6Y8KCwaAky/JtMpmstCL46qATRiKR7+RuOp3mufsZtOuJEVqp/lAo1EdzIpEoc7bpErhZpTxl+c2BcqEaNaVSqenne8VicdHlch0w4Yrw0bvLqkB8l8tms1lrsnfHEtvcZYvF8uB2u9fxqFDwvV7vYC6Xm9X34e4GplNwzROkvyiCINSf7pUo3rDLfwwcVqt15tk3f1gDqfK6DWVqDEyCASpDcAR22Cl6wE/WiURet+G1LxvrhTbWsqqsH96zwPcYeuKLfvj/j78CDACe8KXB21214gAAAABJRU5ErkJggg=='));
50
- // The number 15.
51
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAi5JREFUeNqslE1rGlEUhp2ZjDFKrLGkKK2LIgUhG03iIqm4aMFVoVC7KS4sUhT/QJduXHWpuOvKjYI/QRCCEJIqGtpa2kWyaNNQoV8m1qZ1yEzfG84Ng5mkE/DAw9yPmXfOOffcI1qmbDMGa1bgIgTwh9bngDzxrgIOwXcwNhJkYrfAMrgDJPCT9twkqrdj8AG8AgfgRC/kBavgaTgcLg8Gg7+KomiJRKJRKBR22NiIdDpdwTfr/GcihbUI7oKH+Xz+Wb1ef+JwOKynMSmK3ev1uq+SQybqjEaj4Uaj8fx/H8Dj7Vqt9o3CY7nbAn2eQyamgqNms9mWZflFMpncMOkME/xNeRyTzqmgBr6CTdCsVCpvLlOJxWKLSMMD8Kjdbj+ORCIrWL4JbFzQQn/4AvbB6DJBRODn42Aw6MlkMvcxvA3m9YIXmiAIqiRJZ+VQKpXeFovFd3weCARu0KHaLyrsc4LxeJzV2Q7l7TiXyy3xfY/HM09isilBTdPEVqt1LxQKMU8sKKuOqqqTkUk8WtGMoF7A6XTaMZcMTlw1Jcis1+sd8rHL5bLq9/r9/hCPX3SvTeXwBAV/wE9Xf8rMut3uHh6fwdBIUKFCPTObzfajXC53fD7fMJVKrfv9/gW2PhqNxtVqtZPNZl9i+p4LChOCrEGsgSW67Ex8F3wEC9SB3HQILEzm3WvwidqcJhi0r+vgGpUB73dHYJZ65Bw5wi7DgPbHdOOmb+K0Bf8JMABAPsyYlTRVAQAAAABJRU5ErkJggg=='));
52
- // The number 16.
53
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAiZJREFUeNrUlE9IG0EUxmPXtdpC3P5RUhtSpBU8RQiUQj2UHILHXgs95BAwwUsOOQa8padACSS5mEvwFKQFaS4lhxIQJAQaRcSDbsVspC0tMUZjcLdt+r3wRraLaIReHPix896++Wbmzcyz2f5z6zvHNwDugWG2D0ET9AMF3AYSMPjfATgFHasg9QeBC3jAE/bvgF2egHwjPGkbfAEVUAUn4I95VQ/BNJiNRCIfDcPoELDTYD4QCCyVy+Wvwk+k0+lVigdTvPJuo62Mg1fgTTab3TAPgu+9z+crmH1m8vn8JmJegwdCcAg8TSQSy+cNwL8PmUxmR9job0ej0TVh12q1I8TMgUckdoOT+zMcDudkWX6bTCY3rKdkt9tl0W80GnosFlMRu0w4nc5FGs857Qr+AvuA8vG5UqloVkGXy3VL9N1ut6Jp2gxW97JUKj2HIKWsBXQhaGPjB/guSZJ+0T3zer1jDoejewAej2cklUq9QPc+p+5MsOeGQ1OR7y1hQ5Rux6g45SsLUg7r9bphcct82a8ueFnrSbBarZ5cEtIRT6+/F8Fms3m2RUVRBsz/Wq3WKZ+y0augkcvldv1+/2MyxFe0YrG4xW/5yLrl3zQTLmvbIvitUCishEKhd6qqHphWpsfj8U/BYHAB5iZXpH+qjcQF4hmY5HvV5mqzB+6ACXCXY4/BNlgHmihhfRfUQtlU82j2m1wPh3gh9AAajG67Nu2vAAMABvAJLzvmvhMAAAAASUVORK5CYII='));
54
- // The number 17.
55
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAglJREFUeNrUlE1LQkEUhm/qtQ/tu6ggxMIgbKUkkYJrF0I7wZUt+g39AVetWwVu2rjwF4gglBAhLQQXSghhEmX0gYVlddPbe+LcmG6JGW0aeJg75555Z+acmSNJf9x62tjNYIQhnyYwAVnnp4A7cANe2gmS2CxwgwVgBE+gnxFbAxTBITgHql5oBiyDdY/Hs1ur1Z4VRVHD4fA+9d/h9Xq34e/iE0gG4eiTwAfWotHoRiqVClssFlpEajab5nYxw78+dH2alontNBjy+/2edDq9qZ9kNBpfZFne4TiNxWKxlUgk4uDfdMxX0BJ3SIP7TCZzhIlbcN4TBWGro8uCDMXK5/NNkL1eryvZbPYMn4+cuA9BWuUKHNCkeDye1+8Q3SVl02azyQ6Hg7Iv5XK5C3TXpK0lxCTMo0nkQKs/fBMuitNAKBRa1AyFQoEWueVsS3rBTu392tjt9nHNUC6X6f7VREFDF4K0wzGn0zmlGRKJxDHv8Ok3grTDUZfLRXdVqlarD5VK5ZJfymtXgqqqkl9/MBict1qt78+vVCqJx1W7Emy1WiQyFAgE5jRbsViscoYfRd8fCeI19FL2xfglk8kTLgqNToLKFyeDgWLU43a7pzVbPp8/5YQ8dypfFPRVsMSJaPDRFL6jg5zVAleZCzGG7coX3bVhrn8Kx0nlBcyc1U918P+0NwEGAAJMv5rEne+7AAAAAElFTkSuQmCC'));
56
- // The number 18.
57
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAihJREFUeNrUlDGPElEQx5c791yRkw16itFYGCxOY4FIjMEQw2cwIYQCGwoqKhIKC4PxiAUFHYkVDRhLC0uj5GgwErVgC91G1GCMwHoQdTe6/ucy77K34sElNr7kx2Nm9s2bNzPvSdI/Hp4ZuhWgMmT/CraAwjqFvzPBmDH/5pCcnQaXwDmwDHTwDqyBEPCDJTABb8BLtptuRyfBZXAzGo3Wx+PxD8uy7Ewm8wi624VC4XG/35+QjiB7uVx+AlsanOHNd6I8BW6AOxibo9HIFAuTyeRmKpV6JmQ32Wz2AdZdBz6JQyeOxOPxKD64VSwWYz6fTxa72ba9HIlE1oRcr9f1arWqCRnr1jEFgVc4/EWJb7Vaz2VZvocjPt2rijjqrlz5/f6DmGT2tf1jg8+gDVqNRuP1rjbweGxd1ydCVlV1xWnv9XofMH0B32cFcBFsOHNEOYTuoaZpI3f+Op3OJ9jugmvgsIhw3liqVCrnQ6GQ6jaEw+HjtVqNCnJM9OdchyiKJxaLnRAyFcRZFBTsLHfJKskH9nu1hsOh5ZSDweAqt4y86JH3NRaK0DCMnagCgYDstA0Ggy2+htZCDtE2P9vt9sdEIkFXU8rn8+tOe7fbpbv+nh+QPxzSLt+cCkVRhqVSqev1eo10On0FOdtuj+l0ajabzRe5XO4+RE04dL82FMVVcAEcYudv93htKLpXbKfGtmc9X0d5kcwRG3PeQ4P/29J/MX4LMABVRPc2xeNx/wAAAABJRU5ErkJggg=='));
58
- // The number 19.
59
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAgVJREFUeNrMlDFoGlEYxzV6SQ6DmnQpFEJCEkjWQsmQOZsObhUKbgWHICKIW8AhOAhFkE4OcXCIg1pySyAZsqSUQBQlwUEIagRLU+uJh4mmsf8n3wv2uIYDM/TBj7vv+97737vvfe8zGF54GDV80+AVsJEtgw6YAXYg0ro70Kb4QEuQvc+CRfAWrJK/AqpgHqyBBZorU6wIbkBfvas3YAt8DAQCR4PBYMiA/RnsBoNBqVwut7i/Xq93I5HICWIfwDIwczEzOd6DvWQyWeKLSDDjdrtPx33jQPQYcxy089FgOXkXi8W+aC1A7DCRSFS4nU6nq9Fo9Irb2PVPzNkBS0xsihJ66/P5DgRB+BSPx0vqU7JarQJ/r9VqSqvVejoEi8XCDmuO0jYSfAAN8BVc5PP5ulrQZrMJOqrFyAUNdEI/wHeTydSfpA7NeibJsvz0i3a7fXpSwYdGoyFzw+PxrDw3eUqHYM/v959JklThjmw2W5tEcDRcLtc5qkBiFAqFtio8JHQJiplMZhs15wYO1OTGeFBRlHs8uvzq6cnhEDv65XQ6NXOYy+XyeFxTA/lL8Df7IH6ppxJshsPhoiiKHa/Xu4VCHp1ys9lUUqnUt1AotA/zkguOdxsTNYhNsE5XskcdhRX7a+o27FY8/qvbGJ/phQJdS5lyJFI/5HWo2Q////FHgAEA1kIAAe0AP5kAAAAASUVORK5CYII='));
60
- // The number 20.
61
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAnJJREFUeNrUlM+LUlEUx31m2S/DkRZqmpUVDU0UEhgDLjIwi1mKEhEtzNA/QBducicuRYg2LkRaRG2UaBbhuBahRUZpZJRGCoU6qfNDK/ue4dx4DOW4aNOFD+8+v+d9vffcc65C8Y+HJJvvAVqG5t9BH/TAOlCCQ6zvAxMwZH3I8b8NyeAouABOgYNgE3wCb0GTY06zrgM/wRfwDtTAZzAiMxU4Dm7F4/GVXq+3OR6PJ0Qul6tZLJYEtNsg5Pf7n1Sr1Y7Qy+VyC789hnaDF7SLDOfA9UQi8VwEyiED6A/cbnf+TzoRCAQeIeYy0Ii8HHM6nQsimTabbSWZTL6hudVqnfP5fAsej2de6JlMpi50GktLS5QqM6VKybnR6PV6jQioVCpr8pODqcZsNh8Q70jLqNPpjMW70WikRdH3ajL8QQcgSdJEbuL1ei1iXiqVulqtVrVDtVD+JAr6Bl6bTKYYnkeAPhqNnjUYDPspst1uDwuFQgt/OD9LHZLhKnjBx34OLIZCIasISKfTr6jOtu9gmiHlogsoR+pUKnUJ+dzKV71e78ZisRIX8UxDyU/a3km73b4YDAYvCjESiSxzYXdmNVXyKvXgDAr7qhCy2Ww1n8+/57Ya9fv90RSfiUDFWz2B1VxzOBxU7YpWq7WGg6GWMoG9dIKNRmMgd9DpdLvFfDAYbNBDtB6d7J1isfjhb50A/aHL5VreoVOucC1uVfjdWq32dYrhfXAPu3gq7+VmszkIh8PPoN0UvSzxzXGeS+Yw51Q+1vlG+ch9L24biUuOtJd8M40kNpDfc8pthmP+kBpALYujbzf4PlzluP9g/BJgABvhUfuxyjKwAAAAAElFTkSuQmCC'));
62
- // The number 21.
63
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAk1JREFUeNrMlM+LUlEUx53X0yztl1RYo0lCAzOBULaYXLgMQswkiTQDUXDjP9BOXQmz1o3LQINqYRvBTYsIlCQGZmWN/YIwImacKXNq3vzoe+BcuSPlm0WLDnx49917+N5z7j33GAz/2KbG/lVwFBwHh8Au+AHW+Ls15kPj76APfpG/LGgC02AOXAA2sAO+gmXQASssRD6zwALeg1fgI9iUIyWxO6lU6kmn01nVNG2XaLfbn0Oh0AOs3QN+cAvk4bNC6+Vy+Tn+r/NGIzODq7CSEJLp9/ubXq/3IXwWEonEU3nDYrH4EvO3wSlxZgYO/Uw8Hr8idshms0vdbndYqVTmrVarMRqNemq1WtBut1smXYoind8Rh8MxCpvEZEe32212Op2PXC7X48FgoOkJboOhqqp7HCORyFkx7vV6dCHv8P2AzVb/JihSppJ4HQgEFvCdoQvyeDzT4XD4nHBE6m0SBM5JKQvBDfAWfOPS8OVyOb9wqtfrb5rN5iKGn8Dp/QhSvQ05UlMymZwNBoNuWqDzKhQKzygDLuCd/QiKi6F05vL5/DUxWa1WF1ut1gtO16z39BSpsE+SWKlUuiFKA4e/lslkmvysjGMBTIzwIEXn8/nmY7HYJbEIsSXeyMubf9ETFREeFoVNRSwWG42GH6/hLrifTqdvYsrBkeoKkm3ZbLYDOhlRnQ4URdkeHbzJ9JM7jia3Lzrs8+AyPQpuXbJtcLehmz4GLgI7P4hludtMSZdCoie41xn/ENk616nKncXCJbQu90PDf2+/BRgAl2Xhjy3s2ZYAAAAASUVORK5CYII='));
64
- // The number 22.
65
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAh1JREFUeNrMlL9LW1EUx1+SF3+QtOoLHdQkaFsdHEIoL/gM6JDVIQhBGhIKJiUghf4BdciiOAUcmnQsiHQqwazdskWyiZCURjqE0oLUtLS14Etrv6ecWy7ifXbo0AsfcnO/9553z497NO0fD5c018FNMAqGwQX4Bj7xr3aN3pcNDoBJMAdmgAF+ghPwBrwFbnBXobfBB3AujJKx+/l8/mW73T61bfuCaDab75PJ5C60R+Cxg54CE+KCQ2ABoyw2yvR6vfNoNLpPqPR4PP4UNiyyRW74wHg2mzVFMIvF4mEmk2nQ3O/3e6HNEiod8xjf0Kdz/G4Eg8FRcaDT6ZzJmQuHwz75/2U9FAqN8MW8dMMf4EzXdVvelEqlJsS82+1+gd530D9zpn/bIMsR8ABsgueRSOSVHCfTNPewvqHSKf6UB86HJuI4BZbBVrVaPRaba7Xaa6ytc9BV+kPyXK5rmtwCK7lcripn0LKsZ1hf4g+q9EW+1J8xCO6RW4jHV3GgXC4fYC0D7gDTQZ9kTzW5sLO0QWxutVo9rO1w0c6DNQd9iqtFE4VtUXGSC+JAIpGoY52SsQ2exGKxXQd9laoLeDR+lyuVSqVx1Usg0ul0vVQqHan0QqHwAjbi1DSE333DMDyqluR2u/uBQMD1t+2LXJ7mpNzm1iSP7+CU54ZCp25DCXrnkoyOcb/zXjpg8yGNjV2l00v5KNrX/z1+CTAAejWU4TBFD08AAAAASUVORK5CYII='));
66
- // The number 23.
67
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAArdJREFUeNrUlF1oklEYx9W5r9rERYXYmpX2gfTFGojRMLwoCroKZhBCQYayu4ZejMCQhngTiNVdiAwqpBtX9EEybwxGw1gNlvbFyGwXlpjKalra/4nnxJvMrrrphd/7nnP+5zzvOc/Hkcn+8SOXtDuAmqH2d1AGRbACOlnrBe2gDr6yXuL5vw2SgQGwH2wHPWzkA3gF8mAD2AH6QRcbKIDXYAHkQJWMKcFWYPf7/dPFYnGlVqs1iFgsltHpdAFoo/SlvtCIdDpd8Hg896CfApvEBvvA8UAg8Fg6WboI+o1wOLywmk6YzeZrmGOmnSvwUoEtVqt1t3Dm4ODgdDAYfEltvV7fZ7PZdhqNxvVCJy0SibwVfbvdfgCfjaBbyf7r1Wg0vWLC/Pz8sjRyBoOhRy6XN0S/UCjUpHqj0aCjtgEFGfxBAZAuoGdkZEQn2qlU6v3ExMRDDpaGIh6NRvcKfW5ubhGfz+Ab9ekoR8AYuAJujo+PPxf+yWazFYxdBCfAeZ/P90Tqv3g8nsW4FwwJH34Bz8AjMEt/crlcevF3+Iq0j6CyWiJbLJZ+BPQQb6xTjNP56YhnQqHQbFOEL9POwAVwFdwBd2dmZvLS9MLYWaBVsME15HuTyXTQ6XQOib8gxx5wcqvgxzEsHgUn4ZKBZDKZF/O0Wi1lSjdVkIITmxy9C4l9VEyanJxMT01NvUOTItpVr9cVreq3XC5XObh1MrYWbMNujg0PD1P5yZaWlpaxizdcZqS3l0qlP1JFrVZ3iHYulyty3VO5/iqZc4lEYrFVJUC/5fV6n7bSHQ7Hbcw5zGkl20xOz2Qyn/5i8Dq41FzrlFJut/s+tNN8ubRRhq8D+8AeDr2yyUV0RdHxs+xrcRvVOeVIe8HBq8rZgIrvOopUs/NrvLDCurgvZVwZRdZrsv/i+SnAALSEnerTo5c3AAAAAElFTkSuQmCC'));
68
- // The number 24.
69
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAApBJREFUeNqslE9oknEYx/X1D6Vmf122TSFXxryUwQrr0GFsktQQBgl2S+gUIYg0BPFiFw8SHUKiBV12CzEk6CINOiUviyQwNoKUShjZFkrLd86+jzy/YTI97Qcf3vf3e573eZ+/P0m1z0vb864BBnAEmHi/BTbAJtgGB8BRYAY60AZN1qHntjBIwhHgBGfBKf4ZGVoDH8FPMAouAgc4CFqgxvJPrN9dJ8BNj8fzpFAofFUUpUNUq9VGNBp9DdltcBkEl5aWZCEnZFn+hvM7YLw31EnwgAz0KgsWFhZeQX4PPOzXKRaL5OF9cJqMSZyXk6FQaMpqtRrpMJvNVmw225tGo6HQfn5+fgqPc16v97zQGbQkzp/Z4XBYxGGlUmnWajXFZDKRTAUjh6gYgUDgDO2Rlh/DDHYrpdfrt3rOO7FYzC425XKZqqifmZkZJ69LpdLGsLb5A74g+c/BewqfPEaubgil5eXl9enpaQuFS+mo1+vKMA+pv6hS78BbUE0kEg6RK4TeTCaTq8FgcIzDXR9gh5yTJD5ocXO27Hb7sXA4fEFoplKpD/TT2dnZUQo3k8nslb/DwMK9uRv6BLiby+U+i5agnsTZY7fb/XKvdhLk83lq6ls0HMJDGqXJubm5az6fj6ZFRd5EIpEij19nWKu0220tj6tO4vhpUpwI77pQWlxcXFtZWSFD1p2dHcMwgxqNhurQAN1iUWNf9fv9LwaFlE6nS9B5Bh6Bp/F4XO6blAS4Aoxa9lDtcrnMgzwwGAy/uQsop2NGo3Fit7yS1OYu+U4tqOaC0GBfovHqrRQv6tNVIPNHI6zr5Hvgv9tGzR/pwXEuv67PoMLX0i/wl+VCV+q/D/f7wlZJ+23wnwADAHUlUxtyWY3RAAAAAElFTkSuQmCC'));
70
- // The number 25.
71
- $zen-grid-number-images : append($zen-grid-number-images, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAsVJREFUeNrMlF9IU3EUx3fvbrNcW8ucjP6NXMlKZkGBIfOhF6MRBiFbMCoIGdqDL409CK4HH8Zg9KIkPgSC5YsgzYIwMCGkGLJIJrJBE8tqPlRbJZpbbX2PnB9choseeujC597f75xzz+/3O+f8jkbzjx9JNdYBE0Pjn+A7yIES2MPsKPNRAF/BZ5CXVM4Og1PgGNgNNsF78AZsABvrdpU5JF0SxMAHEijgCLgaCoWe5XK5zUKhUCKi0WjKarVGoPMPDw/PCnk5Pp9vDDYttJiMlwEcD4fD1/x+/zm9Xq8TS7tcroapqakbGJ4wm82Wv42jFdycm5vLiBUdDsd0JBJZFHOPxzM7Pj6+LOZut/sl/nkEHoJ7oBPUA63M8TNYLBaDWCGRSKyrV7TZbIZSqSRts5lfYJ3jmAdFmYWbkiSV1JbYhVWMY7FYVq1va2szY6cXwWWcrMPpdJ6G+ADYSfpasgG3wB0w1tvbOy+Ot7KysgbZ/YmJiXSlpIyOjs7D5gqoU7iGXoGPwEHZ6u7utondjIyMvCadoih5IRscHEwUi0W5p6enkeZ2u70OHzOoVrgws0APqgYGBs4injTWpNPpbF9f33PSt7e3P8V3kUO0EQwGG8UCHP9qKnqFZTQ52tzc3NLV1XVGGAYCgSf4vKNCj8fjHU1NTftJ3t/fH6cdliVIC2SZC5tqzI7CPi+0iEtycnJyibNXpXZgNBqrMdduk/EtIzpePXZzobW1la6fJpPJrCMxdOUOUlFT4hYWFrLiT5PJpFN7Wl1dpTu/xuHbSnfnzMzMcqUsQv/A6/VOV9LTtYTNJbCPHB4CvlQq9ekPDu+C2zjF42Qy+UXI6d4PDQ29gO46aKBLQtVfA05yydRyTMu7CR3/LdjLHaeGk0DHTIN5Tt4PiR0YuQ9Sa5Ir9LtvlByVncQJy7E+z33zP39+CzAA8EmJ9NTdgeQAAAAASUVORK5CYII='));
72
- }
6
+ @import "zen-grids/functions";
7
+ @import "zen-grids/internal/variables-background"; // Add the default set of background images.
8
+ @import "compass/css3/images"; // Unlike the rest of Zen Grids, this module requires Compass.
73
9
 
74
10
 
75
11
  //
76
12
  // Add a background grid image to an element's background.
77
- // @see http://zengrids.com/help/#zen-grid-background
13
+ // @see http://next.zengrids.com/reference/background/#zen-grid-background
78
14
  //
79
15
  @mixin zen-grid-background(
80
16
  $columns : $zen-columns,
@@ -87,113 +23,117 @@ $zen-grid-number-images : () !default;
87
23
  $switch-direction : $zen-switch-direction
88
24
  ) {
89
25
 
90
- $bg-images : ();
91
- $gradient : ();
92
- $left-half-gradient : ();
93
- $right-half-gradient : ();
26
+ // Check if the global variable is turning off background images.
27
+ @if $display-zen-grid-background {
94
28
 
95
- // Calculate half of the unit width.
96
- $unit-width : zen-unit-width($columns, $gutters, $gutter-method, $grid-width);
97
- $half-unit-width : $unit-width / 2;
29
+ $bg-images : ();
30
+ $gradient : ();
31
+ $left-half-gradient : ();
32
+ $right-half-gradient : ();
98
33
 
99
- // Determine the float direction.
100
- $dir : $direction;
101
- @if $switch-direction {
102
- $dir : zen-direction-switch($dir);
103
- }
34
+ // Calculate half of the unit width.
35
+ $unit-width : zen-unit-width($columns, $gutters, $gutter-method, $grid-width);
36
+ $half-unit-width : $unit-width / 2;
104
37
 
105
- @for $count from 1 through $columns {
106
- // First add the grid numbers to the background images list.
107
- $position: (2 * $count - 1) * $half-unit-width;
108
- @if $gutter-method == margin {
109
- $position: $position + ($count - 1) * $gutters;
38
+ // Determine the float direction.
39
+ $dir : $direction;
40
+ @if $switch-direction {
41
+ $dir : zen-direction-switch($dir);
110
42
  }
111
- $reverse-count: $columns + 1 - $count;
112
43
 
113
- @if $dir == left {
114
- @if $grid-numbers == both or $grid-numbers == top {
115
- $bg-images : append($bg-images, nth($zen-grid-number-images, $count) $position top no-repeat, comma);
44
+ @for $count from 1 through $columns {
45
+ // First add the grid numbers to the background images list.
46
+ $position: (2 * $count - 1) * $half-unit-width;
47
+ @if $gutter-method == margin {
48
+ $position: $position + ($count - 1) * $gutters;
116
49
  }
117
- @if $grid-numbers == both or $grid-numbers == bottom {
118
- $bg-images : append($bg-images, nth($zen-grid-number-images, $reverse-count) $position bottom no-repeat, comma);
119
- }
120
- }
121
- @else {
122
- @if $grid-numbers == both or $grid-numbers == bottom {
123
- $bg-images : append($bg-images, nth($zen-grid-number-images, $count) $position bottom no-repeat, comma);
50
+ $reverse-count: $columns + 1 - $count;
51
+
52
+ @if $dir == left {
53
+ @if $grid-numbers == both or $grid-numbers == top {
54
+ $bg-images : append($bg-images, nth($zen-grid-number-images, $count) $position top no-repeat, comma);
55
+ }
56
+ @if $grid-numbers == both or $grid-numbers == bottom {
57
+ $bg-images : append($bg-images, nth($zen-grid-number-images, $reverse-count) $position bottom no-repeat, comma);
58
+ }
124
59
  }
125
- @if $grid-numbers == both or $grid-numbers == top {
126
- $bg-images : append($bg-images, nth($zen-grid-number-images, $reverse-count) $position top no-repeat, comma);
60
+ @else {
61
+ @if $grid-numbers == both or $grid-numbers == bottom {
62
+ $bg-images : append($bg-images, nth($zen-grid-number-images, $count) $position bottom no-repeat, comma);
63
+ }
64
+ @if $grid-numbers == both or $grid-numbers == top {
65
+ $bg-images : append($bg-images, nth($zen-grid-number-images, $reverse-count) $position top no-repeat, comma);
66
+ }
127
67
  }
128
- }
129
68
 
130
- // Next, build the color stops for the column gradients.
131
- @if $gutter-method == margin {
132
- // If the gutter method is "margin", calculating the color stops is easy.
133
- @if $count < $columns {
134
- $stop: $count * $unit-width + ($count - 1) * $gutters;
135
- $gradient: append($gradient, $grid-color $stop, comma);
69
+ // Next, build the color stops for the column gradients.
70
+ @if $gutter-method == margin {
71
+ // If the gutter method is "margin", calculating the color stops is easy.
72
+ @if $count < $columns {
73
+ $stop: $count * $unit-width + ($count - 1) * $gutters;
74
+ $gradient: append($gradient, $grid-color $stop, comma);
75
+ $gradient: append($gradient, transparent $stop, comma);
76
+
77
+ $stop: $stop + $gutters;
78
+ $gradient: append($gradient, transparent $stop, comma);
79
+ $gradient: append($gradient, $grid-color $stop, comma);
80
+ }
81
+ }
82
+ @else if comparable($gutters, $grid-width) {
83
+ // If the gutter and grid width have the same units, calculating the color
84
+ // stops is easy.
85
+ $stop: ($count - 1) * $unit-width + zen-half-gutter($gutters);
136
86
  $gradient: append($gradient, transparent $stop, comma);
87
+ $gradient: append($gradient, $grid-color $stop, comma);
137
88
 
138
- $stop: $stop + $gutters;
139
- $gradient: append($gradient, transparent $stop, comma);
89
+ $stop: $count * $unit-width - zen-half-gutter($gutters);
140
90
  $gradient: append($gradient, $grid-color $stop, comma);
91
+ $gradient: append($gradient, transparent $stop, comma);
141
92
  }
142
- }
143
- @else if comparable($gutters, $grid-width) {
144
- // If the gutter and grid width have the same units, calculating the color
145
- // stops is easy.
146
- $stop: ($count - 1) * $unit-width + zen-half-gutter($gutters);
147
- $gradient: append($gradient, transparent $stop, comma);
148
- $gradient: append($gradient, $grid-color $stop, comma);
149
-
150
- $stop: $count * $unit-width - zen-half-gutter($gutters);
151
- $gradient: append($gradient, $grid-color $stop, comma);
152
- $gradient: append($gradient, transparent $stop, comma);
153
- }
154
- @else {
155
- // If the gutter and grid width have different units, things are tricky.
156
- // The CSS3 Gradient syntax doesn't allow for calc() to be used in color
157
- // stops, so we can't express the columns as 20% + 10px. Instead we are
158
- // going to divide all our columns in half and into 2 groups: one group
159
- // for the left halves of the columns and one group for the right halves.
160
- // Then we'll use background position to shift the left halves over to the
161
- // right by a half gutter width and shift the right halves over to the
162
- // left by a half gutter width and just let the two sets of gradients
163
- // overlap in the middle. Easy.
164
-
165
- // Build the color stops for the left halves of the column gradients.
166
- @if $count > 1 {
167
- $stop: (2 * $count - 2) * $half-unit-width;
168
- $left-half-gradient: append($left-half-gradient, transparent $stop, comma);
93
+ @else {
94
+ // If the gutter and grid width have different units, things are tricky.
95
+ // The CSS3 Gradient syntax doesn't allow for calc() to be used in color
96
+ // stops, so we can't express the columns as 20% + 10px. Instead we are
97
+ // going to divide all our columns in half and into 2 groups: one group
98
+ // for the left halves of the columns and one group for the right halves.
99
+ // Then we'll use background position to shift the left halves over to the
100
+ // right by a half gutter width and shift the right halves over to the
101
+ // left by a half gutter width and just let the two sets of gradients
102
+ // overlap in the middle. Easy.
103
+
104
+ // Build the color stops for the left halves of the column gradients.
105
+ @if $count > 1 {
106
+ $stop: (2 * $count - 2) * $half-unit-width;
107
+ $left-half-gradient: append($left-half-gradient, transparent $stop, comma);
108
+ $left-half-gradient: append($left-half-gradient, $grid-color $stop, comma);
109
+ }
110
+
111
+ $stop: (2 * $count - 1) * $half-unit-width;
169
112
  $left-half-gradient: append($left-half-gradient, $grid-color $stop, comma);
170
- }
171
-
172
- $stop: (2 * $count - 1) * $half-unit-width;
173
- $left-half-gradient: append($left-half-gradient, $grid-color $stop, comma);
174
- $left-half-gradient: append($left-half-gradient, transparent $stop, comma);
175
-
176
- // Build the color stops for the right halves of the column gradients.
177
- $right-half-gradient: append($right-half-gradient, transparent $stop, comma);
178
- $right-half-gradient: append($right-half-gradient, $grid-color $stop, comma);
113
+ $left-half-gradient: append($left-half-gradient, transparent $stop, comma);
179
114
 
180
- @if $count < $columns {
181
- $stop: (2 * $count) * $half-unit-width;
182
- $right-half-gradient: append($right-half-gradient, $grid-color $stop, comma);
115
+ // Build the color stops for the right halves of the column gradients.
183
116
  $right-half-gradient: append($right-half-gradient, transparent $stop, comma);
117
+ $right-half-gradient: append($right-half-gradient, $grid-color $stop, comma);
118
+
119
+ @if $count < $columns {
120
+ $stop: (2 * $count) * $half-unit-width;
121
+ $right-half-gradient: append($right-half-gradient, $grid-color $stop, comma);
122
+ $right-half-gradient: append($right-half-gradient, transparent $stop, comma);
123
+ }
184
124
  }
185
125
  }
186
- }
187
126
 
188
- // Last, add the gradient (or gradient halves) to the background images list.
189
- @if $gutter-method == margin or comparable($gutters, $grid-width) {
190
- $bg-images : append($bg-images, linear-gradient(left, $gradient) left top no-repeat, comma);
191
- }
192
- @else {
193
- $bg-images : append($bg-images, linear-gradient(left, $left-half-gradient) zen-half-gutter($gutters) top no-repeat, comma);
194
- $bg-images : append($bg-images, linear-gradient(left, $right-half-gradient) (-(zen-half-gutter($gutters))) top no-repeat, comma);
195
- }
127
+ // Last, add the gradient (or gradient halves) to the background images list.
128
+ @if $gutter-method == margin or comparable($gutters, $grid-width) {
129
+ $bg-images : append($bg-images, linear-gradient(left, $gradient) left top no-repeat, comma);
130
+ }
131
+ @else {
132
+ $bg-images : append($bg-images, linear-gradient(left, $left-half-gradient) zen-half-gutter($gutters) top no-repeat, comma);
133
+ $bg-images : append($bg-images, linear-gradient(left, $right-half-gradient) (-(zen-half-gutter($gutters))) top no-repeat, comma);
134
+ }
196
135
 
197
- // Apply the full list of background images.
198
- @include background($bg-images);
136
+ // Apply the full list of background images.
137
+ @include background($bg-images);
138
+ }
199
139
  }