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.
Text has a reduced contrast and improved spacings to optimize readability on all devices.
Simple spacing and margins are applied to headings,
pre elements to help them stand out.
Additionally, images are updated to stop them from overflowing their containers and ruining your design.
Forms elements having their spacing improved. A simple change that improves their accessibility on smaller screens.
Mistdrop also adds some classes that you can apply to any element to modify its behavior.
.mobile_only style instructs an element to only be shown on a mobile (<768px wide) screen.
.mobile_hidden style hides an element on small screens.
You can view a live demo on the Mistdrop test page.