diff --git a/css/main.css b/css/main.css index 698794c..7c2a3ac 100644 --- a/css/main.css +++ b/css/main.css @@ -1,33 +1,47 @@ body { - font-size: 1em; - line-height: 1em; } + font-size: 1.125rem; + line-height: 1.375rem; +} h1 { - font-size: 3.375em; - line-height: 4em; - margin-bottom: 1em; - margin-top: 2em; } + font-size: 4.22222em; + line-height: 1.15789em; + margin-bottom: 0.28947em; + margin-top: 0.57895em; +} h2 { - font-size: 2.25em; - line-height: 3em; - margin-bottom: 1em; - margin-top: 2em; } + font-size: 47px; + line-height: 66px; + margin-bottom: 22px; + margin-top: 44px; +} h3 { - font-size: 1.5em; - line-height: 2em; - margin-bottom: 1em; - margin-top: 1em; } + font-size: 29px; + line-height: 44px; + margin-bottom: 22px; + margin-top: 22px; + font-size: 1.8125rem; + line-height: 2.75rem; + margin-bottom: 1.375rem; + margin-top: 1.375rem; +} h4 { - font-size: 1em; - line-height: 1em; - margin-bottom: 1em; - margin-top: 1em; } + font-size: 18px; + line-height: 22px; + margin-bottom: 22px; + margin-top: 22px; + font-size: 1.125rem; + line-height: 1.375rem; + margin-bottom: 1.375rem; + margin-top: 1.375rem; +} p, ul, ol, pre, table, blockquote { - margin-bottom: 1em; - margin-top: 1em; } - -/*# sourceMappingURL=main.css.map */ + margin-bottom: 22px; + margin-top: 22px; + margin-bottom: 1.375rem; + margin-top: 1.375rem; +} diff --git a/scss/_config.scss b/scss/_config.scss index 643f4b6..8c37593 100644 --- a/scss/_config.scss +++ b/scss/_config.scss @@ -1,29 +1,46 @@ -// Scale factor variables. -// Don't change these variables! -$minorSecond: 1.067; -$majorSecond: 1.125; -$minorThird: 1.2; -$majorThird: 1.25; -$perfectFourth: 1.333; -$augmentedFourth: 1.414; -$perfectFifth: 1.5; -$minorSixth: 1.6; -$goldenSection: 1.618; -$majorSixth: 1.667; -$minorSeventh: 1.778; -$majorSeventh: 1.875; -$octave: 2; -$majorTenth: 2.5; -$majorEleventh: 2.667; -$majorTwelfth: 3; -$doubleOctave: 4; +// Scale factor constants. +// Don't change them ever! +$MINOR_SECOND: 1.067; +$MAJOR_SECOND: 1.125; +$MINOR_THIRD: 1.2; +$MAJOR_THIRD: 1.25; +$PERFECT_FOURTH: 1.333; +$AUGMENTED_FOURTH: 1.414; +$PERFECT_FIFTH: 1.5; +$MINOR_SIXTH: 1.6; +$GOLDEN_SECTION: 1.618; +$MAJOR_SIXTH: 1.667; +$MINOR_SEVENTH: 1.778; +$MAJOR_SEVENTH: 1.875; +$OCTAVE: 2; +$MAJOR_TENTH: 2.5; +$MAJOR_ELEVENTH: 2.667; +$MAJOR_TWELFTH: 3; +$DOUBLE_OCTAVE: 4; // Default font size. -// Don't change this variable! -$defaultFontSize: 16; +// Don't change it ever! +$SGL_DEFAULT_FONT_SIZE: 16; // Configurable variables. // Ok... You can change these variables! :D -$baseFontSize: 16; -$baseLineHeight: 1; -$scaleFactor: $perfectFifth; + +/// Base unit +/// +/// @type string +$sgl-base-unit: "pxrem" !default; + +/// Base font size +/// +/// @type number +$sgl-base-font-size: 18 !default; + +/// Base line height +/// +/// @type number +$sgl-base-line-height: 1.2 !default; + +/// Scale factor +/// +/// @type number +$sgl-scale-factor: $GOLDEN_SECTION !default; diff --git a/scss/_functions.scss b/scss/_functions.scss new file mode 100644 index 0000000..77c887c --- /dev/null +++ b/scss/_functions.scss @@ -0,0 +1,122 @@ + +// EXPONENT +// @see https://github.com/Team-Sass/Sassy-math. + +@function exponent($base, $exponent) { + @if pow(2, 2) == 4 { + @return pow($base, $exponent); + } + + $value: $base; + + @if $exponent > 1 { + @for $i from 2 through $exponent { + $value: $value * $base; + } + } + + @if $exponent < 1 { + @for $i from 0 through -$exponent { + $value: $value / $base; + } + } + + @return $value; +} + + + + + +// CASTING A STRING TO A NUMBER +// @see http://hugogiraudel.com/2014/01/15/sass-string-to-number/ + +@function _length($number, $unit) { + $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax'; + $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax; + $index: index($strings, $unit); + + @if not $index { + @warn "Invalid unit `#{$unit}`."; + @return false; + } + + @return $number * nth($units, $index); +} + +@function number($string) { + // Matrices + $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9'; + $numbers: 0 1 2 3 4 5 6 7 8 9; + + // Result + $result: 0; + $divider: 0; + $minus: false; + + // Looping through all characters + @for $i from 1 through str-length($string) { + $character: str-slice($string, $i, $i); + $index: index($strings, $character); + + @if $character == '-' { + $minus: true; + } + + @else if $character == '.' { + $divider: 1; + } + + @else { + @if not $index { + $result: if($minus, $result * -1, $result); + @return _length($result, str-slice($string, $i)); + } + + $number: nth($numbers, $index); + + @if $divider == 0 { + $result: $result * 10; + } + + @else { + // Move the decimal dot to the left + $divider: $divider * 10; + $number: $number / $divider; + } + + $result: $result + $number; + } + } + + @return if($minus, $result * -1, $result); +} + + + + + +// UNIT MANAGER +// @see https://github.com/zurb/foundation/blob/master/scss/foundation/_functions.scss + +@function _strip-unit($num) { + @return $num / ($num * 0 + 1); +} + +@function _convert($unit, $value, $base-value: $SGL_DEFAULT_FONT_SIZE) { + $value: _strip-unit($value) / _strip-unit($base-value) * number(1 + $unit); + + @if ($value == (0 + $unit)) { + $value: 0; + } + + @return $value; +} + +@function em-calc($value, $base-value: $SGL_DEFAULT_FONT_SIZE) { + @return _convert("em", $value, $base-value); +} + +@function rem-calc($value, $base-value: $SGL_DEFAULT_FONT_SIZE) { + @return _convert("rem", $value, $base-value); +} \ No newline at end of file diff --git a/scss/_sassy-gridlover.scss b/scss/_sassy-gridlover.scss index 5439b69..58ac59b 100644 --- a/scss/_sassy-gridlover.scss +++ b/scss/_sassy-gridlover.scss @@ -1,136 +1,187 @@ @import "config"; +@import "functions"; -// @function exponent() taken from Sassy-math https://github.com/Team-Sass/Sassy-math. -@function exponent($base, $exponent) { - // Reset value - $value: $base; - // Positive intergers get multiplied. - @if $exponent > 1 { - @for $i from 2 through $exponent { - $value: $value * $base; } } - // Negative intergers get divided. A number divided by itself is 1. - @if $exponent < 1 { - @for $i from 0 through -$exponent { - $value: $value / $base; } } - // Return the last value written. - @return $value; -} +/// To use in the ``. +/// +/// Outputs `font-size` and `line-height`. +/// +/// @param {number} $font-size [$sgl-base-font-size] - Base font size +/// @param {string} $unit [$sgl-base-unit] - Unit to output +/// +/// @example scss +/// body { +/// @include sassy-gridlover-body($sgl-base-font-size, "pxrem"); +/// } +/// @example css +/// body { +/// font-size: 18px; +/// line-height: 22px; +/// font-size: 1.125rem; +/// line-height: 1.375rem; +/// } + +@mixin sassy-gridlover-body($font-size: $sgl-base-font-size, $unit: $sgl-base-unit) { + $line-height: round(($font-size * $sgl-base-line-height)); + + @if($unit == "px" or $unit == "pxrem") { + font-size: $font-size * 1px; + line-height: $line-height * 1px; + } + + @if($unit == "rem" or $unit == "pxrem") { + font-size: rem-calc($font-size); + line-height: rem-calc($line-height); + } -// All the sassy-gridlover-xxx mixins are based on the Gridlover app http://www.gridlover.net/app. - -// $unit: "px" outputs pixels. -// $unit: "rem" outputs rems. -// $unit: "pxrem" outputs rems with pixels fallback. -// $unit: "em" outputs ems. -@mixin sassy-gridlover-body($fontSize: $baseFontSize, $unit: "px") { - @if($unit == "px") { - font-size: $fontSize + $unit; - line-height: round(($fontSize * $baseLineHeight)) + $unit; - } - @if($unit == "rem") { - font-size: ($fontSize / $defaultFontSize) + $unit; - line-height: round(($fontSize * $baseLineHeight)) / $defaultFontSize + $unit; - } - @if($unit == "pxrem") { - // px fallback. - font-size: $fontSize + px; - line-height: round(($fontSize * $baseLineHeight)) + px; - // rem. - font-size: ($fontSize / $defaultFontSize) + rem; - line-height: round(($fontSize * $baseLineHeight)) / $defaultFontSize + rem; - } - @if($unit == "em") { - font-size: ($fontSize / $defaultFontSize) + $unit; - line-height: ($fontSize * $baseLineHeight) / $defaultFontSize + $unit; - } + @if($unit == "em") { + font-size: em-calc($font-size, $SGL_DEFAULT_FONT_SIZE); + line-height: em-calc($line-height, $font-size); + } } -// h1 --> $step: 3 -// h2 --> $step: 2 -// h3 --> $step: 1 -// h4 --> $step: 0 -@mixin sassy-gridlover-heading($step, $unit: "px") { - $fontSize: $baseFontSize; - $scale: $scaleFactor; - $computedFontSize: round($fontSize * exponent($scale, $step)); - $lineHeight: round($fontSize * $baseLineHeight); - $lines: ceil($computedFontSize / $lineHeight); - @if($unit == "px") { - font-size: $computedFontSize + $unit; - line-height: $lineHeight * $lines + $unit; - margin-bottom: $lineHeight + $unit; - @if($step > 1) { - margin-top: $lineHeight * 2 + $unit; - } - @else { - margin-top: $lineHeight + $unit; - } - } - @if($unit == "rem") { - font-size: $computedFontSize / $defaultFontSize + $unit; - line-height: ($lineHeight * $lines) / $defaultFontSize + $unit; - margin-bottom: $lineHeight / $defaultFontSize + $unit; - @if($step > 1) { - margin-top: ($lineHeight * 2) / $defaultFontSize + $unit; - } - @else { - margin-top: $lineHeight / $defaultFontSize + $unit; - } - } - @if($unit == "pxrem") { - // px fallback. - font-size: $computedFontSize + px; - line-height: $lineHeight * $lines + px; - margin-bottom: $lineHeight + px; - @if($step > 1) { - margin-top: $lineHeight * 2 + px; - } - @else { - margin-top: $lineHeight + px; - } - // rem. - font-size: $computedFontSize / $defaultFontSize + rem; - line-height: ($lineHeight * $lines) / $defaultFontSize + rem; - margin-bottom: $lineHeight / $defaultFontSize + rem; - @if($step > 1) { - margin-top: ($lineHeight * 2) / $defaultFontSize + rem; - } - @else { - margin-top: $lineHeight / $defaultFontSize + rem; - } - } - @if($unit == "em") { - font-size: $computedFontSize / $defaultFontSize + $unit; - line-height: ($lineHeight * $lines) / $defaultFontSize + $unit; - margin-bottom: $lineHeight / $defaultFontSize + $unit; - @if($step > 1) { - margin-top: ($lineHeight * 2) / $defaultFontSize + $unit; - } - @else { - margin-top: $lineHeight / $defaultFontSize + $unit; - } - } +/// To use in headings `

