Brutalist CSS & Lightweight Styling

This document details the minimal CSS paradigms and presentational rules used across bbsys.net. Our goal is to maintain a stark, functional, and brutalist aesthetic while keeping style definitions to near-zero bytes. Every rule below is deliberate. Nothing is decorative.

Styling Principles & Design Rules:

Browser Standard Defaults: Rely on native browser user-agent stylesheets for typography, link colours, and margins whenever possible.
Embedded Minimal Stylesheets: Use small inline <style> blocks to define layout and spacing, eliminating render-blocking external HTTP requests.
System Monospace & Sans-Serif Fonts: Use default system fonts to avoid flash of unstyled text (FOUT) and eliminate font file downloads completely.
High Contrast Palette: Enforce pure black text on white backgrounds with traditional blue and purple hyperlink states for maximum visual clarity.

Complete CSS Snippet

The following is the complete, drop-in CSS block used across all pages on bbsys.net. Copy it into any project. Every rule is commented with its purpose.

/* bbsys.net brutalist base stylesheet
 * Total weight: ~380 bytes minified
 * Zero external dependencies
 * Compatible with all modern browsers and Lynx/Links/w3m
 */

/* Prevent mobile browsers from inflating base font size.
 * 16px is the minimum for comfortable reading on all screens.
 * Also enforces consistent line spacing for scanability. */
body {
    font-size: 16px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Force images to scale down on narrow viewports
 * while maintaining their aspect ratio. Prevents
 * horizontal scroll on mobile devices. The browser
 * will compute the correct height automatically. */
img {
    max-width: 100%;
    height: auto;
}

/* Allow preformatted blocks and inline code to scroll
 * horizontally on narrow screens instead of breaking
 * the page layout. overflow-x: auto shows a scrollbar
 * only when the content actually overflows. max-width
 * prevents the element from exceeding its container. */
pre, code {
    overflow-x: auto;
    max-width: 100%;
}

/* Optional: uncomment the block below to enforce
 * a max content width on wide screens for readability.
 * 65 characters per line is the typographic optimum
 * for sustained reading. */
/*
body {
    max-width: 65ch;
    margin: 0 auto;
    padding: 1em;
}
*/

Usage Notes

To use this stylesheet, embed it in the <head> of your HTML 3.2 document:

<style>
body { font-size: 16px; line-height: 1.5; word-wrap: break-word; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; }
pre, code { overflow-x: auto; max-width: 100%; }
</style>

This eliminates all external HTTP requests for stylesheets. The total inline cost is approximately 180 bytes uncompressed, well within a single TCP segment.

For projects requiring additional layout rules, extend this base block by appending rules inside the same <style> element. Never split styles across multiple <style> blocks or external files unless the project specifically requires it for caching reasons.

Navigation & Specification Index: