Commit 6121991a authored by Oskar Kalbag's avatar Oskar Kalbag
Browse files

Refactored the helpers.

parent caab251a
......@@ -2,22 +2,16 @@ body {
border: 1px solid #000;
border: 0.0625rem solid #000;
width: 1000px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
width: 62.5rem;
margin: 24px;
padding: 48px;
line-height: 24px;
line-height: 1.5rem;
font-size: 18px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
font-size: 1.125rem;
}
div {
width: 500px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
width: 31.25rem;
margin: 24px 0;
margin: 1.5rem 0;
......@@ -25,26 +19,18 @@ div {
}
h1 {
font-size: 48px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
font-size: 3rem;
line-height: 72px;
line-height: 4.5rem;
}
h2 {
font-size: 24px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
font-size: 1.5rem;
line-height: 36px;
line-height: 2.25rem;
margin-top: 36px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin-top: 2.25rem;
margin-bottom: 24px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin-bottom: 1.5rem;
border-bottom: 1px solid #000;
border-bottom: 0.0625rem solid #000;
......@@ -82,26 +68,18 @@ h2 {
}
#test-margin-top {
margin-top: 10px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin-top: 0.625rem;
}
#test-margin-right {
margin-right: 20px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin-right: 1.25rem;
}
#test-margin-bottom {
margin-bottom: 30px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin-bottom: 1.875rem;
}
#test-margin-left {
margin-left: 40px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
margin-left: 2.5rem;
}
#test-padding-one-argument {
......@@ -122,47 +100,31 @@ h2 {
}
#test-padding-top {
padding-top: 10px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding-top: 0.625rem;
}
#test-padding-right {
padding-right: 20px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding-right: 1.25rem;
}
#test-padding-bottom {
padding-bottom: 30px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding-bottom: 1.875rem;
}
#test-padding-left {
padding-left: 40px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
padding-left: 2.5rem;
}
#test-font-size-inherit {
font-size: inherit;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
}
#test-font-size {
font-size: 42px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
font-size: 2.625rem;
line-height: 63px;
line-height: 3.9375rem;
}
#test-width-hundred-percent {
width: 50px;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
width: 3.125rem;
width: 100%;
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
}
//////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////
//
// Responsive Pixels mixins for Stylus.
//
......@@ -9,156 +9,16 @@
//
// Think in pixels; have them automatically translated to rems.
//
//////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////
// This is the default root line height
baseLineHeight = 24rem
QuarterLineHeight = baseLineHeight/4 rem
HalfLineHeight = baseLineHeight/2 rem
ThreeQuartersLineHeight = baseLineHeight*3/4 rem
OneLineHeight = baseLineHeight rem
OneAndAHalfLineHeights = baseLineHeight*1.5 rem
OneAndAQuarterLineHeights = baseLineHeight*1.25 rem
OneAndThreeQuartersLineHeights = baseLineHeight*1.75 rem
TwoLineHeights = baseLineHeight*2 rem
TwoAndAQuarterLineHeights = baseLineHeight*2.25 rem
TwoAndAHalfLineHeights = baseLineHeight*2.5 rem
TwoAndThreeQuartersLineHeights = baseLineHeight*2.75 rem
ThreeLineHeights = baseLineHeight*3 rem
ThreeAndAQuarterLineHeights = baseLineHeight*3.25 rem
ThreeAndAHalfLineHeights = baseLineHeight*3.5 rem
ThreeAndThreeQuartersLineHeights = baseLineHeight*3.75 rem
FourLineHeights = baseLineHeight*4 rem
FiveLineHeights = baseLineHeight*5 rem
calculateLineHeightConstants()
QuarterLineHeight = baseLineHeight/4 rem
HalfLineHeight = baseLineHeight/2 rem
ThreeQuartersLineHeight = baseLineHeight*3/4 rem
OneLineHeight = baseLineHeight rem
OneAndAHalfLineHeights = baseLineHeight*1.5 rem
OneAndAQuarterLineHeights = baseLineHeight*1.25 rem
OneAndThreeQuartersLineHeights = baseLineHeight*1.75 rem
TwoLineHeights = baseLineHeight*2 rem
TwoAndAQuarterLineHeights = baseLineHeight*2.25 rem
TwoAndAHalfLineHeights = baseLineHeight*2.5 rem
TwoAndThreeQuartersLineHeights = baseLineHeight*2.75 rem
ThreeLineHeights = baseLineHeight*3 rem
ThreeAndAQuarterLineHeights = baseLineHeight*3.25 rem
ThreeAndAHalfLineHeights = baseLineHeight*3.5 rem
ThreeAndThreeQuartersLineHeights = baseLineHeight*3.75 rem
FourLineHeights = baseLineHeight*4 rem
FiveLineHeights = baseLineHeight*5 rem
//
// Displays a baseline grid (optionally with a horizontal grid also set to the base line height)
// Issue: Not all grid lines appear to draw correctly in Firefox or Opera (they work in Safari).
//
showBaselineGrid(show = yes, baseFontSize = 16, showQuarterLineHeightMarks=no, showHorizontalGrid=no, majorLineColor=hsl(220, 50%, 70%), minorLineColor=hsl(220, 25%, 85%), quarterMarkLineColor=hsl(220, 5%, 95%), horizontalGridColor=hsl(360, 25%, 85%))
if show == yes
if showHorizontalGrid == no
//
// Just show the vertical baseline grid.
//
if showQuarterLineHeightMarks == no
//
// Show line-height and half-line-height marks.
//
background-image -webkit-linear-gradient(majorLineColor 1px, transparent 1px), -webkit-linear-gradient(minorLineColor 1px, transparent 1px)
background-image -moz-linear-gradient(majorLineColor 1px, transparent 1px), -moz-linear-gradient(minorLineColor 1px, transparent 1px)
background-image -o-linear-gradient(majorLineColor 1px, transparent 1px), -o-linear-gradient(minorLineColor 1px, transparent 1px)
background-image linear-gradient(majorLineColor 1px, transparent 1px), linear-gradient(minorLineColor 1px, transparent 1px)
// Also allow for a different baseFontSize to be passed in (mostly used to
// demonstrate that vertical rhythm is maintained when scaling).
baseLineHeightInPixels = (baseLineHeight*baseFontSize/16);
background-size 100% unit(baseLineHeightInPixels, px), 100% unit(baseLineHeightInPixels/2, px)
else
//
// Show line-height, half-line-height, and quarter-line-height marks.
//
background-image -webkit-linear-gradient(majorLineColor 1px, transparent 1px), -webkit-linear-gradient(minorLineColor 1px, transparent 1px), -webkit-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
background-image -moz-linear-gradient(majorLineColor 1px, transparent 1px), -moz-linear-gradient(minorLineColor 1px, transparent 1px), -moz-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
background-image -o-linear-gradient(majorLineColor 1px, transparent 1px), -o-linear-gradient(minorLineColor 1px, transparent 1px), -o-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
background-image linear-gradient(majorLineColor 1px, transparent 1px), linear-gradient(minorLineColor 1px, transparent 1px), linear-gradient(quarterMarkLineColor 1px, transparent 1px)
// Also allow for a different baseFontSize to be passed in (mostly used to
// demonstrate that vertical rhythm is maintained when scaling).
baseLineHeightInPixels = (baseLineHeight*baseFontSize/16);
background-size 100% unit(baseLineHeightInPixels, px), 100% unit(baseLineHeightInPixels/2, px), 100% unit(baseLineHeightInPixels/4, px)
else
//
// Show horizontal grid lines too.
//
if showQuarterLineHeightMarks == 'no'
//
// Show horizontal grid, line-height, half-line-height marks.
//
background-image -webkit-linear-gradient(majorLineColor 1px, transparent 1px), -webkit-linear-gradient(minorLineColor 1px, transparent 1px)
background-image -moz-linear-gradient(majorLineColor 1px, transparent 1px), -moz-linear-gradient(minorLineColor 1px, transparent 1px)
background-image -o-linear-gradient(majorLineColor 1px, transparent 1px), -o-linear-gradient(minorLineColor 1px, transparent 1px)
background-image linear-gradient(majorLineColor 1px, transparent 1px), linear-gradient(minorLineColor 1px, transparent 1px)
// Also allow for a different baseFontSize to be passed in (mostly used to
// demonstrate that vertical rhythm is maintained when scaling).
baseLineHeightInPixels = (baseLineHeight*baseFontSize/16);
background-size 100% unit(baseLineHeightInPixels, px), 100% unit(baseLineHeightInPixels/2, px)
else
//
// Show horizontal-grid, line-height, half-line-height, and quarter-line-height marks.
//
background-image -webkit-linear-gradient(left, horizontalGridColor 1px, transparent 1px), -webkit-linear-gradient(majorLineColor 1px, transparent 1px), -webkit-linear-gradient(minorLineColor 1px, transparent 1px), -webkit-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
background-image -moz-linear-gradient(majorLineColor 1px, transparent 1px), -moz-linear-gradient(minorLineColor 1px, transparent 1px), -moz-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
background-image -o-linear-gradient(majorLineColor 1px, transparent 1px), -o-linear-gradient(minorLineColor 1px, transparent 1px), -o-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
background-image linear-gradient(majorLineColor 1px, transparent 1px), linear-gradient(minorLineColor 1px, transparent 1px), linear-gradient(quarterMarkLineColor 1px, transparent 1px)
// Also allow for a different baseFontSize to be passed in (mostly used to
// demonstrate that vertical rhythm is maintained when scaling).
baseLineHeightInPixels = (baseLineHeight*baseFontSize/16);
background-size unit(baseLineHeightInPixels, px) 100%, 100% unit(baseLineHeightInPixels, px), 100% unit(baseLineHeightInPixels/2, px), 100% unit(baseLineHeightInPixels/4, px)
// In all cases, turn on background repeat in case developer turned it off in HTML
// for her own custom background.
background-repeat repeat
//
// Requires a variable called rootLineHeight to be set in your styles. If
// there isn’t one, defaults to 24px. The return value is in pixel‐parity rems
// (so divided by the default root font size of 16).
//
relative-line-height(h)
if unit(h) == 'rlh'
relativeLineHeight = baseLineHeight * h / 16;
line-height unit(relativeLineHeight, 'rem')
//
// CSS overrides
//
line-height(h)
if unit(h) == 'px'
line-height unit(h, 'px')
line-height unit(h/16, 'rem')
else
line-height unit(h, unit(h))
/* Convert unit if pixel */
/************************************************************
* *
* Mixins: Helpers *
* *
************************************************************/
fallbackify(value)
if value == 'inherit' || value == 'auto' || value == 0 || value == null
value
else if unit(value) == 'px'
unit(value, 'px')
else
unit(value, unit(value))
/* Convert unit to rems if unit is in pixels. */
remify(value)
if value == 'inherit' || value == 'auto' || value == 0 || value == null
......@@ -178,51 +38,51 @@ abstract-shorthand(attr, originalArguments)
b = originalArguments[2]
l = originalArguments[3]
fT = fallbackify(t)
fR = fallbackify(r)
fB = fallbackify(b)
fL = fallbackify(l)
rT = remify(t)
rR = remify(r)
rB = remify(b)
rL = remify(l)
if l || l == 0
{attr} fT fR fB fL
{attr} t r b l
/* Make sure that the rule is written out only once in case there is no rem substitution */
if !(fT == rT && fR == rR && fB == rB && fL == rL)
if !(t == rT && r == rR && b == rB && l == rL)
{attr} rT rR rB rL
else if b || b == 0
{attr} fT fR fB
if !(fT == rT && fR == rR && fB == rB)
{attr} t r b
if !(t == rT && r == rR && b == rB)
{attr} rT rR rB
else if r || r == 0
{attr} fT fR
if !(fT == rT && fR == rR)
{attr} remify(t) remify(r)
{attr} t r
if !(t == rT && r == rR)
{attr} rT rR
else if t || t == 0
{attr} fT
if !(fT = rT)
{attr} remify(t)
{attr} t
if !(t = rT)
{attr} rT
/* Abstract longhand for attributes that take a single value */
abstract-longhand(attr, originalArguments)
value = originalArguments[0]
remifiedValue = remify(value)
{attr} value
if value != remifiedValue
{attr} remify(value)
/************************************************************
* *
* Mixins: CSS overrides *
* *
************************************************************/
fallbackifyValue = fallbackify(value)
{attr} fallbackifyValue
/* Note: nested if on purpose. Otherwise Stylus runs all conditionals, causing an error (doesn’t break on first false one) */
/* Make sure that the rule is written out only once in case there is no rem substitution */
if fallbackifyValue != 'inherit'
if fallbackifyValue != 'auto'
if fallbackifyValue != 0
if unit(fallbackifyValue) == "px"
{attr} remify(value)
/* Line height */
line-height()
abstract-longhand('line-height', arguments)
/* Margin */
......@@ -328,9 +188,11 @@ right()
abstract-longhand('right', arguments)
//
// Typography
//
/************************************************************
* *
* Typography *
* *
************************************************************/
useJustifiedText()
text-align justify
......@@ -342,6 +204,136 @@ hyphens(value)
-o-hyphens value
hyphens value
//
// Helpers (using line height as your unit of scale for vertical/horizontal rhythm.)
//
// This is the default root line height
baseLineHeight = 24rem
QuarterLineHeight = baseLineHeight/4 rem
HalfLineHeight = baseLineHeight/2 rem
ThreeQuartersLineHeight = baseLineHeight*3/4 rem
OneLineHeight = baseLineHeight rem
OneAndAHalfLineHeights = baseLineHeight*1.5 rem
OneAndAQuarterLineHeights = baseLineHeight*1.25 rem
OneAndThreeQuartersLineHeights = baseLineHeight*1.75 rem
TwoLineHeights = baseLineHeight*2 rem
TwoAndAQuarterLineHeights = baseLineHeight*2.25 rem
TwoAndAHalfLineHeights = baseLineHeight*2.5 rem
TwoAndThreeQuartersLineHeights = baseLineHeight*2.75 rem
ThreeLineHeights = baseLineHeight*3 rem
ThreeAndAQuarterLineHeights = baseLineHeight*3.25 rem
ThreeAndAHalfLineHeights = baseLineHeight*3.5 rem
ThreeAndThreeQuartersLineHeights = baseLineHeight*3.75 rem
FourLineHeights = baseLineHeight*4 rem
FiveLineHeights = baseLineHeight*5 rem
calculateLineHeightConstants()
QuarterLineHeight = baseLineHeight/4 rem
HalfLineHeight = baseLineHeight/2 rem
ThreeQuartersLineHeight = baseLineHeight*3/4 rem
OneLineHeight = baseLineHeight rem
OneAndAHalfLineHeights = baseLineHeight*1.5 rem
OneAndAQuarterLineHeights = baseLineHeight*1.25 rem
OneAndThreeQuartersLineHeights = baseLineHeight*1.75 rem
TwoLineHeights = baseLineHeight*2 rem
TwoAndAQuarterLineHeights = baseLineHeight*2.25 rem
TwoAndAHalfLineHeights = baseLineHeight*2.5 rem
TwoAndThreeQuartersLineHeights = baseLineHeight*2.75 rem
ThreeLineHeights = baseLineHeight*3 rem
ThreeAndAQuarterLineHeights = baseLineHeight*3.25 rem
ThreeAndAHalfLineHeights = baseLineHeight*3.5 rem
ThreeAndThreeQuartersLineHeights = baseLineHeight*3.75 rem
FourLineHeights = baseLineHeight*4 rem
FiveLineHeights = baseLineHeight*5 rem
//
// Displays a baseline grid (optionally with a horizontal grid also set to the base line height)
// Issue: Not all grid lines appear to draw correctly in Firefox or Opera (they work in Safari).
//
showBaselineGrid(show = yes, baseFontSize = 16, showQuarterLineHeightMarks=no, showHorizontalGrid=no, majorLineColor=hsl(220, 50%, 70%), minorLineColor=hsl(220, 25%, 85%), quarterMarkLineColor=hsl(220, 5%, 95%), horizontalGridColor=hsl(360, 25%, 85%))
if show == yes
if showHorizontalGrid == no
//
// Just show the vertical baseline grid.
//
if showQuarterLineHeightMarks == no
//
// Show line-height and half-line-height marks.
//
background-image -webkit-linear-gradient(majorLineColor 1px, transparent 1px), -webkit-linear-gradient(minorLineColor 1px, transparent 1px)
background-image -moz-linear-gradient(majorLineColor 1px, transparent 1px), -moz-linear-gradient(minorLineColor 1px, transparent 1px)
background-image -o-linear-gradient(majorLineColor 1px, transparent 1px), -o-linear-gradient(minorLineColor 1px, transparent 1px)
background-image linear-gradient(majorLineColor 1px, transparent 1px), linear-gradient(minorLineColor 1px, transparent 1px)
// Also allow for a different baseFontSize to be passed in (mostly used to
// demonstrate that vertical rhythm is maintained when scaling).
baseLineHeightInPixels = (baseLineHeight*baseFontSize/16);
background-size 100% unit(baseLineHeightInPixels, px), 100% unit(baseLineHeightInPixels/2, px)
else
//
// Show line-height, half-line-height, and quarter-line-height marks.
//
background-image -webkit-linear-gradient(majorLineColor 1px, transparent 1px), -webkit-linear-gradient(minorLineColor 1px, transparent 1px), -webkit-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
background-image -moz-linear-gradient(majorLineColor 1px, transparent 1px), -moz-linear-gradient(minorLineColor 1px, transparent 1px), -moz-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
background-image -o-linear-gradient(majorLineColor 1px, transparent 1px), -o-linear-gradient(minorLineColor 1px, transparent 1px), -o-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
background-image linear-gradient(majorLineColor 1px, transparent 1px), linear-gradient(minorLineColor 1px, transparent 1px), linear-gradient(quarterMarkLineColor 1px, transparent 1px)
// Also allow for a different baseFontSize to be passed in (mostly used to
// demonstrate that vertical rhythm is maintained when scaling).
baseLineHeightInPixels = (baseLineHeight*baseFontSize/16);
background-size 100% unit(baseLineHeightInPixels, px), 100% unit(baseLineHeightInPixels/2, px), 100% unit(baseLineHeightInPixels/4, px)
else
//
// Show horizontal grid lines too.
//
if showQuarterLineHeightMarks == 'no'
//
// Show horizontal grid, line-height, half-line-height marks.
//
background-image -webkit-linear-gradient(majorLineColor 1px, transparent 1px), -webkit-linear-gradient(minorLineColor 1px, transparent 1px)
background-image -moz-linear-gradient(majorLineColor 1px, transparent 1px), -moz-linear-gradient(minorLineColor 1px, transparent 1px)
background-image -o-linear-gradient(majorLineColor 1px, transparent 1px), -o-linear-gradient(minorLineColor 1px, transparent 1px)
background-image linear-gradient(majorLineColor 1px, transparent 1px), linear-gradient(minorLineColor 1px, transparent 1px)
// Also allow for a different baseFontSize to be passed in (mostly used to
// demonstrate that vertical rhythm is maintained when scaling).
baseLineHeightInPixels = (baseLineHeight*baseFontSize/16);
background-size 100% unit(baseLineHeightInPixels, px), 100% unit(baseLineHeightInPixels/2, px)
else
//
// Show horizontal-grid, line-height, half-line-height, and quarter-line-height marks.
//
background-image -webkit-linear-gradient(left, horizontalGridColor 1px, transparent 1px), -webkit-linear-gradient(majorLineColor 1px, transparent 1px), -webkit-linear-gradient(minorLineColor 1px, transparent 1px), -webkit-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
background-image -moz-linear-gradient(majorLineColor 1px, transparent 1px), -moz-linear-gradient(minorLineColor 1px, transparent 1px), -moz-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
background-image -o-linear-gradient(majorLineColor 1px, transparent 1px), -o-linear-gradient(minorLineColor 1px, transparent 1px), -o-linear-gradient(quarterMarkLineColor 1px, transparent 1px)
background-image linear-gradient(majorLineColor 1px, transparent 1px), linear-gradient(minorLineColor 1px, transparent 1px), linear-gradient(quarterMarkLineColor 1px, transparent 1px)
// Also allow for a different baseFontSize to be passed in (mostly used to
// demonstrate that vertical rhythm is maintained when scaling).
baseLineHeightInPixels = (baseLineHeight*baseFontSize/16);
background-size unit(baseLineHeightInPixels, px) 100%, 100% unit(baseLineHeightInPixels, px), 100% unit(baseLineHeightInPixels/2, px), 100% unit(baseLineHeightInPixels/4, px)
// In all cases, turn on background repeat in case developer turned it off in HTML
// for her own custom background.
background-repeat repeat
//
// Requires a variable called rootLineHeight to be set in your styles. If
// there isn’t one, defaults to 24px. The return value is in pixel‐parity rems
// (so divided by the default root font size of 16).
//
relative-line-height(h)
if unit(h) == 'rlh'
relativeLineHeight = baseLineHeight * h / 16;
line-height unit(relativeLineHeight, 'rem')
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment