You are currently viewing the documentation for Vuetify 3
Go to Vuetify 2

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.

It can be disabled with sass variables by setting $utilities: false, but you may have to manually reset some styles for components to display correctly.

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 screen readers.

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

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

styles/generic/_index.scss
// Generic styling for bare HTML elements (like H1, A, etc.).
// These come with default styling from the browser so that
// we can redefine them here.
@import './reset.scss';
@import './animations.scss';
@import './colors.scss';
@import './elevation.scss';
@import './transitions.scss';

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub