This is a base tempate for building static sites using CodeKit. It's based partially on HTML5 Boilerplate. There is a similar template for those that use Hammer here.
/css- contains a minified main.scss with all the other SCSS files imported./fonts- an empty folder for font files./img- contains all image files for the project/includes- contains partials as.kitfiles. They should start with an underscore./js- contains the projects javascript files./js/vendor- contains jQuery & Modenizr. Other plugins can go in here, but be aware of the number of HTTP requests. It might be better to build plugins intoplugins.jsusing codekit imports./sprite- contains images that should be compiled into a sprite using Compass. This can be removed if the project isn't using codekit.
_normalize.scss- CSS Reset. Currently using Version 2.1.2._base.scss- Contains fixes for some common bugs and base styles._layout.scss- Should contain layout-speciffic class declarations. See SMACSS for more information on organising styles._helpers.scss- Contains a stripped-down version of the helper classes from H5BP._print.scss- Contains print-specific styles based on H5BP.
Each module (again, see SMACSS) should have its own SCSS file. main.scss also imports Bourboun by default and my own local mixins library.
includes/_head.kit- The top part of each page, based on H5BP.includes/_foot.kit- The bottom part of each page.includes/_grid.kit- A fluid grid overlay for use during development.js/boxsizing-polyfill.htc- A polyfill that allows IE to understand box-sizing.main.js- User Scripts should go in here.plugins.js- Based on H5BP, with a few additions.codekit-config.json- A CodeKit Config Fileindex.kit- A template for the index page. Other pages should be dropped in the root and import_headand_footlike this.
Other than the individual HTML pages, the following files are generated by CodeKit:
main.scss- All CSS, minified.main.min.js- All JS, minified.
This template aims to keep superfluous code to a minimum. It only contains code that I find myself using in every project. As a consiquence, it keeps the typography and layout code to a minimum. The base font size is reduced to 10px using a percentage and thereafter rems are used to declare font-sizes and heights, based on this value. This means that 1rem = 10px so the maths is a little easiter. Because rems aren't widely supported, A pixel value is always declared first.
Two baseline images are included for use with the grid overlay. One is at 20px and the other at 26px as these are the most common line-heights in my work.
The bones for creating a fluid grid using nice round numbers are already present in the template, and an overlay is provided for use in development. You can turn the overlay off by setting display: none; on #overlay in _grid.kit, or by turning off the import for that file.
You should always build a grid that fits your design so this is only provided as an example. I'll be writing about building fluid grids soon, but theres some very sparce info here.
This template currently uses Version 2.0.3 (9 Dec 2012) but may have been updated with some of the more recent changes. See the H5BP changelog.
If you'd like to contribute, go ahead and fork.
This template was built by Danny Smith (@dannysmith) and is based on HTML5 Boilerplate. It incorporates a number of other fixes and suggestions, some of which were written by others.
