The Calcite Grid System includes a full, responsive, and configurable grid with columns, a container, and a 'Block Group' grid. The main grid is different from standard CSS grid systems in two key ways:

1. Column widths are defined by the viewport size rather than percentage of their containers.
2. Built-in smart defaults for responsive sizing puts less columns across the screen at smaller sizes, rather than smaller columns.

These two principles mean that a column becomes a standard unit of measurement, creating a constant and abstracted grid system that stands behind the content of a page rather than within it.

The Grid

Configuration

If you are using Calcite Web as a Sass library, you can customize the grid with Sass variables. Below are the different settings you have access to and their default values:

You can override these values to create a custom, project-specific grid in your own project. For example, to use a 16 column grid instead of the default 24 columns, you would set the $default-column-count variable before importing the library:

$default-column-count: 16;
@import calcite-web;

Container

The .grid-container class is required to contain the grid. Using the column classes without them being nested in a containing div will cause unexpected results.

The container class applies a max width to the content it contains and handles the column relationship with the viewport window, preventing collisions with scroll bars or other exciting bugs.

<div class="grid-container">
	<div class="column-24">
		<blockquote>Contain the Columns</blockquote>
	</div>
</div>

Columns

A column is a constant unit of measurement. The width of a column is dynamic, but always between a fixed range. Columns will never get too large or too small. As the viewport gets smaller the Calcite Grid System will simply put less columns on the page.

By default, large screens hold 24 columns, medium tablet-sized screens hold 12, and phone-sized screens hold 6. The grid will fold columns at these breakpoints. That means an element that is 3 columns wide will always be 3 columns wide, no matter how big or small the screen.

On large screens, 3 columns out of 24 is proportionally a small piece of screen real estate. On Phones, the Grid will leave the element at 3 columns wide -- proportionally more real estate, as 3/6 columns is more significant than 3/24.

To center a single column inside a grid container, you can use the helper class center-column.

<div class="column-17">
  <span>column-17</span>
  <div class="column-8">
    <span>column-8</span>
  </div>
  <div class="column-9 tablet-first-column">
    <span>column-9</span>
  </div>
</div>

View the full example

Responsive Columns

The width of elements can be explicitly defined for breakpoints where columns would normally fold by default. This can be done with the phone-column-n and tablet-column-n classes. For example, .column-12 would default to the full 12/12 column width at a tablet size. Adding to the same element .tablet-column-6 would prevent the default behavior, and at a tablet viewport, the element would be 6/12 columns.

<div class="column-8 tablet-column-2 phone-column-3">
  <span class="tablet-hide">column-8</span>
  <span class="tablet-only">tablet-column-2</span>
  <span class="phone-show">phone-column-3</span>
</div>

View the full example

Nested Columns

Contrary to other flexible-width grid systems, Calcite Grid columns do not change behavior when nested. Because a column is a constant measurement relative to the size of the viewport, nested columns still span the same width as their non-nested counterparts. An element with .column-6 nested within an element with .column-12 is the same size as an un-nested .column-6. Further, clearing of the column-gutter is automatically done for you with :first-child and :last-child psuedo-selectors on all column classes.

Column-folding behavior is almost entirely automatic. The only exception is gutter clearing behaviors on deeply nested items after column folding occurs - in some situations we can not know what columns are now first or last in their rows. This will cause the column to be inset from the edge of the container. The example below solves this by introducing first-column classes, along with tablet-first-column and phone-first-column.

<div class="column-8">
  <span>column-8</span>
  <div class="column-4">
    <span>column-4</span>
  </div>
  <div class="column-4">
    <span>column-4</span>
  </div>
</div>

View the example

Rows

Because columns can now be nested without changing their behavior, we don't need rows, really. However, you still may find that a tall, narrow column with a short wide neighbor can cause float issues with subsequent columns.

With this grid you can wrap the first two columns in a 24 column grid, which will act in the same manner as a row.

View the example

Block Groups

Block groups are designed for quickly creating gridded content, such as a tile pattern or image gallery. Block groups are percentage based, so they can subdivide columns. Block groups have the ability to break the regular grid system, and thus should be used sparingly and with thought.

<div class="block-group block-group-3-up">
  <div class="block"><div class="panel">Block</div></div>
  <div class="block"><div class="panel">Block</div></div>
  <div class="block"><div class="panel">Block</div></div>
</div>

View the example

Responsive Block Groups

Block groups have responsive tablet- and phone- prefix classes. These allow the flow of content across repeating rows of content to be easily tweaked across viewport widths in scenarios where the default column resizing or responsive column classes would be too verbose or cumbersome.

<div class="block-group block-group-4-up tablet-block-group-2-up phone-block-group-1-up">
  <div class="block trailer-half">
    <div class="panel">Block</div>
  </div>
  <div class="block trailer-half">
    <div class="panel">Block</div>
  </div>
  <div class="block trailer-half">
    <div class="panel">Block</div>
  </div>
  <div class="block trailer-half">
    <div class="panel">Block</div>
  </div>
