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.
- 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.
Using npm
npm install @baianat/Base.framework --save
#or using yarn
yarn add @baianat/Base.framework<!doctype html> <html lang="en"> <head> <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"> <title>Base</title> </head> <body> ... </body> </html>
Add the following rule to the Webpack configuration file
{ test: /.styl$/, loader: 'style-loader!css-loader!stylus-loader?resolve url' }
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