https://github.com/baianat/blexar

❤ An HTML, CSS and JavaScript framework for developing responsive modern web interfaces, focused on usability and minimal sizes, with all the necessary extensions.
https://github.com/baianat/blexar

css design-language design-language-framework design-patterns

Last synced: 11 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/baianat/blexar
• Owner: baianat
• License: mit
• Created: 2018-07-25T22:42:45.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-02-12T12:33:46.000Z (almost 3 years ago)
• Last Synced: 2024-10-03T14:47:42.123Z (about 1 month ago)
• Topics: css, design-language, design-language-framework, design-patterns
• Language: JavaScript
• Homepage: https://blexar.com
• Size: 701 KB
• Stars: 32
• Watchers: 3
• Forks: 5
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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

```bash

npm install blexar --save

#or using yarn

yarn add blexar

```

### HTML Layout

```html

  

    

    

    

    

  

  

  ...

  

```

### Webpack Configuration

Add the following rule to the Webpack configuration file

```javascript

{

  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.

```CSS

$margin = 2px

$red    = #E13C31

@import "~blexar"

```

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2019 [Baianat](http://baianat.com)