drab.css

drab.css

An extremely boring set of CSS. If you have a page of basic, unstyled HTML, and want to do almost no work, just pop this in.

<link rel="stylesheet" href="https://unpkg.com/drab.css/css/drab.min.css">

See a demo.

Goals

• Minimum number of changes on top of normalization.
• No classes.
• Use styles that are on ≥90% of websites.

Changes

In an effort reduce the count of changes, here is a listing of all the significant changes on top of normalize.

Global

• Limit width on body so text is easier to read.
• Standardize line-height and font-size.
• Standardize focus states.
• Round corners. *
• Lighten text color slightly.
• Use the same border color everywhere.

Block

• Adjust headers for 8px rhythm.
• Tighten left on lists.
• Add a left border to blockquote.
• Adjust blockquote margin for 8px rhythm.
• Adjust figure margins for 8px rhythm.
• Constrain image and iframe to width to body.
• Update progress height to 8px rhythm.
• Adjust hr margin for 8px rhythm.
• Make summary look easier to click. *
• Increase whitespace around header, section, and footer. *
• Update progress colors. *

Inline

• Update small and monospace font size for 8px rhythm.
• Make strikethroughs more obvious.
• Adjust link color, removing visited color.
• Update mark colors.

Form

• Constrain form to body width.
• Remove shadow on iOS.
• Lighten disabled.
• Use the same border-width on form.
• Add a little padding to input and button.
• Update button colors.
• Block-level labels. *

Table

• Use padding not border-spacing on tables.
• Align everything left in table cells by default.
• Add horizontal rules to tables.

* – These styles are a bit more opinionated and would be outside (3) above.