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
data/RELEASING.md ADDED
@@ -0,0 +1,27 @@
1
+ # Releasing
2
+
3
+ 1. Update the version number in these places:
4
+ - `lib/neat/version.rb`
5
+ - `core/neat/_neat.scss`
6
+ - `package.json`
7
+ - `bower.json`
8
+
9
+ 1. Update `CHANGELOG.md`
10
+
11
+ 1. Commit changes. Use the convention “Neat vX.X.X” in your commit message.
12
+ There shouldn’t be code changes, and thus CI doesn’t need to run.
13
+
14
+ 1. Run `bundle exec rake release`, which tags the release, pushes the tag to GitHub, and
15
+ pushes the gem to RubyGems.org.
16
+
17
+ 1. Run `npm publish`, which pushes the new version to npm’s registry (if
18
+ releasing a pre-release, run `npm publish --tag beta`).
19
+
20
+ 1. Add a [new GitHub release](//github.com/thoughtbot/neat/releases/new).
21
+
22
+ 1. Re-generate and publish
23
+ the [documentation website](//github.com/thoughtbot/neat-docs),
24
+ using the available Gulp tasks.
25
+
26
+ 1. Announce the new release, making sure to say “thank you” to the contributors
27
+ who helped shape this version!
data/Rakefile CHANGED
@@ -1,18 +1,8 @@
1
- require 'rubygems'
2
- require 'bundler'
3
- require 'rspec/core/rake_task'
1
+ require "bundler"
2
+ require "rspec/core/rake_task"
3
+
4
4
  Bundler::GemHelper.install_tasks
5
5
 
6
6
  RSpec::Core::RakeTask.new(:spec)
7
7
 
8
8
  task :default => :spec
9
-
10
- task :test do
11
- puts "Generating CSS..."
12
- `sass -I . --watch test:css/ --style expanded`
13
- end
14
-
15
- task :clean do
16
- puts "Deleting generated CSS..."
17
- `rm -rf css/`
18
- end
data/bower.json CHANGED
@@ -1,22 +1,21 @@
1
1
  {
2
2
  "name": "neat",
3
- "description": "A lightweight, semantic grid framework",
4
- "version": "1.9.1",
5
- "main": "app/assets/stylesheets/_neat.scss",
3
+ "description": "A lightweight, semantic grid framework built with Bourbon",
4
+ "version": "2.0.0-alpha.1",
5
+ "main": "core/_neat.scss",
6
6
  "license": "MIT",
7
7
  "ignore": [
8
8
  "**/.*",
9
+ "bin",
10
+ "bin",
9
11
  "CONTRIBUTING.md",
10
12
  "Gemfile",
11
13
  "Gemfile.lock",
12
- "NEWS.md",
13
- "Rakefile",
14
- "bin",
15
14
  "lib",
16
15
  "neat.gemspec",
17
- "sache.json",
18
- "spec",
19
- "test"
16
+ "NEWS.md",
17
+ "Rakefile",
18
+ "spec"
20
19
  ],
21
20
  "keywords": [
22
21
  "columns",
data/circle.yml ADDED
@@ -0,0 +1,13 @@
1
+ dependencies:
2
+ override:
3
+ - bundle install
4
+ - npm install -g sassdoc
5
+ general:
6
+ branches:
7
+ ignore:
8
+ - gh-pages
9
+ test:
10
+ override:
11
+ - bundle exec rake
12
+ post:
13
+ - sassdoc core/ --parse --verbose --strict
data/contrib/base/_grids.scss ADDED
@@ -0,0 +1,4 @@
1
+ $grid--nested: (
2
+ columns: 3,
3
+ gutter: 0,
4
+ );
data/contrib/base/_variables.scss ADDED
@@ -0,0 +1,8 @@
1
+ $color-neat-blue: #53aee0;
2
+ $color-neat-orange: #ff7c56;
3
+ $color-white: #fff;
4
+
5
+ $neat-grid: (
6
+ columns: 12,
7
+ gutter: 20px,
8
+ );
data/contrib/index.html CHANGED
@@ -1,225 +1,70 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
- <meta name="viewport" content="width=device-width,initial-scale=1">
7
- <title>Have fun ❤︎</title>
8
- <link rel="stylesheet" href="styles.css">
9
- </head>
10
- <body>
11
- <header class="welcome-message" role="banner">
12
- <div class="container">
13
- <h1 class="welcome-message-title">
14
- Hey there! Thanks for contributing to
15
- <a href="http://neat.bourbon.io">Neat</a>.
16
- </h1>
17
- <p>
18
- The purpose of this page is to help contributors view and test
19
- changes to Neat.
20
- </p>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
+ <meta name="viewport" content="width=device-width,initial-scale=1">
7
+ <title>Have fun ❤︎</title>
8
+ <link rel="stylesheet" href="styles.css">
9
+ </head>
10
+ <body>
11
+ <header role="banner">
12
+ <h1>
13
+ Hey there! Thanks for contributing to
14
+ <a href="http://neat.bourbon.io">Neat</a>.
15
+ </h1>
16
+ <p>
17
+ The purpose of this page is to help contributors view and test
18
+ changes to Neat.
19
+ </p>
20
+ </header>
21
+ <main role="main">
22
+ <div class="grid">
23
+ <div class="grid__column--full">
24
+ <h3>Basic Floated Grid</h3>
21
25
  </div>
22
- </header>
23
- <main role="main">
24
- <h3>Basic</h3>
25
- <section class="page-section zero">
26
- <code>@include outer-container;</code>
27
- <div class="page-section-inner zero-alpha">
28
- <code>@include span-columns(6);</code>
29
- </div>
30
- <div class="page-section-inner zero-beta">
31
- <code>@include span-columns(6);</code>
32
- </div>
33
- </section>
34
- <h3>Multiple rows</h3>
35
- <section class="page-section first">
36
- <code>@include outer-container;</code>
37
- <div class="page-section-inner first-alpha">
38
- <code>(1)</code>
39
- </div>
40
- <div class="page-section-inner first-beta">
41
- <code>
42
- @include span-columns(11);<br>
43
- @include omega();
44
- </code>
45
- </div>
46
- <div class="page-section-inner first-gamma">
47
- <code>
48
- @include span-columns(2);
49
- </code>
50
- </div>
51
- <div class="page-section-inner first-delta">
52
- <code>
53
- @include span-columns(10);<br>
54
- @include omega();
55
- </code>
56
- </div>
57
- <div class="page-section-inner first-epsilon">
58
- <code>
59
- @include span-columns(3);
60
- </code>
61
- </div>
62
- <div class="page-section-inner first-zeta">
63
- <code>
64
- @include span-columns(9);<br>
65
- @include omega();
66
- </code>
67
- </div>
68
- <div class="page-section-inner first-eta">
69
- <code>
70
- @include span-columns(4);
71
- </code>
72
- </div>
73
- <div class="page-section-inner first-theta">
74
- <code>
75
- @include span-columns(8);<br>
76
- @include omega();
77
- </code>
78
- </div>
79
- <div class="page-section-inner first-iota">
80
- <code>
81
- @include span-columns(5);
82
- </code>
83
- </div>
84
- <div class="page-section-inner first-kappa">
85
- <code>
86
- @include span-columns(7);<br>
87
- @include omega();
88
- </code>
89
- </div>
90
- <div class="page-section-inner first-lambda">
91
- <code>
92
- @include span-columns(6);
93
- </code>
94
- </div>
95
- <div class="page-section-inner first-mu">
96
- <code>
97
- @include span-columns(6);<br>
98
- @include omega();
99
- </code>
100
- </div>
101
- </section>
102
- <h3>Nesting columns</h3>
103
- <section class="page-section second">
104
- <code>@include outer-container;</code>
105
- <div class="page-section-inner second-alpha">
106
- <code>@include span-columns(4);</code>
107
- </div>
108
- <div class="page-section-inner second-beta">
109
- <code class="block">@include span-columns(8);</code>
110
- <aside class="second-beta-alpha">
111
- <code>@include span-columns(4 of 8);</code>
112
- </aside>
113
- <article class="second-beta-beta">
114
- <code>@include span-columns(4 of 8);</code>
115
- </article>
116
- </div>
117
- </section>
118
- <h3>Table grid</h3>
119
- <section class="page-section third">
120
- <code>@include outer-container;</code>
121
- <div class="page-section-inner third-dummy">
122
- <code>
123
- @include fill-parent();<br>
124
- @include row(table);
125
- </code>
126
- </div>
127
- <div class="page-section-inner third-alpha">
128
- <aside class="third-alpha-alpha">
129
- <code>
130
- @include span-columns(4);<br>
131
- @include pad();
132
- </code>
133
- </aside>
134
- <article class="third-alpha-beta">
135
- <code>
136
- @include span-columns(8);<br>
137
- @include reset-display;
138
- </code>
139
- </article>
140
- </div>
141
- </section>
142
- <h3>Shifting columns</h3>
143
- <section class="page-section fourth">
144
- <code>@include outer-container;</code>
145
- <div class="page-section-inner fourth-alpha">
146
- <code>
147
- @include span-columns(6);<br>
148
- @include shift(3);
149
- </code>
150
- </div>
151
- </section>
152
- <h3>Automatic rows</h3>
153
- <div class="code">
154
- <code>@include outer-container;</code>
26
+ <div class="grid__column box"></div>
27
+ <div class="grid__column box"></div>
28
+ <div class="grid__column box"></div>
29
+ <div class="grid__column box"></div>
30
+ <div class="grid__column box"></div>
31
+ <div class="grid__column box"></div>
32
+ <div class="grid__column box"></div>
33
+ <div class="grid__column box"></div>
34
+ <div class="grid__column box"></div>
35
+ <div class="grid__column box"></div>
36
+ <div class="grid__column box"></div>
37
+ <div class="grid__column box"></div>
38
+ <div class="grid__column--full">
39
+ <h3>Nested Grid</h3>
155
40
  </div>
156
- <section class="page-section fifth">
157
- <div class="box">
158
- <pre>
159
- .box {
160
- @include span-columns(3);
161
- @include omega(4n);
162
- }
163
- </pre>
164
- </div>
165
- <div class="fifth-box page-section-inner">
166
- <code>.box</code>
167
- </div>
168
- <div class="fifth-box page-section-inner">
169
- <code>.box</code>
170
- </div>
171
- <div class="fifth-box page-section-inner">
172
- <code>.box</code>
173
- </div>
174
- <div class="fifth-box page-section-inner">
175
- <code>.box</code>
176
- </div>
177
- <div class="fifth-box page-section-inner">
178
- <code>.box</code>
179
- </div>
180
- <div class="fifth-box page-section-inner">
181
- <code>.box</code>
182
- </div>
183
- <div class="fifth-box page-section-inner">
184
- <code>.box</code>
185
- </div>
186
- <div class="fifth-box page-section-inner">
187
- <code>.box</code>
188
- </div>
189
- <div class="fifth-box page-section-inner">
190
- <code>.box</code>
191
- </div>
192
- <div class="fifth-box page-section-inner">
193
- <code>.box</code>
194
- </div>
195
- <div class="fifth-box page-section-inner">
196
- <code>.box</code>
197
- </div>
198
- </section>
199
- <h3>Media Queries</h3>
200
- <section class="page-section sixth">
201
- <pre>
202
- @include outer-container;
203
- $mobile: new-breakpoint(max-width 500px 4);
204
- </pre>
205
- <div class="page-section-inner sixth-alpha">
206
- <pre>
207
- @include span-columns(4);
208
-
209
- @include media($mobile) {
210
- @include span-columns(3);
211
- }
212
- </pre>
213
- </div>
214
- <div class="page-section-inner sixth-beta">
215
- <pre>
216
- @include span-columns(8);
217
- @include media($mobile) {
218
- @include span-columns(3);
219
- }
220
- </pre>
221
- </div>
222
- </section>
223
- </main>
224
- </body>
225
- </html>
41
+ <div class="grid__column--thirds grid--nested">
42
+ <div class="grid--nested__column box--alt"></div>
43
+ <div class="grid--nested__column box--alt"></div>
44
+ <div class="grid--nested__column box--alt"></div>
45
+ </div>
46
+ <div class="grid__column--thirds box"></div>
47
+ <div class="grid__column--thirds box"></div>
48
+ <div class="grid__column--full">
49
+ <h3>Push Grid</h3>
50
+ </div>
51
+ <div class="grid__column--thirds box grid-push--3"></div>
52
+ <div class="grid__column--full">
53
+ <h3>Shift Grid</h3>
54
+ </div>
55
+ <div class="grid__column--8 grid-shift--4 box">&nbsp;First</div>
56
+ <div class="grid__column--4 grid-shift--neg-8 box">&nbsp;Second</div>
57
+ <div class="grid__column--full">
58
+ <h3>Shorthand Sub-Grid</h3>
59
+ </div>
60
+ <div class="grid__column--3-of-5 box"></div>
61
+ <div class="grid__column--2-of-5 box"></div>
62
+ <div class="grid__column--3-of-5 box grid-push--2-of-5"></div>
63
+ <div class="grid__column--full">
64
+ <h3>Grid Media Queries</h3>
65
+ </div>
66
+ <div class="grid-column--media-3-to-6 box"></div>
67
+ </div>
68
+ </main>
69
+ </body>
70
+ </html>
data/contrib/patterns/_box.scss ADDED
@@ -0,0 +1,11 @@
1
+ .box {
2
+ background-color: $color-neat-blue;
3
+ margin-bottom: 10px;
4
+ min-height: 30px;
5
+ padding: 0.5rem;
6
+ }
7
+
8
+ .box--alt {
9
+ @extend .box;
10
+ border: 2px solid $color-neat-orange;
11
+ }
data/contrib/patterns/_global.scss ADDED
@@ -0,0 +1,5 @@
1
+ *,
2
+ *::before,
3
+ *::after {
4
+ box-sizing: border-box;
5
+ }
data/contrib/patterns/_grid-media.scss ADDED
@@ -0,0 +1,52 @@
1
+ $medium-screen: 1000px;
2
+
3
+ $custom-neat-grid: (
4
+ columns: 12,
5
+ gutter: 50px,
6
+ media: $medium-screen,
7
+ );
8
+
9
+ $specific-neat-grid: (
10
+ columns: 12,
11
+ gutter: 80px,
12
+ media: "only screen and (min-width: 1000px) and (max-width: 1100px)",
13
+ );
14
+
15
+
16
+ $print-neat-grid: (
17
+ columns: 10,
18
+ gutter: 20px,
19
+ media: print,
20
+ );
21
+
22
+ .grid-column--media-3-to-6 {
23
+ @include grid-column(3);
24
+
25
+ &::before {
26
+ content: "#{map-get($neat-grid, media)}";
27
+ }
28
+
29
+ @include grid-media($custom-neat-grid) {
30
+ @include grid-column(6);
31
+
32
+ &::before {
33
+ content: "#{map-get($neat-grid, media)}";
34
+ }
35
+ }
36
+
37
+ @include grid-media($specific-neat-grid) {
38
+ @include grid-column(6);
39
+
40
+ &::before {
41
+ content: "#{map-get($neat-grid, media)}";
42
+ }
43
+ }
44
+
45
+ @include grid-media($print-neat-grid) {
46
+ @include grid-column(6);
47
+
48
+ &::before {
49
+ content: "#{map-get($neat-grid, media)}";
50
+ }
51
+ }
52
+ }