# 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:
// 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';
# Reset Features
Below is a list of additional features that ress provides over the default normalize.css functionality
- Apply
box-sizing: border-boxin all elements. - Reset
paddingandmarginin all elements. - Specify
background-repeat: no-repeatin all elements and pseudo elements. - Inherit
text-decorationandvertical-alignto::beforeand::after. - Remove the
outlinewhen hovering in all browsers. - Specify
font-family: monospacein code elements. - Reset
border-radiusin input elements. - Specify font inheritance of form elements.
- Remove the default button styling in all browsers.
- Specify textarea resizability to vertical.
- Apply
cursor: pointerto button elements. - Apply
tab-size: 4inhtml. - Style
selectlike a standard input. - Style
cursorby aria attributes. - Hide content from screens but not screen readers.
For a complete list of all applied styles, see the ress css stylesheet.