CSS Reset

Opinionated base styles for Vuetify projects.

Bootstrapping

ress is a modern CSS reset that applies a solid base for stylesheets. It is built on top of normalize.css and adds new features such as specifying font-family: monospace for <code> elements, removing all outlines from elements when hovering, and much much more. Additional information can be found on the ress GitHub repository.

The Vuetify style reset is applied globally and affects default elements such as button and input. This also includes anything located outside of the v-app component.

These styles are automatically imported within src/styles/generic/_reset.scss and bootstrapped as Generic styles within src/styles/generic/_index.scss:

Reset Features

Below is a list of additional features that ress provides over the default normalize.css functionality

Apply box-sizing: border-box; in all elements.
Reset padding and margin in all elements.
Specify background-repeat: no-repeat in all elements and pseudo elements.
Inherit text-decoration and vertical-align to ::before and ::after.
Remove the outline when hovering in all browsers.
Specify font-family: monospace in code elements.
Reset border-radius in input elements.
Specify font inheritance of form elements.
Remove the default button styling in all browsers.
Specify textarea resizability to vertical.
Apply cursor: pointer to button elements.
Apply tab-size: 4 in html.
Style select like a standard input.
Style cursor by aria attributes.
Hide content from screens but not screenreaders.

For a complete list of all applied styles, see the ress css stylesheet.

Up Next

Ready for more? Continue reading with:

Caught a mistake or want to contribute to the documentation? Edit Layout or Content on GitHub!