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
Header 1
Header 2
Header 3
Subtitle
Body XXL - Bold Longer text can be also with this in a two row option ...
Body XXL - Longer text can be also with this in a two row option ...
Body XL - Longer text can be also with this in a two row option ...
Body - Longer text can be also with this in a two row option ...
Bold - Longer text can be also with this in a two row option ...
Small - Longer text can be also with this in a two row option ...
Pre title - Longer text can be also with this in a two row option ...
Buttons
Large buttons
Medium buttons
Small buttons
Form elements
Checkboxes
Radio buttons
Input fields
Form with HTML5 validation
Textarea
Dropdowns
Cards
Simple card
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Tables
No. | Name | Weight | Symbol |
---|---|---|---|
1 | Hydrogen | 1.0079 | H |
2 | Helium | 4.0026 | He |
3 | Lithium | 6.941 | Li |
4 | Beryllium | 9.0122 | Be |
5 | Boron | 10.811 | B |
Adding class name form-submitted using JavaScript to form element gives 'invalid styles' to all fields that are invalid (by HTML5 Form Validation)