Merge pull request #535 from filipekiss/nth-parameter-grid

Add `$nth` parameter for `column` and `span` mixins

Author: pixeldesu

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.
 

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

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",

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;
     }
   }

scss/_settings.scss

@@ -2,5 +2,6 @@ $jeet: (
   gutter: 3,
   max-width: 1440px,
   layout-direction: LTR,
-  parent-first: false
+  parent-first: false,
+  nth: child
 );

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
 
 

styl/_settings.styl

@@ -2,5 +2,6 @@ $jeet = {
   gutter: 3,
   max-width: 1440px,
   layout-direction: LTR,
-  parent-first: false
+  parent-first: false,
+  nth: child
 }

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)
+  span(1/2, $clearfix: false)

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; } }

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");
+  }
 }