1. Drag & Drop
To start, drag your website's folder onto the window and drop it on the top section. This creates a new project. (See CodeKit Frameworks for info about the bottom section.)
CodeKit is now watching that folder. When you save files, the app will process them appropriately and then refresh your browser.
2. Preview
Click the "Preview" button in the top-right corner. This opens a special address in your browser. Connect your iPad, iPhone, Droid, etc. to the same network as the Mac running CodeKit, then enter this address on each device. CodeKit will automatically refresh and sync all of them.
If your project needs server-side processing (PHP, Cookies, etc), there's one switch to flip. See the "Complex Sites" section in Browser Refreshing.
3. Tweak Settings
Click the gear icon on the left side of the window to open the Project Settings area.
Settings are organized by category. Read Setting Language Options for details.
Tip: Set Defaults For New Projects
You don't have to change a bunch of settings every time you add a new project. Just tell CodeKit what settings you want to start with. See Editing New Project Defaults.
4. Get To Work
Here's some common tasks folks do with CodeKit. Click one for details or watch the screencasts:
- Optimize Images
- Refresh & Sync Browsers
- Install Packages (like jQuery)
- Minify JavaScript
- Bundle JavaScript (ES6)
- Transpile JavaScript
- Minify HTML
- Autoprefix CSS Rules
Use Git?
Be sure to read the CodeKit + Git section. This applies to Subversion and Mercurial, too.
Project Config Files
CodeKit stores your project's settings in a file named config.codekit3. When you change a setting in the UI, that file updates immediately.
If you remove the project from CodeKit, then add it back or add it to CodeKit on a different Mac, the app reads this file and recreates your project exactly as it was.
Keep only a handful of projects in CodeKit at once. Remove ones you're not working on and add them back when you are. That keeps resource-use low.
Note: You may also see a file named config.codekit2, if you migrated your project from CodeKit 2.x. Once you've added the project to CodeKit 3, you can safely delete that file.