In this screencast we have CodeKit start watching our project. This makes lots of developer tasks much easier.

The first thing we do is us it to losslessly optimize an image. Easy one click.

Then we install Compass in the project. This gives us the ability to use CSS3 mixins provided by Compass, instead of having to create our own, which we should surely do a worse job.

Perhaps most importantly, Compass (through CodeKit) now watches our project folder and automatically compiles our .scss files into .css that we actually use. As an added bonus, when save our .scss files in our code editor, those new styles are "injected" into the page automatically, which is awesome.


  1. JoeShmoe
    Permalink to comment#

    @Chris, no HD on this vid?

    • JoeShmoe
      Permalink to comment#

      Thanx for adding HD… You’re FAST!!!!!!

      P.S. Thanx for the new series!! It’s Awesome!!!

    • Chris Coyier
      Permalink to comment#

      Yeah not sure what happened there, had to re-upload it.

  2. Gary A
    Permalink to comment#

    Gah… So jealous of CodeKit. Though I have discovered Scout for Windows which is a pretty good piece of software as well :

  3. Kennedy Otis
    Permalink to comment#

    whats the name of the plugin you are using to split the screen?

  4. Austin Peterson
    Permalink to comment#

    I noticed you started with another theme and broke it down to start with. Are there any working files where I can just start building my word press site?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.