Site Boilerplate

Brad Frost's Atomic Design and Harry Robert's CSSGuidlines / ITCSS share the same fundamental approach - begin with simple elements / atoms and building up to complex groups of elements / molecules. This works in favor of the cascade and reduces CSS specificity issues.

Site Boilerplate (for IE 9 and upwards) utilizing the following principles:

• Atomic Design
• Object-oriented SCSS for modular development
• CSS guidelines / ITCSS scss structure
• Follows BEM to create clear CSS components but with less parent element name repetition and allowing low-level nesting.

Boilerplate features:

• Sass compilation
• CSS autoprefixer
• JS concatination
• Sass error catching to prevent watch task falling over
• Browsersync for faster development, easier multi browser / device testing
• Image compression
• Pre-set font size management
• Minimal responsive grid
• Living style guide / patternlab / component library
• Flexbox sticky footer

Updates coming soon

• Basic accessibility guidelines
• Media query usage instructions
• Further elements / components to be added to style guide
• Convert grid system to flexbox

###Further Reading Harry Roberts and Brad Frost have strongly influenced the guidelines set out below and I highly recommend giving them a read.

• Harry Roberts - MindBEMding – getting your head ’round BEM syntax
• Harry Roberts - CSS guidelines
• Brad Frost - Atomic Design