CSS framework based on Base design language


0.0.183 years ago4 years agoMinified + gzip package size for @baianat/base.framework in KB



A solid base to establish your favorite websites with user experience in mind.

Inspired by the user's own experience needs, we decided to implement a design system to serve as a solid basis for very simple, yet elegant websites to deliver a complexity-free environment.

Main Features

  • Supports native CSS variables.
  • Works well with SVG out of the box.
  • Offers some of the simplistic UI elements out there.
  • Intelligent grid system based on Flex-box.
  • Built using Stylus preprocessor.
  • User-friendly documentation with editable code snippets.

Getting Started


Using npm

npm install @baianat/Base.framework --save
#or using yarn
yarn add @baianat/Base.framework

HTML Layout

<!doctype html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Base -->
    <link rel="stylesheet" href="./@baianat/framework/dist/css/base.css">

    <!-->Or if you want to use cssVar version <-->
    <link rel="stylesheet" href="./@baianat/framework/dist/css/Base.cssvar.css">




Webpack Configuration

Add the following rule to the Webpack configuration file

  test: /.styl$/,
  loader: 'style-loader!css-loader!stylus-loader?resolve url'

Working with styles

In your main styling file app.styl, before including the Base main file, make sure to add the needed variables, according to your customization preferences.

$margin = 2px
$red    = #E13C31
@import "~@baianat/Base.framework/base"



Copyright (c) 2017 Baianat

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.