Layout

CSS utility classes for creating layouts

Webcore comes with a handful of CSS utility classes to help you build different layouts faster. To use utility classes, you must have the includeUtilities rule set to true in your setup mixin. This is enabled by default. If you’d like to exclude utility classes from your CSS bundle, make sure to set this rule to false.

@import 'webcoreui/styles';
@include setup((
    ...,
    includeUtilities: true
));

Utilities comes with the following three base classes:

• .container: Sets a maximum width for the element with a default padding and auto margins.
• .flex: Sets the display property of the element to flex.
• .grid: Sets the display property of the element to grid.

.container with a max-width, padding, and auto margins

Flex

When setting the .flex class on an element, you’ll be able to use the following utility classes to change its appearance:

To set gaps, use onse of the spacing properties. The default values can be changed using the webcore.config.scss file.

Direction

To change the direction of your flex items, you can use the .row, .column, .row-reverse, and .column-reverse classes:

Alignments

To change the vertical and horizontal alignments of flex items, you can use the following CSS classes:

Wraps

To change the way flex items wrap, use the .wrap, .nowrap, or .wrap-reverse classes:

Grid

Setting gaps and alignments for grids can be done using the same classes as shown above for .flex elements. To change the number of grid columns on your page, you can use the following CSS classes: