I’ve just begun teaching myself about website development, but I’m already beginning to form opinions:

If you’re going to release your CSS stylesheet(s) as a theme, intended for use on more than a single website, you should prioritize following industry standards and guidelines. I understand, for a single site that might get a hundred visitors, make things pretty however works.

But if you intend to distribute the theme, or use it on a site of any popularity, you need to think about how that amplifies any shortcut or oversight you’ve made.

I started thinking about this when learning to use the [Gutenberg static site generator](https://getgutenberg.io) and looking at the themes available for it. (And later, for Hugo and Jekyll.)

A lot of them are really bad in this regard. Many don’t use semantic tags like <header> and <section>

Frankly, I don’t see the excuse. It’s trivial to type id=”{{page.slug}}” or add in conditionals for ograph data. Just… do it. I’m a novice, and I am.

I’m on a rant now so just ignore me if you want, but for real, no one with their priorities straight gives a shit if your website builds in 200ms or 2 seconds. They don’t even really know what “build” means. They’ll give you the inch of agreeing to use markdown to write their pages. They’ll even learn to do weird {{ shortcodes }}. But then you have to make sure their images and descriptions show up right on Facebook shares, and they can drop in their SaaSy widgets.

This is why I’m so in love with Netlify at the moment – I haven’t been using them long enough and I’m too ignorant to know about the tech, but their marketing really does a good job of hitting the market’s pain points and resolving them. And what they’re offering isn’t much different than what a bunch of other folk offer. But it’s different enough that they just fit into the market better.

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

Principles

  • The website people see is the website in the HTML file. As David Byant Copeland says in his definition, brutalist websites should be “raw content, true to [their] construction.” Here, that means the content is represented as a single column, flowing left to right and top to bottom.
  • Only links, inputs and buttons should respond to interaction. A website should allow two points of interaction: a hyperlink that brings you to a destination, and form which submits information to a server. Those elements, and only those elements, should respond to being clicked, focused, or hovered-over.
  • Components should be named what they are. Classes should be named what they are, not what they’re for.
  • Design should be helpful. Styling should be to help reinforce the context that your content has.

Usage

Brutstrap‘s stylesheet is available at ./build/brutstrap/brutstrap.css, but please don’t hotlink to it. You can also view the stylesheet under the “Complete Stylesheet” section.

Implementation

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

Document Framing

Body
body {
  position: relative;
  background-color: ;
  color: #444;
  font-family: serif;
  margin: 0 auto;
  padding-bottom: 6rem;
  min-height: 100%;
  font-size: 1.4em;
}
Header & Title
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; }
Content Container
main,  {
  width: 75vw;
  max-width: 40em;
  margin: 0 auto;
  line-height: 1.6;
  margin-bottom: 8rem;
}
Footer
footer,  {
  padding: 1em 0;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

Block Design

Section
section {
  border-bottom: 0.1em solid #444;
  margin-bottom: 1em;
}
Blockquote
blockquote {
  padding: 0.5rem;
  border-left: 0.1em solid #444;
}
Table
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;
}

Typography

Headlines
h2, h3, h4, h5, h6 {
  font-family: sans-serif;
  margin: 0.5em;
}
Links
a {
  text-decoration: none;
  color: ;
  display: inline-block;
  position: relative;
  border-bottom: 0.1rem dotted;
  line-height: 1.2;
  transition: border 0.3s;
}
a:hover {
  color: ;
  outline-style: none;
  border-bottom: 0.1rem solid;
}
a:visited { color: ; }
a:visited:hover { color: ; }
a:focus {
  outline-style: none;
  border-bottom: 0.1rem solid;
}

State Rules

Selection Rules
::selection { background-color: #777; color: ; }
a::selection { background-color: ; }

Class Rules

Code Block Rules
pre, .src {
  padding: 0.5em;
  border: 0.1em solid #444;
  white-space: pre-wrap;
  overflow-x: scroll;
  text-overflow: clip;
}

Acknowledgements