Typography

We call typography all the "inline" elements like h1, h2, p, a, bold, etc...

These elements are defined in your theme in the themeTypo.config.ts file. Here's the default available:

Note that each typo have multiple properties. Here's their signification:

  • label: The label that can be used in a WYSIWYG editor for example.
  • group: A group info that can be used in a WYSIWYG editor for example.
  • style: The actual typo style that will be used in your generated CSS through the @sugar.typo.classes mixin.
  • rhythmVertical: The style to apply when element is scoped in a s-rhythm:vertical class.
  • button.label: The label that can be used in a WYSIWYG editor for example.
  • button.style: The style to apply on the button in a WYSIWYG editor.
  • editor.style: The style to apply in a WYSIWYG editor.

These configurations are exported by default in the frontspec.json file. This is usefull to expose your typo configuration to a backend (wordpress, laravel, etc...).

Special properties treatment

Some properties in these objects will be proxied by the toolkit to allows internal theme value usage like font-size in the example above that has the value 40. This value will be taken from the font.size theme configuration.

This behavior will happen to all properties supported by the STheme.jsObjectToCssProperties static method.

Classes

Some classes will be generated from your theme configuration like these:

  • s-typo:h1

  • s-typo:h2

  • s-typo:h3

  • s-typo:h4

  • s-typo:h5

  • s-typo:h6

  • s-typo:p

  • s-typo:lead

  • s-typo:hr

  • s-typo:pre:not([class])

  • s-typo:code:not(pre > code)

  • s-typo:blockquote

  • s-typo:a

  • s-typo:quote

  • s-typo:bold

  • s-typo:italic

  • s-typo:large

  • s-typo:larger

  • s-typo:largest

  • s-typo:small

  • s-typo:smaller

  • s-typo:smallest

  • s-typo:mark

  • s-typo:del

  • s-typo:ins

  • s-typo:sub

  • s-typo:sup

  • s-typo:main

  • s-typo:mainGradient

  • s-typo:accent

  • s-typo:accentGradient

  • s-typo:complementary

  • s-typo:complementaryGradient

  • s-typo:success

  • s-typo:successGradient

  • s-typo:warning

  • s-typo:warningGradient

  • s-typo:error

  • s-typo:errorGradient

  • s-typo:info

  • s-typo:infoGradient

Text format

Sometimes, you don't have full control on your generated HTML exactly like in these documentations that are generated by converting some markdown to HTML.

Unless this, you actually want to apply your typo styles on this output.

To do so, you can simply wrap your generated HTML into a div with the special s-rhythm:vertical class like so:

Bugs
are not our friends...

Don't hesitate to declare an issue if something does not works as expected.

Declare my issue on Github Talk about it on Discord

The more we are,
the stronger we become.

Don't hesitate to tell some words to you friends about us. The goal is to became more and more each days to help each others...

Support us on Patreon! Share on Facebook! Make a tweet!

The more we are,
the stronger we become.

Don't be afraid to join us on Discord.

Join us on discord!

We love,
Open source!

All of our codebase can be found on Github. We hope that you may contribute to help us make our tools even better!

Discover our codebase!

Welcome on