neat 1.9.1 → 2.0.0.alpha.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (119) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +4 -4
  3. data/.hound.yml +5 -0
  4. data/.npmignore +0 -4
  5. data/.scss-lint.yml +3 -1
  6. data/CHANGELOG.md +45 -23
  7. data/CONTRIBUTING.md +12 -0
  8. data/Gemfile +1 -2
  9. data/Gulpfile.js +5 -6
  10. data/LICENSE.md +1 -1
  11. data/README.md +26 -163
  12. data/RELEASING.md +27 -0
  13. data/Rakefile +3 -13
  14. data/bower.json +8 -9
  15. data/circle.yml +13 -0
  16. data/contrib/base/_grids.scss +4 -0
  17. data/contrib/base/_variables.scss +8 -0
  18. data/contrib/index.html +68 -223
  19. data/contrib/patterns/_box.scss +11 -0
  20. data/contrib/patterns/_global.scss +5 -0
  21. data/contrib/patterns/_grid-media.scss +52 -0
  22. data/contrib/patterns/_grid-nested.scss +7 -0
  23. data/contrib/patterns/_grid-push.scss +7 -0
  24. data/contrib/patterns/_grid-shift.scss +7 -0
  25. data/contrib/patterns/_grid.scss +31 -0
  26. data/contrib/styles.scss +12 -293
  27. data/core/_neat.scss +20 -0
  28. data/core/neat/functions/_neat-column-default.scss +23 -0
  29. data/core/neat/functions/_neat-column-ratio.scss +24 -0
  30. data/core/neat/functions/_neat-column-width.scss +25 -0
  31. data/core/neat/functions/_neat-parse-columns.scss +22 -0
  32. data/core/neat/functions/_neat-parse-media.scss +20 -0
  33. data/core/neat/functions/_retrieve-neat-settings.scss +18 -0
  34. data/core/neat/mixins/_grid-column.scss +29 -0
  35. data/{app/assets/stylesheets/mixins/_clearfix.scss → core/neat/mixins/_grid-container.scss} +5 -5
  36. data/core/neat/mixins/_grid-media.scss +50 -0
  37. data/core/neat/mixins/_grid-push.scss +32 -0
  38. data/core/neat/mixins/_grid-shift.scss +31 -0
  39. data/core/neat/settings/_settings.scss +41 -0
  40. data/index.js +1 -1
  41. data/lib/neat.rb +5 -18
  42. data/lib/neat/generator.rb +1 -1
  43. data/lib/neat/version.rb +1 -1
  44. data/neat.gemspec +27 -33
  45. data/package.json +5 -4
  46. data/spec/.keep +0 -0
  47. data/spec/fixtures/_setup.scss +1 -0
  48. data/spec/fixtures/functions/neat-column-default.scss +22 -0
  49. data/spec/fixtures/functions/neat-column-width.scss +30 -0
  50. data/spec/fixtures/functions/neat-parse-media.scss +9 -0
  51. data/spec/fixtures/functions/retrieve-neat-settings.scss +22 -0
  52. data/spec/fixtures/mixins/grid-column.scss +57 -0
  53. data/spec/fixtures/mixins/grid-container.scss +5 -0
  54. data/spec/fixtures/mixins/grid-push.scss +38 -0
  55. data/spec/fixtures/mixins/grid-shift.scss +38 -0
  56. data/spec/neat/functions/neat_column_default_spec.rb +35 -0
  57. data/spec/neat/functions/neat_column_width_spec.rb +47 -0
  58. data/spec/neat/functions/neat_parse_media_spec.rb +23 -0
  59. data/spec/neat/functions/retrieve_neat_settings_spec.rb +35 -0
  60. data/spec/neat/mixins/grid_column_spec.rb +101 -0
  61. data/spec/neat/mixins/grid_container_spec.rb +17 -0
  62. data/spec/neat/mixins/grid_push_spec.rb +59 -0
  63. data/spec/neat/mixins/grid_shift_spec.rb +59 -0
  64. data/spec/support/matchers/have_ruleset.rb +20 -0
  65. data/spec/support/matchers/have_value.rb +9 -7
  66. data/spec/support/parser_support.rb +8 -1
  67. data/spec/support/sass_support.rb +1 -1
  68. metadata +76 -153
  69. data/.rspec +0 -1
  70. data/.ruby-version +0 -1
  71. data/.travis.yml +0 -10
  72. data/app/assets/stylesheets/_neat-helpers.scss +0 -11
  73. data/app/assets/stylesheets/_neat.scss +0 -24
  74. data/app/assets/stylesheets/functions/_new-breakpoint.scss +0 -49
  75. data/app/assets/stylesheets/functions/_private.scss +0 -154
  76. data/app/assets/stylesheets/grid/_box-sizing.scss +0 -15
  77. data/app/assets/stylesheets/grid/_direction-context.scss +0 -33
  78. data/app/assets/stylesheets/grid/_display-context.scss +0 -28
  79. data/app/assets/stylesheets/grid/_fill-parent.scss +0 -22
  80. data/app/assets/stylesheets/grid/_media.scss +0 -92
  81. data/app/assets/stylesheets/grid/_omega.scss +0 -112
  82. data/app/assets/stylesheets/grid/_outer-container.scss +0 -34
  83. data/app/assets/stylesheets/grid/_pad.scss +0 -25
  84. data/app/assets/stylesheets/grid/_private.scss +0 -35
  85. data/app/assets/stylesheets/grid/_reset-display.scss +0 -14
  86. data/app/assets/stylesheets/grid/_row.scss +0 -45
  87. data/app/assets/stylesheets/grid/_shift.scss +0 -50
  88. data/app/assets/stylesheets/grid/_span-columns.scss +0 -94
  89. data/app/assets/stylesheets/grid/_to-deprecate.scss +0 -81
  90. data/app/assets/stylesheets/grid/_visual-grid.scss +0 -42
  91. data/app/assets/stylesheets/settings/_disable-warnings.scss +0 -13
  92. data/app/assets/stylesheets/settings/_grid.scss +0 -51
  93. data/app/assets/stylesheets/settings/_visual-grid.scss +0 -27
  94. data/lib/neat/engine.rb +0 -5
  95. data/lib/tasks/install.rake +0 -19
  96. data/sache.json +0 -5
  97. data/spec/neat/columns_spec.rb +0 -73
  98. data/spec/neat/container_spec.rb +0 -21
  99. data/spec/neat/default_spec.rb +0 -15
  100. data/spec/neat/direction_spec.rb +0 -19
  101. data/spec/neat/display_spec.rb +0 -19
  102. data/spec/neat/media_spec.rb +0 -55
  103. data/spec/neat/new_breakpoint_spec.rb +0 -17
  104. data/spec/neat/omega_spec.rb +0 -66
  105. data/spec/neat/pad_spec.rb +0 -32
  106. data/spec/neat/row_spec.rb +0 -39
  107. data/spec/neat/shift_spec.rb +0 -41
  108. data/test/_setup.scss +0 -2
  109. data/test/default.scss +0 -1
  110. data/test/direction-context.scss +0 -13
  111. data/test/display-context.scss +0 -15
  112. data/test/media.scss +0 -39
  113. data/test/new-breakpoint.scss +0 -13
  114. data/test/omega.scss +0 -29
  115. data/test/outer-container.scss +0 -11
  116. data/test/pad.scss +0 -17
  117. data/test/row.scss +0 -26
  118. data/test/shift.scss +0 -36
  119. data/test/span-columns.scss +0 -21
