Currently v18.2.1 Licence MIT License

BUILD RESPONSIVE DESIGN FASTER

What 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>
Contribute
Basis is open source, so if you want to take part in contributing please fork the repo on Github and send us a pull request. Or, if you find a bug create a new issue.
License
Basis licensed under MIT. Basis is absolutely free for personal or commercial use.