Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: use the right breakpoints in block-grid for gutter calculation #11145

Merged
merged 4 commits into from Apr 10, 2018
Merged

fix: use the right breakpoints in block-grid for gutter calculation #11145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6163a03
fix: use the right breakpoints in block-grid for gutter calculation
DanielRuf Apr 8, 2018
0f6659c
chore: use short named mixin parameters
DanielRuf Apr 9, 2018
8febe20
chore: revert settings file
DanielRuf Apr 9, 2018
f542435
chore: document $breakpoint variable in xy-grid-layout, set null as d…
Apr 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions scss/xy-grid/_classes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@
@include -zf-each-breakpoint {
@for $i from 1 through $xy-block-grid-max {
.#{$-zf-size}-up-#{$i} {
@include xy-grid-layout($i, '.cell', false, $gutter-type: padding);
@include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: padding, $breakpoint: $-zf-size);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same. xy-grid-layout takes as arguments:

$n,
$selector: '.cell',
$gutter-output: true,

$i, '.cell', false seems to be the right order.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A better solution for $breakpoint: $-zf-size would be to make $breakpoint using null by default in @mixin xy-grid-layout, which mean "I will use $-zf-size if it exists, $-zf-zero-breakpoint otherwhise" as defined in @mixin xy-cell.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Named params should be more clear here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So we keep $breakpoint: $-zf-size because "Named params should be more clear here" ?

Please at least change $breakpoint: $-zf-zero-breakpoint to $breakpoint: null in xy-grid-layout and add the missing argument documentation.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. Feedback is welcome.

Would be great to get some more feedback from the others.

}
}
}
Expand All @@ -203,15 +203,15 @@
@each $bp in -zf-breakpoints-less-than($-zf-size) {
@if(map-has-key($grid-margin-gutters, $bp)) {
.grid-margin-x.#{$bp}-up-#{$i} {
@include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $bp);
@include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size);
}
}
}
}
}
@for $i from 1 through $xy-block-grid-max {
.grid-margin-x.#{$-zf-size}-up-#{$i} {
@include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $-zf-size);
@include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size);
}
}
}
Expand Down
3 changes: 2 additions & 1 deletion scss/xy-grid/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin` or `padding`.
/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
/// @param {String} $breakpoint [null] - The breakpoint to use for the cell generation.
/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
@mixin xy-grid-layout(
$n,
Expand All @@ -22,7 +23,7 @@
$gutters: $grid-margin-gutters,
$gutter-type: margin,
$gutter-position: right left,
$breakpoint: $-zf-zero-breakpoint,
$breakpoint: null,
$vertical: false
) {
$size: percentage(1/$n);
Expand Down