@huntoreocodes/hunter-normalize
Version:
This is a simple css normalizer that combines the popular modern-normalize package with some extra css normalizations I am including.
85 lines (72 loc) • 1.81 kB
CSS
/******************************************************
*
* Made with the help of:
* https://www.joshwcomeau.com/css/custom-css-reset/
*
* Uses modern-normalize for the bulk:
* https://github.com/sindresorhus/modern-normalize
* NPM LINK:
* https://www.npmjs.com/package/modern-normalize
*
* Permission for use was given by creators.
******************************************&&*********/
/* Handles the bulk of css normalization */
@import './modern-normalize.css';
/* Remove default padding and margins */
* {
padding: 0;
margin: 0;
}
/*
The default height of 1.15 is less accessible and harder to read than 1.5
*/
:root {
line-height: 1.5;
}
/*
Ensure the better box model is applied, while allowing tweaking if needed on elements.
*/
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/*
This makes text rendering more readable on modern hardware.
!!Only effects MacOS!!
*/
body {
-webkit-font-smoothing: antialiased;
}
/*
1) Images by default are in-line.
Typically when we want to use images, we want them to be there own block.
2) Ensures large images shrink to fit inside container.
Relevant for high-dpi mobile screens.
*/
img {
display: block; /* 1 */
max-inline-size: 100%; /* 2 */
}
/*
This prevents text from overflowing outside the container, by breaking a word
to wrap onto a new line.
*/
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/*
1) This changes the text-wrapping for paragraphs to force a final line to contain
at minimum 2 words. !!Not supported by all browsers!!
2) This makes the line wrap algorithm ensure each line of text is roughly the
same length.
*/
p /* 1 */ {
text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 /* 2 */ {
text-wrap: balance;
}