BlogPlaygroundOne

CSS Reset

Minimal base styles for Vuetify projects.

Edit this page
Copy Page as Markdown

Bootstrapping

Vuetify applies a minimal CSS reset to normalize browser inconsistencies while keeping the footprint small.

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

Reset Features

Below is a list of styles applied by the reset:

  • Apply box-sizing: border-box in all elements.
  • Reset margin in html and body.
  • Specify background-repeat: no-repeat in all elements and pseudo elements.
  • Inherit text-decoration and vertical-align to ::before and ::after.
  • Reset border-radius in input elements.
  • Specify font inheritance of form elements.
  • Apply cursor: pointer to button elements.
  • Apply tab-size: 4 in html.
  • Style cursor by aria attributes.
  • Minor consitency improvements for search and number inputs.

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

Ready for more?

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