Design and Build a Color Palette for your Style Guide Using CSS Grid

When I build a styleguide or design system for a client it usually includes basic information about branding — including brand colors and the classes or SCSS variable names needed to use those colors. I think this is an opportunity to get creative. And, since this particular system was for in-house teams that are standardized on the latest version of Chrome as their primary browser, I can make use of the brand new CSS Grid to create a nice custom color palette that shows brand colors at different sizes to make it easy to see a hierarchy of which colors should be used more often.

So, it’s time to learn css grid. First I spent 30 minutes going through the lessons at http://cssgridgarden.com. I have to say, CSS Grid is a lot easier to wrap my head around than flexbox was.

So, now we have some knowledge — let’s apply it. First we think about what the markup in the styleguide will look like.

<div class="sg-swatch color-gray">
  <div>$color-gray (#a5a6b7)</div>
</div>
<div class="sg-swatch color-darkgray">
  <div>$color-darkgray (#6d6d77)</div>
</div>
<div class="sg-swatch color-midnight">
  <div>$color-midnight (#3d566f)</div>
</div>
<div class="sg-swatch color-black">
  <div>$color-black (#454545)</div>
</div>

Something like that, this particular brand has about 10 defined colors and tints.

Then we wrap all of that in a new div that will hold a new grid. Notice I always namespace my meta styles with sg- when they are used only for styleguide features. This way we don’t confuse the users with a classname that won’t be available in the official stylesheets.

<div class="sg-grid">
...
</div>

Of course you can have grids inside of grids, this grid can be inside a larger grid that is used to layout the entire interface if you want.

The pre-grid layout is actually a pretty good responsive down-grade and this is how the colors appear in a browser that doesn’t support grid yet.

Then let’s add some SCSS for this grid.

.sg-grid {
  display: grid;
  grid-template-rows: repeat(6,1fr);
  grid-template-columns: repeat(24,1fr);
  width: 100%;
  min-height: 400px;
}

I chose a grid with 24 columns, the columns will scale with the size of the container. I also set just 6 rows, I tried a few different numbers and settled on six based on the number of swatches I needed to show. You may need more if your palette is bigger.

And here’s the SCSS code for the swatch.

.sg-swatch {
  grid-column-end: span 6;
  grid-row-end: span 2;
  padding: 0 $p1 $p2 0;
  border: 1px solid $color-border;
  border-bottom-left-radius: 25px;
  > div {
    background-color: rgba(33,33,33,0.25);
    color: white;
    padding: $p1/2 $p1;
    font-size: 80%;
    display: inline-block;
  }
}

The grid-column-end and grid-row-end rules will give us a nice default size like this…

OK, so now you’re asking “how do I make these colors different sizes and shapes?” Well, since this is a styleguide documentI’m going to go ahead and use inline styles for that one rule, because it makes it easy to add, remove and change the position of particular boxes without needing to switch to other files and map the classnames mentally for me.

<div class="sg-grid">
  <div class="sg-swatch color-midblue" 
                       style="grid-area: 1 / 1 / 5 / 9 ">
    <div>$color-midblue (#0088bb)</div>
  </div>
  <div class="sg-swatch color-lightblue" 
                       style="grid-area: 1 / 9 / 3 / 19 ">
    <div>$color-lightblue (#aed5e7)</div>
  </div>
  <div class="sg-swatch color-blue" 
                       style="grid-area: 3 / 9 / 5 / 19 ">
    <div>$color-blue (#1b5fa0)</div>
  </div>
  <div class="sg-swatch color-mint" 
                       style="grid-area: 1 / 19 / 2 / 25 ">
    <div>$color-mint (#1abc9c)</div>
  </div>
  <div class="sg-swatch color-darkorange" 
                       style="grid-area: 2 / 19 / 4 / 25 ">
    <div>$color-darkorange (#d35500)</div>
  </div>
  <div class="sg-swatch color-lightorange" 
                       style="grid-area: 4 / 19 / 5 / 25 ">
    <div>$color-lightorange (#faa74a)</div>
  </div>
  <div class="sg-swatch color-gray">
    <div>$color-gray (#a5a6b7)</div>
  </div>
  <div class="sg-swatch color-darkgray">
    <div>$color-darkgray (#6d6d77)</div>
  </div>
  <div class="sg-swatch color-midnight">
    <div>$color-midnight (#3d566f)</div>
  </div>
  <div class="sg-swatch color-black">
    <div>$color-black (#454545)</div>
  </div>
</div>

The grid-area rule is a convenient shorthand for setting start and end values for rows and columns in the grid. “Start row / start col / end row / end col” just repeat that to yourself like a mantra for a while and you’ll get it. All of that gives us a very nice looking final result.