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.

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

compass-settings

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.

config-rb

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:

comment-block

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:

imports

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.

codekit-confirm

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:

On a Search

Lately my posts have had a theme of “Focus”. This has been a theme of mine this past year and I’m at a place again where I need to focus on what I’m aiming for even more.

I’m closing Railtie Studio. This is a little anticlimactic as Railtie never got as big or did as well as I had hoped it would. That was completely my fault though. Railtie was an attempt at starting my own business and trying to build something sustainable. However during that experience, I discovered that it’s exactly what I don’t want to do. While I like the idea of being my own boss, I don’t want to run my own business, I have no interest in business development, and I want to do design and development full-time.

With that said, I’m on a search for a new job as a Web Designer/Front-end Developer working with WordPress. I’m specifically looking for a distributed company or a company in the Nashville, TN area. If you know of a business that is looking for someone, please let me know. If you’re a company looking at my profile and wondering if I’m a good fit, please have a look at my Portfolio.

I’ll continue to take on freelance projects while looking for a new job, so if you need someone with my work experience, please let me know.

Focus

I’ve noticed in the past year that I have a bad habit of bookmarking everything I come across when it comes to new web development technologies. In my day-to-day development I stick to mostly the front-end languages and markup but I’ll bookmark just about anything – from backend web app development, to videos of the new tech hotness that I’ll probably never need, to tutorials on an obscure language I’ve never heard of but that I “just might need some day”.

I have a serious bookmark hoarding issue.

The problem with this approach is that I don’t really learn anything completely. Sure, I know the core front-end technologies, but I would know them a lot better if I truly focused on them instead of focusing on what I don’t need.

Screen-Shot-2013-07-08-at-11.06.46-AM

My new resolution is to learn only technologies that I need for current projects that need them (brilliant, right?). For instance, this blog is getting an overhaul as it is still too bloated for my needs. It’s WordPress-based, but doesn’t nearly utilize all that WordPress has to offer nor does it need all that WordPress has to offer. Utilizing my new resolution of learning only technologies I need, I’m now learning Pico: “A stupidly simple & blazing fast, flat file CMS.” made by Gilbert Pellegrom. Pico has no database and the content is all Markdown which is perfect for what I need. I’m going to do a full review once I’m done moving over, but for now I feel a lot more focused by identifying a problem and fixing it. I’m not half-heartedly trying to learn something new I don’t need (and probably will never need), but instead I’m actually doing something.

New Job at jlsCreative

This past February I saw an ad on Craigslist for a WordPress Developer position. I got in contact with the post author, he checked out my portfolio, and we met up for lunch. We hit it off: I really liked his business ideas, goals, and design-sense, and he asked me to come onboard to build WordPress sites. I am now officially a Web Developer with jlsCreative!

It sounds almost easy, but getting this job was two years in the making. I was one of those people who didn’t quite know what they wanted to do with their life. I knew I liked working with computers though and so I began my dark descent into life as an IT Tech. That was seven years ago.

Two years ago however, I started something new. I started really attempting to learn how to build websites and I got hooked. Now, after a lot of hard work, I’ve finally made it.

This job, and I hesitate to call it a job since I like the work so much, is awesome.

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:

speed

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.

Thinking About My Web Design Routine

What is your daily routine as a Web Designer? Do you have that routine written down? Is it the best routine that it could be?

I recently read a post entitled The Daily Routines of Famous Writers. I enjoyed Henry Miller’s quote the most:

MORNINGS:
If groggy, type notes and allocate, as stimulus.

If in fine fettle, write.

AFTERNOONS:

Work of section in hand, following plan of section scrupulously. No intrusions, no diversions. Write to finish one section at a time, for good and all.

EVENINGS:

See friends. Read in cafés.

Explore unfamiliar sections — on foot if wet, on bicycle if dry.

Write, if in mood, but only on Minor program.

Paint if empty or tired.

Make Notes. Make Charts, Plans. Make corrections of MS.

Note: Allow sufficient time during daylight to make an occasional visit to museums or an occasional sketch or an occasional bike ride. Sketch in cafés and trains and streets. Cut the movies! Library for references once a week.

It was refreshing to read about someone who understood their workflow so well; that they had it as optimized and as efficient as it could be. Henry Miller knew exactly what to do when he got in a “mood” and how to get out of it. He also knew what inspired him the most and what activities he could do to get inspiration.

It got me thinking about my own routine as a Web Designer. I do not have my routine written down but reading about these famous writer’s has inspired me to write my own. I’ll be drafting my routine and writing a post expounding on it. In the meantime, do you have your own optimized routine?

Railtie Studio

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

railtie-edit

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!