Coffeekraken.io 0.0.1

STypographyComponent Classes

This file provide the mixins to generate typography classes

Mixins

s-typography-classes

Provide all the classes of the typography component like titles, paragraphs, lists, etc..

Name Type Description Status Default
$color { Color } The main color used to generate the texts styles optional primary

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-title-classes

Provide the styling for the titles classes:

  • .h1-h6
  • .tf h1-h6

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-title-classes-bare

Provide the bare styling for the titles classes

  • .h1-h6
  • .tf h1-h6

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-title-classes-style

Provide the style styling for the titles classes

  • .h1-h6
  • .tf h1-h6

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-paragraph-classes

Provide the styling for the paragraphs classes

  • .p, .tf p
  • .p--lead, .tf p.p--lead

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-paragraph-classes-bare

Provide the bare styling for the .p and .p--lead classes

  • .p, .tf p
  • .p--lead, .tf p.p--lead

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-paragraph-classes-style

Provide the bare styling for the .p class

  • .p, .tf p
  • .p--lead, .tf p.p--lead

Author : Olivier Bossel olivier.bossel@gmail.com

Provide the styling for the links classes

  • .link, .tf a
Name Type Description Status Default
$color { Color } The color used to style links optional primary

Author : Olivier Bossel olivier.bossel@gmail.com

Provide the bare styling for the links classes

  • .link, .tf a

Author : Olivier Bossel olivier.bossel@gmail.com

Provide the style styling for the links classes

  • .link, .tf a
Name Type Description Status Default
$color { Color } The color used to style links optional primary

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-inline-text-classes

Provide the styling for the inline-text classes

  • .mark, .tf mark
  • .del, .tf del
  • .s, .tf s
  • .ins, .tf ins
  • .u, .tf u
  • .small, .tf small
  • .strong, .tf strong
  • .em, .tf em
Name Type Description Status Default
$color { Color } The color used to style different inline text elements optional primary

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-inline-text-classes-bare

Provide the bare styling for the inline-text classes

  • .mark, .tf mark
  • .del, .tf del
  • .s, .tf s
  • .ins, .tf ins
  • .u, .tf u
  • .small, .tf small
  • .strong, .tf strong
  • .em, .tf em

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-inline-text-classes-style

Provide the style styling for the inline-text classes

  • .mark, .tf mark
  • .del, .tf del
  • .s, .tf s
  • .ins, .tf ins
  • .u, .tf u
  • .small, .tf small
  • .strong, .tf strong
  • .em, .tf em
Name Type Description Status Default
$color { Color } The color used to style different inline text elements optional primary

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-list-classes

Provide the styling for the lists classes

  • .dl, .tf dl
    • .dt, .tf dt
    • .dd, .tf dd
  • .ul, .tf ul
    • .li, .tf li
  • .ol, .tf ol
    • .li, .tf li
Name Type Description Status Default
$color { Color } The color used to style bullets optional primary

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-list-classes-bare

Provide the bare styling for the lists classes

  • .dl, .tf dl
    • .dt, .tf dt
    • .dd, .tf dd
  • .ul, .tf ul
    • .li, .tf li
  • .ol, .tf ol
    • .li, .tf li

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-list-classes-style

Provide the style styling for the lists classes

  • .dl, .tf dl
    • .dt, .tf dt
    • .dd, .tf dd
  • .ul, .tf ul
    • .li, .tf li
  • .ol, .tf ol
    • .li, .tf li
Name Type Description Status Default
$color { Color } The color used to style bullets optional primary

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-caption-classes

Provide the styling for the captions classes

  • .caption, .figcaption, .tf caption, .tf figcaption

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-caption-classes-bare

Provide the bare styling for the captions classes

  • .caption, .figcaption, .tf caption, .tf figcaption

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-caption-classes-style

Provide the style styling for the captions classes

  • .caption, .figcaption, .tf caption, .tf figcaption

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-quote-classes

Provide the styling for the quotes classes

  • .quote, .tf quote
  • .blockquote, .tf blockquote

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-quote-classes-bare

Provide the bare styling for the quotes classes

  • .quote, .tf quote
  • .blockquote, .tf blockquote

Author : Olivier Bossel olivier.bossel@gmail.com

s-typography-quote-classes-style

Provide the style styling for the quotes classes

  • .quote, .tf quote
  • .blockquote, .tf blockquote

Author : Olivier Bossel olivier.bossel@gmail.com