ekzo icon indicating copy to clipboard operation
ekzo copied to clipboard

Add scoped font sizes

Open ArmorDarks opened this issue 9 years ago • 0 comments

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;

ArmorDarks avatar Apr 29 '16 14:04 ArmorDarks