Skip to Content

Brutstrap CSS

Introduction

In this document I explain the design philosophy and implementation of my Brutstrap CSS theme: one where the webpage, as shown in the browser, is an accurate representation of the HTML document it is displaying.

Brutstrap CSS

Brutstrap is my CSS theme based on David Bryant Copeland’s “Guidelines for Brutalist Web Design,” which advocates “raw content true to its construction.”

Principles

Implementation

NOTE: Because I use Org-mode, this CSS is written with rules compatible with its naming scheme.

Document Framing

Block Design

Typography

State Rules

Class Rules

Acknowledgements

Supplements

Document History

Date Event
2018-07-09 Created first draft
2018-07-11 Added introduction for readers from Hacker News
2018-07-31 Removed introduction for Hacker News
2019-04-29 Re-implemented as a literately-programmed Org-mode file

Example Texts

Complete Stylesheet

body {
  position: relative;
  background-color: #eee;
  color: #444;
  font-family: serif;
  margin: 0 auto;
  padding-bottom: 6rem;
  min-height: 100%;
  font-size: 1.2em;
}
header, h1 {
  font-family: sans-serif;
  text-align: center;
  width: 100%;
  overflow: hidden;
  font-family: sans-serif;
}
.title { font-size: 3.2rem; }
.subtitle { font-size: 2.2rem; }
main, #content {
  width: 75vw;
  max-width: 40em;
  margin: 0 0 0 2em;
  line-height: 1.6;
  margin-bottom: 8rem;
}
footer, #postamble {
  padding: 1em 0;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
