Mixin: respTypo - adaptdk/fe_tools GitHub Wiki
Responsive Typography - (respTypo)
Place the mixin in the root of the scss file, out of a selector in your base typography scss file
Params
/**
* Place the mixin in the root of the scss file, out of a selector in your base typography scss file
* @param {object} $typoSize - A SCSS map of the sizes
*/
/**
* variable: $typoSize Params
* @param {string} $selector - The Selector
* @param {number} $fontSize - The fontsize in pixels for that breakpoint.
* @param {number} [$breakpoint] - When the (min-width: breakpoint) should apply, in pixels - 1024px
*/
@params (
$typoSize: (
$selector:
$fontSize, // The first does not accept breakpoint, because it's not wrapped in a media query
$fontSize, // Recursive
// If a custom breakpoint is not entered, take the default breakpoint.
($fontSize, $breakpoint) // Recursive
// If a custom breakpoint is entered, then your need to wrap $fontSize and $breakpoint in parenthesis ()
)
)
Default Params
// Breakpoint
$breakpoint: (410px, 700px, 1200px);
Params Example
$typoSize: (
p: (1rem, 1.2rem),
h1: (2.4rem, (2.6rem 500px),
h2: (2.2rem, 2.1rem),
)
Examples
Example 1
Input (SCSS)
$typoSize: (
h1: (2.8rem, 3rem),
h2: (2.2rem, (2.4rem 900px), 2.6rem), // Custom Breakpoint for the second param
h3: (1.9rem, 2.1rem),
h4: (1.6rem, 1.8rem, (2.1rem 1260px)), // Added third property with custom breakpoint as well
h5: (1.3rem, 1.6rem),
h6: (1.1rem, 1.2rem, 1.5rem), // Added third property using default breakpoint param
);
@include respTypo($typoSize);
Output (CSS)
h1 {
font-size: 2.8rem;
@media (min-width: 410px) {
font-size: 3rem;
}
}
h2 {
font-size: 2.2rem;
@media (min-width: 410px) {
font-size: 2.4rem;
}
@media (min-width: 900px) {
font-size: 2.6rem;
}
}
// etc..