3.0 - Helpers

3.1 - Helper classes

A collection of helper classes that might be useful to be used throughout the application

Default styling

Lorem ipsum dolor sit amet.

Removes border

.mee-no-border

Lorem ipsum dolor sit amet.

Adds 1rem margin

.mee-margin-1

Lorem ipsum dolor sit amet.

adds 1 rem padding

.mee-padding-1

Lorem ipsum dolor sit amet.

centers elemenet vertically in parent

.mee-vertical-center

Lorem ipsum dolor sit amet.

special class to be used in stylguide

.mee-styleguide-grid

Lorem ipsum dolor sit amet.

pulls element to leftt

.mee-align-left

Lorem ipsum dolor sit amet.

pull elemenet to right

.mee-align-center

Lorem ipsum dolor sit amet.

centers elemenet horizontally in parent

.mee-align-right

Lorem ipsum dolor sit amet.

aligns text left

.mee-align-text-left

Lorem ipsum dolor sit amet.

aligns text centrally

.mee-align-text-center

Lorem ipsum dolor sit amet.

aligns text right

.mee-align-text-right

Lorem ipsum dolor sit amet.

removes padding

.mee-no-padding

Lorem ipsum dolor sit amet.

removes margin

.mee-no-margin

Lorem ipsum dolor sit amet.

sets position to fixed

.mee-fixed

Lorem ipsum dolor sit amet.

sets position to absolute

.mee-absolute

Lorem ipsum dolor sit amet.

sets width to 100%;

.mee-w-100

Lorem ipsum dolor sit amet.

displays element as inline block

.mee-inline-block

Lorem ipsum dolor sit amet.

removes float

.mee-remove-float

Lorem ipsum dolor sit amet.

add scroll

.mee-scroll

Lorem ipsum dolor sit amet.

add horizotnal scroll

.mee-horizontal-scroll

Lorem ipsum dolor sit amet.

add vertical scroll

.mee-vertical-scroll

Lorem ipsum dolor sit amet.

block element only visible on tiny screens

.mee-visible-xs-block

Lorem ipsum dolor sit amet.

inline element only visible on tiny screens

.mee-visible-xs-inline

Lorem ipsum dolor sit amet.

inline block element only visible on tiny screens

.mee-visible-xs-inline-block

Lorem ipsum dolor sit amet.

block element only visible on small screens

.mee-visible-sm-block

Lorem ipsum dolor sit amet.

inline element only visible on small screens

.mee-visible-sm-inline

Lorem ipsum dolor sit amet.

block element only visible on small screens

.mee-visible-sm-inline-block

Lorem ipsum dolor sit amet.

block element only visible on medium screens

.mee-visible-md-block

Lorem ipsum dolor sit amet.

inline element only visible on medium screens

.mee-visible-md-inline

Lorem ipsum dolor sit amet.

block element only visible on medium screens screens

.mee-visible-md-inline-block

Lorem ipsum dolor sit amet.

block element only visible on huge screens

.mee-visible-lg-block

Lorem ipsum dolor sit amet.

inline element only visible on huge screens

.mee-visible-lg-inline

Lorem ipsum dolor sit amet.

block element only visible on huge screens

.mee-visible-lg-inline-block

Lorem ipsum dolor sit amet.

print only visible block element

.mee-visible-print-block

Lorem ipsum dolor sit amet.

print only visible inline element

.mee-visible-print-inline

Lorem ipsum dolor sit amet.

print only visible inline block element

.mee-visible-print-inline-block

Lorem ipsum dolor sit amet.
<div class="mee-styleguide-grid {$modifiers}">Lorem ipsum dolor sit amet.</div>