neat 1.3.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 5bdefb64cec2e270e681c122c86cb3c428b93ae3
4
- data.tar.gz: 23f6315428bb85162b9ed54f7b96b95e16f659a6
3
+ metadata.gz: b1791bf7c055a1329480da34064aaf4e16d91ea4
4
+ data.tar.gz: 57900e1f7741a736869c07a076685f88643e88a0
5
5
  SHA512:
6
- metadata.gz: 4f18d2d97a9b7ccb34366f6d6af3defacbcc1df94602f62c70db60ec26498636939e2d9a28fd7289b5906437b96d8712ced5ccf5d4c58a1d0e9c8b5fe20f4b69
7
- data.tar.gz: 88ece79f10a6a0a72daabdce203ac49bf930706b5abf92afd087313468b8e41e6ed83ae3f6425ef2a47aace49bf87f866d7a839e78c35bd0c6c76843ede5ad5f
6
+ metadata.gz: d80a94016fbb0777ec115d2aef9389b6504cc8cdf5e2c43358f563365dc13596f9128e2cb83a2ba43994d7d757cf18fa3cfeaa10a8f93ac9113fb5cc1579f2a9
7
+ data.tar.gz: c7723d03cea1726e6f2f50d8d0478065f55eae232dfe3743b21ba5cd235aa5fd58b5fc8775f83ac876cd052798a1b724eb1315d4a4699bfacea93f701e04d96e
data/NEWS.md CHANGED
@@ -3,6 +3,7 @@
3
3
  * New: Add global RTL layout support
4
4
  * New: Add row-specific RTL layout support
5
5
  * New: Add auto-clearing for elements using `omega(nth-child)` (works only with simple nth-child arguments due to limited string operations in Sass)
6
+ * New: `reset-display`, `reset-layout-direction`, and `reset-all` for all your reset needs!
6
7
  * Fix: The visual grid no longer blocks user interactions
7
8
  * Deprecate: `omega()` will no longer take `$direction` in favor of `row($direction)` or `$default-layout-direction`
8
9
 
