CodeKit Kickoff A scaffolding for use with CodeKit

Guide

Language Preferences:

If you are new to CodeKit, it is worth mentioning that you should configure your compiling Preferences within CodeKit. This project will NOT configure it for you. As such, when using CodeKit Kickoff, it is best to set your Language compiling preferences to:

  • Preferences > General > Languages > Kit > "Output Paths" > "To this path: /app" (Relative to the project's root folder)
  • Preferences > General > Languages > LESS > "Output Paths" > "To this path: /app/_/css" (Relative to the project's root folder)
  • Preferences > General > Languages > Javascript > "Output Paths" > "To this path: /app/_/js" (Relative to the project's root folder)

Automated compiling:

The CodeKit compiler relies, upon the "codekit-config.json" file, which has been pre-configured to build specific files into default directories following the structure above. 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.

  • app/_/css/app.min.css
  • app/_/js/app.min.js
  • app/index.html

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.min.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 of the build directory at all.

Build Files:

All Build files reside in the "build" directory

LESS (/build/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/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/css/app.min.css under the default management of this project.

NOTE:

If you prefer to use SASS vs. LESS, this is fine, but you would need to port over all of the variables, etc. that are currently used to SASS syntax.

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.

JS (build/js):

This project compiles its JavaScript into a minified and JSLint(ed) output file (app/_/js/app.min.js). Additionally, all packaged JS libraries are similarly concatenated, included and built automatically into a single output file (app/_/libraries.min.js). A default of this project is to prepend jQuery and Bootstrap by default.

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.

Included Libraries:

All third-party Library files reside in the "app/lib" directory. They should remain here, so that they can be delivered to a client or third party without a dependency to a parent directory above "app". As such, the directory structure of the libraries themselves has been retained for easy including and updating.

NOTE:

All library dependent style includes are activated and deactivated within the "build/less/app.less" file. To activate or deactivate a library's style, simply comment or uncomment that library's includes within "app.less"

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

├── app
    ├── _
        ├── css
            └── app.min.css
        ├── 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
            └── README
        └── js
            └── app.min.js
    ├── favicon.ico
    ├── index.html
    ├── robots.txt
    └── sitemap.xml
├── build
    ├── js
        └── app.js
    ├── kits
        ├── index.kit
        └── partials
            ├── footer.kit
            └── header.kit
    ├── less
        ├── app.less
        ├── globals
            ├── colors-swatches.png
            ├── colors.less
            ├── custom-mixins.less
            ├── defaults.less
            ├── fonts.less
            └── mobile.less
        ├── libraries.less
        └── partials
            └── viewport.less
    ├── lib
        ├── bootstrap
            ├── css
                ├── bootstrap-theme.min.css
                └── bootstrap.min.css
            └── js
                └── bootstrap.min.js
        ├── font-awesome
            ├── css
                └── font-awesome.min.css
        └── jquery
            └── jquery.min.js
            └── plugins
                └── README
        └── README
    └── TODO
├── CHANGELOG
├── codekit-config.json
├── README.md
└── tests

FAQ

  1. Why build this scaffolding?

    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 kickoff 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?

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

  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.

Changelog

03.17.14 v1.5.8
 UPDATED colors.less for incorrect hex code on @silver variable

02.13.14 v1.5.7:
 UPDATED jQuery to 2.1.0
 UPDATED Bootstrap to 3.1.1

12.19.13 v1.5.6:
 UPDATED Font Awesome to 4.0.3
 UPDATED Bootstrap to 3.0.3

11.01.13 v1.5.5:
 UPDATED Font Awesome to 4.0.1
 UPDATED Bootstrap to 3.0.1

10.23.13 v1.5.4:
 ADDED .circle() mixin to custom-mixins.less
 ADDED app/_/fonts directory for Font Awesome 4.0.0
 ADDED Glyphicon Fonts so that you can use either Font Awesome or Glypicon classes
 UPDATED Font Awesome to 4.0.0
 UPDATED mobile.less for Bootstrap media queries
 REMOVED app/_/font directory

09.12.13 v1.5.2:
 ADDED a tests directory to the root for testing scripts
 UPDATED app.js to a Revealing Module pattern for consistency and security
 UPDATED app.js setting variable for standard JSON format
 Minor Improvements

08.20.13 v1.5.1:
 NEW Bootstrap to v3.0.0 final
 ADDED ability to include the Bootstrap Theme easily within the libraries.less file
 UPDATED the @font-primary variable to reflect the Bootstrap default font set ("Helvetica Neue", Helvetica, Arial, sans-serif)

08.16.13 v1.5.0:
 Overall simplicity throughout the codebase and unification around Bootstrap 3 (Updated to RC2)
 MOVED /libs folder within the build folder for compiling of all assets into tidy app.min.css and app.min.js files. No longer requiring multiple trips to the server for several files
 ADDED app/_/font folder to hold the Font Awesome fonts. This was the only lib dependency I couldn't move. Naturally, I removed the /font directory from the font-awesome directory
 ADDED new colors to the colors.less file, as well as a reference swatchs from FlatUI (http://designmodo.github.io/Flat-UI/).
 UPDATED build/less/libraries for referencing the library css files as (less) to compile them into the output app.min.css file
 UPDATED index.kit to include the "Basic Grid Layout" from Bootstrap for reference to the grid system
 UPDATED app.js to import jquery.min.js and bootstrap.min.js in lieu of being imported via libraries.js
 UPDATED custom-font mixin to reference "font-" prefixed variables for consistency with their CSS counterparts
 REMOVED libraries.js in order to decrease the amount of trips to the server for the JS resources
 REMOVED app/_/img/theme in favor of app/_/img - no real value seen over the past few months -- updated @img-url to reflect this
 REMOVED Font Awesome IE7 support.
 REMOVED the margin:0; padding:0; references for h1 -> h6 within the defaults.less file for inheriting the Bootstrap default margin/padding

07.30.13 v1.4.0:
 UPDATED colors.less for messaging colors, removal of some default colors, unification of naming convention (hyphens vs. capitalization) and updates to the default blue scheme
 UPDATED custom-mixins.less for .debug() mixin color. Referencing @msg-info now, instead of hard-coded "red"
 UPDATED defaults.less "a" reference to include the new .transition() mixin, and forced the text-decoration to be none by default
 UPDATED Bootstrap to 3 RC1 (http://getbootstrap.com)
 REMOVED Bootstrap Glyphicon files in favor of Font Awesome
 REMOVED Normalize CSS
 REMOVED Library directory versioning (i.e. /lib/bootstrap//js/... in favor of simplicity /lib/bootstrap/js/...)
 REMOVED Font Awesome non-minified versions. They weren't being referenced, but no need to keep them there.
 REMOVED jQuery 1.10.2 in favor of v2.0.3 and as mentioned, removed the reference to /2.0.3/jquery in favor of simplification

07.26.13 v1.3.5:
 ADDED .transition() mixing within the custom-mixin less file
 ADDED Tablet and Phone Media Query examples to the mobile.less file
 ADDED "Social Colors" to the colors.less file for Social Media default colors
 MOVED mobile.less within the /globals structure

07.05.13 v1.3.4:
 ADDED favicon.ico default file to the root app folder
 ADDED robots.txt default file to the root app folder
 ADDED sitemap.xml default file to the root app folder
 UPDATED Font Awesome (v3.2.1)
 UPDATED jQuery v1 (v1.10.2)
 UPDATED jQuery v2 (v2.0.3)

06.11.13 v1.3.3:
 Relocated the Google Analytics request to prior to the HEAD from the FOOTER
 Removed the Google Urchin ID from the app.settings object in favor of placing the Urchin ID in the default location (within Google's code)
 ADDED: /plugins directory under the app/lib/jquery directory for easy inclusion of jQuery plugins
 ADDED: /img/theme directory under the app/_ directory for image consistency
 ADDED: /plugins/README for allowing you to define details pertaining to plugin inclusion, use, etc.
 ADDED: /img/theme/README for allowing you to define details pertaining to images, etc.
 Updated: jQuery 1.10.0 -> 1.10.1
 Updated: jQuery 2.0.1 -> 2.0.2

05.29.13 v1.3.2:
 Removed Galeway font from default kit
 ADDED: Source Sans Pro as default font
 Updated: jQuery 1.9.1 -> 1.10.0
 Updated: jQuery 2.0.0 -> 2.0.1
 Updated: Bootstrap 2.3.1 -> 2.3.2

05.14.13 v1.3.1:
 Added font-family reference to the body attribute within the defaults.less file for IE glitches
 Version Update to Normalize CSS (v2.1.2)
 Version Update to Font Awesome (v3.1.1)
 Version Include of jQuery v2.0.0 (***default still v1.9.1***)
 Removal of LESSHat in favor of custom-mixins.less
 Removal of HTML5Shiv due to infrequency of use
 Update to header.kit for removal of HTML5Shiv

04.04.13 v1.3.0:
 NEW: Inclusion of the html5shiv.js (https://code.google.com/p/html5shiv) helper
 NEW: Creation of less/libraries.less for managing all included CSS/LESS libaries (imported by app.less)
 NEW: Creation of build/js/libraries.js for managing all included JS libaries and corresponding compiled output (app/_/js/libraries.min.js)
 NEW: Inclusion of the Google Analytics script reference within footer
 NEW: Inclusion of the .hide-text class for managing text/image replacement
 NEW: Inclusion of the .flexibile image class for scaling the image
 NEW: Inclusion of the .divider() mixin within custom-mixins
 NEW: Inclusion of the app.listeners() method for application kickoff
 NEW: Inclusion of the app.version variable for application versioning
 Update to header.kit for html5shiv
 Update to footer.kit for inclusion of libraries.min.js reference
 Update to defaults.less for and update to the .clear class in favor of the Micro Clearfix attributes
 Removal of jQuery Mobile from the core scaffolding in favor of more responsive development
 Removal of the clearFix() mixin, in favor of the .clear class, as clearFix() was not technically a mixin
 Removal of the defaults.less hr styling in favor of the .divider class
 General cleanup of code, documentation, etc. for the above changes.

04.02.13 v1.2.5:
 Update to Bootstrap v2.3.1
 Update to documentation

03.06.13 v1.2.4:
 Added app/_/img/theme directory for segretating theme-based images into their own location
 Updated build/less/app.less for referencing global LESS variable @img-url to reference the new img/theme path
 Updated build/less/globals/colors.less to include @base, @highlight and @accent variables
 Added new parameters to the "a" reference within the build/less/globals/defaults.less for handling hover/focus by default
 Added hr parameter to the build/less/globals/defaults.less file for more control over the hr tag's style

02.26.13 v1.2.3:
 Updated jQuery Mobile for version 1.3.0 release: http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released

02.21.13 v1.2.2:
 Changed the textShadow mixin (build/less/globals/fonts.less) mixin to text-shadow for consistency with the other mixins

02.20.13 v1.2.1:
 Changed the customFont mixin (build/less/globals/fonts.less) mixin to custom-font for consistency with the other mixins

02.20.13 v1.2.0:
 Removed /html and moved index.html to /app -> Updated the CodeKit path for .kit files
 Added app/_ directory and moved the css, img and js production files/folders within it -> Updated the corresponding CodeKit paths
 Moved the lib directory within the /app directory -> Updated app.less file accordingly

02.19.13 v1.1.1:
 Updates to custom-mixins.less to add in new valuable mixins AND the ability to pass in LESS variables to most mixins.

02.13.13 v1.1.0:
 NEW: Added LessHat to default lib set for access to convenient LESS mixins
 Updates to mixins.less for removal of redundant (to LessHat) mixins
 Rename of mixins.less to custom-mixins.less

02.13.13 v1.0.9:
 Minor tweaks to mixins.less and fonts.less

02.12.13 v1.0.8:
 Updates to ALL library folder/file naming conventions for easier managment and determination of version (i.e. /lib/jquery/1.9.1/jquery.min.js)
 Updates to referential files for handling the new library naming convensions
 Update to include a placeholder for Mobile Specific styles /build/less/partials/mobile.less
 Update to /build/less/app.less to include the new mobile.less file

02.12.13 v1.0.7:
 Update to jQuery 1.9.1
 Update to Twitter Bootstrap 2.3.0

01.23.13 v1.0.6:
 Automatic Inclusion of Twitter Bootstrap, jQuery & Font Awesome
 Update to Font Awesome 3.0.2
 Update to Normalize CSS 2.0.1

01.18.13 v1.0.5:
 Update to build/less/globals/colors.less to include base, highlight and accent variables for easy switching of themes

01.17.13 v1.0.4:
 Fixed error in the build/less/globals/fonts.less file where the size value was not being applied.

01.17.13 v1.0.3:
 Minor tweaks to documentation
 Moved reference to app.min.js from kits/partials/header.kit to kits/partials/footer.kit for faster page loading
 Moved reference to the Viewport div ID from kits/partials/header.kit to the kits/index.kit
 Moved reference to the Viewport close div ID from kits/partials/footer.kit to the kits/index.kit

01.17.13 v1.0.2:
 Updates to jQuery Library for 1.9.0 Release

01.09.13 v1.0.1: Initial Release