Skip to content

Instantly share code, notes, and snippets.

@mioe
Last active August 29, 2022 18:23
Show Gist options
  • Save mioe/f04b316a87bd0f98a75c7d0832c88087 to your computer and use it in GitHub Desktop.
Save mioe/f04b316a87bd0f98a75c7d0832c88087 to your computer and use it in GitHub Desktop.
sass - reset styles 🐣️
/* box sizing rules */
*,
*::before,
*::after
box-sizing: border-box
/* remove default padding */
ul,
ol
padding: 0
/* remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd
margin: 0
/* set core body defaults */
body
min-height: 100vh
scroll-behavior: smooth
text-rendering: optimizeSpeed
/* remove list styles on ul, ol elements with a class attribute */
ul,
ol
list-style: none
/* a elements that don't have a class get default styles */
a:not([class])
text-decoration-skip-ink: auto
/* make images easier to work with */
img
max-width: 100%
display: block
/* remove default button styles */
button
all: unset
box-sizing: border-box
cursor: pointer
&:disabled
opacity: .5
cursor: allowed
/* inherit fonts for inputs and buttons */
input,
button,
textarea,
select
font: inherit
color: inherit
&:disabled
opacity: .5
cursor: allowed
/* remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce)
*
animation-duration: 0.01ms !important
animation-iteration-count: 1 !important
transition-duration: 0.01ms !important
scroll-behavior: auto !important
@mioe
Copy link
Author

mioe commented Jun 30, 2022

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment