Mistdrop: CSS Starter

You might be working on a new website or just prototyping for fun. The default browser styles aren't there to help you. Stark white on black contrasts, minimal line and word spacing, serif fonts, inconsistencies between each browser... painful.

Instead of rewriting styles to undo the defaults, leverage a CSS starter to improve them.

Mistdrop is a tiny (50 line) stylesheet designed to upgrade the styles and normalize the experience across browsers.

Simple styles

Better Text

Text has a reduced contrast and improved spacings to optimize readability on all 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.

Demo

You can view a live demo on the Mistdrop test page.