Axe is my personal Front End Development starting point. It is very much designed around how I approach my front end builds so might not suit everyone but if you like the structure and approach then feel free to give it a whirl.
I approach Front End Development in a very specific way, as does any developer really, but I found that none of the existing frameworks out there gave me everything I wanted. So I decided that I would make my own by combining the best bits of different frameworks and resources from about the webs.
This framework follows Harry Roberts "Inverted Triangle Architecture" and heavily relies on the components of Inuit CSS, as well as Nicolas Gallagher's brilliant Normalize CSS, various mixin's from the Guardian Guss Collection and some of the work I did whilst working at Forepoint. Credit has been give where due throughout the code.
I spent a while trying to think of a clever name for this Framework, in the end I settled on Axe. There is probably some clever analogy about how an axe is use to chop down a tree before its crafted into a beautiful piece of furniture but its actually named after one of my pet Tortoises. Here he is getting his thing on (he's the own on top):
And here is a video of him trying to eat a shoe: http://instagram.com/p/lAEP2WA2xR/.
- Scalable OOCSS Framework
- RWD focused architecture
- Sass powered
- BEM style naming convention
- Browser Support: IE8+
As mentioned previous this framework follow Harry Robert's "Inverted Triangle Architecture" meaning the further down the Sass/CSS file the more specific the styles become.
The Sass directory uses the following structure:
- Settings - Global Sass variables and configuration, etc
- Tools - Mixins and functions
- Generic - High-level styles such as resets
- Base - Initial site wide styling, typography
- Objects - Object and abstractions
- Components - Site/project specific UI elements
- Trumps - Overrides and helper classes
As part of my development workflow we use Grunt to handle compiling Sass, combining and concatenating JavaScript files, managing dependancies via Bower, on the fly creation of Icon fonts and various optimisations to code and assets.
Note: in order to use the Icon Font creation part of this Grunt process you will need to have fontforge installed and optionally ttfautohint . You can install these by running:
brew install fontforge ttfautohint
You may need to use sudo for brew, depending on your setup.