A scaffolding for use with CodeKit
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)
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.
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.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.
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.
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/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.
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.
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 "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.
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.
├── 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
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.
Who might use this?Any developer using CodeKit who wants to easily kick off a project.
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.
I use libraries. Are there libraries included?Yes. I use them as well, so they are part of this kit.
Which libraries do you include as part of this project?
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.
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