Socket
Socket
Sign inDemoInstall

sass-basis

Package Overview
Dependencies
Maintainers
0
Versions
154
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

sass-basis

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


Version published
Weekly downloads
104
increased by258.62%
Maintainers
0
Weekly downloads
 
Created
Source

Basis

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

Basis
  • 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.

Get started

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 */
@use "node_modules/sass-basis/src/css/basis;"

/* If you want to use Basis mixins only */
@use "node_modules/sass-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/sass-basis@latest/dist/

Sample for using classes

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

Sample for using abstracts

@use "node_modules/sass-basis/core";

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

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

Browser support

Modern Browser only

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

Keywords

FAQs

Package last updated on 14 Sep 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc