Skip to Content



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

License and Editorial Information

This document and the source code it contains are released under the MIT License and maintained at

Table of Contents

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.

  transition-timing-function: ease-in;
  animation-timing-function: ease-in;

These animation timings are used by the link styling rules.

Body Tag Rules

body {
  width: 70vw;
  max-width: 40rem;
  margin: 0 auto;


Main Tag Rules

main {
  padding: 0 2em 2em;

Headline Tag Rules

H1 Tag Rules
h1 {
  font-weight: normal;
  font-size: 2.4em;
  text-shadow: 0 .05em .03em rgba(68,68,68,.3);
  margin: 0;
H2 through H6 Tag Rules
h2,h3,h4,h5,h6 {
  text-align: center;
  text-shadow: 0 .1em .03em rgba(68,68,68,.3);

a {
  color: #222;
  text-decoration: underline dotted rgba(68,68,68,.6);
  text-shadow: 0 .1em .01em rgba(68,68,68,.2);
a:visited {
  color: #444;
a:hover {
  outline-style: none;
  text-decoration: underline solid;
  animation-delay: 0.3s;
  animation: animation-pulse 0.8s infinite;
a:focus {
  outline-style: none;
  text-decoration: underline solid;
  animation-delay: 0.3s;
  animation: animation-pulse-heavy 1.2s infinite;

Partials Rules

Skip-to-Content Rules

.skipToContentLink {
  opacity: 0;
  position: absolute;

State Rules

Selection Rules

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

Animation Rules

@keyframes animation-pulse {
  from, 50%,
  to { background-color: rgba(68,68,68,.2)); }
  50% { background-color: rgba(68,68,68,.1); }
@keyframes animation-pulse-heavy {
  from, 50%,
  to {
    background-color: rgba(68,68,68,.3));
  50% { background-color: rgba(68,68,68,.2); }

Demonstration HTML Document

<!DOCTYPE html>
<html xmlns="" xml:lang="en" lang="en">
    <link href="" 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.