If you follow this blog you should know that for the past two years I’ve been a contributor to the PatternFly project. Five month ago, I’ve joined the PatternFly team and I am working full time to push the boundaries of open source design.
We are currently working on PatterFly 4, a major release that will include design and code improvements. The two main design changes that we are introducing are around typography and spaces, including a much necessary font size base bump to 14px and moving our font family from Open Sans to Overpass.
Spacing, Rhythm and Flow
One of the key elements of both print and web design is the way the typography flows, we call it Rhythm.
There are several books and articles explaining what Typographic Rhythm is. If you are looking for an in depth detail about typography you should read The Elements of Typographic Style else, I recommend this article by Shelly Wilson on the typecast blog:
Rhythm is just a repeated pattern. The more consistent the pattern, the better the rhythm. In music, it’s the structure that ties all the different instruments together. Even if the notes are correct, a song with an inconsistent rhythm is pretty hard to listen to.
In design, vertical rhythm is the structure that guides a reader’s eye through the content. Good vertical rhythm makes a layout more balanced and beautiful and its content more readable.
The time signature in sheet music visually depicts a song’s rhythm, while for us, the lines of the baseline grid depict the rhythm of our content and give us guidelines to align text and objects to.
Therefore the typographic change we are introducing to PatternFly 4 would be incomplete without an overall adjustment of spaces.
To define spaces on PatternFly 4 we will use CSS relative units.
Each one of these units are relative to a different base, some are based on the viewport size, others to the size of the container element, and others to the size of the font.
In our case we will use
rem. The W3C CSS specs define
Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.
Since PatterFly 4 root font size is
1rem = 14px,
2rem = 28px,
0.5rem = 7px… well you get the idea.
This system will define all our spaces, from typography, paddings and margins to grids and gutters.
Variables and utility classes
To ensure consistency we are delineating spacing with Sass variables and utility classes.
Using sass variables to set the utility classes will keep our code DRY, maintain consistency and allowing users to easily create spaces on their implementations.
Work in progress
As a start point we are basing our components on a set of default spaces:
But I am sure that as we move forward adding components to the new PatterFly Atomic repo, we will need to adjust removing or adding variables.
Want to dance with us?
This is without a doubt the best CSS project I’ve ever work with.