Repository files navigation

Reset CSS Module is part ofNext.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

You can install withnpm oryarn package managers.

npm i @nextcss/resetyarn add @nextcss/reset

Simple import to your project, this module contains only element selector rules.

import'@nextcss/reset';

Some HTML Elements has a default style in browsers and some HTML Elements styled different in each browsers. This module will resets this styles.

• 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 with14px font size and1.4 line height

On every HTML Elements: setborder-box as defaultbox-sizing, disableDrag and Drop feature and resetoutline.

*,:before,:after {box-sizing: border-box;-webkit-user-drag: none;outline: none;}

Set defaultfont-size to14px, disableTap highlighting for mobile devices, enableSmooth font rendering, disableText size increase algorithm for apple devices.

html {font-size:14px;-webkit-tap-highlight-color: transparent;-webkit-font-smoothing: antialiased;-webkit-text-size-adjust:100%;}

Disablepinch zoom and othertouch gestures, disablepull to refresh,rubber banding andscroll chaining features, setmax-width onbody as100 viewport width, reset defaultmargin, set defaultline-height andSysten 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 defaultmargin andfont properties on Headings and Paragraph.

h1,h2,h3,h4,h5,h6,p {margin:0;font: inherit;}

Fix dynamicsmall tag

small {font-size:85%;}

Resetcolor andtext-decoration on links.

a {color: inherit;text-decoration: none;}

Resetbutton tag

button {background-color: inherit;border:0;color: inherit;padding:0;}

Limit imagewidth and resetborder.

img {max-width:100%;height: auto;border: none;}

Resetborder,shadow,font and setfont-size to16px on common input elements.16px font size avoid resizingviewport 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;}

Resetmargin,padding andlist-style on lists.

ul,ol {margin:0;padding:0;list-style-type: none;}

Resetborder of horizonal rule

hr {border: none;border-bottom:1px solid;}

Resettable border and table headfont-weight

table {border-spacing:0;border-collapse: collapse;}th {font-weight: inherit;}

Reset iframeborder

iframe {border:0;}

Resetmargin andpadding on common HTML Elements

menu {margin:0;padding:0;}form,figure,pre,blockquote,dl,dd {margin:0;}

Resetfont onadrress tag

address {font: inherit;}

We strongly recommend to usepostcss withautoprefixer andpostcss-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

Ourpostcss.config.js config. You need to configure thecontent 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'],};

MIT License. Copyright (c) 2021 Zsolt Tovis