Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Blexar

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

  • 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 blexar --save
#or using yarn
yarn add blexar

HTML Layout

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

    <!-- blexar -->
    <link rel="stylesheet" href="./blexar/dist/css/blexar.css">
  </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 "~blexar"

License

MIT

Copyright (c) 2019 Baianat

About

An HTML, CSS and JavaScript framework for developing responsive modern web interfaces, focused on usability and minimal sizes, with all the necessary extensions.

Topics

Resources

License

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •