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:

@import '~@42mo/42mo-web-styles/lib/index';

How to override any library variable?

// define it BEFORE importing the library, e.g $btn-color: blue; @import '~@42mo/42mo-web-styles/lib/index';

Typography

Use Roboto font either from google cdn or add to project from /dist/fonts

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap'); // OR USE as Local @font-face { font-family: 'Roboto'; src: url('/dist/fonts/Roboto-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; } // ... etc check _typography.scss

Buttons

Large buttons

Medium buttons

Small buttons


Form elements

Checkboxes


Radio buttons


Input fields

Error message
Error message

Form with HTML5 validation

Invalid email

Adding class name form-submitted using JavaScript to form element gives 'invalid styles' to all fields that are invalid (by HTML5 Form Validation)


Textarea



Cards

Simple card

Lorem ipsum dolor sit amet, consectetur adipisicing elit.


Tables