examples of web-components

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


Table