Utilities

Font size, grey color, background, shadow, padding, and margin helpers.

Five levels of font sizes, grey colors, grey backgrounds, and shadows. Add more levels in your project if you need them.

Font sizes

Text

Grey colors

Text

Grey background colors

Shadows

Paddings

BoxBoxBoxBoxBoxBoxBoxBoxBoxBox

Margins

BoxBoxBoxBoxBoxBoxBoxBoxBoxBox

<!-- Font sizes -->
<p class="ser-text-tiny">Text</p>
<p class="ser-text-small">Text</p>
<p class="ser-text-medium">Text</p>
<p class="ser-text-large">Text</p>
<p class="ser-text-xlarge">Text</p>

<!-- Font size scale -->
<p class="ser-text-size-1">Text</p>
<p class="ser-text-size-2">Text</p>
<p class="ser-text-size-3">Text</p>
<p class="ser-text-size-4">Text</p>
<p class="ser-text-size-5">Text</p>

<!-- Grey text colors -->
<p class="ser-text-large ser-color-grey-1">Text</p>
<p class="ser-text-large ser-color-grey-2">Text</p>
<p class="ser-text-large ser-color-grey-3">Text</p>
<p class="ser-text-large ser-color-grey-4">Text</p>
<p class="ser-text-large ser-color-grey-5">Text</p>

<!-- Grey backgrounds -->
<div class="ser-bg-grey-1"></div>
<div class="ser-bg-grey-2"></div>
<div class="ser-bg-grey-3"></div>
<div class="ser-bg-grey-4"></div>
<div class="ser-bg-grey-5"></div>

<!-- Shadows -->
<div class="ser-shadow-1"></div>
<div class="ser-shadow-2"></div>
<div class="ser-shadow-3"></div>
<div class="ser-shadow-4"></div>
<div class="ser-shadow-5"></div>

<!-- Paddings -->
<span class="ser-p-1 ser-shadow-1">Box</span>
<span class="ser-p-2 ser-shadow-1">Box</span>
<span class="ser-p-3 ser-shadow-1">Box</span>
<span class="ser-p-4 ser-shadow-1">Box</span>
<span class="ser-p-5 ser-shadow-1">Box</span>
<span class="ser-p-6 ser-shadow-1">Box</span>
<span class="ser-p-7 ser-shadow-1">Box</span>
<span class="ser-p-8 ser-shadow-1">Box</span>
<span class="ser-p-9 ser-shadow-1">Box</span>
<span class="ser-p-10 ser-shadow-1">Box</span>

<!-- Margins -->
<span class="ser-m-1 ser-shadow-1">Box</span>
<span class="ser-m-2 ser-shadow-1">Box</span>
<span class="ser-m-3 ser-shadow-1">Box</span>
<span class="ser-m-4 ser-shadow-1">Box</span>
<span class="ser-m-5 ser-shadow-1">Box</span>
<span class="ser-m-6 ser-shadow-1">Box</span>
<span class="ser-m-7 ser-shadow-1">Box</span>
<span class="ser-m-8 ser-shadow-1">Box</span>
<span class="ser-m-9 ser-shadow-1">Box</span>
<span class="ser-m-10 ser-shadow-1">Box</span>