Oats is a simple and neutral CSS theme created by emsenn.

Design Philosophy

The Oats theme is based on my own Brutstrap, which claims to style content as it's constructed.

However, Brutstrap is catered toward a rather stark aesthetic, to make it more readily match the brutalism advocated by David Bryant Copeland.

Oats tries to be a little softer and more friendly. While nothing about the stylesheet contradicts the brutalist priciples Copeland provides, it does a little more styling than is strictly necessary.

CSS Rules

All of Oats CSS lives in a single style-sheet, oats.css.

Base Rules

The theme's base rules are those that go with HTML tags directly.

HTML Tag Rules

Document-wide settings, including those relevant to font-styling, are declared in the html rule.

html {
  color: #444;
  background-color: #eee;

These colors are the lowest-contrast, three-digit hex codes that still pass WCAG2 AAA.

  hyphens: auto;
  font-family: sans-serif;
  letter-spacing: .03em;
  word-spacing: .05em;
  line-height: 1.4;
  font-size: 1.3rem;

Adding some spacing between letters and words helps make the document feel a little more "friendly," and makes it a little safer to use more distinctive fonts in your body text.

Body Tag Rules

body {
  margin: 0;

Header Tag Rules

header {
  overflow: hidden;
  padding: 1rem 0 3rem 0;

Main Tag Rules

  width: 85vw;
  max-width: 40rem;
  margin: -4rem auto -6rem;
  padding: 3rem 2rem 6rem;

Footer Tag Rules

footer {
  padding: 4rem 1rem 1rem;

Headline Tag Rules

H1 Tag Rules
h1 {
  font-weight: normal;
  font-size: 2.8em;
  text-shadow: .08em .03em .03em rgba(68,68,68,.3);
  margin: 0;
  padding: 0 .5em;
H2 through H6 Tag Rules
h2,h3,h4,h5,h6,h7,h8,h9 {
  text-align: center;
  font-style: bold;
  letter-spacing: 0.1em;

Link Tag Rules

a {
  color: #31B;
  text-decoration: underline dotted #4447;
  text-shadow: 0 0 .1em rgba(68,68,68,.2);
a:visited {
  color: #718;
a:hover {
  color: #42C;
  outline-style: none;
  text-decoration: underline solid #42c3;
  text-shadow: 0 0 .1em #31b7;
a:focus {
  color: #42C;
  outline-style: none;
  text-decoration: underline solid #42c3;
  text-shadow: 0 0 .1em #31b7;
a:visited:hover, a:visited:focus {
  color: #918;
  text-decoration: underline solid #9183;
  text-shadow: 0 0 .1em #7187;

Image Tag Rules

img {
  max-width: 100%;
  max-height: 20em;

Partials Rules

Skip-to-Content Rules

.skipToContentLink {
  opacity: 0;
  position: absolute;

State Rules

Selection Rules

::selection {
  color: #222;
  background-color: #777;

Demonstration HTML Document

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <link href="https://gmpg.org/xfn/11" rel="profile">
    <meta charset="UTF-8">
    <meta name="description" content="Oats is a simple and neutral CSS theme.">
    <meta name="keywords" content="oats, css, theme">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./oats.css">
    <a class="skipToContentLink" href="#content">Skip to Content</a>
    <main id="content">
        Oats is a simple and neutral CSS theme.
      <section id="features">
            <strong>Very little,</strong> honestly.

Created: 2019-04-29 Mon 01:18