Wipe.css - a CSS library to reset default styles with some opinionated changes

  • By Danilo Woznica
  • Last update: Jun 21, 2022
  • Comments: 2

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

or

$ npm install wipe.css

How to Use

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}
`

Based on:

sanitize.css

normalize.css

Github

https://github.com/danilowoz/wipe.css

Comments(2)

  • 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: