Brutstrap

Introduction

This CSS theme is a draft: it is considered incomplete and there are plans to add or change information contained in it.

This CSS theme assumes the reader is knows how to read cascading style sheets (CSS) and HTML.

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.

This CSS theme was written by me, emsenn, and is released for the benefit of the public under the terms included in the "License" supplement. It was made possible with financial contributions from humans like you. Please direct comments to my public inbox or, if necessary, my personal email.

This CSS theme was directly inspired or supported by the work of others. Please see the "Acknowledgements" section.

This CSS theme is implemented using the literate programming paradigm. The "software" being presented is included as sections of code, within a longer piece of prose which explains the code's purpose and usage. For a more complete explanation of my implementation of the paradigm, see "Literate Programming" in my Style Manual.

Brutstrap

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: #eee;
  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, #content {
  width: 75vw;
  max-width: 40em;
  margin: 0 auto;
  line-height: 1.6;
  margin-bottom: 8rem;
}
Footer
footer, #postamble {
  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: #3ac;
  display: inline-block;
  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;
}

State Rules

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

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;
}

Supplements

Acknowledgements

Contribute

This document was made possible with contributions from humans like you. Thank you! I currently accept contributions through the following platforms:

If there is another service through which you'd like to contribute, please send an email. Please note that in accordance with my personal directives #003 and #018, I release all useful information I create for free, so financial contributions do not entitle you to access to any "exclusive content."

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

License

Copyright 2019 emsenn

Permission is hereby granted, free of charge, to any person obtaining a copy of this document and associated media files (the "Document"), to deal in the Doftware without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Doftware, and to permit persons to whom the Doftware is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

The Document is provided "as is," without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, or noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort, or otherwise, arising from, out of or in connection with the Document or the use or other dealings in the Document.

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.4em;
}
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 auto;
  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;
}
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;
}
h2, h3, h4, h5, h6 {
  font-family: sans-serif;
  margin: 0.5em;
}
a {
  text-decoration: none;
  color: #3ac;
  display: inline-block;
  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; }
pre, .src {
  padding: 0.5em;
  border: 0.1em solid #444;
  white-space: pre-wrap;
  overflow-x: scroll;
  text-overflow: clip;
}

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>

Author: emsenn

Created: 2019-05-02 Thu 19:05

Validate