Create Retro-futuristic Web Pages WIth Fallout.css

Fallout.css is a tiny CSS library that enables developers to create retro-futuristic style webpages reminiscent of the terminal user interface from the “Fallout” video game series.

It features a range of UI components, including lists, tabs, progress bars, notification bars, buttons, and terminals.

This design style is often referred to as a “retro-futuristic” or “terminal” interface inspired by old computer systems and command-line interfaces. It features a green monochrome color scheme, reminiscent of early computer monitors, and a text-based layout styled in a way that resembles the in-game terminals found in the “Fallout” series.

How to use it:

1. Download and include the Fallout.css stylesheet in your HTML file:

<link rel="stylesheet" href="./fallout.css" />

2. The provided demo page serves as a blueprint for constructing your Fallout-inspired webpage. Take a peek at its HTML code to understand the structure and class names used.

<main class="p-4 bg-stone-900 space-y-4 bg-terminal">
  <div class="p-1 flex gap-2">
      <h2 class="text-2xl font-bold fo-ui fg-pb fo-glow">AP 100/100</h2>
      <h2 class="text-2xl font-bold fo-ui fg-pb fo-blue fo-glow">AP 100/100</h2>
      <h2 class="text-2xl font-bold fo-ui fg-pb fo-amber fo-glow">AP 100/100</h2>
      <h2 class="text-2xl font-bold fo-ui fg-pb fo-white fo-glow">AP 100/100</h2>
  </div>
  <div class="text-lg fo-terminal bg-pb fg-pb fo-glow p-1">
      <p>Welcome to Fallout.css! This is a simple page.</p>
  </div>
  <div class="text-lg fo-terminal bg-pb fg-pb fo-blue fo-glow p-1">
      <p>Welcome to Fallout.css! This is a simple page.</p>
  </div>
  <div class="text-lg fo-terminal bg-pb fg-pb fo-amber fo-glow p-1">
      <p>Welcome to Fallout.css! This is a simple page.</p>
  </div>
  <div class="text-lg fo-terminal bg-pb fg-pb fo-white fo-glow p-1">
      <p>Welcome to Fallout.css! This is a simple page.</p>
  </div>
  <div role="tablist" class="fo-tabs fo-ui fo-glow">
      <a role="tab" class="fo-tab">Stat</a>
      <a role="tab" class="fo-tab fo-tab-active">Inv</a>
      <a role="tab" class="fo-tab">Data</a>
      <a role="tab" class="fo-tab">Map</a>
      <a role="tab" class="fo-tab">Radio</a>
  </div>
  <button class="fo-btn fo-shadow">Button</button>
  <button class="fo-btn fo-blue fo-shadow">Button</button>
  <button class="fo-btn fo-amber fo-shadow">Button</button>
  <button class="fo-btn fo-white fo-shadow">Button</button>
  <br>
  <ul class="fo-list fg-pb fo-glow">
      <li>Minigun</li>
      <li>Plasma Rifle</li>
  </ul>
  <progress
      class="w-56 fo-progress fo-shadow"
      value="5"
      max="10"></progress>
  <br>
  <progress
      class="w-56 fo-progress fo-blue fo-shadow"
      value="5"
      max="10"></progress>
  <br>
  <progress
      class="w-56 fo-progress fo-amber fo-shadow"
      value="5"
      max="10"></progress>
  <br>
  <progress
      class="w-56 fo-progress fo-white fo-shadow"
      value="5"
      max="10"></progress>
  <br>
</main>

3. Customize the appearance to fit your needs by adjusting the CSS variables in the :root selector.

:root {
  --fg-pb-green: 26, 255, 128;
  --fg-pb-blue: 46, 207, 255;
  --fg-pb-amber: 255, 182, 66;
  --fg-pb-white: 192, 255, 255;
  --fo-fg: var(--fg-pb-green);
  --fo-bg: var(--fg-pb-green), 0.25;
}