Sizing - Joystick Design System

Our sizing class names are set up in a human-readable format, e.g. .joy-size--1-of-2. This 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, 7, 8 and 12. For example, if you need 3 cards to horizontally align along the same x-axis, you would use the class .size--1-of-3 on each element. This will make each card take up 33.333% of containing section.

2 Column Span

.joy-size--1-of-2

.joy-size--2-of-2

<div class="joy-size--1-of-2">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-2</div>
</div>
<div class="joy-size--1-of-2">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-2</div>
</div>
<div class="joy-size--2-of-2">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--2-of-2</div>
</div>

Note: The <div> with class joy-box is for demo purposes only.

3 Column Span

.joy-size--1-of-3

.joy-size--2-of-3

.joy-size--3-of-3

<div class="joy-size--1-of-3">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-3</div>
</div>
<div class="joy-size--1-of-3">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-3</div>
</div>
<div class="joy-size--1-of-3">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-3</div>
</div>
<div class="joy-size--1-of-3">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-3</div>
</div>
<div class="joy-size--2-of-3">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--2-of-3</div>
</div>
<div class="joy-size--3-of-3">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--3-of-3</div>
</div>

4 Column Span

.joy-size--1-of-4

.joy-size--3-of-4

.joy-size--2-of-4

.joy-size--4-of-4

<div class="joy-size--1-of-4">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-4</div>
</div>
<div class="joy-size--1-of-4">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-4</div>
</div>
<div class="joy-size--1-of-4">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-4</div>
</div>
<div class="joy-size--1-of-4">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-4</div>
</div>
<div class="joy-size--1-of-4">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-4</div>
</div>
<div class="joy-size--3-of-4">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--3-of-4</div>
</div>
<div class="joy-size--2-of-4">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--2-of-4</div>
</div>
<div class="joy-size--2-of-4">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--2-of-4</div>
</div>
<div class="joy-size--4-of-4">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--4-of-4</div>
</div>

5 Column Span

.joy-size--1-of-5

.joy-size--4-of-5

.joy-size--2-of-5

.joy-size--3-of-5

.joy-size--5-of-5

<div class="joy-size--1-of-5">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-5</div>
</div>
<div class="joy-size--1-of-5">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-5</div>
</div>
<div class="joy-size--1-of-5">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-5</div>
</div>
<div class="joy-size--1-of-5">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-5</div>
</div>
<div class="joy-size--1-of-5">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-5</div>
</div>
<div class="joy-size--1-of-5">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-5</div>
</div>
<div class="joy-size--4-of-5">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--4-of-5</div>
</div>
<div class="joy-size--2-of-5">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--2-of-5</div>
</div>
<div class="joy-size--3-of-5">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--3-of-5</div>
</div>
<div class="joy-size--5-of-5">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--5-of-5</div>
</div>

6 Column Span

.joy-size--1-of-6

.joy-size--2-of-6

.joy-size--4-of-6

.joy-size--3-of-6

.joy-size--6-of-6

<div class="joy-size--1-of-6">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-6</div>
</div>
<div class="joy-size--1-of-6">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-6</div>
</div>
<div class="joy-size--1-of-6">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-6</div>
</div>
<div class="joy-size--1-of-6">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-6</div>
</div>
<div class="joy-size--1-of-6">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-6</div>
</div>
<div class="joy-size--1-of-6">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-6</div>
</div>
<div class="joy-size--2-of-6">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--2-of-6</div>
</div>
<div class="joy-size--4-of-6">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--4-of-6</div>
</div>
<div class="joy-size--3-of-6">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--3-of-6</div>
</div>
<div class="joy-size--3-of-6">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--3-of-6</div>
</div>
<div class="joy-size--6-of-6">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--6-of-6</div>
</div>

7 Column Span

.joy-size--1-of-7

.joy-size--2-of-7

.joy-size--5-of-7

.joy-size--3-of-7

.joy-size--4-of-7

.joy-size--7-of-7

