Table of contents
What is it and how to use it?
42mo-web-styles is a lightweight SCSS library Demo page
Install:
npm i @42mo/42mo-web-styles -D
In SCSS:
How to override any library variable?
Typography
Use Roboto font either from google cdn or add to project from /dist/fonts
Display Large 57/64 -0.25
Display Medium 45/52
Display Small 36/44
Headline Large 32/40
Headline Medium 28/36
Headline Small 24/32
Title Large 22/28
Title Medium 16/24 . +0.15
Title Small 14/20 . +0.1
Body Large 16/24 . +0.5
Body Medium 14/20 . +0.25
Body Small 12/16 . +0.4
Label Large 14/20 . +0.1
Label Medium 12/16 . +0.5
Label Small 11/16 . +0.5
Extra classes
class 'bsl-font-bold' for bold text weight
class 'bsl-font-medium' for medium text weight
class 'bsl-font-underline' for underlined text
class 'bsl-font-caps' for all small caps text
class 'bsl-font-upcase' for uppercase text
Buttons
Large buttons
Medium buttons
Small buttons
Form elements
Checkboxes
Radio buttons
Input fields
Table
Invitee email | Name | Weight | Symbol |
---|---|---|---|
email.surename@gmail.com | Hydrogen | 1.0079 | H |
email.surename@gmail.com | Helium | 4.0026 | He |
email.surename@gmail.com | Lithium | 6.941 | Li |
email.surename@gmail.com | Beryllium | 9.0122 | Be |
email.surename@gmail.com | Boron | 10.811 | B |