Skip to content
/ base Public
forked from baianat/base

Base is Baianat's design language, built based on the art of big typography and giving exactly the same experience on any device using responsive elements technique.

License

Notifications You must be signed in to change notification settings

melrefaie/base

 
 

Repository files navigation

Base

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

Installation

Using npm

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

HTML Layout

<!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>

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"

License

MIT

Copyright (c) 2017 Baianat

About

Base is Baianat's design language, built based on the art of big typography and giving exactly the same experience on any device using responsive elements technique.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 96.0%
  • JavaScript 4.0%