Why Utility Pro is my new starter theme

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.

Enter Sass

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!

	// Colors
	$black: #000;
	$white: #fff;
	$base_text_color: lighten($black, 33);
	$base_link_color: #578300;
	$base_link_color_hover: darken(#5a4a42, 5);
	$base_color: darken(#77a340, 5);
	$heading_color: darken(#5a4a42, 5);
	$background_color: whitesmoke;
	$menu_background: darken(#5a4a42, 5);
	$site_footer_background: darken(#5a4a42, 5);
	$grey_background: #f5f5f5;
	$comments-background-color: $white;
	$author-box-background: lighten($black, 92);

view raw _variables.scss hosted with ❤ by GitHub

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.

Enter Grunt

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).

	/* Support for current and last browser version using grunt-postcss autoprefixer */
	/* FlexBox
	---------------------------------------------------------------------------------------------------- */
	.test {
	display: flex;
	height: 500px;
	padding: 15px;
	margin: 24px;
	border: 1px #333 solid;
	flex-wrap: wrap;
	justify-content: space-around;
	flex-direction: row;
	}
	.test-item {
	padding: 15px;
	margin: 10px;
	background: tomato;
	color: #fff;
	width: 200px;
	}
	.test-item-1 {
	flex-grow: 1;
	}
	.test-item-2 {
	order: -1;
	flex-grow: 2;
	}
	/* Here is the same code with autoprefixing for the last two browser versions */
	/* FlexBox
	---------------------------------------------------------------------------------------------------- */
	.test {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	height: 500px;
	padding: 15px;
	margin: 24px;
	border: 1px #333 solid;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-around;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	}
	.test-item {
	padding: 15px;
	margin: 10px;
	background: tomato;
	color: #fff;
	width: 200px;
	}
	.test-item-1 {
	-webkit-flex-grow: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	}
	.test-item-2 {
	-webkit-order: -1;
	-ms-flex-order: -1;
	order: -1;
	-webkit-flex-grow: 2;
	-ms-flex-positive: 2;
	flex-grow: 2;
	}

view raw flexbox.css hosted with ❤ by GitHub

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.

Sass:

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"]