Clear Fix

A modern clearfix alternative to overflow: hidden

HTML

Sass

Em Margin

Converts px margin to ems; enter value only - no units

Arguments:

  • $top: enter value only - no units
  • $right: enter value only - no units
  • $bottom: enter value only - no units
  • $left: enter value only - no units

HTML

Sass

Em Padding

Converts px padding to ems; enter value only - no units

Arguments:

  • $top: enter value only - no units
  • $right: enter value only - no units
  • $bottom: enter value only - no units
  • $left: enter value only - no units

HTML

Sass

Center Block

horizontally centers an element within its container using display block and margin auto.

HTML

Sass

Center Block

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, nemo, quia, dolorum, labore ratione quisquam doloribus consectetur officia perferendis tenetur sed nobis corrupti voluptatum. Eligendi, repudiandae velit voluptates cum officia aliquid eos molestiae vel quia nam illo obcaecati molestias expedita eveniet aut exercitationem placeat minus possimus aliquam minima. Nemo, nihil.

@include elr-center-block($width);

HTML

Sass

Horizontally Center

Horizontally centers an element using absolute positioning and translate

HTML

Sass

Vertically Center

Vertially centers an element using absolute positioning and translate

HTML

Sass

Centered

Vertically and horizontally centers an element within its container

HTML

Sass

Ratio Box

These boxes keep their aspect ratio at all times. This one is 16:9

Some Centered Text

Some Centered Text

Some Centered Text

Some Centered Text

HTML

Sass