data/README.md CHANGED
@@ -1,5 +1,7 @@
1
1
  [![Bourbon Neat](http://neat.bourbon.io/images/logotype.svg)](http://thoughtbot.com/neat)
2
2
 
3
+ [![Gem Version](https://badge.fury.io/rb/neat.png)](http://badge.fury.io/rb/neat) [![Code Climate](https://codeclimate.com/github/thoughtbot/neat.png)](https://codeclimate.com/github/thoughtbot/neat)
4
+
3
5
  **Neat** is an open source fluid grid framework built on top of [Bourbon](http://bourbon.io) with the aim of being easy enough to use out of the box and flexible enough to customize down the road.
4
6
 
5
7
 
@@ -94,8 +96,8 @@ $grid-columns: 10;
94
96
  $max-width: em(1088);
95
97
 
96
98
  // Define your breakpoints
97
- $mobile: new-breakpoint(max-width 480px 4);
98
99
  $tablet: new-breakpoint(max-width 768px 8);
100
+ $mobile: new-breakpoint(max-width 480px 4);
99
101
  ```
100
102
 
101
103
  See the [docs](http://neat.bourbon.io/docs/#variables) for a full list of settings.
@@ -56,14 +56,14 @@
56
56
 
57
57
  @for $i from 1 to $grid-columns*2 {
58
58
  @if is-even($i) {
59
- $values: append($values, $transparent $column-offset);
60
- $values: append($values, $color $column-offset);
59
+ $values: append($values, $transparent $column-offset, comma);
60
+ $values: append($values, $color $column-offset, comma);
61
61
  $column-offset: $column-offset + $column-width;
62
62
  }
63
63
 
64
64
  @else {
65
- $values: append($values, $color $column-offset);
66
- $values: append($values, $transparent $column-offset);
65
+ $values: append($values, $color $column-offset, comma);
66
+ $values: append($values, $transparent $column-offset, comma);
67
67
  $column-offset: $column-offset + $gutter-width;
68
68
  }
69
69
  }
@@ -19,3 +19,32 @@ $layout-direction: nil !default;
19
19
  @function grid-width($n) {
20
20
  @return $n * $gw-column + ($n - 1) * $gw-gutter;
21
21
  }
22
+
23
+ @function get-parent-columns($columns) {
24
+ @if $columns != $grid-columns {
25
+ $parent-columns: $columns;
26
+ } @else {
27
+ $parent-columns: $grid-columns;
28
+ }
29
+
30
+ @return $parent-columns;
31
+ }
32
+
33
+ @function is-display-table($container-is-display-table, $display) {
34
+ $display-table: false;
35
+
36
+ @if $container-is-display-table == true {
37
+ $display-table: true;
38
+ } @else if $display == table {
39
+ $display-table: true;
40
+ }
41
+
42
+ @return $display-table;
43
+ }
44
+
45
+ @function get-padding-for-table-layout($columns, $total-columns) {
46
+ $total-padding: flex-gutter($total-columns) * ($columns - 1);
47
+ $padding: $total-padding / $columns;
48
+
49
+ @return $padding;
50
+ }
@@ -1,5 +1,4 @@
1
1
  @mixin shift($n-columns: 1) {
2
-
3
2
  $direction: get-direction($layout-direction, $default-layout-direction);
4
3
  $opposite-direction: get-opposite-direction($direction);
5
4
 
@@ -1,45 +1,38 @@
1
1
  @mixin span-columns($span: $columns of $container-columns, $display: block) {
2
-
3
2
  $columns: nth($span, 1);
4
3
  $container-columns: container-span($span);
5
- $display-table: false;
4
+
5
+ // Set nesting context (used by shift())
6
+ $parent-columns: get-parent-columns($container-columns);
6
7
 
7
8
  $direction: get-direction($layout-direction, $default-layout-direction);
8
9
  $opposite-direction: get-opposite-direction($direction);
9
10
 
10
- @if $container-columns != $grid-columns {
11
- $parent-columns: $container-columns;
12
- } @else {
13
- $parent-columns: $grid-columns;
14
- }
15
-
16
- @if $container-display-table == true {
17
- $display-table: true;
18
- } @else if $display == table {
19
- $display-table: true;
20
- } @else {
21
- $display-table: false;
22
- }
11
+ $display-table: is-display-table($container-display-table, $display);
23
12
 
24
13
  @if $display-table {
14
+ $padding: get-padding-for-table-layout($columns, $container-columns);
25
15
  display: table-cell;
26
- padding-#{$direction}: flex-gutter($container-columns);
27
- width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
28
-
29
- &:last-child {
30
- width: flex-grid($columns, $container-columns);
31
- padding-#{$direction}: 0;
32
- }
33
- }
34
-
35
- @else {
16
+ padding-#{$direction}: $padding;
17
+ width: flex-grid($columns, $container-columns) + $padding;
18
+ } @else {
36
19
  display: block;
37
20
  float: #{$opposite-direction};
38
- margin-#{$direction}: flex-gutter($container-columns);
39
- width: flex-grid($columns, $container-columns);
40
21
 
41
- &:last-child {
42
- margin-#{$direction}: 0;
22
+ @if $display == collapse {
23
+ width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
24
+
25
+ &:last-child {
26
+ width: flex-grid($columns, $container-columns);
27
+ }
28
+
29
+ } @else {
30
+ margin-#{$direction}: flex-gutter($container-columns);
31
+ width: flex-grid($columns, $container-columns);
32
+
33
+ &:last-child {
34
+ margin-#{$direction}: 0;
35
+ }
43
36
  }
44
37
  }
45
38
  }
@@ -1,3 +1,3 @@
1
1
  module Neat
2
- VERSION = '1.3.0'
2
+ VERSION = '1.4.0'
3
3
  end
@@ -42,12 +42,22 @@ describe "@include span-columns()" do
42
42
  expect('.span-columns-table').to have_rule('display: table-cell')
43
43
  end
44
44
 
45
- it "sets padding in percentage" do
46
- expect('.span-columns-table').to have_rule('padding-right: 2.35765%')
45
+ it "sets padding evenly between table cells" do
46
+ expect('.span-columns-table').to have_rule('padding-right: 1.17883%')
47
+ end
48
+ end
49
+
50
+ context "with argument (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')
47
57
  end
48
58
 
49
- it "substracts gutter from width of last element" do
50
- expect('.span-columns-table:last-child').to have_rule('width: 48.82117%')
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%')
51
61
  end
52
62
  end
53
63
  end
@@ -9,9 +9,13 @@
9
9
  }
10
10
 
11
11
  .span-columns-table {
12
- @include span-columns(6, table);
12
+ @include span-columns(2, table);
13
13
  }
14
14
 
15
15
  .span-columns-inline-block {
16
16
  @include span-columns(6, inline-block);
17
17
  }
18
+
19
+ .span-columns-collapse {
20
+ @include span-columns(6, collapse);
21
+ }
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: neat
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.3.0
4
+ version: 1.4.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Kyle Fiedler
@@ -10,7 +10,7 @@ authors:
10
10
  autorequire:
11
11
  bindir: bin
12
12
  cert_chain: []
13
- date: 2013-05-08 00:00:00.000000000 Z
13
+ date: 2013-08-28 00:00:00.000000000 Z
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
16
16
  name: sass