Guide

Installation:

Install CodeKit Kickoff either by direct download or via Bower:

bower install codekit-kickoff

CodeKit Settings:

New to CodeKit 2, project settings are portable, meaning that CodeKit Kickoff now comes preset to compile LESS, SASS, Kit and JS files to their implied locations. Easier for you to get up and moving along!

Automated compiling:

As part of this project, CodeKit has been pre-configured to build specific files into default directories following the structure below. As such, it is IMPORTANT to remember what files are being compiled by CodeKit and which files are NOT being compiled -- thus are editable. In most circumstances, you DO NOT want to edit files that are listed as COMPILED below. Similarly, you should not directly edit or intervene with any of the Library (app/lib) files or directories either, as they are layed out in their respective directory structure as expected by their own dependencies. This will allow us to easily upgrade the libraries without unnecessary intervention.

COMPILED Files:

The following files are automatically compiled by CodeKit Kickoff and should not be edited directly.

NOTE:

As mentioned above, there are times when I want to hand the compiled files off to another developer not using CodeKit, thereby they will probably want to edit these compiled files. When this occurs, I simply provide the "app" directory and configure CodeKit to compile "app.min.js" and "app.css" without any concatenation or minification. This way the other developer(s) have the opportunity to intervene or review the code. It is important to remember, however, that it is probably safer for those developers to create their own CSS file to import so that you don't end up colliding with them or overwriting their development in the event that you build and compile at a later date.

Application Files:

All Production files reside in the "app" directory and therefore are easy to hand off to a client or to post to a web server without the need to include the build directory at all.

Build Files:

All Build files reside in the "build" directory

LESS (build/styles/less):

This project uses LESS CSS for managing all style elements. CodeKit has the ability to compile the LESS code to a unified CSS file. The default management of this file is to leverage the build/styles/less/app.less file for handling all imports, including all "partial" LESS files, which reside in the build/less/partials directory. A good usage of this might be to create a header.less file that defines all of the styles related to the header of a document. The app.less file would then import the header.less file. The final output upon compilation from CodeKit would be the app/assets/css/app.css under the default management of this project.

SASS (build/styles/scss):

New to this version of CodeKit Kickoff, this project now also includes SASS as well for managing all style elements. Like the LESS option above, CodeKit has the ability to compile the SASS code to a unified CSS file. The default management of this file is to leverage the build/styles/scss/app.scss file for handling all imports, including all "partial" SASS files, which reside in the build/scss/partials directory.

NOTE:

Both the SASS and LESS app files compile out to the app/assets/css/app.css file, so you just choose which path that you would like use and CodeKit will compile out to app.css. Handy! By default, the LESS file was the last one compiled, but if you were to compile the app.scss file to overwrite app.css, you would find no style change because they have been normalized. So, an example would be if you wanted to use SASS, you could delete the build/less directory and start coding out of your build/scss directory with no need to customize anything for you. Just get coding.

KITS (build/kits):

This project takes advantage of CodeKit's "kit language" (http://incident57.com/codekit/kit.php). This allows you to build html includes (such as header/footer, etc.) without the need to use a dynamic language. This is very beneficial for rapid prototyping with reused elements. The default usage of this feature within this project is to create your primary kit files (build/kits/index.kit) and include any partials (build/kits/partials) for any reused elements. CodeKit is configured in this project to then compile the index.kit file to index.html within the "app" directory.

NOTE:

If you plan on adding nested directories within your app folder (i.e. "app/news/index.html"), and you would like to configure a news.kit or build/kits/news/index.kit file to build there, you will have to manage this manually through CodeKit on a file-based level. This is possible (I do it somewhat frequently), but outside of the scope of this specific project.

HTML Files:

All Production HTML files reside in the "app" root. As mentioned, it is best in most circumstances to not edit these files, since they are compiled from other sources.

JS (build/js):

This project compiles it's JavaScript into a minified and JSLint(ed) output file (app/assets/js/app.min.js). Additionally, all JS libraries are similarly concatenated, included and prepended automatically within the app.min.js file. A default of this project is to prepend jQuery and Bootstrap by default, but adding new plugin files, libraries, etc. is easy to manage via CodeKit's drag-and-drop include method.

Included Libraries:

All third-party Library files reside in the "build/lib" directory and are compiled into the appropriate parent files (i.e. app.js, app.less, app.scss, etc.). In most cases, the directory structure of the libraries themselves has been retained for easy including and updating. The only cases where this is not the case is the font dependencies that have been moved up to the app/assets/fonts directory, since they must be explicitly included within the application. Similarly, all Library css files have an included and unedited scss file(s) for compiling into app.css directly, rather than via @import linking.

NOTE:

All library dependent style includes are activated and deactivated within the file (for example, "build/lib/bootstrap/less/bootstrap.less"). To activate or deactivate a library's style element, simply comment or uncomment that library's includes within the library's source file.

CodeKit 1.x Support

Staying in step with CodeKit 2, this project has deprecated 1.x support. If you want to upgrade or have questions about 1.x's upgrade path, head on over to CodeKit.

This project (and only the original files within this project) are licensed under the MIT License. All other libraries, styles, and included files within the project are subject to their individual licenses, which are subject to change based on the owner's of those projects.

Application Structure

CodeKit Kickoff is opinionated about how a project is structured.
app
favicon.ico
index.html - COMPILED: Do not edit directly
robots.txt
sitemap.xml
assets
css
app.css - COMPILED: Do not edit directly
fonts
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.ttf
fontawesome-webfont.woff
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
img js
app.min.js - COMPILED: Do not edit directly
build
js
app.js
kits
index.kit partials
footer.kit
header.kit
lib
bootstrap
less js scss
font-awesome
less scss
jquery
plugins
styles
less
app.less
libraries.less
globals
colors-swatches.png
colors.less
custom-mixins.less
defaults.less
fonts.less
mobile.less
partials
viewport.less
scss
app.scss
libraries.scss
globals
colors-swatches.png
colors.scss
custom-mixins.scss
defaults.scss
fonts.scss
mobile.scss
partials
viewport.scss
CHANGELOG
config.codekit
README.md

FAQ

  1. Why build this?

    I use CodeKit daily and do a lot of prototyping with several libraries that provide me a lot of efficiency. As such, I have been working on developing a scaffolding project to easily get up and running with a base application whenever I want to hit the ground running.
  2. Who might use this?

    Any developer using CodeKit who wants to easily kick off a project.
  3. CodeKit has Frameworks. Why not use them?

    While I understand that CodeKit provides a Framework concept, much of what I do is hand files off to others who may or may not be using CodeKit. This project allows me to build an application easily, in a modular way, that can allow another developer to either choose to use CodeKit or I can choose to only supply the primary "app" directory and the project will just "fire up" without the need for CodeKit. For me, this is currently ideal.
  4. I use libraries. Are there libraries included in this?

    Yes. I use them as well, so they are part of this kit.
  5. Which libraries do you include as part of this project?

    • jQuery
    • Bootstrap
    • Font Awesome
  6. Are there any dependencies?

    CodeKit is obviously a dependency to this project. While you could technically untangle the web with not a lot of effort, the purpose of this project is to be used with CodeKit.