CSS helpers

List of most used CSS helpers
CSS helpers

This is a list of most used CSS helpers. For a complete list of helper classes browse creatus/assets/css/thz-units.css and creatus/assets/css/thz-utility.css files.

Font size

Set element font size.

<div class="thz-fs-16">...</div> /* 0 - 100 in increments of 1 */

Font weight

Set element font weight.

<div class="thz-fw-400">...</div> /* 100 - 900 in increments of 100 */

Letter spacing

Set element letter spacing.

<div class="thz-ls5">...</div> /* -10 - 50 in increments of 1. Use dash for negative value like thz-ls-5 */

Opacity

Set element opacity.

<div class="thz-opacity-50">...</div> /* 0 - 100 in increments of 1. 100 = completely visible */

Width

Set element percentage width.

<div class="thz-width-100">...</div>
<div class="thz-width-75">...</div>
<div class="thz-width-50">...</div>
<div class="thz-width-25">...</div>
<div class="thz-width-20">...</div>
<div class="thz-width-16">...</div>

Max-width

Set element max-width.

<div class="thz-width-75">...</div> /* 5 - 100 in increments of 5. */

Padding

Set element padding.

/* 0 - 100 in increments of 1. pt = top | pr = right | pb = bottom | pl = left */
<div class="thz-pt-20">...</div>

Vertical padding

Set element vertical padding.

<div class="thz-vp-20">...</div> /* 0 - 100 in increments of 1. */

Horizontal padding

Set element horizontal padding.

<div class="thz-hp-20">...</div> /* 0 - 100 in increments of 1. */

Margin

Set element margin.

/* 0 - 100 in increments of 1. mt = top | mr = right | mb = bottom | ml = left */
<div class="thz-mt-20">...</div>

Negative Margin

Set element negative margin. 

/* 0 - 100 in increments of 1. mt = top | mr = right | mb = bottom | ml = left */
<div class="thz-mt-n20">...</div>

Horizontal Spacer

Set space between elements by adding a spacer.

<div class="some-element">...</div>
<div class="thz-spacer-30"></div> /* 1 - 100 in increments of 1. */
<div class="some-element">...</div>

Hide elements

Set element hide class to hide the element on specific devices.

<div class="thz-desktop-hidden">...</div> /* Hidden on desktop */
<div class="thz-tablet-hidden">...</div> /* Hidden on tablets */
<div class="thz-mobile-hidden">...</div> /* Hidden on mobiles */

Floats

Float an element.

<div class="thz-float-left">...</div> /* Float left */
<div class="thz-float-right">...</div> /* Float right */
<div class="thz-float-none">...</div> /* No float */

Clear

Clear element floats.

<div class="thz-clear">...</div>

Related articles