The Grid

The grid shipped with Lucca-UI is a fully customisable responsive procedural grid.

Based on @breakpoints

The grid is based on the breakpoints defined in the @lui_breakpoints variable in /definitions/_breakpoints.less. These breakpoints can be normally overriden in a /definitions/breakpoints.overrides.less file inside your theme directory.

Container width

The container is defined with the lui container classes. It defaults to a fluid container with a responsive side margins. But you can:

• get rid of the margins by giving it the fitting class
• make it a fixed-sized container by overriding the @container-width variable in your grid.overrides.less theme file

Columns

The columns are defined with the lui column classes. By default, the grid is 12-columns based, but you can change this number by changing the @columns variable value in your /definitions/grid.overrides.less file in your theme directory.

Break-points

By default the grid has 4 different break-points defined in the /definitions/_breakpoints.less file:

• mobile: screens less than 768px wide
• tablet: screens larger than mobile but smaller than 992px
• desktop: screens under 1200px width
• large: screens over 1200px

Based on these breakpoints, you can define the actual size of a .column element depending on the device screensize: the lui column mobile-6 tablet-4 desktop-3 large-2 classes will make an element take 1/2 of the screen width on mobiles, 1/3 on tablets, 1/4 on desktops and 1/6 on large screens.

Spaced or not?

By default, the grid has no gutter (!) but it can be given to a specific column or all the columns in a given container with the spaced css class.

Responsive reordering

You can reorder column positions depending on the device thanks to the {breakpoint}-push-{x} and {breakpoint}-pull-{x} classes.

Pushing means moving the column to the right by a distance defined by the x variable (the number of columns). Pulling works the other way around.