adrianengine / adrianengine-hammer-project-starter

This is a Boilerplate template for static websites meant to be build with Hammer for Mac

Hammer Starter by @adrianengine

Introduction

This is a Boilerplate template for static websites meant to be build with Hammer for Mac.

About

The template structure is based on ITCSS ("Inverted Triangle CSS").

It follows Reasonable System for CSS Stylesheet Structure.

Includes a copy of Normalize.

Uses Hammer's built-in support for Autoprefixer.

Structure

You’ll see it’s all, for the most part, directly nested inside the CSS folder. Instead of folders, we use namespaces to organize. Config files set up our grid and variables. Library files contain our base styles where we define global elements: borders, ornaments, our tools classes, our type styles etc.

Instead of creating 25 module SCSS partials, we section off the majority of them into a file called _component.sections.scss.

Naming Convention

• Think in components, named with 2 words (.screenshot-image)
• Components have elements, named with 1 word (.blog-post > .title)
• Name variants with a dash prefix (.shop-banner.-with-icon)
• Components can nest
• Remember you can extend to make things simple

BEM and RSCSS

	<!-- BEM -->
	<form class="site-search site-search--full">
	  <input  class="site-search__field" type="text">
	  <button class="site-search__button"></button>
	</form>

	<!-- rscss -->
	<form class="site-search -full">
	  <input  class="field" type="text">
	  <button class="button"></button>
	</form>

Further reading

Ideas borrowed from many places, including:

• About HTML semantics and front-end architecture by Nicolas Gallagher
• Atomic OOBEMITSCSS by Una Kravets
• Classy CSS: a Programmatic Approach to Sass Stylesheets by Una Kravets
• Clean out your Sass junk drawer by Dale Sand
• Content Display Patterns by Daniel Mall
• CSS Architecture by Philip Walton
• Enduring CSS by Ben Frain
• Happy Cog Starter Files 2016 by Allison Wagner
• How to Scale and Maintain Legacy CSS with Sass and SMACSS by Ben Smithett.
• IE-friendly mobile-first CSS with Sass 3.2 by Jake Archibald
• MindBEMding - getting your head 'round BEM syntax by Harry Roberts
• Naming UI components in OOCSS by Harry Roberts
• SMACSS by Jonathan Snook

License

Hammer Starter © 2016+, Adrian Quevedo. Released under the MIT License. Authored and maintained by Adrian Quevedo.

adrianengine.com  ·  GitHub @adrianengine  ·  Twitter @adrianengine