How to Setup CodeKit using Sass and Compass for WordPress

I’m a recent convert to writing my CSS using Sass and Compass through CodeKit. It took me a little while to figure out how to get started with CodeKit and building WordPress themes specifically, so I thought I’d share how I got it all configured. Setting up CodeKit for use with static files is very simple, but since we’re building with WordPress there are a few things to look out for.

After you’ve gone through the process of installing WordPress locally and copying over your base theme into WordPress, go into CodeKit and select the “+” sign on the bottom left. Select New Compass Project.

A screen will then appear asking for where you would like your asset locations to be. For my WordPress themes, I like to have the style.css in its default location, right in the theme folder root. When it asks you where you want the output style.css file to be in your folder structure in CodeKit, just enter a “.” for now since we don’t want the style.css file in a subfolder.

 

Click on “Create Compass Project”, browse to your theme’s folder, and select it. Next, open your newly created config.rb file which houses the Compass configuration. Change the css_dir field to css_dir = "/" to set the output of the style.css to the root of your theme folder.

 

Now open your style.css file and in the first comment block which lets WordPress know that this folder structure is a theme, add a “!” to the first line like so:

 

This tells CodeKit to keep the comment block intact even when compiling your SCSS files. If you have anything else in your style.css file at this point, you can delete the rest of it since your SCSS files will compile to this file. Copy the style.css file into your Sass folder (or whatever you named the directory) and name the file style.scss. This file sets your imports like so and has the core comment block included:

 

After you set your imports (a good guide to Sass imports can be found here), do a manual refresh on CodeKit if it hasn’t found the new style.scss file. It should now see the new styles.scss file and it should say that’s it’s compiling to your style.css file in the root of your theme folder.

Next up, create a _normalize.scss file or _reset.scss file (if you like to reset your CSS), create a _global.scss (or whatever you like to name your main import file) in your code editor, import Compass at the top of the _global.scss file via @import "compass/css3";, and write your Sass like normal within the _global.scss file and your other .scss files. You’re all set!

Hopefully this guide helps you with your next project.

Here are some additional Sass resources and guides:

A New Site

The first domain I bought was my previous site: andrewcodes.com. It started life as a static, HTML-and-CSS-only, one page, fixed-width site. And at that time, that first launch was glorious. It ​was very gratifying being able to release something to the Internet that I created. That first site started the ball rolling of my love of web design and creating for the web.​​

This new site is a little different from my first. It’s built responsive from mobile on up, it has a few pages (with more on the way), and it’s built on WordPress.​ ​This is a scratch built theme using a simple WordPress reset.​ It also combines my landing/portfolio page and my blog (which were separated before as a domain and subdomain, respectively)​ into one site. I spent a lot of time on the performance and load time of this version as you can see below:

The end-goal with this version, is to release it properly on GitHub as an open-source theme. It’s not at all ready as I still have more to learn about Git. But this public theme will be a chance to hone my WordPress and GitHub skills and build something that would be useful to other people.

Railtie Studio

My wife and I recently started a new project: Railtie Studio.

I had previously built sites for clients under my own name, but decided to make it official (and legit) by getting our business license. I also felt like having an official company name would make our business more appealing to other businesses and clients instead of just my name. So, Railtie Studio was born. We’re a custom web design studio that loves to build sites on the WordPress platform.

The Railtie site is a totally scratch-built theme that has an adaptive and responsive layout. And of course, it’s built on WordPress.

Railtie has been taking up all our spare time but it’s been really fun to have a project to work on together. My wife has been a huge help with design advice and talking through our business practices. Check out the site and let me know what you think!

New Theme

I rolled out a nice upgrade to the site today by moving to the Yoko theme. Yoko is fully responsive and very minimal which is just what I wanted. Gone is the glossy Web 2.0 nav bar and other stylistic errors and replaced with a nice light texture, the Droid sans font (which I’m not completely sold on yet) and a simple nav bar. Yes, I’m still working on the logo.

I’ve added a few new pages as well with some new content coming soon. I wanted a place to track my Fitness levels and also a place to store my code-specific wallpapers and that content will be coming soon.

WordPress

I have finally made the jump to WordPress. And so far, I couldn’t be happier.

No longer will I have to create a blog post in HTML, then copy that post into it’s own page while making sure I link back to the main page and the CSS correctly. No longer will I have to deal with revisions upon revisions of my custom themes. No longer will I have to think about, “Okay, I saved my images here, but I’m in this post, so the file path to that image should be …”.

I’ve only used WordPress.com which is the free, light version of WordPress. WordPress.org is where you’ll want to download the full, install-able version. I’ve now installed WordPress on my host, created the database, and got everything up and running. It took about a week to transition over. I chose the Skeleton Framework as my theme due to it’s simplicity, built-in responsiveness (go ahead and re-size the page), and overall minimal design.

I used John Saddington’s excellent guide (aptly named “The Ultimate Guide to Launching a WordPress-Powered Blog”) to get WordPress running which takes you through the steps of installing WordPress on your host and securing it correctly.

It was a little daunting once I realized that PHP and MySQL are involved for getting your site up and running, but there’s actually very little on the back-end that needs to get setup in order for your site to run. Obviously you’ll need a database, but John’s guide takes you through step-by-step on setting that up. I highly recommend starting out with a framework or existing theme when starting out with WordPress if you don’t know any PHP. A framework will still let you customize the look and feel without having to worry about the back-end.

So what does this mean for this site? Their is now a comment system in place and you are welcome to comment on any posts. This also means that I can concentrate more on learning and publishing then on the blog’s architecture because WordPress can take care of everything. Also, RSS is now active and you can now subscribe to my posts. As I’ve stated in another post, I enjoyed creating the site in a static, HTML/CSS-only way, but the tipping point was when I had to start thinking about pagination and I realized I had absolutely no desire to try and set that up. Creating a static site is a great way to learn, but to me, converting over to WordPress was the next step.

More WordPress links: WordPress on the Tuts+ Network, WordPress frameworks