Typography utilities

Modify the appearance of any text elements.

Loop gives you some recurring text utilities by default. Adjust the rest to your need (Check the options).

// default config
typo: (
  fontSize: (
    values: (
      'large': rem(20),
      'small': rem(14),
    ),
  ),
  fontStyle: (
    values: 'italic',
  ),
  fontWeight: (
    values: (
      'light': 300,
      'bold': 700,
    ),
  ),
  textAlign: (
    values: (
      'left',
      'right',
      'center',
    )
  ),
  textTransform: (
    values: (
      'uppercase',
    ),
  ),
),

This is a text with the class .font-large

This is a text with the class .font-small

This is a text with the class .font-italic

This is a text with the class .font-light

This is a text with the class .font-bold

This is a text with the class .text-left

This is a text with the class .text-center

This is a text with the class .text-right

This is a text with the class .text-uppercase

Add more or update data (Check the options)

$ooLoop: ooAdd('typo', (
  fontSize: (
    values: (
      'tiny': rem(12), // add .font-tiny
      'large': rem(18), // update .font-large
    )
  ),
  fontFamily: (
    values: (
      'monospace': monospace, // add .font-monospace
      'serif': (Georgia, "Times New Roman", Times), //add .font-serif
    )
  ),
  letterSpacing: (
    prefix: 'text',
    values: (
      'tight': -1px, // add .text-tight
      'wide': .5px,  // add .text-wide
      'wider': 1.5px,  // add .text-wider
    )
  )
));

This is a text with the class .font-tiny

This is a text with the updated size of the class .font-large

This is a text with the class .font-monospace

This is a text with the class .font-serif

This is a text with the class .text-tight

This is a text with the class .text-wide

This is a text with the class .text-wider

Set responsive values (Check the options)

$ooLoop: ooAdd('typo', (
  fontSize: ('values': (
    'grow': (
      rt: 1rem,
      md: 1.25rem,
      lg: 1.5rem,
    )
  )),
  textAlign: (
    screens: (md, ld), // text-left@md text-center@md text-right@md text-left@lg text-center@lg text-right@lg
  ),
));

<p class="font-grow text-center text-left@md text-right@lg">This is a paragraph with a responsive font-size as well as a responsive alignment.</p>

This is a paragraph with a responsive font-size
as well as a responsive alignment.

In manual mode add the mixin Typography()

Use Color utilities << >> Use Spacing utilities