How I Prototype in Codekit

CodeKit is a web development tool for Mac. It's a graphical interface that facilitates building configurations and setting up a development workflow. It helps setting up cumbersome things like concatenation, linting, minifying, and more. CodeKit makes this all visual, making it easy to configure how your code and assets are optimized and transformed.

The impostor syndrome with my development skills really sets on fire any time I try and configure gulp, grunt, or similar tools in code and javascript. While I end up getting the prototype running, if I ever revisit that prototype a year later it tends to not function anymore. CodeKit tends to be my go-to for prototypes in the testing phase, as the prototype itself becomes easy to revisit at any time.

Features I love from CodeKit

Browser refreshing

CodeKit comes with robust browser refreshing. Alongside the live preview are a host of options to configure how CodeKit should render a preview. I don’t touch many options, except when working with WordPress sites (covered in a lower section).

Easy compiling with robust options

It’s really easy to select CSS, SCSS, or JS files and have a host of minifying and optimizing options. I use these to quickly setup a prototype and get the pieces easy to manage.

• For SCSS, I tend to break down my SCSS into modules which are reusable elements or components. These are imported into a main.scss file that is optimized by CodeKit.
• For JS, I have a main.js file in my scripts folder that has all the custom javascript for the prototype. In that same folder, is a 3rd-party/ folder where all external JS libraries are placed. I’ve used CodeKit to program how to treat main.js , and it will automatically prepend main.js with all files in 3rd-party/.
• When I am ready to deploy my CodeKit project, I change my compile options to minify all CSS and JS exports.

Kit language

CodeKit provides its own language to help with some static site challenges. Primarily I use this language to create partials, set variables, and manage SVGs.

Partials are smaller chunks of code. By creating a partial, you can use that partial all over the website, with only 1 single partial to maintain. I use this for headers, sidebars, footers, anywhere code is repeated.

Importing partials is really simple. I simply place in the HTML comments that can reference another *.kit or *.html file.

<!-- @import "someFile.kit" -->

Setting Variables Codekit makes it really easy to setup variables to use in your pages. This has a lot of practical uses, but I mostly use it in the navigation to highlight active pages.

<!-- $myVar = We finish each other's sandwiches. -->

Managing SVGs can be a pain in static sites. I create a .kit partial file for each SVG in a dedicated folder. This keeps my code clean, as SVGs can be messy in a code editor.

<!-- @import "svgs/arrowleft.kit" -->

CodeKit for simple static sites

When using CodeKit for simple static sites, I’m often creating an ultra-high fidelity prototype. CodeKit provides me a sweat-free way of maintaining this build process, so I can focus less on the development underpinnings. These sites do not need to be optimized, nor do they need to be efficient or easy to maintain long-term.

As much as I love CodeKit, I defer to larger static site builders like Eleventy, Jekyll, Hugo, etc. There’s a host of options available and the largest challenge is the lack of features in CodeKit that mirror’s Nunjucks’s Macros.

CodeKit for WordPress development

I’ve been developing custom WordPress themes for myself and clients for more than a decade. CodeKit REALLY shines for me when working on these projects. I use MAMP Pro to provide MySQL/PHP support locally. I customize CodeKit’s live preview URL to pipe through the MAMP provided localhost URL.

CodeKit handles all of my SCSS & JS processing, and provides a robust live preview locally. I can deploy remotely with ease, and the live preview is blazing fast and multi-device.

Closing thoughts

This isn’t sponsored content! I’ve been using CodeKit since it was released, and it’s a solid application. If you are considering building HTML/CSS/JS prototypes in code, vs Framer or a low-code solution, CodeKit might be a great solution for getting powerful development tools in an easy-to-use experience.