https://github.com/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.
https://github.com/baianat/base
baianat base css design-language design-language-framework framework stylus
Last synced: 16 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/baianat/base
- Owner: baianat
- License: mit
- Created: 2017-12-25T21:33:37.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T16:01:26.000Z (over 2 years ago)
- Last Synced: 2025-03-23T06:51:06.136Z (about 1 month ago)
- Topics: baianat, base, css, design-language, design-language-framework, framework, stylus
- Language: JavaScript
- Homepage: https://baianat.github.io/base-framework/
- Size: 1.58 MB
- Stars: 14
- Watchers: 0
- Forks: 3
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
```bash
npm install @baianat/Base.framework --save
#or using yarn
yarn add @baianat/Base.framework
```
### HTML Layout
```html
Or if you want to use cssVar version <-->
Base
...
```
### 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 "~@baianat/Base.framework/base"
```
## License
[MIT](http://opensource.org/licenses/MIT)
Copyright (c) 2017 [Baianat](http://baianat.com)