Codekit is a front-end web development tool. This tool provides support to build websites faster. It combines, minifies and syntax-checks JavaScript. It also optimizes images.


  • CSS changes are injected without need of reloading the entire page
  • Combine scripts to reduce HTTP requests.
  • Minify code to reduce file sizes
  • Works automatically with most languages without trouble

What Are They?

CodeKit Frameworks are simply groups of files that are shared across all your projects.

The Problem

You have some code that you use in every project—a starter Sass stylesheet or maybe a JavaScript file with custom functions. Normally, you'd copy these files into each new project. But when you change something in one place, you've got to remember to copy those changes to all the other projects. You lose track of which project has the latest version and so on.

The Fix

Put your custom files in a folder, then add that folder to CodeKit as a CodeKit Framework. Let's say you have a file called starter.scss in your Framework. You can simply write @import "starter.scss"; in any project's stylesheet and CodeKit will magically make it work. Now there's only one copy of starter.scss on your disk and anytime you change it, CodeKit automatically recompiles every file that imports it.

Framework Limitations:

CodeKit Frameworks are meant for assets that can be @import-ed—primarily scripts and stylesheets. Other assets, like images or HTML files, cannot be used in a Framework because those assets must exist in the project folder to be served.

Structuring Frameworks:

Keep your CodeKit Framework folders flat. That is, don't use subfolders. This lets you write simple import statements that use just a filename.

If your Framework has subfolders, you must include the relative path from the Framework's root folder to the file you're importing. Example: @import "subfolderName/file.sass";Note that you do not include the name of the Framework folder in the path.

Source Maps + CodeKit Frameworks:

When you import from a CodeKit Framework and your file is set to create a source map, CodeKit copies your Framework file to a hidden directory named .codekit-cache at the root of your project.

This makes the source map work by giving it a copy of the original code to show in your browser's inspector. If you see a reference to a file in the .codekit-cache folder in your web inspector, remember to edit the original file in your CodeKit Framework, NOT the file in the cache folder. The latter one will be replaced the next time you save.