< A Scaffolding for CODEKIT...and Cool People >
Install CodeKit Kickoff either by direct download or via Bower:
bower install codekit-kickoff
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!
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.
The following files are automatically compiled by CodeKit Kickoff and should not be edited directly.
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.
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.
All Build files reside in the "build" directory
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.
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.
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.
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.
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.
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.
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.
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.
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.