section {
  border-bottom: 0.1em solid #444;
  margin-bottom: 1em;
}
.outline-3 {
  border-bottom: 0.1rem dotted #444;
}
blockquote {
  padding: 0.5rem;
  border-left: 0.1em solid #444;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 0.1em solid #444;
}
thead { font-family: sans-serif; }
td {
  padding: 0 0.3em;
  border: 0.01em solid #444;
}
img {
  max-width: 80vw;
  vertical-align: middle;
}
pre, .src {
  padding: 0.5em;
  border: 0.1em solid #444;
  white-space: pre-wrap;
  overflow-x: scroll;
  text-overflow: clip;
}
dt {
  font-weight: normal;
  display: inline-block;
  border-bottom: 0.1rem dotted #444;
}
#text-index dt { border-bottom: none; }
h2, h3, h4, h5, h6, h7, h8, h9, h10 {
  display: block;
  font-family: sans-serif;
  margin: 0.5em;
}
h2 {
  text-align: center;
}
h2 { font-size: 2em; }
h3 {
  font-size: 1.8em;
}
h4 {
  font-size: 1.6em;
}
h5 {
  font-size: 1.4em;
  margin: 0.5em 0 0.2em 10%;
}
h6 {
  font-size: 1.2em;
  margin: 0.5em 0 0.2em 30%;
}
a {
  text-decoration: none;
  color: #3ac;
  display: inline;
  position: relative;
  border-bottom: 0.1rem dotted;
  line-height: 1.2;
  transition: border 0.3s;
}
a:hover {
  color: #5ce;
  outline-style: none;
  border-bottom: 0.1rem solid;
}
a:visited { color: #b8c; }
a:visited:hover { color: #dae; }
a:focus {
  outline-style: none;
  border-bottom: 0.1rem solid;
}
::selection { background-color: #777; color: #eee; }
a::selection { background-color: #ccc; }
.todo {
  background-color: #ddd;
  color: #333;
  font-size: .8rem;
  float: right;
}
.org-src-container + .example {
  margin-left: 8em;
}
label.org-src-name {
  margin: 0 0 0 3em;
  font-family: sans-serif;
  font-size: 1rem;
  line-height: 0;
}

Demonstration HTML

<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" type="text/css" href="./brutstrap.css">
</head>
<body>
  <header>
    <h1 role="banner">Brutstrap</h1>
    <h2>CSS for bootstrapping a brutalist website.</h2>
    <nav role="navigation">
      <ul>
	<li><a href="#principles">Principles</a></li>
	<li><a href="#usage">Usage</a></li>
	<li><a href="#features">Features</a></li>
      </ul>
    </nav>
  </header>
  <main role="main">
      <h3>Summary</h3>
      <p>
	<strong>Brutstrap</strong> is a CSS theme for building a
	brutalist website: one where the website, as shown in your
	browser, is an accurate representation of the HTML document it
	is displaying.
      </p>
    </section>
  </main>
  <footer>
    <section>
      <p>
	This is a demonstration of an HTML document and not meant for public use.
      </p>
    </section>
  </footer>
</body>
</html>

Index

Brutalism :

Brutstrap CSS :

CSS :

HTML :

Org-mode Block for Tangling as Org-Mode HTML Header

#+HTML_HEAD: <style>
#+HTML_HEAD: body {
#+HTML_HEAD:   position: relative;
#+HTML_HEAD:   background-color: #eee;
#+HTML_HEAD:   color: #444;
#+HTML_HEAD:   font-family: serif;
#+HTML_HEAD:   margin: 0 auto;
#+HTML_HEAD:   padding-bottom: 6rem;
#+HTML_HEAD:   min-height: 100%;
#+HTML_HEAD:   font-size: 1.2em;
#+HTML_HEAD: }
#+HTML_HEAD: header, h1 {
#+HTML_HEAD:   font-family: sans-serif;
#+HTML_HEAD:   text-align: center;
#+HTML_HEAD:   width: 100%;
#+HTML_HEAD:   overflow: hidden;
#+HTML_HEAD:   font-family: sans-serif;
#+HTML_HEAD: }
#+HTML_HEAD: .title { font-size: 3.2rem; }
#+HTML_HEAD: .subtitle { font-size: 2.2rem; }
#+HTML_HEAD: main, #content {
#+HTML_HEAD:   width: 75vw;
#+HTML_HEAD:   max-width: 40em;
#+HTML_HEAD:   margin: 0 0 0 2em;
#+HTML_HEAD:   line-height: 1.6;
#+HTML_HEAD:   margin-bottom: 8rem;
#+HTML_HEAD: }
#+HTML_HEAD: footer, #postamble {
#+HTML_HEAD:   padding: 1em 0;
#+HTML_HEAD:   position: absolute;
#+HTML_HEAD:   right: 0;
#+HTML_HEAD:   bottom: 0;
#+HTML_HEAD:   left: 0;
#+HTML_HEAD: }
#+HTML_HEAD: section {
#+HTML_HEAD:   border-bottom: 0.1em solid #444;
#+HTML_HEAD:   margin-bottom: 1em;
#+HTML_HEAD: }
#+HTML_HEAD: .outline-3 {
#+HTML_HEAD:   border-bottom: 0.1rem dotted #444;
#+HTML_HEAD: }
#+HTML_HEAD: blockquote {
#+HTML_HEAD:   padding: 0.5rem;
#+HTML_HEAD:   border-left: 0.1em solid #444;
#+HTML_HEAD: }
#+HTML_HEAD: table {
#+HTML_HEAD:     border-collapse: collapse;
#+HTML_HEAD:     border-spacing: 0;
#+HTML_HEAD:     empty-cells: show;
#+HTML_HEAD:     border: 0.1em solid #444;
#+HTML_HEAD: }
#+HTML_HEAD: thead { font-family: sans-serif; }
#+HTML_HEAD: td {
#+HTML_HEAD:   padding: 0 0.3em;
#+HTML_HEAD:   border: 0.01em solid #444;
#+HTML_HEAD: }
#+HTML_HEAD: img {
#+HTML_HEAD:   max-width: 80vw;
#+HTML_HEAD:   vertical-align: middle;
#+HTML_HEAD: }
#+HTML_HEAD: pre, .src {
#+HTML_HEAD:   padding: 0.5em;
#+HTML_HEAD:   border: 0.1em solid #444;
#+HTML_HEAD:   white-space: pre-wrap;
#+HTML_HEAD:   overflow-x: scroll;
#+HTML_HEAD:   text-overflow: clip;
#+HTML_HEAD: }
#+HTML_HEAD: dt {
#+HTML_HEAD:   font-weight: normal;
#+HTML_HEAD:   display: inline-block;
#+HTML_HEAD:   border-bottom: 0.1rem dotted #444;
#+HTML_HEAD: }
#+HTML_HEAD: #text-index dt { border-bottom: none; }
#+HTML_HEAD: h2, h3, h4, h5, h6, h7, h8, h9, h10 {
#+HTML_HEAD:   display: block;
#+HTML_HEAD:   font-family: sans-serif;
#+HTML_HEAD:   margin: 0.5em;
#+HTML_HEAD: }
#+HTML_HEAD: h2 {
#+HTML_HEAD:   text-align: center;
#+HTML_HEAD: }
#+HTML_HEAD: h2 { font-size: 2em; }
#+HTML_HEAD: h3 {
#+HTML_HEAD:   font-size: 1.8em;
#+HTML_HEAD: }
#+HTML_HEAD: h4 {
#+HTML_HEAD:   font-size: 1.6em;
#+HTML_HEAD: }
#+HTML_HEAD: h5 {
#+HTML_HEAD:   font-size: 1.4em;
#+HTML_HEAD:   margin: 0.5em 0 0.2em 10%;
#+HTML_HEAD: }
#+HTML_HEAD: h6 {
#+HTML_HEAD:   font-size: 1.2em;
#+HTML_HEAD:   margin: 0.5em 0 0.2em 30%;
#+HTML_HEAD: }
#+HTML_HEAD: a {
#+HTML_HEAD:   text-decoration: none;
#+HTML_HEAD:   color: #3ac;
#+HTML_HEAD:   display: inline;
#+HTML_HEAD:   position: relative;
#+HTML_HEAD:   border-bottom: 0.1rem dotted;
#+HTML_HEAD:   line-height: 1.2;
#+HTML_HEAD:   transition: border 0.3s;
#+HTML_HEAD: }
#+HTML_HEAD: a:hover {
#+HTML_HEAD:   color: #5ce;
#+HTML_HEAD:   outline-style: none;
#+HTML_HEAD:   border-bottom: 0.1rem solid;
#+HTML_HEAD: }
#+HTML_HEAD: a:visited { color: #b8c; }
#+HTML_HEAD: a:visited:hover { color: #dae; }
#+HTML_HEAD: a:focus {
#+HTML_HEAD:   outline-style: none;
#+HTML_HEAD:   border-bottom: 0.1rem solid;
#+HTML_HEAD: }
#+HTML_HEAD: ::selection { background-color: #777; color: #eee; }
#+HTML_HEAD: a::selection { background-color: #ccc; }
#+HTML_HEAD: .todo {
#+HTML_HEAD:   background-color: #ddd;
#+HTML_HEAD:   color: #333;
#+HTML_HEAD:   font-size: .8rem;
#+HTML_HEAD:   float: right;
#+HTML_HEAD: }
#+HTML_HEAD: .org-src-container + .example {
#+HTML_HEAD:   margin-left: 8em;
#+HTML_HEAD: }
#+HTML_HEAD: label.org-src-name {
#+HTML_HEAD:   margin: 0 0 0 3em;
#+HTML_HEAD:   font-family: sans-serif;
#+HTML_HEAD:   font-size: 1rem;
#+HTML_HEAD:   line-height: 0;
#+HTML_HEAD: }
#+HTML_HEAD: </style>

README

Brutstrap CSS

In this document I explain the design philosophy and implementation of my Brutstrap CSS theme: one where the webpage, as shown in the browser, is an accurate representation of the HTML document it is displaying.