Currently v6.5.0 Licence MIT License


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?


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.
@mixin _vertical-rhythm($font-size, $coefficient: 1) {
  $between-lines: _strip-unit(_rem2px($_between-lines));
  $base-line-height : _strip-unit(_rem2px($_base-line-height));
  $base-font-size: _strip-unit(_rem2px($_base-font-size));
  $font-size: _strip-unit($font-size);

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 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>
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.
Basis licensed under MIT. Basis is absolutely free for personal or commercial use.