</div>

View the example

Calcite Web includes a large set of helper classes to quickly layout a page. In addition to classes directly related to the grid like column-X, pre-X and post-X there are also classes which help space things vertically (leader-X, trailer-X, padding-leader-X, padding-trailer-X) and horizontally (gutter-left-X, gutter-right-X).

Certain other CSS properties that are commonly needed are available as well such as show, hide, left, right, and sticky classes.

Almost all of the helper classes are available with responsive prefixes as well. For example, phone-leader-1 will set one line of space above the element on the mobile size only.

Pre & Post

Pre and Post classes are used to move your columns laterally across the grid by defining how many columns they should be from their neighbors on either side.

Pre and Post classes do not responsively fold. This prevents a pre-5 from pushing content off the edge of the screen on phone sizes. Responsive tablet- and phone- classes are exposed for defining pre and post behavior on breakpoints.

Pre and post helpers are available from .pre-1 and .post-1 to .pre-24 and .post-24.

<div class="column-8 pre-2">
  <span>column-8 pre-2</span>
</div>

View the example

Leader & Trailer

The leader and trailer classes are designed for quick vertical adjustments with markup. The standard leader-n and trailer-n classes add top and bottom margin to the element, as multiples of the $baseline variable, or 1.5rem.

The padding- prefix adds lines of padding instead of margin, and both classes can be used in conjunction.

Calcite Web provides a $vertical-range variable that sets the maximum value of n for the leader-n and trailer-n classes at 6.

Leader and trailer classes also have additional responsive tablet- and phone- prefix classes. These allow you to add different amounts of space above and below an element at different screen sizes.

For example, if you wanted an element to have 3 lines of margin above it on desktop, but that was too much on a phone, you could use responsive classes to specify that:

<div class="leader-3 phone-leader-1"></div>

These also apply to padding-leader and padding-trailer

Base

<div class="modifier-class panel">modifier-class</div>

Modifiers

Horizontal Spacing

These helper classes add margin or padding the the left or right of an element. For example, <div class="padding-left-3"> will receive three units of padding on its left side.

Responsive tablet- and phone- classes are exposed for defining gutter and gutter behavior on breakpoints.

Base

<div class="modifier-class panel">modifier-class</div>

Modifiers

First & Last

The first and last classes are used for aligning grid columns when the Grid System is unable to determine which columns are first or last in their rows. This will cause the column to be inset from the edge of the container. The example below solves this by introducing first-column and last-column classes, along with tablet-first-column, phone-first-column, tablet-last-column, and phone-last-column.

Show & Hide

These convenience classes are meant to help with quick responsive layout. Below are the classes and what breakpoints they are visible on:

Show Helpers

Essentially, the show classes will show that breakpoint and the breakpoint below it. So if you'd like something to be visible only on a phone, you would use phone-show. If you used tablet-show, the element would be visible on tablet and phone.

Hide Helpers

Hide helpers are very similar to show helpers. A responsive hide class will hide that breakpoint and the breakpoint below it. So if you wanted something to be visible on only desktop, you could use tablet-hide, hiding the element on tablet and phone. Or if you wanted something to be hidden only on a phone, phone-hide would hide it on the phone only.

Visual Hiding Helpers

Sometimes it is desirable for accessibility reasons to hide something visually but leave it accessible to screenreaders. You can use the visually-hidden class to achive this. If you want your hidden element to remain focusable by the keyboard add visually-hidden-focusable in addition to visually-hidden.

Left & Right

Use a class of right on html elements to float elements to the right. Use a class of left on html elements to float elements to the left.

Left and right classes also have additional responsive tablet- and phone- prefix classes. These allow you to float an element right on a large screen, but float it left when the screen is smaller.

For example, if you wanted an element to float right on desktop, but left on a phone, you could use responsive right and left classes to specify that:

<div class="right phone-left"></div>

Inline Block

The modifier class inline-block will add display: inline-block to an element.

JavaScript dependent helper classes that surface simple class-based hooks for common interactive layout patterns.

Scroll Show & Hide

Some layouts call for elements to appear or disappear as the user scrolls down the page. An element with the scroll-show class will appear when it reaches a point specified by the data-top=x attribute, appearing when it comes within the given value of the top of the screen.

Scroll Sticky

Elements that become position fixed as they reach a certain position in the viewport are refered to as 'sticky'. The js-sticky class takes an data-top=x attribute that defines the point from the top of the window the sticky element will stick.

For example, the following <div> will become fixed when it is 46 pixels from the top of the viewport:

<div class="js-sticky" data-top="46">
  <a href="#" class="btn btn-clear">Back to Top</a>
</div>