# 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-box
in all elements. - Reset
padding
andmargin
in all elements. - Specify
background-repeat: no-repeat
in all elements and pseudo elements. - Inherit
text-decoration
andvertical-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
inhtml
. - 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.