-

`. +/// +/// Outputs `font-size`, `line-height`, `margin-bottom` and `margin-top`. +/// +/// @param {number} $step - +/// `

` → `$step: 3` +/// +/// `

` → `$step: 2` +/// +/// `

` → `$step: 1` +/// +/// `

` → `$step: 0` +/// +/// @param {string} $unit [$sgl-base-unit] - Unit to output +/// @param {number} $base-value [$sgl-base-font-size] - Optionally call with a different base when using em +/// +/// @example scss +/// h1 { +/// @include sassy-gridlover-heading(3, true); +/// } +/// h2 { +/// @include sassy-gridlover-heading(2, true); +/// } +/// h3 { +/// @include sassy-gridlover-heading(1, true); +/// } +/// h4 { +/// @include sassy-gridlover-heading(0, true); +/// } +/// @example css +/// h1 { +/// font-size: 76px; +/// line-height: 88px; +/// margin-bottom: 22px; +/// margin-top: 44px; +/// font-size: 4.75rem; +/// line-height: 5.5rem; +/// margin-bottom: 1.375rem; +/// margin-top: 2.75rem; +/// } +/// +/// h2 { +/// font-size: 47px; +/// line-height: 66px; +/// margin-bottom: 22px; +/// margin-top: 44px; +/// font-size: 2.9375rem; +/// line-height: 4.125rem; +/// margin-bottom: 1.375rem; +/// margin-top: 2.75rem; +/// } +/// +/// h3 { +/// font-size: 29px; +/// line-height: 44px; +/// margin-bottom: 22px; +/// margin-top: 22px; +/// font-size: 1.8125rem; +/// line-height: 2.75rem; +/// margin-bottom: 1.375rem; +/// margin-top: 1.375rem; +/// } +/// +/// h4 { +/// font-size: 18px; +/// line-height: 22px; +/// margin-bottom: 22px; +/// margin-top: 22px; +/// font-size: 1.125rem; +/// line-height: 1.375rem; +/// margin-bottom: 1.375rem; +/// margin-top: 1.375rem; +/// } + +@mixin sassy-gridlover-heading($step, $unit: $sgl-base-unit, $base-value: $sgl-base-font-size) { + $font-size: $sgl-base-font-size; + $scale: $sgl-scale-factor; + $computed-font-size: round($font-size * exponent($scale, $step)); + $line-height: round($font-size * $sgl-base-line-height); + $lines: ceil($computed-font-size / $line-height); + $computed-line-height: $line-height * $lines; + + $margin-top: $line-height; + @if($step > 1) { + $margin-top: $line-height * 2; + } + + @if ($unit == "px" or $unit == "pxrem") { + font-size: $computed-font-size * 1px; + line-height: $computed-line-height * 1px; + margin-bottom: $line-height * 1px; + margin-top: $margin-top * 1px; + } + + @if ($unit == "rem" or $unit == "pxrem") { + font-size: rem-calc($computed-font-size); + line-height: rem-calc($computed-line-height); + margin-bottom: rem-calc($line-height); + margin-top: rem-calc($margin-top); + } + + @if ($unit == "em") { + font-size: em-calc($computed-font-size, $base-value); + line-height: em-calc($computed-line-height, $computed-font-size); + margin-bottom: em-calc($line-height, $computed-font-size); + margin-top: em-calc($margin-top, $computed-font-size); + } } -@mixin sassy-gridlover-margins($unit: "px") { - @if($unit == "px") { - margin-bottom: round($baseFontSize * $baseLineHeight) + $unit; - margin-top: round($baseFontSize * $baseLineHeight) + $unit; - } - @if($unit == "rem") { - margin-bottom: round($baseFontSize * $baseLineHeight) / $defaultFontSize + $unit; - margin-top: round($baseFontSize * $baseLineHeight) / $defaultFontSize + $unit; - } - @if($unit == "em") { - margin-bottom: round($baseFontSize * $baseLineHeight) / $defaultFontSize + $unit; - margin-top: round($baseFontSize * $baseLineHeight) / $defaultFontSize + $unit; - } - @if($unit == "pxrem") { - // px fallback. - margin-bottom: round($baseFontSize * $baseLineHeight) + px; - margin-top: round($baseFontSize * $baseLineHeight) + px; - // rem. - margin-bottom: round($baseFontSize * $baseLineHeight) / $defaultFontSize + rem; - margin-top: round($baseFontSize * $baseLineHeight) / $defaultFontSize + rem; - } +/// To use in `

`, `