A lightweight responsive Sass/CSS framework based on flexible box.
CSS JavaScript HTML Shell
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
bin Some fixes Jun 23, 2017
src 9.1.1 Jul 27, 2018
tests Added xl breakpoint Oct 24, 2017
.editorconfig Update .editorconfig May 24, 2016
.gitignore Remove gulp and yarn Jul 27, 2018
.npmignore Create gh-pages Jun 23, 2017
.travis.yml Remove gulp and yarn Jul 27, 2018
CHANGELOG.md Remove gulp and yarn Jul 27, 2018
LICENSE Changed license. Apr 24, 2016
README.md Remove gulp and yarn Jul 27, 2018
package-lock.json 9.1.1 Jul 27, 2018
package.json 9.1.1 Jul 27, 2018
postcss.config.js Remove gulp and yarn Jul 27, 2018
rollup.config.js Remove gulp and yarn Jul 27, 2018

README.md

Basis

A lightweight responsive Sass/CSS framework based on flexible box.

Basis

Why it's awesome?

  • Basis isn't about a UI framework. Basis provides only basic frame of components. So you build a responsive web page quickly and easy to overwrite with your Sass or CSS.
  • CSS architecture of Basis is FLOCSS. So it is possible a modular approach.
  • Basis has incorporated the concept of vertical rhythm. So you can be a good-balanced design.
  • Basis has many mixins. Usufule mixins and abstract mixin of compornents.

Demo ( HTML5 Templates )

Get started

Using Basis Project (Starter Kit)

$ git clone https://github.com/sass-basis/starter-kit.git
$ cd starter-kit
$ npm install
$ npm start

Using NPM

Installs Basis

$ npm install sass-basis

Imports Basis your Sass/SCSS.

/* If you want to use Basis classes */
@import node_modules/sass-basis/src/css/basis;

/* If you want to use Basis mixins only */
@import node_modules/sass-basis/src/css/basis-core;

Imports JavaScripts ( Require jQuery )

import 'node_modules/sass-basis/src/js/basis.js';

Download from GitHub

Download the basis from https://github.com/sass-basis/basis/releases

Imports Basis your Sass/SCSS.

/* If you want to use Basis classes */
@import basis/src/css/basis;

/* If you want to use Basis mixins only */
@import basis/src/css/basis-core;

or Just this link.

<link rel="stylesheet" href="basis/dist/css/basis.min.css">

Loads JavaScripts

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="node_modules/sass-basis/dist/js/basis.min.js"></script>

Using CDN (jsDelivr)

https://cdn.jsdelivr.net/npm/sass-basis@latest/dist/

Sample for using classes

<a class="c-btn c-btn--block">Btn</a>

Sample for using abstracts

.c-btn {
  @include _c-btn();

  &--block {
    display: block;
  }
}
<a class="c-btn c-btn--block">Btn</a>

Option

Support IE9 ( Not perfect )

<!--[if lt IE 10]>
<link rel="stylesheet" href="node_modules/sass-basis/dist/css/plugin/basis-ie9/basis-ie9.min.css" />
<![endif]-->

And support IE8 ( Not perfect )

<!--[if lt IE 9]>
<script src="node_modules/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

Browser support

Modern Browser and IE10+

How to contribute

Please make an issue if there is a problem and needs. Please don't make the new issue if the issue of the same content already exists. If you can coding, please give me a pull request. But, please do not send in the master branch. Pull request sent to the master branch doesn't merge.

License

MIT License