Basic layout

Most layout goals can be achieved with .two-column and .three-column.

Two columns:
<div class="two-column margin-bottom">
    <div class="base-color placeholder">

    </div>
    <div class="base-color placeholder">

    </div>
</div>
Three columns:
<div class="three-column margin-bottom">
    <div class="base-color placeholder">

    </div>
    <div class="base-color placeholder">

    </div>
    <div class="base-color placeholder">

    </div>
</div>

Advanced grid layout

The .grid and .grid-width-[number] classes make for a simple, easy-to-use grid system based on CSS's grid system. The numbers are spelled out. There aren't any numerals in Cavepaint's composable class names.

The grid is based on a twelve-column grid:

To get a desired width, "grid-width-x" classes are used:

grid-width-seven
grid-width-five

A simple column layout is achieved by finding a good pair of grid-width- classes.

grid-width-seven
grid-width-five

These examples use the .gap-border-width composable which sets the gap to the project's base-color text-padding border-width. By base-color text-padding, the padding value is used:

A three-column layout using the grid

.grid is powerful enough on its own to act like .two-column and three-column. Here's an example of three equal-width .grid-width-four columns:

.grid-width-four
.grid-width-four
.grid-width-four 
<div class="grid gap-padding">
    <div class="grid-width-four base-color text-padding">
    .grid-width-four
    </div>
    <div class="grid-width-four base-color text-padding">
    .grid-width-four
    </div>
    <div class="grid-width-four base-color text-padding">
    .grid-width-four
    </div>
</div>

Alternate column schemes

The grid composable composes with four-column, five-column, six-column, seven-column, eight-column, nine-column, ten-column, eleven-column, and twelve-column (the default) to support the corresponding column schemes.

.grid-width-two
.grid-width-three 
<div class="grid five-column">
    <div class="grid-width-two base-color text-padding">
        .grid-width-two
    </div>
    <div class="grid-width-three base-color text-padding">
        .grid-width-three
    </div>
</div>

<div class="grid four-column">
    <button class="tetrad">
        Option 1
    </button>
    <button class="second tetrad">
        Option 2
    </button>
    <button class="third tetrad">
        Option 3
    </button>
    <button class="fourth tetrad">
        Option 4
    </button>
</div>

The two-column and three-column composables work on their own, without the grid composable.

A narrow sidebar

Here's a standard sidebar layout:

.grid-width-nine
.grid-width-three 
<div class="grid gap-padding">
    <div class="grid-width-nine base-color text-padding">
    .grid-width-nine
    </div>
    <div class="grid-width-three base-color text-padding">
    .grid-width-three
    </div>
</div>

Helpers

Helper classes are available to fine-tune the grid. Each one sets the gap to a different project value. By base-color, it's set to the project's padding.

  • .gap-border-width
  • .gap-text-padding
  • .gap-margin
  • .no-gap

More examples

.grid-width-three
.grid-width-four
.grid-width-five
.grid-width-three
.grid-width-three
.grid-width-three
.grid-width-three
.grid-width-eight
.grid-width-four
.grid-width-six
.grid-width-six

Breakpoint helpers

There are three breakpoint helpers for responsiveness:

  • mobile
  • tablet
  • desktop

Adding these helpers to any layout composable will dictate the screen width breakpoint for the layout composable's behavior.

Here's how two-column appears on the three different resolutions:

On mobile:

On tablet:

On desktop:

Here's two-column mobile:

On mobile:

On tablet:

On desktop:

The mobile and tablet composables compose with each other in two-column mobile tablet:

On mobile:

On tablet:

On desktop:

Here's two-column tablet:

On mobile:

On tablet:

On desktop:

Finally, here's two-column desktop:

On mobile:

On tablet:

On desktop:

Mobile-first

Breakpoints generally work with a mobile-first dynamic. The exception, appropriately, is "mobile" which is like saying "mobile-only" in terms of where and how it behaves.

A two-column composable will by base-color always appear as two columns, unless used with tablet or desktop.

Text-relative

Breakpoints aren't defined in prescriptive pixel widths. Instead, they're based on text measure, expressed in rem, and will change depending on text settings.

Widths

Width classes set the width of an element.

  • .text-width: The base content width, based on the @text-measure variable.
  • .card-width: A smaller supplemental width, golden to text-width
  • .page-width: The page width, like text-width and card-width added together

These classes are often used for the basic layout framing of a page. They work well with margin-auto, which will center them in their parent container.

Inner widths

Inner-width classes use padding to emulate an inner-width effect.

  • .inner-text-width: Enforces text measure inside an element
  • .inner-card-width: Enforces the smaller text measure/width of an aside
  • .inner-page-width: On very large elements, sets the inner width to the full page width

This example page is already set to inner-text-width, limiting our room, so we'll use the smallest of the three, card-width, for examples:

This is just a regular teal paragraph with responsive and padding composables added to it.

<p class="teal responsive padding">This is just a regular <strong>teal</strong> paragraph with <strong>responsive</strong> and <strong>padding</strong> composables added to it.</p>

The same composables, but with inner-card-width added.

<p class="teal responsive padding inner-card-width">The same composables, but with <strong>inner-card-width</strong> added.</p>

This one instead has card-width and margin-auto.

<p class="teal responsive padding card-width margin-auto">This one instead has <strong>card-width</strong> and <strong>margin-auto</strong>.</p>

Inner-width composables work with the grid composables. This column of text, for example, has the inner-text-width class on a grid-width-nine element. In cases where the grid width goes above the text measure, the inner-text-width class will enforce it.

Inner-width classes help cut down on markup complexity by letting you use fewer containers.