From 3895f287bf84bf11496f655069ad20be05293e85 Mon Sep 17 00:00:00 2001 From: Filipe Kiss Date: Mon, 4 Sep 2017 11:40:19 -0300 Subject: [PATCH 1/2] Add `$nth` parameter for `column` and `span` mixins - Fix #405 - Add `jeet.nth` parameter to settings - Add `nth` parameter to `column` and `span` mixins - Add documentation regarding the new parameter - Update stylus node test to show `nth` in use - Update sass playground to show `nth` in use --- docs/api.md | 7 +++++-- docs/settings.md | 8 +++++++- scss/_grid.scss | 27 ++++++++++++++++++--------- scss/_settings.scss | 3 ++- styl/_grid.styl | 23 +++++++++++++++-------- styl/_settings.styl | 3 ++- test/node-stylus/style.styl | 8 +++++++- test/playground/sass/style.css | 23 ++++++++++++++++++++--- test/playground/sass/style.scss | 4 ++++ 9 files changed, 80 insertions(+), 26 deletions(-) diff --git a/docs/api.md b/docs/api.md index adfebe7a..05262ab0 100644 --- a/docs/api.md +++ b/docs/api.md @@ -1,6 +1,6 @@ # API -### column($ratios: 1, $offset: 0, $cycle: 0, $gutter: map-get($jeet, 'gutter')) +### column($ratios: 1, $offset: 0, $cycle: 0, $gutter: map-get($jeet, 'gutter'), $nth: map-get($jeet, 'nth')) Specify an initial ratio, either as fractions or decimals, then pass the parent container's context ratio to maintain consistent gutters as you nest. @@ -12,6 +12,9 @@ Want to change it up when you get down to mobile? Maybe just show 2 images per r Need to adjust column gutters for a specific container? `col(1/4, $gutter: .5)`. Note the gutter isn't a fixed width. +The `nth` parameter allow you to switch betweet `nth-child` and `nth-of-type` when building the +grid. `nth-child` is the default rule. The accepted values are `child` or `type`. + ### column-width($ratios: 1, $gutter: map-get($jeet, 'gutter')) A function to return strictly the column width with none of the styles. @@ -20,7 +23,7 @@ A function to return strictly the column width with none of the styles. A function that returns the gutter size. -### span($ratio: 1, $offset: 0, $cycle: 0) +### span($ratio: 1, $offset: 0, $cycle: 0, $nth: map-get($jeet, 'nth')) Need a grid without the gutters? For instance, for a horizontal navigation where you want buttons touching. Do so with `span(1/5)`. No need to pass more than one ratio since we don't need to worry about the math involved with gutters and all that. diff --git a/docs/settings.md b/docs/settings.md index 8dd02638..ef2e0b0d 100644 --- a/docs/settings.md +++ b/docs/settings.md @@ -7,7 +7,8 @@ $jeet: ( gutter: 3, max-width: 1440px, layout-direction: LTR, - parent-first: false + parent-first: false, + nth: "child" ); ``` @@ -29,6 +30,11 @@ Support for left-to-right, or right-to-left (`RTL`) text/layouts. When assigning multiple ratio contexts to a `col()`, do you want to reference the outer most container first? Example: Let's assume we have a column set to `col(1/4)` that is nested inside of another column that is `col(1/3)` which is nested inside of another column that is `col(1/2)`. By default, to maintain consistently sized gutters (even when nesting), our inner-most column would look like `col(1/4 1/3 1/2)`. If we adjust this global variable to be `true`, our inner-most column could be written from a top-down perspective like so: `col(1/2 1/3 1/4)`. This is entirely a preference thing. Do you like stepping up or down? +### nth: "child" + +Switches between using `nth-child` or `nth-of-type` when rendering grid classes. The default is +`nth-child`. Use `"type"` if you wish to use `nth-of-type`. + ## Example Usage ```scss diff --git a/scss/_grid.scss b/scss/_grid.scss index 6b96bf1c..d4277589 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -1,10 +1,14 @@ -@mixin column($ratios: 1, $offset: 0, $cycle: 0, $gutter: map-get($jeet, 'gutter'), $clearfix: true) { +@mixin column($ratios: 1, $offset: 0, $cycle: 0, $gutter: map-get($jeet, 'gutter'), $clearfix: true, $nth: map-get($jeet, 'nth')) { $side: _get-layout-direction(); $opposite-side: _opposite-direction($side); $column-widths: _get-column($ratios, $gutter); $margin-last: 0; $margin-l: $margin-last; $margin-r: nth($column-widths, 2); + $nth-selector: "nth-child"; + @if $nth == "type" { + $nth-selector: "nth-of-type"; + } @if $offset != 0 { @if $offset < 0 { @@ -32,18 +36,18 @@ }; @if $cycle != 0 { - &:nth-child(n) { + &:#{$nth-selector}(n) { margin-#{_opposite-direction($side)}: $margin-r * 1%; float: $side; clear: none; } - &:nth-child(#{$cycle}n) { + &:#{$nth-selector}(#{$cycle}n) { margin-#{_opposite-direction($side)}: $margin-last * 1%; float: _opposite-direction($side); } - &:nth-child(#{$cycle}n + 1) { + &:#{$nth-selector}(#{$cycle}n + 1) { clear: both; } } @else { @@ -84,12 +88,17 @@ } -@mixin span($ratio: 1, $offset: 0, $cycle: 0, $clearfix: true) { +@mixin span($ratio: 1, $offset: 0, $cycle: 0, $clearfix: true, $nth: map-get($jeet, "nth")) { $side: _get-layout-direction(); $opposite-side: _opposite-direction($side); $span-width: _get-span($ratio); $margin-r: 0; $margin-l: $margin-r; + $nth-selector: "nth-child"; + @if $nth == "type" { + $nth-selector: "nth-of-type"; + } + @if $offset != 0 { @if $offset < 0 { $offset: $offset * -1; @@ -102,7 +111,7 @@ @if $clearfix { @include clearfix; } - + float: $side; clear: none; text-align: inherit; @@ -113,16 +122,16 @@ }; @if $cycle != 0 { - &:nth-child(n) { + &:#{$nth-selector}(n) { float: $side; clear: none; } - &:nth-child(#{$cycle}n) { + &:#{$nth-selector}(#{$cycle}n) { float: _opposite-direction($side); } - &:nth-child(#{$cycle}n + 1) { + &:#{$nth-selector}(#{$cycle}n + 1) { clear: both; } } diff --git a/scss/_settings.scss b/scss/_settings.scss index 791e4795..1e668212 100644 --- a/scss/_settings.scss +++ b/scss/_settings.scss @@ -2,5 +2,6 @@ $jeet: ( gutter: 3, max-width: 1440px, layout-direction: LTR, - parent-first: false + parent-first: false, + nth: child ); diff --git a/styl/_grid.styl b/styl/_grid.styl index 70999b68..f7a1fec8 100644 --- a/styl/_grid.styl +++ b/styl/_grid.styl @@ -1,10 +1,13 @@ -column($ratios = 1, $offset = 0, $cycle = 0, $gutter = $jeet.gutter, $clearfix = true) +column($ratios = 1, $offset = 0, $cycle = 0, $gutter = $jeet.gutter, $clearfix = true, $nth = $jeet.nth) side = _get-layout-direction() opposite-side = opposite-position(side) column-widths = _get-column($ratios, $gutter) margin-last = 0 margin-l = margin-last margin-r = column-widths[1] + $nth-selector = "nth-child" + if $nth is "type" + $nth-selector = "nth-of-type" unless $offset == 0 if $offset < 0 @@ -26,16 +29,16 @@ column($ratios = 1, $offset = 0, $cycle = 0, $gutter = $jeet.gutter, $clearfix = margin-{opposite-side}: (margin-r)% if $cycle != 0 - &:nth-child(n) + &:{$nth-selector}(n) margin-{opposite-side}: (margin-r)% float: side clear: none - &:nth-child({$cycle}n) + &:{$nth-selector}({$cycle}n) margin-{opposite-side}: (margin-last)% float: opposite-side - &:nth-child({$cycle}n + 1) + &:{$nth-selector}({$cycle}n + 1) clear: both else &:last-child @@ -62,12 +65,16 @@ column-gutter($ratios = 1, $gutter = $jeet.gutter) return $gutter + '%' -span($ratio = 1, $offset = 0, $cycle = 0, $clearfix = true) +span($ratio = 1, $offset = 0, $cycle = 0, $clearfix = true, $nth = $jeet.nth) side = _get-layout-direction() opposite-side = opposite-position(side) span-width = _get-span($ratio) margin-r = 0 margin-l = margin-r + $nth-selector = "nth-child" + if $nth is "type" + $nth-selector = "nth-of-type" + unless $offset == 0 if $offset < 0 @@ -87,14 +94,14 @@ span($ratio = 1, $offset = 0, $cycle = 0, $clearfix = true) margin-{opposite-side}: (margin-r)% if $cycle != 0 - &:nth-child(n) + &:{$nth-selector}(n) float: side clear: none - &:nth-child({$cycle}n) + &:{$nth-selector}({$cycle}n) float: opposite-side - &:nth-child({$cycle}n + 1) + &:{$nth-selector}({$cycle}n + 1) clear: both diff --git a/styl/_settings.styl b/styl/_settings.styl index f4f9993e..0e92ea25 100644 --- a/styl/_settings.styl +++ b/styl/_settings.styl @@ -2,5 +2,6 @@ $jeet = { gutter: 3, max-width: 1440px, layout-direction: LTR, - parent-first: false + parent-first: false, + nth: child } diff --git a/test/node-stylus/style.styl b/test/node-stylus/style.styl index 2548962d..b9a1c3b7 100644 --- a/test/node-stylus/style.styl +++ b/test/node-stylus/style.styl @@ -1,5 +1,11 @@ div column(1/3) +section.child + column(1/4, $cycle: 4) + +section.type + column(1/4, $cycle: 4, $nth: "type") + span - span(1/2, $clearfix: false) \ No newline at end of file + span(1/2, $clearfix: false) diff --git a/test/playground/sass/style.css b/test/playground/sass/style.css index 9bc74f75..61268558 100644 --- a/test/playground/sass/style.css +++ b/test/playground/sass/style.css @@ -58,7 +58,7 @@ div { float: left; clear: none; text-align: inherit; - width: 33.33333%; + width: 33.3333333333%; margin-left: 0%; margin-right: 0%; } div::after { @@ -72,5 +72,22 @@ div { float: right; } div:nth-child(3n + 1) { clear: both; } } - -/*# sourceMappingURL=style.css.map */ + @media (min-width: 1440px) { + div { + float: left; + clear: none; + text-align: inherit; + width: 25%; + margin-left: 0%; + margin-right: 0%; } + div::after { + content: ''; + display: table; + clear: both; } + div:nth-of-type(n) { + float: left; + clear: none; } + div:nth-of-type(4n) { + float: right; } + div:nth-of-type(4n + 1) { + clear: both; } } diff --git a/test/playground/sass/style.scss b/test/playground/sass/style.scss index 12d03b6c..8abcc2c6 100644 --- a/test/playground/sass/style.scss +++ b/test/playground/sass/style.scss @@ -27,4 +27,8 @@ div { @media (min-width: 900px) { @include span(1/3, $cycle: 3); } + + @media (min-width:1440px) { + @include span(1/4, $cycle: 4, $nth: "type"); + } } From 1d151820044d89203693d19a18d3e1d3deded41b Mon Sep 17 00:00:00 2001 From: Filipe Kiss Date: Mon, 4 Sep 2017 13:34:57 -0300 Subject: [PATCH 2/2] Bump version to 7.2.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5c98ad41..c4194b38 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jeet", - "version": "7.1.0", + "version": "7.2.0", "description": "A simple Sass and Stylus grid system. Built for humans.", "homepage": "https://jeet.gs", "license": "MIT",