## Table of contents - [Directory structure](#directory-structure) - [CSS: ITCSS](#css-itcss) - [JavaScript: babel](#javascript-babel) - [JavaScript: browserify](#javascript-browserify) - [KSS-node: michelangelo](#kss-node-michelangelo) - [Resources](#res
npm install convy┌── src
│ ├── css
│ │ ├── 1-settings
│ │ ├── 2-tools
│ │ ├── 3-generic
│ │ ├── 4-base
│ │ ├── 5-objects
│ │ ├── 6-components
│ │ ├── 7-scopes
│ │ ├── 8-trumps
│ │ └── index.convy.scss
│ ├── js
│ │ ├── scopes [smart components]
│ │ ├── components [dumb components]
│ │ ├── actions
│ │ ├── reducers
│ │ ├── register-service-worker.js
│ │ ├── index.convy.js
│ │ ├── store.js
│ │ └── route.js
│ ├── font
│ └── img
└── dest
``The ITCSS philosophy is a simple one at its core. Basically that we should order CSS by metrics defined by the language (and its features) than by the usual standard of human-oriented patterns.
ITCSS takes CSS and writes it in a way that browsers and the design of the language can best utilise, which gives us far better scalability and maintainability than we'd get if we were to write CSS around how a person thinks.
That said, the move to ITCSS (both conceptually and in practice) is not a huge shock to the system as you might imagine; it basically just rewires a couple of fundamentals and then it's business as usual.
- Settings
The preprocessor variables are the globally-available settings or configuration switches for our project.
- Tools
Includes all the public mixins and helper functions. These globally-available tools should make our development flow easier.
- Generic
The ground zero styles. They are low-specificity and far reaching. Think about resets and normalizing our styles for cross-browser compatibility.
- Base
Unclassed HTML elements. This is the last layer where we use type selectors. Anything necessary to style raw elements goes in here.
- Objects
Object oriented CSS. Begin using classes exclusively for agnostically named noncosmetic design patterns. This layer is mostly layout-driven.
- Components
Explicitly named designed pieces of UI. The cosmetic layer, includes more specific styling instructions.
- Scopes
Consists out of components grouped together. They rely entirely on nesting, so make sure people are aware of this.
- Trumps
Only affect one piece of the DOM at a time. These are the utility classes or overrides and usually carry !important.
Write human-readable documentation using KSS syntax comments. Have the kss tool automatically build a style guide from your stylesheets. Michelangelo is the custom template for the KSS-node living style guide. Have a look here to get started with the template and the kss-node syntax.