@@ -1,42 +0,0 @@
1
- @charset "UTF-8";
2
-
3
- @mixin grid-column-gradient($values...) {
4
- background-image: -webkit-linear-gradient(left, $values);
5
- background-image: -moz-linear-gradient(left, $values);
6
- background-image: -ms-linear-gradient(left, $values);
7
- background-image: -o-linear-gradient(left, $values);
8
- background-image: unquote("linear-gradient(to left, #{$values})");
9
- }
10
-
11
- @if $visual-grid == true or $visual-grid == yes {
12
- body:before {
13
- @include grid-column-gradient(gradient-stops($grid-columns));
14
- content: "";
15
- display: inline-block;
16
- height: 100%;
17
- left: 0;
18
- margin: 0 auto;
19
- max-width: $max-width;
20
- opacity: $visual-grid-opacity;
21
- pointer-events: none;
22
- position: fixed;
23
- right: 0;
24
- width: 100%;
25
-
26
- @if $visual-grid-index == back {
27
- z-index: -1;
28
- }
29
-
30
- @else if $visual-grid-index == front {
31
- z-index: 9999;
32
- }
33
-
34
- @each $breakpoint in $visual-grid-breakpoints {
35
- @if $breakpoint {
36
- @include media($breakpoint) {
37
- @include grid-column-gradient(gradient-stops($grid-columns));
38
- }
39
- }
40
- }
41
- }
42
- }
@@ -1,13 +0,0 @@
1
- @charset "UTF-8";
2
-
3
- /// Disable all deprecation warnings. Defaults to `false`. Set with a `!global` flag.
4
- ///
5
- /// @type Bool
6
-
7
- $disable-warnings: false !default;
8
-
9
- @mixin -neat-warn($message) {
10
- @if $disable-warnings == false {
11
- @warn "#{$message}";
12
- }
13
- }
@@ -1,51 +0,0 @@
1
- @charset "UTF-8";
2
-
3
- /// Sets the relative width of a single grid column. The unit used should be the same one used to define `$gutter`. Set with a `!global` flag.
4
- ///
5
- /// @type Number (Unit)
6
-
7
- $column: 4.2358em !default;
8
-
9
- /// Sets the relative width of a single grid gutter. The unit used should be the same one used to define `$column`. Set with the `!global` flag.
10
- ///
11
- /// @type Number (Unit)
12
-
13
- $gutter: 1.618em !default;
14
-
15
- /// Sets the total number of columns in the grid. Its value can be overridden inside a media query using the `media()` mixin. Set with the `!global` flag.
16
- ///
17
- /// @type Number (Unitless)
18
-
19
- $grid-columns: 12 !default;
20
-
21
- /// Sets the max-width property of the element that includes `outer-container()`. Set with the `!global` flag.
22
- ///
23
- /// @type Number (Unit)
24
- ///
25
- $max-width: 1200px !default;
26
-
27
- /// When set to true, it sets the box-sizing property of all elements to `border-box`. Set with a `!global` flag.
28
- ///
29
- /// @type Bool
30
- ///
31
- /// @example css - CSS Output
32
- /// html {
33
- /// box-sizing: border-box; }
34
- ///
35
- /// *, *::after, *::before {
36
- /// box-sizing: inherit;
37
- /// }
38
-
39
- $border-box-sizing: true !default;
40
-
41
- /// Sets the default [media feature](http://www.w3.org/TR/css3-mediaqueries/#media) that `media()` and `new-breakpoint()` revert to when only a breakpoint value is passed. Set with a `!global` flag.
42
- ///
43
- /// @type String
44
-
45
- $default-feature: min-width; // Default @media feature for the breakpoint() mixin
46
-
47
- ///Sets the default layout direction of the grid. Can be `LTR` or `RTL`. Set with a `!global` flag.
48
- ///
49
- ///@type String
50
-
51
- $default-layout-direction: LTR !default;
@@ -1,27 +0,0 @@
1
- @charset "UTF-8";
2
-
3
- /// Displays the visual grid when set to true. The overlaid grid may be few pixels off depending on the browser's rendering engine and pixel rounding algorithm. Set with the `!global` flag.
4
- ///
5
- /// @type Bool
6
-
7
- $visual-grid: false !default;
8
-
9
- /// Sets the visual grid color. Set with `!global` flag.
10
- ///
11
- /// @type Color
12
-
13
- $visual-grid-color: #eee !default;
14
-
15
- /// Sets the `z-index` property of the visual grid. Can be `back` (behind content) or `front` (in front of content). Set with `!global` flag.
16
- ///
17
- /// @type String
18
-
19
- $visual-grid-index: back !default;
20
-
21
- /// Sets the opacity property of the visual grid. Set with `!global` flag.
22
- ///
23
- /// @type Number (unitless)
24
-
25
- $visual-grid-opacity: 0.4 !default;
26
-
27
- $visual-grid-breakpoints: () !default;
@@ -1,5 +0,0 @@
1
- module Neat
2
- class Engine < Rails::Engine
3
- # auto wire
4
- end
5
- end
@@ -1,19 +0,0 @@
1
- require "fileutils"
2
- require "find"
3
-
4
- namespace :neat do
5
- desc "Copy Neat's files to the Rails assets directory."
6
- task :install, [:sass_path] do |t, args|
7
- args.with_defaults(:sass_path => 'public/stylesheets/sass')
8
- source_root = File.expand_path(File.join(File.dirname(__FILE__), '..', '..'))
9
- FileUtils.mkdir_p("#{Rails.root}/#{args.sass_path}/neat")
10
- FileUtils.cp_r("#{source_root}/app/assets/stylesheets/.", "#{Rails.root}/#{args.sass_path}/neat", { :preserve => true })
11
-
12
- Find.find("#{Rails.root}/#{args.sass_path}/neat") do |path|
13
- if path.end_with?(".css.scss")
14
- path_without_css_extension = path.gsub(/\.css\.scss$/, ".scss")
15
- FileUtils.mv(path, path_without_css_extension)
16
- end
17
- end
18
- end
19
- end
data/sache.json DELETED
@@ -1,5 +0,0 @@
1
- {
2
- "name": "Neat",
3
- "description": "A lightweight, semantic grid framework",
4
- "tags": ["columns", "grid", "layout", "media", "media-queries", "neat", "queries", "sass", "scss", "semantic"]
5
- }
@@ -1,73 +0,0 @@
1
- require "spec_helper"
2
-
3
- describe "@include span-columns()" do
4
- before(:all) do
5
- ParserSupport.parse_file("span-columns")
6
- end
7
-
8
- context "with argument (6) in a twelve-column grid" do
9
- it "sets width in percentage" do
10
- expect(".span-columns-default").to have_rule("width: 48.82117%")
11
- end
12
-
13
- it "sets gutter in percentage" do
14
- expect(".span-columns-default").to have_rule("margin-right: 2.35765%")
15
- end
16
-
17
- it "sets display to block" do
18
- expect(".span-columns-default").to have_rule("display: block")
19
- end
20
-
21
- it "sets float to left" do
22
- expect(".span-columns-default").to have_rule("float: left")
23
- end
24
-
25
- it "removes gutter from last element" do
26
- expect(".span-columns-default:last-child").to have_rule("margin-right: 0")
27
- end
28
- end
29
-
30
- context "when nested" do
31
- it "sets relative width in percentage" do
32
- expect(".span-columns-default .span-columns-nested").to have_rule("width: 30.11389%")
33
- end
34
-
35
- it "sets relative gutter in percentage" do
36
- expect(".span-columns-default .span-columns-nested").to have_rule("margin-right: 4.82916%")
37
- end
38
- end
39
-
40
- context "with argument (table)" do
41
- it "sets display to table-cell" do
42
- expect(".span-columns-table").to have_rule("display: table-cell")
43
- end
44
-
45
- it "sets width evenly between elements" do
46
- expect(".span-columns-table").to have_rule("width: 50%")
47
- end
48
- end
49
-
50
- context "with argument (block-collapse)" do
51
- it "appends gutter width to column width" do
52
- expect(".span-columns-collapse").to have_rule("width: 51.17883%")
53
- end
54
-
55
- it "removes the next gutter" do
56
- expect(".span-columns-collapse").to_not have_rule("margin-right: 2.35765%")
57
- end
58
-
59
- it "removes gutter percentage from the width of the last child" do
60
- expect(".span-columns-collapse:last-child").to have_rule("width: 48.82117%")
61
- end
62
- end
63
-
64
- context "with argument (no-display)" do
65
- it "doesn't set display property" do
66
- expect(".span-columns-no-display").to_not have_rule("display: block")
67
- end
68
-
69
- it "sets width in percentage based on a block layout" do
70
- expect(".span-columns-no-display").to have_rule("width: 48.82117%")
71
- end
72
- end
73
- end
@@ -1,21 +0,0 @@
1
- require "spec_helper"
2
-
3
- describe "@include outer-container()" do
4
- before(:all) do
5
- ParserSupport.parse_file("outer-container")
6
- end
7
-
8
- it "adds clearfix" do
9
- expect(".container-default::after").to have_rule("clear: both")
10
- end
11
-
12
- it "sets max-width" do
13
- expect(".container-default").to have_rule("max-width: 960px")
14
- end
15
-
16
- context "with max-width argument: 100%" do
17
- it "sets max-width to 100%" do
18
- expect(".container-custom-width").to have_rule("max-width: 100%")
19
- end
20
- end
21
- end
@@ -1,15 +0,0 @@
1
- require "spec_helper"
2
-
3
- describe "By default" do
4
- before(:all) do
5
- ParserSupport.parse_file("default")
6
- end
7
-
8
- it "sets sizing on the html element to border-box" do
9
- expect("html").to have_rule("box-sizing: border-box")
10
- end
11
-
12
- it "sets sizing on the global selector to inherit" do
13
- expect("*::after").to have_rule("box-sizing: inherit")
14
- end
15
- end
@@ -1,19 +0,0 @@
1
- require "spec_helper"
2
-
3
- describe "@include direction-context() {...}" do
4
- before(:all) do
5
- ParserSupport.parse_file("direction-context")
6
- end
7
-
8
- context "with no argument" do
9
- it "uses default direction setting" do
10
- expect(".default-block").to have_rule("float: left")
11
- end
12
- end
13
-
14
- context "whith argument (right-to-left)" do
15
- it "changes direction setting inside the block" do
16
- expect(".right-to-left-block").to have_rule("float: right")
17
- end
18
- end
19
- end
@@ -1,19 +0,0 @@
1
- require "spec_helper"
2
-
3
- describe "@include display-context() {...}" do
4
- before(:all) do
5
- ParserSupport.parse_file("display-context")
6
- end
7
-
8
- context "with argument (table)" do
9
- it "changes display value to table" do
10
- expect(".display-table-block").to have_rule("display: table-cell")
11
- end
12
- end
13
-
14
- context "whith nested call and argument (block)" do
15
- it "changes display value to block" do
16
- expect(".display-nested-block").to have_rule("display: block")
17
- end
18
- end
19
- end
@@ -1,55 +0,0 @@
1
- require "spec_helper"
2
-
3
- describe "@include media() {...}" do
4
- before(:all) do
5
- ParserSupport.parse_file("media")
6
- end
7
-
8
- context "with argument (481px)" do
9
- it "outputs @media screen and (min-width: 481px)" do
10
- expect(".media-default").to be_contained_in("screen and (min-width: 481px)")
11
- end
12
- end
13
-
14
- context "with argument (max-width 480px)" do
15
- it "outputs @media screen and (max-width: 480px)" do
16
- expect(".media-max-width").to be_contained_in("screen and (max-width: 480px)")
17
- end
18
- end
19
-
20
- context "with argument (min-width 320px max-width 480px)" do
21
- it "outputs @media screen and (min-width: 320px) and (max-width: 480px)" do
22
- expect(".media-min-max-width").to be_contained_in("screen and (min-width: 320px) and (max-width: 480px)")
23
- end
24
- end
25
-
26
- context "with argument (481px, 6)" do
27
- it "outputs @media screen and (min-width: 481px)" do
28
- expect(".change-media-context").to be_contained_in("screen and (min-width: 481px)")
29
- end
30
-
31
- it "uses a 6-column grid" do
32
- expect(".change-media-context").to have_rule("width: 100%")
33
- end
34
- end
35
-
36
- context "with shorthand argument (max-width 480px 6)" do
37
- it "outputs @media screen and (max-width: 480px)" do
38
- expect(".change-media-context-shorthand").to be_contained_in("screen and (max-width: 480px)")
39
- end
40
-
41
- it "uses a 6-column grid" do
42
- expect(".change-media-context-shorthand").to have_rule("width: 100%")
43
- end
44
- end
45
-
46
- context "with composite argument (max-width 768px min-width 110px orientation portait 6)" do
47
- it "outputs @media screen and (max-width: 768px) and (min-width: 110px) and (orientation: portait)" do
48
- expect(".composite-media-query").to be_contained_in("screen and (max-width: 768px) and (min-width: 110px) and (orientation: portait)")
49
- end
50
-
51
- it "uses a 6-column grid" do
52
- expect(".composite-media-query").to have_rule("width: 100%")
53
- end
54
- end
55
- end
@@ -1,17 +0,0 @@
1
- require "spec_helper"
2
-
3
- describe "new-breakpoint()" do
4
- before(:all) do
5
- ParserSupport.parse_file("new-breakpoint")
6
- end
7
-
8
- context "with argument (max-width 768px 12)" do
9
- it "outputs (max-width 768px)" do
10
- expect(".responsive-element").to be_contained_in("screen and (max-width: 768px)")
11
- end
12
-
13
- it "adds (max-width 768px 12) to visual grid breakpoints" do
14
- expect("$visual-grid-breakpoints").to have_value("max-width 768px 12")
15
- end
16
- end
17
- end
@@ -1,66 +0,0 @@
1
- require "spec_helper"
2
-
3
- describe "@include omega()" do
4
- before(:all) do
5
- ParserSupport.parse_file("omega")
6
- end
7
-
8
- context "with no argument" do
9
- it "removes right margin" do
10
- selector = ".omega-default"
11
- expect(selector).to have_rule("margin-right: 0")
12
- end
13
- end
14
-
15
- context "with argument (4n)" do
16
- it "removes right margin of nth-child(4n)" do
17
- selector = ".omega-nth-default:nth-child(4n)"
18
- expect(selector).to have_rule("margin-right: 0")
19
- end
20
-
21
- it "adds clear to nth-child(4n+1)" do
22
- selector = ".omega-nth-default:nth-child(4n+1)"
23
- expect(selector).to have_rule("clear: left")
24
- end
25
- end
26
-
27
- context "with argument ('4n+1')" do
28
- it "removes right margin of nth-child(4n+1)" do
29
- selector = ".omega-complex-nth:nth-child(4n+1)"
30
- expect(selector).to have_rule("margin-right: 0")
31
- end
32
-
33
- it "adds clear to nth-child('4n+2')" do
34
- selector = ".omega-complex-nth:nth-child(4n+2)"
35
- expect(selector).to have_rule("clear: left")
36
- end
37
- end
38
-
39
- context "with argument ('3n-1')" do
40
- it "removes right margin of nth-child(3n-1)" do
41
- selector = ".omega-complex-nth-negative:nth-child(3n-1)"
42
- expect(selector).to have_rule("margin-right: 0")
43
- end
44
-
45
- it "adds clear to nth-child('3n-0')" do
46
- selector = ".omega-complex-nth-negative:nth-child(3n-0)"
47
- expect(selector).to have_rule("clear: left")
48
- end
49
- end
50
-
51
- context "when called inside an RTL row" do
52
- context "with no argument" do
53
- it "removes left margin" do
54
- selector = "section .omega-default-left"
55
- expect(selector).to have_rule("margin-left: 0")
56
- end
57
- end
58
-
59
- context "with argument (4n block)" do
60
- it "removes left margin of nth-child(4n)" do
61
- selector = "section .omega-nth-default-left:nth-child(4n)"
62
- expect(selector).to have_rule("margin-left: 0")
63
- end
64
- end
65
- end
66
- end