Next.css Reset Module
Reset CSS Module is part of Next.css framework. This module resets default CSS styles for your Next.css project. You can use in all modern websites with module bundlers, like webpack, rollup, parcel.
How to Install
You can install with npm or yarn package managers.
npm i @nextcss/reset
yarn add @nextcss/reset
How to use
Simple import to your project, this module contains only element selector rules.
import '@nextcss/reset';
Why you should use
Some HTML Elements has a default style in browsers and some HTML Elements styled different in each browsers. This module will resets this styles.
Features
- Reset most common HTML Element styles
- Reset Outline and Tap highlighting
- Reset Drag and Drop
- Reset Pull to Refresh and Scroll Chaining
- Reset Pinch Zoom and Touch Gestures
- Set Box Sizing
- Set System Font Stack with
14px
font size and1.4
line height
What's included - TL;DR
On every HTML Elements: set border-box
as default box-sizing
, disable Drag and Drop
feature and reset outline
.
*,
:before,
:after {
box-sizing: border-box;
-webkit-user-drag: none;
outline: none;
}
Set default font-size
to 14px
, disable Tap highlighting
for mobile devices, enable Smooth font rendering
, disable Text size increase algorithm
for apple devices.
html {
font-size: 14px;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
}
Disable pinch zoom
and other touch gestures
, disable pull to refresh
, rubber banding
and scroll chaining
features, set max-width
on body
as 100 viewport width
, reset default margin
, set default line-height
and Systen Font Stack
body {
touch-action: pan-x pan-y;
overscroll-behavior: none;
max-width: 100vw;
margin: 0;
line-height: 1.4;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
Reset default margin
and font
properties on Headings and Paragraph.
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
font: inherit;
}
Fix dynamic small
tag
small {
font-size: 85%;
}
Reset color
and text-decoration
on links.
a {
color: inherit;
text-decoration: none;
}
Reset button
tag
button {
background-color: inherit;
border: 0;
color: inherit;
padding: 0;
}
Limit image width
and reset border
.
img {
max-width: 100%;
height: auto;
border: none;
}
Reset border
, shadow
, font
and set font-size
to 16px
on common input elements. 16px
font size avoid resizing viewport
on apple devices.
input,
textarea,
select {
font: inherit;
font-size: 16px;
border: 1px solid;
border-radius: 0;
background-clip: padding-box;
}
fieldset {
border: 1px solid;
}
Reset margin
, padding
and list-style
on lists.
ul,
ol {
margin: 0;
padding: 0;
list-style-type: none;
}
Reset border
of horizonal rule
hr {
border: none;
border-bottom: 1px solid;
}
Reset table
border and table head font-weight
table {
border-spacing: 0;
border-collapse: collapse;
}
th {
font-weight: inherit;
}
Reset iframe border
iframe {
border: 0;
}
Reset margin
and padding
on common HTML Elements
menu {
margin: 0;
padding: 0;
}
form,
figure,
pre,
blockquote,
dl,
dd {
margin: 0;
}
Reset font
on adrress
tag
address {
font: inherit;
}
Production build
We strongly recommend to use postcss
with autoprefixer
and postcss-purgecss
. This stack will extend the CSS rules with browser specific prefixes, like -webkit
and will remove unused styles in production build.
npm i -D postcss autoprefixer @fullhuman/postcss-purgecss
Our postcss.config.js
config. You need to configure the content
parameter for your project.
module.exports = {
plugins:
process.env.NODE_ENV === 'production'
? [
'autoprefixer',
[
'@fullhuman/postcss-purgecss',
{
content: ['./{pages,components}/**/*.{js,jsx}'],
safelist: ['html', 'body'],
defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
},
],
]
: ['autoprefixer'],
};
License
MIT License. Copyright (c) 2021 Zsolt Tovis