Layout System

Moxie layout system.

Width Helpers Jump to Source

Fully configurable responsive width classes. Generally used in conjunction with the grid system.

50% Width
Source 
<div class="w-1-2@xs u-align-center"><div class="sg-boxlet">50% Width</div></div>

Layout Helpers Jump to Source

High-level, configurable layout container and helper classes.

.l-constrained

Applies the default horizontally centered wrapper with responsive gutter.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent diam neque, ornare ut eleifend quis, laoreet vitae lorem. Nunc vel rhoncus lectus. Aliquam sed enim dapibus, fringilla nunc sed, vehicula ligula.

.l-small

Applies a narrower constrain. Can also be used without .l-constrained.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent diam neque, ornare ut eleifend quis, laoreet vitae lorem. Nunc vel rhoncus lectus. Aliquam sed enim dapibus, fringilla nunc sed, vehicula ligula.

.l-medium

Applies a medium constrain. Can also be used without .l-constrained.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent diam neque, ornare ut eleifend quis, laoreet vitae lorem. Nunc vel rhoncus lectus. Aliquam sed enim dapibus, fringilla nunc sed, vehicula ligula.

.l-large

Applies a wider constrain. Can also be used without .l-constrained.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent diam neque, ornare ut eleifend quis, laoreet vitae lorem. Nunc vel rhoncus lectus. Aliquam sed enim dapibus, fringilla nunc sed, vehicula ligula.

Source 
<div class="l-constrained [modifier class]">
  <div class="sg-boxlet">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent diam neque, ornare ut eleifend quis, laoreet vitae
      lorem. Nunc vel rhoncus lectus. Aliquam sed enim dapibus, fringilla nunc sed, vehicula ligula.</p>
  </div>
</div>

Spacing Jump to Source

Fully configurable responsive spacing classes.

Page Generated: Thu, Apr 11, 2024 at 12:48:00 PM