#Codekit understrsap code#

/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.

/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 into plugins.js using 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. _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.Įach 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 File.

index.kit - A template for the index page.

Other than the individual HTML pages, the following files are generated by CodeKit: Other pages should be dropped in the root and import _head and _foot like this.

#Codekit understrsap code#

This template aims to keep superfluous code to a minimum. It only contains code that I find myself using in every project. #Understap codekit codeĪs 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 () but may have been updated with some of the more recent changes.

If you'd like to contribute, go ahead and fork. This template was built by Danny Smith ( and is based on HTML5 Boilerplate. It incorporates a number of other fixes and suggestions, some of which were written by others.If you are like me, then you probably don’t like working on the command line if other options are available. So, the question becomes: How do I use progressive tools like Sass without touching the command line? What is Sass I don’t begrudge developers who work in Terminal all day, but my skill set doesn’t extend to the command line. Sass is a preprocessing language that gets translated into CSS. Sass offers a great deal of functionality missing from vanilla CSS, like functions, mixins, and variables. It is more terse than CSS and generally improves the maintainability of a site. Sass isn’t the only game in town, either. Other preprocessed languages like LESS offer similar features, but don’t have quite the same following.