Brutstrap
Brutstrap is a CSS framework that I made based on "Guidelines for Brutalist Web Design", which advocates "raw content ture 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
Not right now!
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; }
Acknowledgements
- David Byrant Copeland defined “brutalist web design,” inspiring this project.
- Whoever made the "Motherfucking Website".
- Matthew Graybosch, whose variation on the motherfucking website made learning HTML and CSS seem feasible and worthwhile.