Last active
March 17, 2023 13:45
-
-
Save clairechabas/410f163cd8b714ea6b8b1e5ce38d89ab to your computer and use it in GitHub Desktop.
CSS Init - A global styles initializer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* --- CSS Init --- | |
* This CSS Init is inspired by | |
* Josh Comeau's global styles: | |
* https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles | |
* and pieces of Andy Bell's Modern CSS Reset: | |
* https://piccalil.li/blog/a-modern-css-reset/ | |
*/ | |
/* Use a more-intuitive box-sizing model. */ | |
*, | |
*::before, | |
*::after { | |
box-sizing: border-box; | |
} | |
/* | |
* Remove default margin and have nicely drawn overlines and | |
* underlines when they pass over glyph ascenders and descenders. | |
*/ | |
* { | |
margin: 0; | |
text-decoration-skip-ink: auto; | |
} | |
/* Allow percentage-based heights in the application. */ | |
html, | |
body { | |
height: 100%; | |
} | |
/* Smoothing scrolling */ | |
html:focus-within { | |
scroll-behavior: smooth; | |
} | |
/* | |
* Have the body fill the viewport even when empty, | |
* add accessible line-height and improve text rendering. | |
*/ | |
body { | |
min-height: 100vh; | |
line-height: calc(1em + 0.5em); | |
-webkit-font-smoothing: antialiased; | |
} | |
/* Improve media defaults. */ | |
img, | |
picture, | |
video, | |
canvas, | |
svg { | |
display: block; | |
max-width: 100%; | |
} | |
/* Remove built-in form typography styles. */ | |
input, | |
button, | |
textarea, | |
select { | |
font: inherit; | |
} | |
/* Avoid text overflows. */ | |
p, | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
overflow-wrap: break-word; | |
} | |
/* | |
* Create a root stacking context | |
* IDs are those used on the first div inside body | |
* in Create React App and Next.js. | |
* Replace with yours. | |
*/ | |
#root, | |
#__next { | |
isolation: isolate; | |
} | |
/* | |
* Remove list styles on ul, ol elements with a list role. | |
* Background for this rule: | |
* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html | |
*/ | |
ul, | |
ol { | |
list-style: none; | |
} | |
/* | |
* Remove all animations and transitions for | |
* people who prefer not to see them. | |
*/ | |
@media (prefers-reduced-motion: reduce) { | |
html:focus-within { | |
scroll-behavior: auto; | |
} | |
*, | |
*::before, | |
*::after { | |
animation-duration: 0.01ms !important; | |
animation-iteration-count: 1 !important; | |
transition-duration: 0.01ms !important; | |
scroll-behavior: auto !important; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment