# Styles

## Overview

In this boilerplate we recommended for learn about this library.

* [MUI Style](https://mui.com/system/getting-started/overview/)
* [Emotion](https://emotion.sh/docs/introduction) (Additional)
* [JSS](https://cssinjs.org/?v=v10.10.0) (Additional)
* [SASS](https://sass-lang.com/) (Additional)

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`

```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`

```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](https://mui.com/). You can follow guide integration [MUI theme](broken://pages/W8tujjLvLroBfHvjnX93) 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`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tokenomy.gitbook.io/boilerplate-code/features/styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.