<div class="joy-size--1-of-7">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-7</div>
</div>
<div class="joy-size--1-of-7">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-7</div>
</div>
<div class="joy-size--1-of-7">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-7</div>
</div>
<div class="joy-size--1-of-7">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-7</div>
</div>
<div class="joy-size--1-of-7">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-7</div>
</div>
<div class="joy-size--1-of-7">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-7</div>
</div>
<div class="joy-size--1-of-7">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-7</div>
</div>
<div class="joy-size--2-of-7">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--2-of-7</div>
</div>
<div class="joy-size--5-of-7">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--5-of-7</div>
</div>
<div class="joy-size--3-of-7">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--3-of-7</div>
</div>
<div class="joy-size--4-of-7">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--4-of-7</div>
</div>
<div class="joy-size--7-of-7">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--7-of-7</div>
</div>

8 Column Span

.joy-size--1-of-8

.joy-size--2-of-8

.joy-size--6-of-8

.joy-size--3-of-8

.joy-size--5-of-8

.joy-size--4-of-8

.joy-size--8-of-8

<div class="joy-size--1-of-8">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-8</div>
</div>
<div class="joy-size--1-of-8">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-8</div>
</div>
<div class="joy-size--1-of-8">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-8</div>
</div>
<div class="joy-size--1-of-8">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-8</div>
</div>
<div class="joy-size--1-of-8">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-8</div>
</div>
<div class="joy-size--1-of-8">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-8</div>
</div>
<div class="joy-size--1-of-8">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-8</div>
</div>
<div class="joy-size--1-of-8">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-8</div>
</div>
<div class="joy-size--2-of-8">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--2-of-8</div>
</div>
<div class="joy-size--6-of-8">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--6-of-8</div>
</div>
<div class="joy-size--3-of-8">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--3-of-8</div>
</div>
<div class="joy-size--5-of-8">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--5-of-8</div>
</div>
<div class="joy-size--4-of-8">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--4-of-8</div>
</div>
<div class="joy-size--4-of-8">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--4-of-8</div>
</div>
<div class="joy-size--8-of-8">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--8-of-8</div>
</div>

12 Column Span

.joy-size--1-of-12

.joy-size--2-of-12

.joy-size--10-of-12

.joy-size--3-of-12

.joy-size--9-of-12

.joy-size--4-of-12

.joy-size--8-of-12

.joy-size--5-of-12

.joy-size--7-of-12

.joy-size--6-of-12

.joy-size--12-of-12

<div class="joy-size--1-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-12</div>
</div>
<div class="joy-size--1-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-12</div>
</div>
<div class="joy-size--1-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-12</div>
</div>
<div class="joy-size--1-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-12</div>
</div>
<div class="joy-size--1-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-12</div>
</div>
<div class="joy-size--1-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-12</div>
</div>
<div class="joy-size--1-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-12</div>
</div>
<div class="joy-size--1-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-12</div>
</div>
<div class="joy-size--1-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-12</div>
</div>
<div class="joy-size--1-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-12</div>
</div>
<div class="joy-size--1-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-12</div>
</div>
<div class="joy-size--1-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--1-of-12</div>
</div>
<div class="joy-size--2-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--2-of-12</div>
</div>
<div class="joy-size--10-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--10-of-12</div>
</div>
<div class="joy-size--3-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--3-of-12</div>
</div>
<div class="joy-size--9-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--9-of-12</div>
</div>
<div class="joy-size--4-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--4-of-12</div>
</div>
<div class="joy-size--8-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--8-of-12</div>
</div>
<div class="joy-size--5-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--5-of-12</div>
</div>
<div class="joy-size--7-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--7-of-12</div>
</div>
<div class="joy-size--6-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--6-of-12</div>
</div>
<div class="joy-size--6-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--6-of-12</div>
</div>
<div class="joy-size--12-of-12">
  <div class="joy-box joy-box--x-small joy-text-align--center joy-m-around--x-small">.joy-size--12-of-12</div>
</div>