Skip to content

Commit

Permalink
Merge pull request #535 from filipekiss/nth-parameter-grid
Browse files Browse the repository at this point in the history
Add `$nth` parameter for `column` and `span` mixins
  • Loading branch information
pixeldesu authored Sep 5, 2017
2 parents 3a79f8f + 1d15182 commit 8baa4d3
Show file tree
Hide file tree
Showing 10 changed files with 81 additions and 27 deletions.
7 changes: 5 additions & 2 deletions docs/api.md
Original file line number Diff line number Diff line change
@@ -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.

Expand All @@ -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.
Expand All @@ -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.

Expand Down
8 changes: 7 additions & 1 deletion docs/settings.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ $jeet: (
gutter: 3,
max-width: 1440px,
layout-direction: LTR,
parent-first: false
parent-first: false,
nth: "child"
);
```

Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
27 changes: 18 additions & 9 deletions scss/_grid.scss
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand All @@ -102,7 +111,7 @@
@if $clearfix {
@include clearfix;
}

float: $side;
clear: none;
text-align: inherit;
Expand All @@ -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;
}
}
Expand Down
3 changes: 2 additions & 1 deletion scss/_settings.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@ $jeet: (
gutter: 3,
max-width: 1440px,
layout-direction: LTR,
parent-first: false
parent-first: false,
nth: child
);
23 changes: 15 additions & 8 deletions styl/_grid.styl
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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


Expand Down
3 changes: 2 additions & 1 deletion styl/_settings.styl
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@ $jeet = {
gutter: 3,
max-width: 1440px,
layout-direction: LTR,
parent-first: false
parent-first: false,
nth: child
}
8 changes: 7 additions & 1 deletion test/node-stylus/style.styl
Original file line number Diff line number Diff line change
@@ -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)
23 changes: 20 additions & 3 deletions test/playground/sass/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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; } }
4 changes: 4 additions & 0 deletions test/playground/sass/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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");
}
}

0 comments on commit 8baa4d3

Please sign in to comment.