sass-basis / Basis
Licence: mit
A lightweight responsive Sass/CSS framework based on flexible box.
Stars: ✭ 133
Projects that are alternatives of or similar to Basis
Flexible Grid
Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)
Stars: ✭ 154 (+15.79%)
Mutual labels: css-framework, scss, sass, flexbox
Cirrus
☁️ The CSS framework for the modern web.
Stars: ✭ 716 (+438.35%)
Mutual labels: css-framework, scss, sass, flexbox
Bulma Helpers
Library with missing Functional / Atomic CSS classes for Bulma framework
Stars: ✭ 263 (+97.74%)
Mutual labels: css-framework, scss, sass, flexbox
Bulma Scss
Bulma SCSS - The Bulma CSS Framework files converted to SCSS syntax
Stars: ✭ 143 (+7.52%)
Mutual labels: css-framework, scss, flexbox
Progress Tracker
A HTML component to illustrate the steps in a multi step process e.g. a multi step form, a timeline or a quiz.
Stars: ✭ 461 (+246.62%)
Mutual labels: scss, sass, flexbox
Bootstrap
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
Stars: ✭ 154,459 (+116034.59%)
Mutual labels: css-framework, scss, sass
Fictoan
Mockups with markup — https://sujan-s.github.io/fictoan/
Stars: ✭ 114 (-14.29%)
Mutual labels: css-framework, scss, sass
Waffle Grid
An easy to use flexbox grid system.
Stars: ✭ 602 (+352.63%)
Mutual labels: scss, sass, flexbox
Primitive
⛏️ A front-end design toolkit for developing web apps.
Stars: ✭ 783 (+488.72%)
Mutual labels: css-framework, scss, sass
Kindling
A pocket-sized grid system built on the flex display property.
Stars: ✭ 155 (+16.54%)
Mutual labels: scss, sass, flexbox
Lemon
🍋 Minimal and responsive CSS framework for fast building websites.
Stars: ✭ 51 (-61.65%)
Mutual labels: css-framework, sass, flexbox
Siimple
The minimal CSS toolkit for flat and clean designs
Stars: ✭ 502 (+277.44%)
Mutual labels: css-framework, scss, sass
Hive Framework
A website development framework built with Sass, and incorporating jQuery UI.
Stars: ✭ 14 (-89.47%)
Mutual labels: css-framework, scss, sass
Avalanche
A package based CSS framework.
Stars: ✭ 86 (-35.34%)
Mutual labels: css-framework, scss, sass
Rollup Plugin Styles
🎨 Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more.
Stars: ✭ 116 (-12.78%)
Mutual labels: scss, sass
Css Progress Wizard
[NOT MAINTAINED] A pure flexbox+sass progress indicator
Stars: ✭ 129 (-3.01%)
Mutual labels: sass, flexbox
Basis
A lightweight responsive Sass/CSS framework based on flexible box.
- Document: https://sass-basis.github.io/
- GitHub: https://github.com/sass-basis/basis/
- Release: https://github.com/sass-basis/basis/releases/
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 )
- integrity: https://sass-basis.github.io/integrity/
- improve: https://sass-basis.github.io/improve/
- affinity: https://sass-basis.github.io/affinity/
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 JavaScript
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="node_modules/sass-basis/dist/js/basis.min.js"></script>
Using CDN (jsDelivr)
https://cdn.jsdelivr.net/npm/[email protected]/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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].