Using utility classes (like Tachyons) on a Drupal 7 project

January 27, 2018

We all want to move quickly to create awesome interfaces right? Well, if you're on Drupal 7, you know that it isn't exactly the best system to quickly make great front end interfaces with.

I've recently found that using Panels/Panelizer and the Tachyons' spacing classes, I can crank out interfaces very quickly. This is beautiful to me because before I would have to work locally to write/compile CSS, then push it up through dev and staging before I see a style change on production.

Further, every time I'd write a CSS change, it was typically a spacing issue (something like):

.component { 
padding-left: 2rem;
margin-bottom: 4rem; }

This is a big waste of time in my opinion because I'm essentially bloating my CSS with writing lots of the same spacing properties.

Instead of doing this, why not use a Tachyons-style approach and have a bunch of utility classes in your CSS that can be used to tweak spacing on the fly within Panels/Panelizer.

Panel pane configuration options after you click "Customize this page"

In fact, with a recent update of Panels, they've put a CSS button right on each pane so you don't have to go into the styles menu to add them! This is perfect for quickly applying spacing classes.

There are a lot of other major benefits from using these small utility classes in production, but thought I'd share one use case that has saved me a lot of time!