Layout

CSS utility classes for creating layouts

Webcore comes with a handful of CSS utility classes to help you build 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.

@use 'webcoreui/styles' as *;
@include setup((
    ...,
    includeUtilities: false // Remove this option if you want to use utility classes
));

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:

Alignment

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

Wrap

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

Responsive classes

The above classes can be used responsively by prefixing them with a specific breakpoint (xs, sm, md, lg):

<!-- Flex gap, alignment, direction, and wrap for xs -->
<div class="xs-md" />
<div class="xs-justify-center" />
<div class="xs-column" />
<div class="xs-wrap" />

<!-- sm -->
<div class="sm-md" />
<div class="sm-justify-center" />
<div class="sm-column" />
<div class="sm-wrap" />

<!-- md -->
<div class="md-md" />
<div class="md-justify-center" />
<div class="md-column" />
<div class="md-wrap" />

<!-- lg -->
<div class="lg-md" />
<div class="lg-justify-center" />
<div class="lg-column" />
<div class="lg-wrap" />

To configure your breakpoints, please see our CSS configuration guide.

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:

Optimization

Enabling layout-specific classes in your project can negatively affect your CSS bundle size if you don’t utilize all available classes. In order to get rid of unused CSS classes, add the astro-purgecss package to your project using one of the following commands:

npx astro add astro-purgecss

yarn astro add astro-purgecss

pnpm astro add astro-purgecss

If you want to enable the integration manually, follow the steps below:

• Install Dependencies

  Install the astro-purgecss and purgecss packages:

  NPMYarnPNPM

  npm install purgecss astro-purgecss

  yarn add purgecss astro-purgecss

  pnpm install purgecss astro-purgecss

• Update Configuration

  Update your astro.config.mjs configuration file at the root of your project folder with the following lines. Make sure to put the purgecss integration as the last element in the integrations array to ensure it works properly.

  import purgecss from 'astro-purgecss'
  
  export default {
      // ...
      integrations: [
          purgecss()
      ]
  }