🎨Styles
Global, reset, and override stylesheet are three techniques used to control the styling and layout of web pages.
Overview
In this boilerplate we recommended for learn about this library.
In this boilerplate there are 3 style areas namely global, reset and override. An example of use is below:
Global Style
Global style functions to place all global CSS code usage throughout the application. You can put the code CSS in src/styles/global.scss
html,
body {
max-width: 100vw;
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}Reset Style
Reset style is a technique used to normalize the default styles of HTML elements across different web browsers, which can vary in their default styling. You can put the code CSS in src/styles/reset.scss
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}Override Style
Override style is used to combine several CSS framework in boilerplate, we recommend using it with MUI. You can follow guide integration MUI theme or need more info check https://mui.com/material-ui/customization/how-to-customize/#5-global-theme-variation. You can put the code CSS in src/styles/mui
Last updated