skip to content


Brutstrap is a CSS framework that I made based on "Guidelines for Brutalist Web Design", which advocates "raw content ture to its construction."


  • 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.


Not right now!


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

Document Framing


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, #postamble { padding: 1em 0; position: absolute; right: 0; bottom: 0; left: 0; }

Block Design


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

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


Date: 2021-01-28 Thu 10:37

Author: emsenn

Created: 2021-01-30 Sat 10:43