This article is outdated.
Written in January 2016, I’ve since moved on to my own starter theme. A lot has changed in WordPress this post. Utility Pro is no longer offered for sale.
Before I created my first starter theme, my development projects went one of two ways:
- I asked the client to review the themes on StudioPress and choose one they liked
- The client sent me a link to a site they liked and then I went to StudioPress to find the closest match.
I thought this would make building the finished product faster and easier. I was wrong. I ended up spending most of my time working in a theme I was unfamiliar with. That meant I was digging through theme functions and css styles to understand what functionality I had and where it was located.
The more projects I did, the more complicated things got.
The biggest game changer was I started working with Sass. The Utility Pro Professional developer version includes Sass, so you already have a nice starting point. It is totally worth the price of admission in my opinion.
The benefits of working in Sass are huge. The ability to create variables makes remembering hex codes a thing of the past. My stylesheet is broken up into logical, organized files that make it easy to locate and modify. I no longer have to edit that massive style.css file — jumping all over the place to find the elements to style and then searching through media queries, wading through thousands of lines of code.
I removed the different color options in the theme and created some additional variables for a color palette. The result is there is one small file (_variables.scss) in the theme to change the entire color palette for a project.
This can be done in less than two minutes!
I did what makes sense for my workflow – and that is the beauty of it. I created variable names for colors based on how I wanted to structure my theme.
Now when I want to style an element, I just need to reference the variable.
|border-bottom: $base_link_color 1px dotted;|
|color: lighten($black, 33);|
|border-bottom: transparent 1px dotted;|
The Professional Edition of Utility Pro comes with a Grunt.js file to automate compiling your Sass and minimizing it for a production environment (live site). I added an autoprefixer to automatically insert the proper browser prefixing based on the number of previous versions I want to support.
I’ve started incorporating Flexbox into my workflow and prefixing really helps if you need to support older browser versions.
This example shows the same css code with browser support for one version back (which needs no prefixing) and for two versions back (where prefixing is needed).
I no longer have to fiddle with remembering how to write these pesky browser prefixes and when I need to use them.
Utility Pro has it all
The skinny on what Utility Pro offers:
- It’s accessible. Get your content in front of more people.
- It’s mobile-first. Your visitors get a speedier experience on mobile devices.
- It’s mobile-friendly. You’ll get the “mobile friendly” label added to your Google listing.
- It’s mobile-responsive. Your site will look amazing on phones & tablets.
- It’s translation-ready. Easily translate the theme into another language, including RTL languages.
Recommended Courses to get up to speed
I’d be lost without my subscriptions to Linkedin Learning and Treehouse.com. Here is a recommended courses I’ve taken recently to improve my workflow and get comfortable using these tools.
Guil Hernandez at Treehouse.com CSS to Sass.
It’s a Wrap
That’s it for now, but note I’ll be writing more articles about how I’ve adapted Utility Pro to my workflow very soon.[shared_counts location="shared-count-icons" style="fancy"]