

In Codekit 1, you can easily setup a Compass project with a few clicks, but setting up a Foundation project could be a bit of hassle, as it uses customized Sass/Compass binary. Zurb Foundation Projectįoundation is one of the more popular responsive frameworks, making it sort of a contender for Bootstrap.
#Indented sass codekit update
If a new version is available for it, you can simply update it through Codekit too, like so.
#Indented sass codekit install
If you need Normalize.css for example, you can install it through Codekit, then import it using the rule from your stylesheets, like (inline) "bower_components/normalize-css/normalize.css" This would be very useful to start off a new project.

The complete list can be found under the Components tab, and all installed components will go in the Installed Tab. The Codekit author has listed a few selected packages under the Favorites tab. Go to the Assets menu (positioned at the left side of Server menu). In Codekit 2, you can now install Bower packages directly through it. There are a bunch of packages that you can find through the Bower registry including Bootstrap, jQuery, and Normalize.css. Bower is a package manager for web development - it is similar to Homebrew for OSX package manager. The second feature that we’re going to take a look at is the Bower Component. To change it, go to OSX System Preference > Sharing, then change the Computer Name to something shorter. So, if your computer name is “John Doe’s Macbook”, you will likely get a long address in return, something like.

The nice-name-address format is derived from your computer name. So, you now have to serve your pages within the browser through this address, like so. There are two given address formats one with a nice name, and one with your network IP address format, which you can use in devices (most likely Android) that do not support Bonjour. You can use the address to access your project on any device within the same network. Click on it, and you will see the server information such as: the Port number, and the address to access your project through the server. When you launch it, you will notice a green light at the top right of the application window, showing that the server is “on”. In version 2, Codekit solves this by introducing a built-in server.

This disrupts other activities you have running on other pages, because Codekit refreshed all opened pages. If you do not configure the settings properly, you could end up making Codekit refresh the page, including other pages that are not part of your project. Read more Built-in ServerĬodekit is able to automatically reload the page on the browser so as soon as you make a change within your project files, you will immediately see the result, giving you the experience of live editing.īut there is one problem in Codekit 1 that I had always encountered. Let's say you were building prototypes for a website with HTML files.
