Wipe.css

It's a CSS library to reset default styles with some opinionated changes.

Reset block margins: from every elements;
Reset the headings and set a default font style on body;
Remove unncessary styles: such as: background repeat, list styles, etc;
Reset form fields: buttons and inputs looks the same now, in so any styles;
Prevent chrome autofill style: remove that yellow box on fields;
Border-box box sizing: so that borders and paddings don't affect the set dimensions;
Responsive media: images with right size;

Install

$ yarn add wipe.css

$ npm install wipe.css

Pure HTML

<head>
  ...
  <link href="./wipe.css" rel="stylesheet" type="text/css" />
head>

Pure CSS

@import 'wipe.css';

Styled Components

import wipeCSS from 'wipe.css'
import { createGlobalStyle } from 'styled-components'

export const GlobalStyle = createGlobalStyle`
  ${wipeCSS}
`

1

fix(html): remove smooth scroll

i think as smooth scroll isn’t default on any browser — and our idea is to get rid of anything on the way — the default scroll-behavior should be set to auto (and immediately jump to the point)
2

fix: inherit color on some elements

some elements colors weren’t been wiped, and they remained with browser standards (at least on chrome)

i’ve did a little codepen proof to help guide us fixing it :tada: