Removing the pattern overlay of an element’s video.#

Simply add the class no-video-overlay into the element’s “CSS Class” eg: http://hogash.d.pr/Kb17

Font-weight helpers:#

These classes can be used inline in places where you can add custom HTML to change the font-weight of the title, paragraph or whatever text.

/* Font weight helpers */
.fw-thin {font-weight: 300 !important;}
.fw-normal {font-weight: 400 !important;}
.fw-semibold {font-weight: 600 !important;}
.fw-bold {font-weight: 700 !important;}
.fw-extrabold {font-weight: 800 !important;}

For example, we can have a headline with an extra bold weight:

<h3 class="fw-extrabold">Just a headline!</h3>

Font size helpers:#

These classes can be used inline in places where you can add custom HTML to change the font-size of the title, paragraph or whatever text.

/* Font sizes helpers */
.fs-smaller {font-size: 70% !important;}
.fs-small {font-size: 90% !important;}
.fs-big {font-size: 110% !important;}
.fs-bigger {font-size: 140% !important;}
.fs-large {font-size: 200% !important;}

For example, we can have a headline with a smaller font-size:

<h3 class="fs-smaller">Just a headline!</h3>

Reset a line-height of a text:

So you want to add a text but its line-height is too big. To reset it, simply add this helper class:

/* Reset line height */
 .reset-line-height {line-height: 1}

Letter spacing helpers:#

These classes can be used inline in places where you can add custom HTML to change the letter-spacing of the title, paragraph or whatever text.

/* Letter spacing */
.lt-spacing-1 {letter-spacing: 1px !important;}
.lt-spacing-2 {letter-spacing: 2px !important;}
.lt-spacing-3 {letter-spacing: 3px !important;}
.lt-spacing-5 {letter-spacing: 5px !important;}
.lt-spacing-10 {letter-spacing: 10px !important;}
/* Letter spacing - Negative */
.lt-spacing-neg-1 {letter-spacing: -1px !important;}
.lt-spacing-neg-2 {letter-spacing: -2px !important;}
.lt-spacing-neg-3 {letter-spacing: -3px !important;}
.lt-spacing-neg-5 {letter-spacing: -5px !important;}
.lt-spacing-neg-10 {letter-spacing: -10px !important;}

For example, we can have a text with a bigger spacing between letters:

<h3 class="lt-spacing-3">Just a headline!</h3>

Class helpers for full control over opacity:#

These classes can be used inline in places where you can add custom HTML (or element’s CSS Class field) to change the opacity of anything.

/* Opacity helpers */
.opacity0, .hov-opacity0:hover {opacity:0 !important;}
.opacity1, .hov-opacity1:hover {opacity:.1 !important;}
.opacity2, .hov-opacity2:hover {opacity:.2 !important;}
.opacity3, .hov-opacity3:hover {opacity:.3 !important;}
.opacity4, .hov-opacity4:hover {opacity:.4 !important;}
.opacity5, .hov-opacity5:hover {opacity:.5 !important;}
.opacity6, .hov-opacity6:hover {opacity:.6 !important;}
.opacity7, .hov-opacity7:hover {opacity:.7 !important;}
.opacity8, .hov-opacity8:hover {opacity:.8 !important;}
.opacity9, .hov-opacity9:hover {opacity:.9 !important;}
.opacity10, .hov-opacity10:hover {opacity:1 !important;}

So for example you might have a button that’s a bit transparent but on hover to be even more transparent.

<span class="opacity9 hov-opacity5">Just some text here and there.</span>

Floats:#

A float will force a block to fully align on a certain side you specify. These classes are Bootstrap library based.

.pull-left {float:left;}
.pull-right {float:right;}

Use carefully as floats are tricky, so to clear floats, use the .clearfix class.

Special Floats:#

These floats are special that they have a built-in margin. For example if having an image link into a text, it’ll properly separate content from image.

.aligncenter {display:block; margin:0 auto; }
.alignright {float:right; margin:0 0 10px 20px; }
.alignleft {float:left; margin:0 20px 10px 0; }

Text-alignment:#

These classes will help you properly align text to any side.

.text-left {text-align:left;}
.text-right {text-align:right;}
.text-center {text-align:center;}

Margins:#

To either add or remove a top or bottom margin, you can use this classes:

/* Margins Bottom */
.u-mb-0 {margin-bottom: 0 !important;}
.u-mb-10 {margin-bottom: 10px !important;}
.u-mb-20 {margin-bottom: 20px !important;}
.u-mb-30 {margin-bottom: 30px !important;}
.u-mb-50 {margin-bottom: 50px !important;}

/* Margins Top */
.u-mt-0 {margin-top: 0 !important;}
.u-mt-10 {margin-top: 10px !important;}
.u-mt-20 {margin-top: 20px !important;}
.u-mt-30 {margin-top: 30px !important;}
.u-mt-50 {margin-top: 50px !important;}

Responsive utilities:#

Nowadays content is displayed differently on every device, so it’s clear we need control over our content. These classes are Bootstrap library based and must be used carefully. Please follow this link http://getbootstrap.com/css/#responsive-utilities which explains much, much better than we could.

A simple usage example to hide an image on mobiles, would be:

<img src="path/to/img.png" class="hidden-xs" alt="Just an image" />

Note: This list will be continuously updated. Any suggestions and feedback is more than welcome.