Layout helper classes can be used to style layouts using just CSS classes. They can be especially useful in CMS content where CSS is not easily accessed.

Float Boxes Left or Right

Uses traditional CSS floats to position content.

Left

Right

.elr-pull-left
.elr-pull-right

HTML

<div class="elr-pull-left">
    <p>Left</p>
</div>
<div class="elr-pull-right">
    <p>Right</p>
</div>

Sass

@include elr-helper-classes;

Center Block

Uses margin auto to position a block in the center of its container. Block must have a set width.

Center Block

.elr-center-block

HTML

<div class="box elr-center-block">
    <p>Center Block</p>
</div>

Sass

@include elr-helper-classes;

Clearfix

Clears a container.

Left

Right

.elr-clear

Screen Readers

Add content for screen readers only. This content will be hidden visually.

Hello Screen Reader

.elr-screen-reader

Layout Reset Classes

Remove layout styles from elements

Default Box. Has margin, padding, background color, and border applied.

HTML

Sass

@include elr-helper-classes;
.elr-no-margin

HTML

Sass

@include elr-helper-classes;
.elr-no-padding

HTML

Sass

@include elr-helper-classes;
.elr-no-float

HTML

Sass

@include elr-helper-classes;
.elr-no-background

HTML

Sass

@include elr-helper-classes;
.elr-no-border

HTML

Sass

@include elr-helper-classes;

Overflow Classes

HTML

Sass

@include elr-helper-classes;

This box is too big for its container

Default Box

HTML

Sass

@include elr-helper-classes;

This box is too big for its container

.elr-o-hidden

HTML

Sass

@include elr-helper-classes;

This box is too big for its container

.elr-o-scroll

HTML

Sass

@include elr-helper-classes;

This box is too big for its container

.elr-o-scroll-x

HTML

Sass

@include elr-helper-classes;

This box is too big for its container

.elr-o-scroll-y

HTML

Sass

@include elr-helper-classes;

Flex Layout Classes

.flex
.flex-column
.flex-wrap
.flex-center
.flex-baseline
.flex-stretch
.flex-start
.flex-end
.flex-justify
.flex-auto
.flex-grow
.flex-first
.flex-last