Win9x styling for the modern web

Navigation .retro-nav

Vertical Navigation .retro-nav-vertical

Pills Navigation .retro-nav-pills

Toolbar Navigation .retro-nav-toolbar

Icons Only Toolbar

Tabbed Navigation .retro-nav-tabbed

Underlined Navigation .retro-nav-underlined

Button Group Navigation .retro-nav-buttons

Combined with Other Styles

Utilities utilities

Atomic helpers on the same tokens as the components. retro-bg-<hue> sets the fill and its on-fill text colour, so a filled panel reads correctly in both themes from one class.

Backgrounds

Subtle tints

Text colours

primary success danger warning info teal pink lime muted

Spacing & flex

Margins and padding run 0–8 on a 0/4/8/12/16/24/32/40/48px scale.

Effects

Grid System .retro-grid

Basic Grid

Responsive Grid

Container Queries .retro-cq-*

Container Query Grid

Typography .retro-h1 … .retro-h6

Heading 1 (h1)

Heading 2 (h2)

Heading 3 (h3)

Heading 4 (h4)

Heading 5 (h5)

Heading 6 (h6)

Heading Variants

Text Utilities

Primary | Success | Danger | Warning | Info | Teal | Pink | Lime

Bold | Italic | Underline | Shadow | Outline | UPPERCASE | lowercase | capitalize each word | Monospace | Extra Small | Large | Strike

Fancy Text Styles

Rainbow Text | Gradient Text | Outline Strong | Emboss | Deboss | Multicolor Shadow | Glitch | Metallic | Fire

Retro Blockquote

"This is a retro blockquote. The only limit to our realization of tomorrow will be our doubts of today."

Retro Code Block

          
function helloWorld() {
  // This is a comment
  const message = "Hello, Win9x!";
  let count = 42;
  
  if (count > 0) {
    console.log(message);
  }
  
  return count + 1;
}

class Example {
  constructor() {
    this.name = "Example";
  }
  
  sayHello() {
    return `Hello from ${this.name}!`;
  }
}
          
        

HTML Example

          
<div class="retro-container">
  <h1 class="retro-heading-primary">Hello World</h1>
  <p class="retro-text-primary">
    This is a paragraph with primary text color.
  </p>
</div>
          
        

Retro Listbox

• Listbox Item 1
• Listbox Item 2
• Listbox Item 3
• Listbox Item 4

Inline code: npm install retrocss

Deleted text Inserted text _sub ^sup

Badges .retro-badge

Badge Variants

Badge Sizes

Special Badge Themes

Badge Usage Examples

Cards .retro-card

Lists .retro-list

Unordered List

• First item
• Second item
• Third item
  • Nested item 1
  • Nested item 2

Ordered List

1. First item
2. Second item
3. Third item
   1. Nested item 1
   2. Nested item 2

Description List

Term 1

Description for term 1

Term 2

Description for term 2

List Variants

• Bordered list item
• Another bordered item

• Striped list item
• Another striped item
• One more striped item

• Hoverable list item
• Another hoverable item

Dividers .retro-divider

Basic Dividers

Style Variants

Colored Dividers

Text Divider

Vertical Divider

Tables .retro-table

Forms .retro-input

File Upload .retro-file-upload

Tag/Chip Input .retro-tag-input

Search Bar with Suggestions .retro-search-bar

Rating Stars .retro-rating

Date / Time Picker .retro-datetime

Buttons .retro-btn

Button Variants

Button Sizes

Colored Button Sizes

Dropdown Menu .retro-dropdown

Alerts .retro-alert

Toasts RetroToast.show()

Modals .retro-modal

Modals are used to display content in a layer above the app. They are useful for confirmations, forms, or important messages.

The original demoModal is still available as well:

Progress / Loading Bars .retro-progress

Tooltips data-retro-tooltip

Position Variants

Style Variants

Component Variants modifiers

Size and layout modifiers that ship with the components above. These were in the stylesheet for several releases without appearing on any page, so nobody could find them.

Button and input sizes

Teal button

Full-width button (.retro-btn-block)

Form layouts

Progress variants

Card variants

Avatars and loaders

RC RC Loading

Modal sizes

Add .retro-modal-lg, .retro-modal-xl or .retro-modal-scroll to .retro-modal-content.

Tooltip positions and variants

Position with data-tooltip-position and colour with data-tooltip-variant — neither was documented.

Toast variants

Accordion .retro-accordion

<link rel="stylesheet" href="dist/retro.min.css">
<script src="dist/retro.min.js"></script>

npm install retrocss

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phantompixeldev/retrocss/dist/retro.min.css">
<script src="https://cdn.jsdelivr.net/npm/@phantompixeldev/retrocss/dist/retro.min.js"></script>

:root {
  --retro-primary: #0000aa;
  --retro-bg: #c0c0c0;
  --retro-border-dark: #404040;
  --retro-border-medium: #808080;
  --retro-border-light: #ffffff;
  --retro-font: 'MS Sans Serif', Arial, sans-serif;
}

Carousel / Slider .retro-carousel

←

Slide 1: Welcome to RetroCSS!

This is the first slide of the carousel. It can contain any content you want.

Slide 2: You can add any content here.

This is the second slide of the carousel. It can contain any content you want.

Slide 3: Try the arrows or dots below.

This is the third slide of the carousel. It can contain any content you want.

→

Pagination .retro-pagination

Breadcrumbs .retro-breadcrumbs

Infinite Scroll .retro-infinite-scroll