BasisWhat is Basis?
Clean code development
The Basis classes have prefix. And code style is BEM (MindBemding) and using Sass/SCSS. You can use it as CSS framework or Sass/SCSS mixin library.
Responsive & Mobile first
The grid system is flexbox based. So it's simple and excellent than the float layout! Same height box, Reverse grid, Equal spacing layout and more.
Lightweight & Minimum style
The Basis style is lightweight and minimum. It just may not be enough, but so overwritable.
Why it's awesome?
Architecture
CSS architecture of Basis is based on FLOCSS. Also, the "core" layer has mixins and abstract of the components. So You can also use it as a mixin library without using classes.
├ core/
│ ├ functions/
│ ├ mixins/
│ └ abstracts/
├ foundation/
├ layout/
└ object/
├ component/
├ project/
└ utility/Vertical Rhythum
Basis has incorporated the concept of vertical rhythm. So you can be a good-balanced design.
.font-size-10 {
@include _font-size-line-height(_strip-unit(10 / $_base-font-size-px));
}
.font-size-12 {
@include _font-size-line-height(_strip-unit(12 / $_base-font-size-px));
}Flexible grid system
Clean because using a flexible box. The grid system is flexbox based. You can use 1 to 12 of the grid size.
.c-row__col--1-1, .c-row__col--2-3, .c-row__col--1-12 and more.
<div class="c-row">
<div class="c-row__col c-row__col--1-1 c-row__col--md-1-2">...</div>
<div class="c-row__col c-row__col--1-1 c-row__col--md-1-2">...</div>
</div>
<div class="c-row">
<div class="c-row__col c-row__col--1-1 c-row__col--md-1-3">...</div>
<div class="c-row__col c-row__col--1-1 c-row__col--md-1-3">...</div>
<div class="c-row__col c-row__col--1-1 c-row__col--md-1-3">...</div>
</div>