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:
A simple column layout is achieved by finding a good pair of grid-width- classes.
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:
<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>
A shortcut: .two-column and .three-column
Instead of using the grid system to compose these layouts, you can use the two-column and three-column composables.
A narrow sidebar
Here's a standard sidebar layout:
<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>
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.
There are three breakpoint helpers for responsiveness:
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:
Here's two-column mobile:
The mobile and tablet composables compose with each other in two-column mobile tablet:
Here's two-column tablet:
Finally, here's two-column desktop:
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.
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.
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-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.