Mistdrop: Tiny CSS Reset

This is a tiny (50 line) bit of CSS you can drop onto a blank page to improve the readability and aesthetics over the default browser styling. The experience across browsers is also be normalized by overriding the unstyled defaults.

Simple styles

Better Text

Text has adjusted contrast and improved spacings to attempt to improve readability on most devices.

Cleaner Elements

Simple spacing and margins are applied to headings, blockquote, and pre elements to help them stand out. Additionally, images are updated to stop them from overflowing their containers and ruining your design.

Nicer Forms

Forms elements having their spacing improved. A simple change that improves their accessibility on smaller screens.

Convenience classes

Mistdrop also adds some classes that you can apply to any element to modify its behavior.

The .hidden class is a quick and easy way to make an element invisible. Useful when you want to toggle visibility with JavaScript.

Mobile

The .mobile_only style instructs an element to only be shown on a mobile (<768px wide) screen. Inversely, the .mobile_hidden style hides an element on small screens.