Bukalapak's SASS Based, BEM, OOCSS Framework
npm install arinArin - SASS Based, BEM, OOCSS Framework
======
This is the interim documentation for the framework. Until we get some proper stuff in place, I hope this will see to 90% of questions and issues.
Arin is a powerful, Sass-based, BEM, OOCSS framework designed with scalability and performance in mind. It has a tiny footprint every variants is disabled by default (comes in at ~2KB, gzipped), and can be scaled as much or as little as you need.
It is important that you as the developer piece things together in the correct order. That order is:
* Settings: Global variables, site-wide settings, config switches, etc.
* Tools: Site-wide mixins and functions.
* Generic: Low-specificity, far-reaching rulesets (e.g. resets).
* Elements: Unclassed HTML elements (e.g. a {}, blockquote {}, address {}).
* Objects: Objects, abstractions, and design patterns (e.g. .o-container {}, .o-layout {}, .o-media {}).
* Components: Discrete, complete chunks of UI (e.g. .c-carousel {}). This is
the one layer that the framework doesn’t get involved with.
* Utilities: High-specificity, very explicit selectors. Overrides and helper classes (e.g. .u-hide {}, .u-show {}) and the only place where !important is allowed.
The order of partials within each layer is fairly open; it is the sections themselves that are important to get in the correct order.
#### 1. go to docs/ directory:
``sh`
$ cd docs
#### 2. run npm install for the first time
`sh`
$ npm install
#### 3. run gulp:
`sh`
$ gulp
#### 4. Open index.html in docs/page/ directory
#### 5. You are all set to go
N.B. All partials—including your own—follow the naming convention, e.g. _objects.box.scss, _components.navbar.scss`.