Brutalist CSS & Lightweight StylingThis 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. - Default Serif Font: Use the browser's own Times New Roman or Times 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 base CSS block used on every page on bbsys.net. Copy it into any project. Every rule is commented with its purpose. Two pages (B2/Post and B2/Domains) append a few extra rules for their notices and table.
/* bbsys.net base stylesheet - 250 bytes, no external dependencies. */
/* Typography. 16px is a comfortable minimum on all screens, and
* overflow-wrap stops long words and URLs from forcing horizontal
* scroll on narrow screens. */
body { font-family: "Times New Roman", Times, serif; font-size: 16px; line-height: 1.5; overflow-wrap: break-word; }
/* Scale images down on narrow viewports, keeping the aspect ratio. */
img { max-width: 100%; height: auto; }
/* Let code blocks scroll sideways instead of breaking the layout. */
pre { overflow-x: auto; }
/* Skip link: hidden off-screen until it receives keyboard focus. */
#skip { position: absolute; left: -999px; }
#skip:focus { left: 0; }
Usage Notes
To use this stylesheet, embed it in the <head> of your HTML document, without the comments:
<style>
body { font-family: "Times New Roman", Times, serif; font-size: 16px; line-height: 1.5; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; }
pre { overflow-x: auto; }
#skip { position: absolute; left: -999px; }
#skip:focus { left: 0; }
</style>
This eliminates all external HTTP requests for stylesheets. The inline cost is 250 bytes uncompressed.
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: