ekzo
ekzo copied to clipboard
Add scoped font sizes
Yet to be decided do we really need it.
We could allow to define specific for certain scopes font sizes, which will generated all needed sets of helpers classes.
Like that:
$ekzo-font-sizes: (
text: (
base: 14px, // used for vertical rhythm calculation; = .text--base, .font-size--base, .line-height--base
'-': 12px, // = .text-, .font-size-, .line-height-
'--': 10px, // = .text--, .font-size--, .line-height--
),
headings: (
h1: 36px, // = h1, .h1, .font-size--h1, .line-height--h1
h2: 30px, // = h2, .h2, .font-size--h2, .line-height--h2
h3: 24px, // = h3, .h3, .font-size--h3, .line-height--h3
h4: 21px, // = h4, .h4, .font-size--h4, .line-height--h4
h5: 18px, // = h5, .h5, .font-size--h5, .line-height--h5
h6: 16px, // = h6, .h6, .font-size--h6, .line-height--h6
),
extra-headings: (
\+\+: 96px, // = .extra-h\+\+\+, .font-size\+\+\+, .line-height\+\+\+
\+: 72px, // = .extra-h\+\+, .font-size\+\+, .line-height\+\+
base: 44px, // = .extra-h\+, .font-size\+, .line-height\+
),
buttons: (), // = .btn--*name*
// --------> here magic happens
blog: (
text: 20px,
headings: ()
)
// --------> here magic ends
) !default;