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:
- Column widths are defined by the viewport size rather than percentage of their containers.
- 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.
|Max Width||Breakpoint||No. Columns|
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:
||''||Optional Prefix for all grid classes|
||480px||Smallest (phone) breakpoint size in pixels|
||860px||Medium (tablet) breakpoint size in pixels|
||1450px||Default (desktop) breakpoint size in pixels|
||0.95||Amount of screen used by grid (0 - 1)|
||1rem||Space between columns|
||1450px||Max size of
||960px||Fixed container size|
||24||How many columns to use on the desktop breakpoint|
||tablet||Prefix word for tablet breakpoint|
||12||How many columns to use on tablet breakpoint|
||phone||Prefix word for phone breakpoint|
||6||How many columns to use for phone breakpoint|
||6||How many leader and trailer classes to generate|
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;
.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>
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
<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>
The width of elements can be explicitly defined for breakpoints where columns would normally fold by default. This can be done with the
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>
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
: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
<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>
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.
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>
Block groups have responsive
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>
Calcite Web includes a large set of helper classes to quickly layout a page. In addition to classes directly related to the grid like
post-X there are also classes which help space things vertically (
padding-trailer-X) and horizontally (
Certain other CSS properties that are commonly needed are available as well such as
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 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
phone- classes are exposed for defining pre and post behavior on breakpoints.
Pre and post helpers are available from
<div class="column-8 pre-2"> <span>column-8 pre-2</span> </div>
The leader and trailer classes are designed for quick vertical adjustments with markup. The standard
trailer-n classes add top and bottom margin to the element, as multiples of the
$baseline variable, or 1.5rem.
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
trailer-n classes at 6.
Leader and trailer classes also have additional responsive
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
<div class="modifier-class panel">modifier-class</div>
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.
phone- classes are exposed for defining gutter and gutter behavior on breakpoints.
<div class="modifier-class panel">modifier-class</div>
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
last-column classes, along with
These convenience classes are meant to help with quick responsive layout. Below are the classes and what breakpoints they are visible on:
|Helper Class||Visible on Phone||Visible on Tablet||Visible on Desktop|
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 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
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
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>
The modifier class
inline-block will add
display: inline-block to an element.
Interactive Layout Helpers
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.
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>