@a-dolah/default-styles v1.0.0
A design system for more efficient development
Motivation
I often end up spending too much of my developing time in considerations regarding things like font sizes, line heights, palettes etc. Furthermore, I've found that every time I use some kind of design system which is defined in advance, the design ends up looking much more consistent and better.
In order to speed up and improve the styling process of any project I've created this default-styles.css stylesheet.
Systems and Reset
The default-styles.css stylesheet includes design systems for the following aspects of CSS:
- Font weight
- Font weight
- Line height
- Colors
- Margin
- Padding
- Breakpoints
- Width
- Height
- Box shadows
- Border radius
- Border width
- Opacity
In addition to the above mentioned systems, I've incorporated a CSS reset based on Richard Clark's HTML5 reset and a Box Model based on the Universal Box Sizing with Inheritance.
The color system
The coloring system is based on 14 different color palettes. Each palette is divided into three parts: primary, neutral and supporting. Furthermore, each color in the palettes come in 10 different variations. The reason why is that you probably need more colors than you might think - a color palette needs to be comprehensive in order to create those small nuances that makes the design beautiful.
To use a palette, simply comment out all the palettes you don't need an only import the one you're going to use.
Browser support
Since the design system is based on CSS variables. One thing to note is that CSS variables lack native IE support. However, the css-vars-ponyfill
3 years ago