A17 SCSS Utilities

Description

A series of design column spanning classes (for flex/float/other), which allow nesting and have responsive helpers.

Setup

The required $structure map (Setup).

Output

Based on the reference config mentioned in this guide, we'd get the following in our CSS:

app.css

[class*=colspan-] {
  width: 100%;
}

.colspan-1 {
  width: calc(((1 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (1 / var(--grid-columns) * var(--inner-gutter))));
}

.colspan-1 > * {
  --grid-columns: 1;
}

.colspan-2 {
  width: calc(((2 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (2 / var(--grid-columns) * var(--inner-gutter))));
}

.colspan-2 > * {
  --grid-columns: 2;
}

.colspan-3 {
  width: calc(((3 / var(--grid-columns)) * var(--max-width, 100%)) - (var(--inner-gutter) - (3 / var(--grid-columns) * var(--inner-gutter))));
}

.colspan-3 > * {
  --grid-columns: 3;
}

/* ... up to the maximum amount of columns specified in $structure.columns */

Note: Each colspan- also includes a rule set to include a CSS variable - this allows nesting of CSS colspans and CSS grid/col- classes. See nesting.

Demos

document.html

<div class="colspan-demo">
  <div class="colspan-1"></div>
  <div class="colspan-2"></div>
  <div class="colspan-3"></div>
  <div class="colspan-4"></div>
  <div class="colspan-5"></div>
  <div class="colspan-6"></div>
  <div class="colspan-7"></div>
  <div class="colspan-8"></div>
  <div class="colspan-9"></div>
  <div class="colspan-10"></div>
  <div class="colspan-11"></div>
  <div class="colspan-12"></div>
</div>

The CSS for these docs contains a .colspan-demo class to add some color, spacing and to display the classname of the columns.

Responsive

document.html

<div class="colspan-6 colspan-8@md colspan-6@lg colspan-5@xl"></div>

The breakpoints helpers are breakpoint up - so col-4@lg would apply a 4 column spanning at lg and every breakpoint larger than that:

Alternative grids

Need a random 10 column grid?

_component.scss

.colspan-demo--10 {
  --grid-columns: 10;
}

Need a random 24 column grid?

_component.scss

.colspan-demo--24 {
  --grid-columns: 24;
}

Nesting

Nesting .colspan and .grid/.col-x (docs):

Notes

As you can see, this generates a lot of CSS classes - you will want to purge your CSS of unused classes to remove any of these that you don't use.

Alternatively, if you don't want to generate the CSS classes, see CSS-Class-Generation.