Skip to content

Commit

Permalink
feat: Prevent vertical rhythm rules with variable
Browse files Browse the repository at this point in the history
Fixes #147
  • Loading branch information
JohnAlbin committed Nov 10, 2023
1 parent 5bb0129 commit da87fb2
Show file tree
Hide file tree
Showing 7 changed files with 454 additions and 19 deletions.
18 changes: 10 additions & 8 deletions fork-version/_normalize.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,16 @@
@import 'vertical-rhythm';

// If we've customized any font variables, we'll need extra properties.
@if $base-line-height != 24px
or $base-unit != 'em'
or $h2-font-size != 1.5 * $base-font-size
or $h3-font-size != 1.17 * $base-font-size
or $h4-font-size != 1 * $base-font-size
or $h5-font-size != 0.83 * $base-font-size
or $h6-font-size != 0.67 * $base-font-size
or $indent-amount != 40px {
@if $normalize-vertical-rhythm == null
and (
$base-line-height != 24px
or $base-unit != 'em'
or $h2-font-size != 1.5 * $base-font-size
or $h3-font-size != 1.17 * $base-font-size
or $h4-font-size != 1 * $base-font-size
or $h5-font-size != 0.83 * $base-font-size
or $h6-font-size != 0.67 * $base-font-size
) {
$normalize-vertical-rhythm: true !global;
}

Expand Down
5 changes: 3 additions & 2 deletions fork-version/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,5 +32,6 @@ $indent-amount: 40px !default;
// font-sizes, line-heights and block-level top/bottom margins that form a basic
// vertical rhythm on the page, which differs from the original Normalize.css.
// However, changing any of the variables above will cause
// $normalize-vertical-rhythm to be automatically set to true.
$normalize-vertical-rhythm: false !default;
// $normalize-vertical-rhythm to be automatically set to true. To prevent
// outputting any vertical rhythm rules, set this variable to false.
$normalize-vertical-rhythm: null !default;
17 changes: 10 additions & 7 deletions sass/normalize/_normalize-mixin.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,16 @@
$init: _normalize-include($include, $exclude);

// If we've customized any font variables, we'll need extra properties.
@if $base-line-height != 24px
or $base-unit != 'em'
or $h2-font-size != 1.5 * $base-font-size
or $h3-font-size != 1.17 * $base-font-size
or $h4-font-size != 1 * $base-font-size
or $h5-font-size != 0.83 * $base-font-size
or $h6-font-size != 0.67 * $base-font-size {
@if $normalize-vertical-rhythm == null
and (
$base-line-height != 24px
or $base-unit != 'em'
or $h2-font-size != 1.5 * $base-font-size
or $h3-font-size != 1.17 * $base-font-size
or $h4-font-size != 1 * $base-font-size
or $h5-font-size != 0.83 * $base-font-size
or $h6-font-size != 0.67 * $base-font-size
) {
$normalize-vertical-rhythm: true !global;
}

Expand Down
5 changes: 3 additions & 2 deletions sass/normalize/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,5 +32,6 @@ $indent-amount: 40px !default;
// font-sizes, line-heights and block-level top/bottom margins that form a basic
// vertical rhythm on the page, which differs from the original Normalize.css.
// However, changing any of the variables above will cause
// $normalize-vertical-rhythm to be automatically set to true.
$normalize-vertical-rhythm: false !default;
// $normalize-vertical-rhythm to be automatically set to true. To prevent
// outputting any vertical rhythm rules, set this variable to false.
$normalize-vertical-rhythm: null !default;
7 changes: 7 additions & 0 deletions test/fixtures/variables/prevent-vertical-rhythm/input.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
// This variable only affects output when vertical rhythm is used.
$h2-font-size: 48px;
// Force vertical rhythm off.
$normalize-vertical-rhythm: false;

@import 'normalize';
@include normalize();
Loading

0 comments on commit da87fb2

Please sign in to comment.