Currently v20.0.1　Licence MIT License

BUILD RESPONSIVE DESIGN FASTER

What is Basis?

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.

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.

The Basis style is lightweight and minimum. It just may not be enough, but so overwritable.

Why it's awesome?

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/

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));
}

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>
License

Basis licensed under MIT. Basis is absolutely free for personal or commercial use.