a_design
Styles for a UI design
Installation
npm i a_design
Usage
This UI library is splitted in two, on one side there are class, the easiest way to use them is to import them
// root_styles_in_your_project.styl @require 'a_design/styles'
Once compiled, you will be able to use any class (e.g: <div class="_p10, _mb20">...</div>
).
On the other side, if you don't want to use the class but directly some mixins (which will reduce the size of you final css)
// any_file.styl @import 'a_design/styles/mixins/sizing' .a-class { _p(10) _background('grey1')}
It will check if the padding 10 is valid (the padding list is available in a_desgign/styles/design
) and
import add a padding: 10px
rule to the class. This ensure you don't structure your UI with too much different
spaces (around 4-5 enforce a coherent structure).
Principle
There are 2 main principles :
- Avoid using too much padding, margin, font sizes... anything that influence the UI spaces. You force yourself as a designer or frontend to use only mixins available in the design for those properties.
- Visually differenciate the project and a_design class (or mixins) because everything starts with
_