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.

Next.css on GitHub

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 and 1.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