:root

You can use Sailor config to automatically add values on your project root for font-family, body font size and html size.

Font families

In your config


$s-font-families: (
  // example
  'font-family-body': ('geomanist', arial, sans-serif),
  'font-family-mono': ('silkamono', monospace)
);
    

Output in :root


:root {
--font-family-body: geomanist, arial, sans-serif;
--font-family-mono: silkamono, monospace;
}
  

Use it in your CSS file


  .element {
    font-family: var(--font-family-body);
  }

Body size

In your config

Easily set body size for each breakpoint. The breakpoints map is required in your config file to use this feature.


      $s-body-size: (
        'xs': 1.25rem,
        'md': 1.14rem,
        'lg': 1.06rem,
        'xxxl': 1rem,
      );
    

Output in :root

Example with the above values


:root { --body-size: 1.25rem }
@media(min-width: 768px){ :root{--body-size: 1.14rem} }
@media(min-width: 1024px){ :root{--body-size: 1.06rem} }
@media(min-width: 1600px){ :root{--body-size: 1rem} }
  

Use it in your CSS file


    body {
      font-size: var(--body-size);
    }

Html size

In your config

Easily set html document size for each breakpoint. We recommend using percentage values for browser zoom. The breakpoints map is required in your config file to use this feature.


      $s-html-size: (
        'xs': 75%,
        'md': 87.5%,
        'lg': 100%,
        'xxxl': 112.5%,
      );
    

Output on html

Example with the above values


html { font-size: 75% }
@media(min-width: 768px){ html{font-size: 87.5%} }
@media(min-width: 1024px){ html{font-size: 100%} }
@media(min-width: 1600px){ html{font-size: 112.5%} }