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