At this point, I’m sure many of us are familiar with design systems like Bootstrap or Foundation and the grids that provide their structure. (If not, you can can read more about them here and here.) These grids are tried and true examples to follow so a perfectly legitimate question is: “Why reinvent the wheel for the Opus design System?” For the Opus team, that answer was a no brainer. At its core, Opus is about live music. More specifically, the artists who produce it, the businesses who value it and the audience that lives for it. With that in mind, when we began developing our design system it was clear that live music needed to be at its core as well.
The conversation about putting music at the core of Symphony (our working design system title) started and ended with the number four (4). Simply put, four is pretty significant in music. Without delving deeply into music theory, here are a few examples:
- The 4/4 time signature also referred to as “common time” which is constructed of four beats per measure
- The major scale is built on two sets of four notes with first and last notes creating an octave interval (a pair of four relationship)
- The interval of a perfect fourth is a foundational element of many music genres (the tonic and subdominant relationship)
- The circle of fourths, a geometrical representation of relationships among the 12 pitch classes of the chromatic scale
- The typical number of movements in a symphony
Right away it was pretty clear where the core of our system needed to start.
Getting Started:
Now that we had our base number in hand, it was time to jump into the fun part, the math! (said no one ever).
To start, the team decided to lean on typography as the cornerstone of our grid and set out to determine what the size of our body/paragraph text would be. With our “holy number” (4) as a reference we landed on 16px body text using the following reasoning:
- Divisible by four
- Is four squared4/4 time signature or “common time”
- 16 px is the default font size in many browsers
- Follows a 1:2 modular scale (geometric progression)
*Note: We used a bottom up methodology for creating our grid. A second option could have been a top down methodology where we determined our max grid width and worked down to our gutter and column sizes
Creating Vertical Rhythm:
With our default font size set, we moved on to calculating our line height and resulting Vertical Rhythm of our pages. Keeping our “holy number” in mind we landed at a 24px line height:
16px * 1.5 = 24px
*Note: We referred to classic typographic theory when determining our line height and picked a multiplier that coincided with those principles while fitting with our “everything divisible by four” guideline
Translating Vertical Rhythm to the Grid:
Now that we had our base line height it was time to start building our grid. The team decided to use static gutters and outer gutters at .5 default gutter width which made the process of translating our Vertical Rhythm to our grid pretty simple:
Base Line Height = Gutter Width (24px)
*Note: Outer Gutter Width = 12px
Determining Max Grid Width:
Next up was determining the number of columns our max grid width would contain. At first the team had its heart set on a 16 column setup that divided by two at each breakpoint (16/8/4). After taking a closer look at the spectrum of common device sizes we decided having only three breakpoints would not have been an ideal setup and landed on the more conventional 12 column grid.
At this point we had most of our numbers in place:
- 4: our foundational number all others are divisible by
- 16: our base body font size
- 24: our base line height
- 24: our fixed gutter width
- 12: the number of columns in our grid
- 12: our outer gutter width
But to really have our grid take shape, we needed to determine our max width and column widths. To determine our column width we simply multiplied our gutter width by, you guessed it, four, and landed on 96px:
24px * 4 = 96px.
From here, calculating our total grid width became pretty easy:
Col width * # of Col + Gutter width * # of gutters + outer gutter width * 2
or
96 * 12 + 24 * 11 + 24
At long last ending up with a max grid width of:
1440px
Setting the Breakpoints:
Now that we had our grid, it was time to determine where our breakpoints would fall. To help guide our decision we turned to data illustrating the most common screen resolutions on the market today and cross-referenced that with our own user data. This analysis resulted in our decision to create 4 breakpoints in addition to our max grid. These breaks would fall at the beginning (or bottom) of each resolution range and their max columns and widths would be divisible by 4. When it was all said and done the variations looked like this:
You Might be Wondering:
At this point, you may be thinking:
- After all of the work up front you landed on a fairly common grid width of 1440px. Was it really worth all that work and effort?
- Why are you using 12 columns across all screen resolutions?
To answer was it worth it? We emphatically think yes. First, the resulting layout grid is something that is entirely our own and will form one of the foundations of the Symphony design system. Second, there were some team members who had never built their own grid before so going through each step was truly eye opening for them. Some of the principles they learned along the way will surely be applied to every project they do going forward.
Why we are using 12 columns across all break points is a little tougher to answer definitively. The short answer is 12/4 = 3 which feels awkward being the only odd number in the entire layout system. That being said, we may find that using 12 columns on smaller screen resolutions isn’t ideal and we will have to revisit the issue.
Wrapping Up:
With our grid now in place, the team is turning its attention to completing the style section of our design system before we start finalizing and documenting componentry and eventually refactoring code.
tl;dr:
For anyone who jumped to the bottom of the page, here’s the cliffsnotes version of our process outlined above:
Setting the Scene:
When creating our design system we decided that music needed to be at its core. When deciding a number to be the foundation of our grid system, we landed on the number four (4) because of it’s strong relationship with music.
Step1: Determine baseline font size
Step2: Use baseline font size to determine line height and vertical rhythm.
Step 3: Take line height/vertical rhythm and translate it into grid with gutter width
Step 6: Select the number of Columns to be used in grid
Step 4: Use gutter width and foundation number to determin column width
Step 5: Determine max grid width by totaling column widths, gutters, and outer gutters
Step 6: Set breakpoints for smaller device sizes
