Unstyle CSS - Forget inconsistencies, let us start with a blank slate.

Related tags

CSS css-unstyle
Overview

unstyle.css

Specialised stylesheet for removing user agent styles.

For a demo against the HTML5 Kitchen Sink: http://codepen.io/nexii/pen/WwQXZe?editors=1100

Install

  1. Download unstyle.css
  2. Link as first stylesheet:
<link rel="stylesheet" href="css/unstyle.css">

Why?

I believe that by starting from scratch, a blank canvas, we can be free to style the web without the burden of legacy.

As web developers we constantly try to layer our own baseline on the web. Having worked on many lightweight websites and webapps I found however being able to start from ground zero, without useragent styles dictating the baseline, I was able to prototype faster and also build more maintainable websites.

What makes this different from Reset or Normalize?

Rather than serving a baseline or working around inconsistencies, this stylesheet instead seeks to undo all historical legacy browser styles. Giving you a clean slate, so that for example <h1>, <h2>, <h3>, etc, behave and look like a margin-free <p>.

This allows you to build up a website from scratch, creating your own definitions and style guides rather than layering ontop of an existing and vague baseline defined by the accidents of history.

Unlike reset/normalize which seek to remove or stabilise browser inconsistencies/styling, unstyle.css instead:

  • fights back against user agent styling opinions
  • unstyling elements down to barebones

Thus the goal of unstyle.css is to:

  • remove user agent opinion
  • give you peace of mind

Contributing

If you feel something is off, feel free to fire an issue.

Pull Requests are welcome. However if I can't pull it (e.g. doesn't match goals), I encourage you to have your own fork :)

This sounds great but what are the gotchas?

It is not all-encompassing, I had to skip input and other form unstyling as there are harsh browser limitations with CSS on those, which would otherwise make unstyle.css too opinionated by itself.

Thus I leave it up to you to style:

  • <input>, <textarea>, <select> and all other form elements

Additionally the intended browser support is:

  • Modern browsers (Chrome, Firefox, Safari)
  • iOS5+
  • IE7+
  • Android 4+

Browers outside that may not be fully unstyled.

I (Martin Pitt) have however used it in many real world production projects and it has served me well.

Critical feedback/critique is welcome.

You might also like...

Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

Dec 13, 2022

Easily create css variables without the need for a css file!

Tailwind CSS Variables This plugin allows you to configure CSS variables in the tailwind.config.js Similar to the tailwindcss configurations you are u

Dec 22, 2022

Cooltipz.css - A highly customisable, minimal, pure CSS tooltip library

Cooltipz.css - A highly customisable, minimal, pure CSS tooltip library

Cooltipz.css - Cool tooltips Cool customisable tooltips made from pure CSS Lightweight • Accessible • Customisable • Simple Cooltipz.css is a pure CSS

Dec 24, 2022

micro-library for CSS Flexbox and CSS Grid

SpeedGrid micro-library for CSS Flexbox and CSS Grid Overview SpeedGrid dynamically generates inline CSS by specifying the class name. Easy maintenanc

Mar 26, 2022

Data-tip.css - Wow, such tooltip, with pure css!

Notice: hint.css has been much better since I complained about it months ago, so try out its new features instead of this one! data-tip.css Wow, such

May 26, 2021

Tiny CSS framework with almost no classes and some pure CSS effects

Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

Dec 10, 2022

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Jan 1, 2023

Modern CSS framework based on Flexbox

Modern CSS framework based on Flexbox

Bulma Bulma is a modern CSS framework based on Flexbox. Quick install Bulma is constantly in development! Try it out now: NPM npm install bulma or Yar

Dec 31, 2022

A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Dec 30, 2022
Owner
Martin "Nexii" Pitt
London based Web Developer with a passion for humanity, technology & game development. I want a better world. I hope someday you'll join us.
Martin
A web app landing page theme created by Start Bootstrap

Start Bootstrap - New Age New Age is a web app landing page theme for Bootstrap created by Start Bootstrap. Preview View Live Preview Status Download

Start Bootstrap 996 Dec 26, 2022
A simple, one page, Bootstrap HTML website template created by Start Bootstrap

Start Bootstrap - One Page Wonder One Page Wonder is a basic one page template for Bootstrap created by Start Bootstrap. Preview View Live Preview Sta

Start Bootstrap 327 Dec 18, 2022
A shop homepage Bootstrap HTML template created by Start Bootstrap

Start Bootstrap - Shop Homepage Shop Homepage is a basic HTML online store homepage template for Bootstrap created by Start Bootstrap. Preview View Li

Start Bootstrap 390 Jan 1, 2023
A Bootstrap HTML business homepage template created by Start Bootstrap

Start Bootstrap - Business Frontpage Business Frontpage is a basic business website template for Bootstrap created by Start Bootstrap. Preview View Li

Start Bootstrap 181 Nov 28, 2022
A Bootstrap HTML homepage template with feature boxes - created by Start Bootstrap

Start Bootstrap - Heroic Features Heroic Features is a multipurpose HTML template for Bootstrap created by Start Bootstrap. Preview View Live Preview

Start Bootstrap 160 Nov 27, 2022
Reseter.css - A Futuristic CSS Reset / CSS Normalizer

Reseter.css A CSS Reset/Normalizer Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all

Krish Dev DB 1.1k Jan 2, 2023
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
Low-level CSS Toolkit – the original Functional/Utility/Atomic CSS library

Basscss Low-level CSS toolkit – the original Functional CSS library https://basscss.com Lightning-Fast Modular CSS with No Side Effects Basscss is a l

Basscss 5.8k Dec 31, 2022
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023
CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors

Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo

FrontAid CMS 104 Dec 8, 2022