The grid

By default, the lucca grid is 12 columns based. This can be overriden.

Container should have the lui container classes. Columns must be given the lui column classes.

To define the size of a grid element for different devices, x being the number of columns, use

• lui column mobile-x for mobiles phones
• lui column tablet-x for tablets
• lui column desktop-x for desktops
• lui column large-x for large screens

CSS rules are overwritten by the largest display specified. If there are no rules specified for a smaller device, it will default to a full width column.

<div class="lui container">
  <div class="lui column tablet-6 desktop-10"><p>desktop-10 tablet-6</p></div>
  <div class="lui column tablet-3 desktop-2"><p>desktop-2 tablet-3</p></div>
  <div class="lui column tablet-3"><p>tablet-3</p></div>

  <div class="lui column tablet-4 mobile-6 large-2"><p>tablet-4 mobile-6 large-2</p></div>
  <div class="lui column tablet-4 large-12"><p>tablet-4 large-12</p></div>
</div>

You can add a gutter between your columns by adding the class spaced to your container

Wrap .lui.column elements in a .lui.columns element to neutralise gutter space around the container.

<div class="lui container spaced">
  <div class="lui columns">
    <div class="lui column mobile-6"><p>&nbsp;</p></div>
    <div class="lui column mobile-6"><p>&nbsp;</p></div>

    <div class="lui column mobile-4"><p>&nbsp;</p></div>
    <div class="lui column mobile-4"><p>&nbsp;</p></div>
    <div class="lui column mobile-4"><p>&nbsp;</p></div>
  </div>
</div>

Use the {device}-offset-x class to offset a specific grid child.

Use the {device}-push-x and {device}-pull-x classes to reorder children elements.

<div class="lui container">
  <div class="lui column mobile-push-3 mobile-6"><p style="background-color:black; color: white">mobile-push-3</p></div>
  <div class="lui column mobile-pull-6 mobile-3"><p style="background-color:black; color: white">mobile-pull-6</p></div>
  <div class="lui column mobile-3"><p>&nbsp;</p></div>

  <div class="lui column mobile-4"><p>&nbsp;</p></div>
  <div class="lui column mobile-offset-2 mobile-2"><p style="background-color:black; color: white">mobile-offset-2</p></div>
  <div class="lui column mobile-4"><p>&nbsp;</p></div>
</div>

If you want to remove the margins on your container, add the class fitting to your container

Without fitting

With fitting

<div class="lui container fitting">
  <div class="lui column mobile-4"><p>&nbsp;</p></div>
  <div class="lui column mobile-4"><p>&nbsp;</p></div>
  <div class="lui column mobile-4"><p>&nbsp;</p></div>

  <div class="lui column mobile-3"><p>&nbsp;</p></div>
  <div class="lui column mobile-9"><p>&nbsp;</p></div>
</div>