Typography helpers

Change the size and color of the text for one or multiple viewport width

There are 7 sizes to choose from:

You can choose a specific size for each viewport width. You simply needed to append the viewport width to the size modifier.

For example, here are the modifiers for $size-1:

Class	Mobile Up to `768px`	Tablet Between `769px` and `1023px`	Desktop Between `1024px` and `1215px`	Widescreen Between `1216px` and `1407px`	FullHD `1408px` and above
`is-size-1-mobile`	`3rem`	unchanged	unchanged	unchanged	unchanged
`is-size-1-tablet`	unchanged	`3rem`	unchanged	unchanged	unchanged
`is-size-1-touch`	`3rem`	`3rem`	unchanged	unchanged	unchanged
`is-size-1-desktop`	unchanged	unchanged	`3rem`	`3rem`	`3rem`
`is-size-1-widescreen`	unchanged	unchanged	unchanged	`3rem`	`3rem`
`is-size-1-fullhd`	unchanged	unchanged	unchanged	unchanged	`3rem`

You can use the same logic for each of the 7 sizes.

You can set any element to one of the 9 colors or 9 shades of grey:

You can align the text with the use of one of 4 alignment helpers:

Class	Alignment
`has-text-centered`	Makes the text centered
`has-text-justified`	Makes the text justified
`has-text-left`	Makes the text aligned to the left
`has-text-right`	Makes the text aligned to the right

You can now align text for each viewport width. You simply need to append the viewport width to the alignment modifier.

For example, here are the modifiers for has-text-left:

Class	Mobile Up to `768px`	Tablet Between `769px` and `1023px`	Desktop Between `1024px` and `1215px`	Widescreen Between `1216px` and `1407px`	FullHD `1408px` and above
`has-text-left-mobile`	left-aligned	unchanged	unchanged	unchanged	unchanged
`has-text-left-tablet`	unchanged	left-aligned	left-aligned	left-aligned	left-aligned
`has-text-left-tablet-only`	unchanged	left-aligned	unchanged	unchanged	unchanged
`has-text-left-touch`	left-aligned	left-aligned	unchanged	unchanged	unchanged
`has-text-left-desktop`	unchanged	unchanged	left-aligned	left-aligned	left-aligned
`has-text-left-desktop-only`	unchanged	unchanged	left-aligned	unchanged	unchanged
`has-text-left-widescreen`	unchanged	unchanged	unchanged	left-aligned	left-aligned
`has-text-left-widescreen-only`	unchanged	unchanged	unchanged	left-aligned	unchanged
`has-text-left-fullhd`	unchanged	unchanged	unchanged	unchanged	left-aligned

You can transform the text with the use of one of 4 text transformation helpers:

Class	Transformation
`is-capitalized`	Transforms the first character of each word to uppercase
`is-lowercase`	Transforms all characters to lowercase
`is-uppercase`	Transforms all characters to uppercase
`is-italic`	Transforms all characters to italic

You can transform the text weight with the use of one of 4 text weight helpers:

Class	Weight
`has-text-weight-light`	Transforms text weight to light
`has-text-weight-normal`	Transforms text weight to normal
`has-text-weight-semibold`	Transforms text weight to semi-bold
`has-text-weight-bold`	Transforms text weight to bold

This page is open source. View on GitHub