TextFirst.css

A Semantic CSS Framework Against the Tri-Hard Pattern

What is the Tri-Hard Pattern?

Modern web development requires splitting simple tasks across 3+ files: HTML, CSS, JavaScript, build configs, package.json, webpack, babel, etc.

Example: A Simple Error Message

The Old Way (1 file, 5 seconds, works everywhere)

<font color="red"><b>ERROR:</b> File not found</font>

✓ Works immediately
✓ No dependencies
✓ Works in text browsers
✓ View source is readable

Tailwind (4+ files, 30 minutes setup, build process required)

<div class="bg-red-50 border border-red-400 text-red-700 px-4 py-3 rounded">
  <strong class="font-bold">ERROR:</strong> File not found
</div>

✗ Requires build process
✗ Class soup (no semantic meaning)
✗ Invisible in text browsers
✗ 3 MB framework before purging

TextFirst.css (1 file, 5 seconds, works everywhere)

<color name="error"><b>ERROR:</b> File not found</color>

✓ Semantic HTML
✓ Works in text browsers
✓ Enhanced with CSS
✓ 15 KB framework

Component Showcase

1. Status Indicators

Perfect for dashboards and system monitoring:

Web Server: Online - 99.9% uptime
Database: Online - All connections healthy
Cache Server: Degraded - Slow response times
Backup System: Offline - Maintenance mode
CDN: Unknown - Checking status...

2. Banners

Important announcements with semantic types:

Info: System maintenance scheduled for tonight at 10 PM EST. Expected downtime: 30 minutes. Warning: Your session will expire in 5 minutes. Please save your work. Error: Connection to database lost. Attempting to reconnect... Success! Your changes have been saved successfully.

3. Numbered Menus

Perfect for keyboard navigation (like DBBasic TextBrowser!):

4. Collapsible Sections

Using native HTML <details> - no JavaScript!

What is progressive enhancement?

Progressive enhancement is a design philosophy that provides a baseline experience for all users, then enhances it for users with better browsers or capabilities.

TextFirst.css embraces this! Pages work in text browsers first, then CSS makes them prettier.

View code example

function fetchPage(url) {
  const response = await fetch(url);
  const html = await response.text();
  return parseHTML(html);
}

// Works in text browsers!
// No framework needed!

Why avoid the Tri-Hard pattern?

Reduces complexity
Faster development
Easier debugging
Better accessibility
Works without build tools

5. Boxes

Frame important content:

Default Box

This is a standard box with rounded corners and blue border.

Perfect for highlighting important information!

Important Notice

This uses a double border (4px) for extra emphasis.

Use sparingly for critical information.

Soft Box

This box has extra rounded corners for a softer look.

Bold Box

This box has a bold border with shadow for maximum visibility.

6. Semantic Colors

Colors with meaning, not just decoration:

Critical error message • Success confirmation • Warning about potential issues • Informational message • Less important secondary text • Highlighted important text

7. Traditional Tags Enhanced

Old HTML tags that work everywhere, enhanced with CSS:

🎉 Centered and Colored! 🎉

Colors using <font color>:

Red • Green • Blue • Yellow • Cyan • Magenta

8. Blockquotes

The best programs are written so that computing machines can perform them quickly and so that human beings can understand them clearly. A programmer is ideally an essayist who works with traditional aesthetic and literary forms as well as mathematical concepts, to communicate the way that an algorithm works and to convince a reader that the results will be correct.
— Donald Knuth, Selected Papers on Computer Science

9. Keyboard and Sample Output

Show keyboard shortcuts and command output:

Press Ctrl + K to open the command palette.

Press H for help.

Sample output:

$ npm install textfirst-css ✓ Package installed successfully ✓ No build process required ✓ Ready to use immediately!

10. Code Blocks

Syntax-friendly code display:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <link rel="stylesheet" href="textfirst.css">
</head>
<body>
  <banner type="success">
    It just works!
  </banner>
</body>
</html>

Inline code: const x = 42;

Comparison Table

How does TextFirst.css compare to modern frameworks?

Feature	TextFirst.css	Tailwind	Bootstrap
File Size	15 KB	3 MB (before purge)	200 KB
Build Process	None	Required	Optional
Works in Text Browsers	Yes	No	No
Semantic HTML	Required	Discouraged	Optional
Learning Curve	Just HTML	High	Medium
Dependencies	Zero	PostCSS, Node	Zero
View Source Readability	High	Low	Medium

Forms Example

Enhanced form controls with zero JavaScript:

Why TextFirst.css?

Benefits

Accessible by default - Works in text browsers, screen readers, and curl
Fast - Small file size, no build process, instant loading
Maintainable - Semantic HTML is self-documenting
Future-proof - Relies on stable HTML standards, not framework trends
Developer-friendly - View source makes sense, easy to debug

Who is this for?

Terminal Users: SSH sessions, tmux, remote access - full styling in text mode
Minimalists: People who want fast, simple websites without bloat
Accessibility Advocates: Screen readers, low vision, keyboard-only navigation
Educators: Teaching web development without overwhelming students
Static Site Generators: Hugo, Jekyll, 11ty - no build step needed
Documentation Sites: Technical docs that should work everywhere

Getting Started

Installation

Just one line in your HTML:

<link rel="stylesheet" href="textfirst.css">

That's it! No package.json, no webpack, no babel, no build process.

It just works.

Basic Usage

Write semantic HTML like it's 1997, but better:

<banner type="info">
  Welcome to my site!
</banner>

<menu type="numbered">
  <li><a href="/home">Home</a></li>
  <li><a href="/about">About</a></li>
</menu>

<article>
  <h1>My Article</h1>
  <p>
    This is <color name="success">good content</color>
    that works everywhere.
  </p>
</article>