Docs

Grid System

The Joystick UI Framework's grid system is a flexible, mobile-first, and device agnostic scaffolding system.

Built using the CSS Flexbox layout model, the system includes helpers that you can use to alter the look and behavior of your grid, such as alignment, order, flow, and padding helpers.

Overview

The grid system consists of two building blocks: the grid wrapper, .joy-grid, and the columns, .joy-col, that fill up the wrapper.

Grid Wrapper

To use the grid system, add the class .joy-grid to an element, component, or page layout. Grids can be nested, so you might have to override an inherited property. Some helper classes are available for this situation.

Adding the class .joy-wrap causes the flow of your .joy-col elements to wrap when they exceed 100% of their parent’s width. You can use .joy-nowrap to revert this behavior and allow your element to stretch and not wrap.

To stack your columns vertically instead of the default row behavior, use .joy-grid--vertical.

If you want your application to take 100% of the width and height of the viewport and nest other grids within, use the top-level app helper class .joy-grid--frame.

Grid Columns

By default, the grid columns use an equal amount of space in the parent container. This automatic sizing allows you to achieve most desired outcomes. However, you can add manual sizing classes to the columns if you need specific column widths.

Columns have no gutters. They are simply equal divisions of their parent. If you want gutters, remove the class .joy-col with the helper class .joy-col--padded, which adds a 0.75rem (12px) gutter to the left and right side of your column.

Using the manual sizing class helpers, you can specify a column span across the following grids –2, 3, 4, 5, 6, and 12. The grid supports up to 12 columns.

See sizing utilities for more information and examples.

Container

Use containers to give content a maximum width. x-small, small, medium, large, and x-large containers will grow horizontally until they reach their max-width, regardless of the width of the container's children.

.joy-container--x-small (max-width: 418px)
.joy-container--small (max-width: 740px)
.joy-container--medium (max-width: 960px)
.joy-container--large (max-width: 1280px)
.joy-container--x-large (max-width: 1600px)
.joy-container--fluid
.joy-container--x-small.joy-container--left
.joy-container--x-small.joy-container--center
<div class="joy-container--x-small">.joy-container--x-small (max-width: 418px)</div>
<div class="joy-container--small">.joy-container--small (max-width: 740px)</div>
<div class="joy-container--medium">.joy-container--medium (max-width: 960px)</div>
<div class="joy-container--large">.joy-container--large (max-width: 1280px)</div>
<div class="joy-container--x-large">.joy-container--x-large (max-width: 1600px)</div>
<div class="joy-container--fluid">.joy-container--fluid</div>
<div class="joy-container--left joy-container--x-small">.joy-container--x-small.joy-container--left</div>
<div class="joy-container--center joy-container--x-small">.joy-container--x-small.joy-container--center</div>

Columns

Use the optional .joy-col only if you want your columns to grow to fill the full width of the grid.

Columns will grow to fill the width of their parent .joy-grid parent by default. .joy-col elements will automatically resize themselves to accommodate the size of it's contents.

1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
<div class="joy-grid">
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
</div>
<div class="joy-grid">
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
</div>
<div class="joy-grid">
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
</div>
<div class="joy-grid">
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
</div>
<div class="joy-grid">
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
</div>
<div class="joy-grid">
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
</div>
<div class="joy-grid">
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
</div>
<div class="joy-grid">
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
</div>
<div class="joy-grid">
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
</div>
<div class="joy-grid">
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
</div>
<div class="joy-grid">
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
  <div class="joy-col">1</div>
</div>

Alignment

Several helper classes are available to align your content within the grid. When you use one of these helpers, your .joy-col elements will no longer grow automatically to fill the width of the .joy-grid. Instead, they will only grow to the size of their content and will be aligned depending on which helper class you are using.

Horizontal Alignment

Center all of your .joy-col or .joy-col--padded classes with the .joy-grid--align-center helper.

Content determines width unless otherwise set
1
123
12345
<div class="joy-grid joy-grid--align-center">
  <div class="joy-col--padded">Content determines width unless otherwise set</div>
  <div class="joy-col--padded">1</div>
  <div class="joy-col--padded">123</div>
  <div class="joy-col--padded">12345</div>
</div>

Horizontal Spacing

Evenly distribute your .joy-col or .joy-col--padded classes with the .joy-grid--align-space helper. There will be space around the left and right side of every .joy-col element, including the first and last elements.

Content determines width unless otherwise set
1
123
12345
<div class="joy-grid joy-grid--align-space">
  <div class="joy-col--padded">Content determines width unless otherwise set</div>
  <div class="joy-col--padded">1</div>
  <div class="joy-col--padded">123</div>
  <div class="joy-col--padded">12345</div>
</div>

Horizontal Spread

The .joy-grid--align-spread helper is very similar to the joy-grid--align-space, except the .joy-col elements will be spread across the width of the entire .joy-grid. The first and last elements will be flush against the left and right side of the .joy-grid respectively.

Content determines width unless otherwise set
1
123
12345
<div class="joy-grid joy-grid--align-spread">
  <div class="joy-col--padded">Content determines width unless otherwise set</div>
  <div class="joy-col--padded">1</div>
  <div class="joy-col--padded">123</div>
  <div class="joy-col--padded">12345</div>
</div>

Vertical Alignment

You can align .joy-col elements vertically by adding a vertical alignment helper to the .joy-col element directly.

.joy-align-top
.joy-align-middle
.joy-align-bottom
<div class="joy-grid joy-grid--align-spread">
  <div class="joy-align-top joy-col--padded">.joy-align-top</div>
  <div class="joy-align-middle joy-col--padded">.joy-align-middle</div>
  <div class="joy-align-bottom joy-col--padded">.joy-align-bottom</div>
</div>

Size Utilities

Size utility class names are designed to be human-readable, e.g. .joy-size--1-of-2 which equates to a width of 50%.

By default, a group of sizing helpers are created based on standard grid column spans of –2, 3, 4, 5, 6, and 12. For example, if you need 3 cards to horizontally align along the same x-axis, you would use the class .joy-size--1-of-3 on each element. This will make each card take up 33.333% of containing section.

The sizing helpers have the option to be responsive. By pre-pending a breakpoint name to a sizing helper, e.g. .joy-medium-size--1-of-3 you will output a width at the specified breakpoint name.

In some uncommon cases, you may need a sizing helper that is up to a certain breakpoint. For these, use the classes prefixed with max- to achieve this result.

Here is an overview of our available breakpoint names:

BREAKPOINT NAME BREAKPOINT WIDTH
x-small- 300px and higher
small- 560px and higher
medium- 768px and higher
large- 1008px and higher
max-x-small- up to 299px
max-small- up to 559px
max-medium- up to 767px
max-large- up to 1007px

The responsive sizing helpers are built upon a mobile first approach. To achieve the desired outcome of this approach, you will need to append responsive sizing helpers to an element that overrides the previous breakpoint. A default sizing helper is required and responsive sizing helpers are additive. The following example demonstrates the class name position for each breakpoint:

.joy-size--1-of-1
.joy-size--1-of-2
.joy-size--1-of-3
.joy-size--2-of-3
.joy-size--1-of-4
.joy-size--2-of-4
.joy-size--3-of-4
.joy-size--1-of-5
.joy-size--2-of-5
.joy-size--3-of-5
.joy-size--4-of-5
.joy-size--1-of-6
.joy-size--2-of-6
.joy-size--3-of-6
.joy-size--4-of-6
.joy-size--5-of-6
.joy-size--1-of-12
.joy-size--2-of-12
.joy-size--3-of-12
.joy-size--4-of-12
.joy-size--5-of-12
.joy-size--6-of-12
.joy-size--7-of-12
.joy-size--8-of-12
.joy-size--9-of-12
.joy-size--10-of-12
.joy-size--11-of-12
<div class="joy-grid">
  <div class="joy-col joy-size--1-of-1">.joy-size--1-of-1</div>
  <div class="joy-col joy-size--1-of-2">.joy-size--1-of-2</div>
  <div class="joy-col joy-size--1-of-3">.joy-size--1-of-3</div>
  <div class="joy-col joy-size--2-of-3">.joy-size--2-of-3</div>
  <div class="joy-col joy-size--1-of-4">.joy-size--1-of-4</div>
  <div class="joy-col joy-size--2-of-4">.joy-size--2-of-4</div>
  <div class="joy-col joy-size--3-of-4">.joy-size--3-of-4</div>
  <div class="joy-col joy-size--1-of-5">.joy-size--1-of-5</div>
  <div class="joy-col joy-size--2-of-5">.joy-size--2-of-5</div>
  <div class="joy-col joy-size--3-of-5">.joy-size--3-of-5</div>
  <div class="joy-col joy-size--4-of-5">.joy-size--4-of-5</div>
  <div class="joy-col joy-size--1-of-6">.joy-size--1-of-6</div>
  <div class="joy-col joy-size--2-of-6">.joy-size--2-of-6</div>
  <div class="joy-col joy-size--3-of-6">.joy-size--3-of-6</div>
  <div class="joy-col joy-size--4-of-6">.joy-size--4-of-6</div>
  <div class="joy-col joy-size--5-of-6">.joy-size--5-of-6</div>
  <div class="joy-col joy-size--1-of-12">.joy-size--1-of-12</div>
  <div class="joy-col joy-size--2-of-12">.joy-size--2-of-12</div>
  <div class="joy-col joy-size--3-of-12">.joy-size--3-of-12</div>
  <div class="joy-col joy-size--4-of-12">.joy-size--4-of-12</div>
  <div class="joy-col joy-size--5-of-12">.joy-size--5-of-12</div>
  <div class="joy-col joy-size--6-of-12">.joy-size--6-of-12</div>
  <div class="joy-col joy-size--7-of-12">.joy-size--7-of-12</div>
  <div class="joy-col joy-size--8-of-12">.joy-size--8-of-12</div>
  <div class="joy-col joy-size--9-of-12">.joy-size--9-of-12</div>
  <div class="joy-col joy-size--10-of-12">.joy-size--10-of-12</div>
  <div class="joy-col joy-size--11-of-12">.joy-size--11-of-12</div>
</div>

Order

The order helper will add an order property with a corresponding value to the element. For example, .joy-order--1 will add a property of order: 1 to the element.

A responsive helper can be added to change the order of an element at various breakpoints. In the example below, the green column should change positions at different browser widths.

1
2
3
4 
<div class="joy-grid joy-wrap">
  <div class="joy-col
    joy-order--1
    joy-small-order--3
    joy-medium-order--5
    joy-large-order--7">
    1
  </div>
  <div class="joy-col joy-order--2">
    2
  </div>
  <div class="joy-col joy-order--4">
    3
  </div>
  <div class="joy-col joy-order--6">
    4
  </div>
</div>