#codekit

CodeKit is an application for OS X (Windows users can use Prepros as an alternative) that handles preprocessing, error checking, and cache management for web projects. We will be using CodeKit to preprocess our Sass files, and turn them into a single minified CSS stylesheet that can be included in our project.

Launch CodeKit and select File, New Project. Select the main project directory, not just the styles folder.

Once the project has loaded, you can select the gear icon at the top left to adjust how our Sass will be compiled. Select “Sass” from the Languages section of the sidebar.

The Sass configuration page has two sections: Settings and Output Paths. Settings is not terribly important, and relies on your personal preference for how the final CSS should look. Output Paths, however, is an important part of the project setup process.

To start compiling Sass, make sure “Generate output files for this language” is enabled. Select “To this folder” as the output path, and assign it the value “../dist”.

Some time ago I bought CodeKit to speed up the progress of building smaller websites. While I was skeptical at first if I really need such a program, I don't want to miss it again. However, in my opinion there would have been one killer feature that is not included yet: Creating CSS Sprites through a GUI.

Since CodeKit has its own Compass compiler on board, we can use that powerful system to create our sprites with just a little extra effort. Due to to fact, that LESS doesn't support sprites, we have to switch to Sass (if not already done). The syntax is quite similar, so it shouldn't be a big deal. The only reason I used LESS in the past was to modify Twitter Bootstrap as fast as possible, but with CodeKit you can compile LESS and Sass files next to each other. So in my current projects I include a compiled Bootstrap LESS file and a compiled Sass file for my own styles or use a Gem for that.

1. Use Compass for your project

Follow there instructions on how to setup Compass on your system. Right click on your project, select "Compass" and afterwards "Use compass for this project". A config file will be generated into the root dir. You can modify the asset paths in there. The file content should look like this:

[...] # Set this to the root of your project when deployed: http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" fonts_dir = "fonts" output_style = :compressed [...]

2. Implement images

Now that you have Compass running on your project, you have to include the images. I placed all the icons that I want to use in "images/icon", so I import them into the SCSS file of my choice via

@import "icon/*.png"; @include all-icon-sprites;

The compiled CSS will now include classes for each of the images. They are ready to be implemented into your HTML code.

<i class="icon-facebook"></i>

You will realize, that the icon will not appear yet. We have to set up some styles first:

[class^="icon-"], [class*=" icon-"] { display: inline-block; width: 32px; height: 32px; *margin-right: .3em; /* ie7-restore-right-whitespace */ vertical-align: text-top; background-repeat: no-repeat; }

4. 5X5 WPMagic – Design Tuesday January 13, 2015

1 • Issue #145 January 13Th, 2015

“The 2014 CSS Report: Examining How CSS Is Being Used in the Wild”

MOTHERBOARD 2 • CES 2067

"​The rectangle almost completely filled Central Hall, the largest and historically least depressing room in the Las Vegas Convention Center. Several billions in bitcoin and bullion had been spent, and conservation experts from Facebook Centers across the country had…

I just realized a very powerful and simple feature of CodeKit that has made my life immensely easier, as well as giving a speed boost to my sites.

You can prepend all the libraries you're using on a project at the top of your main javascript file like so:

// @codekit-prepend "mootools-core-1.5.0.js" // @codekit-prepend "mootools-more-1.5.0.js" // @codekit-prepend "shadowbox.js" // @codekit-prepend "chosen.js" // @codekit-prepend "slider.js"

And then set the output to be Minified + source map (for easier debugging):

And then in your footer you can get all your behavior with one HTTP request:

<script src="<?php echo MEDIA_URL; ?>/js/min/application-ck.js" type="text/javascript"></script>

Stupid simple, but for some reason it just hit me that this was possible, and now I use it all the time. I love finding new ways to improve my workflow with CodeKit.

You can run Hammer for Mac and CodeKit on the same project at the same time!

Basically, I was getting frustrated that I couldn't use sass source maps in Chrome for debugging with Hammer for Mac. I'd bought CodeKit (and updated to the latest version) a while back but I'd never really used it because I like the HTML includes in Hammer for Mac so much* and CodeKit was always an app I thought I'd get around to grasping when I had some free time (yeah, I know).

Anyway, I was working on a project and finally got sick and tired of playing hunt-the-attribute when debugging the CSS/SCSS files. I thought about putting a watch on my scss files using the command line, but on a whim I opened up CodeKit and imported my project into it.

I soon realised that this might cause some problems if I used it to compile the whole project, but seeing as I only needed it to create a sass source map for me, I took a punt on using it to compile the top level sass file (style.scss)**.

It worked! I now have sass debugging goodness while keeping my original workflow intact. Win all round!

  * I know CodeKit can use the kit language to do much the same thing, but I didn't want yet something else to compile every time I made a change