Khang

Posted on Jan 24, 2021 • Edited on Apr 3, 2022

10 Retro CSS frameworks to relive your childhood

#css #webdev

Prank your friends or colleagues, build a retro-looking portfolio for yourself, entertain visitors to your websites with old-school themes, or most importantly, let your creativity run wild, have fun with coding and relive your childhood with these amazing Retro CSS frameworks.

NES.css (Demo)

nostalgic-css / NES.css

NES-style CSS Framework | ファミコン風CSSフレームワーク

日本語 / 简体中文 / Español / Português / Русский / Français

NES.css is a NES-style(8bit-like) CSS Framework.

Installation

Styles

NES.css is available via either npm (preferred), Yarn, or a CDN.

via package manager

npm install nes.css
# or
yarn add nes.css

Our package.json contains some additional metadata under the following keys:

sass - path to our main Sass source file
style - path to our non-minified CSS

AltCSS(sass, scss...)

// style.scss
@import "./node_modules/nes.css/css/nes.css"

JavaScript

// script.js
import "nes.css/css/nes.min.css";

You need to install css-loader.

HTML

<!-- index.html -->
<html>
  <head>
    <link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
  </head>
  <body></body>
</html>

via CDN

Import the CSS via a <link /> element:

<!-- minify -->
<link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" /&gt
<!-- latest -->
<link href="

…

View on GitHub

98.css (Demo)

jdan / 98.css

A design system for building faithful recreations of old UIs

98.css

A design system for building faithful recreations of old UIs.

98.css is a CSS file that takes semantic HTML and makes it look pretty. It does not ship with any JavaScript, so it is compatible with your frontend framework of choice.

Be sure to check out XP.css and 7.css as well.

Installation / Usage

The easiest way to use 98.css is to import it from unpkg.

<!DOCTYPE html>
<html>
<head>
  <title>98.css example</title>
  <meta charset="UTF-8" /&gt
  <link rel="stylesheet" href="https://unpkg.com/98.css" />
</head>

<body>
  <div class="window" style="margin: 32px; width: 250px">
    <div class="title-bar">
      <div class="title-bar-text">
        My First VB4 Program
      </div>
    </div>
    <div class

…

View on GitHub

BOOTSTRA.386 (Demo)

kristopolous / BOOTSTRA.386

A vintage 1980s DOS inspired Twitter Bootstrap theme

Bootstrap/386 is a Twitter bootstrap v2/3/4/5(in progress) theme to make webpages look like they are from the gentler, less distracting time of the 1980s.

See A Demo By Clicking Here

Download for your favorite bootstrap version with all the necessary JS and CSS to get started right away:

BOOTSTRA/386 ][ (2013) demo 144KB
BOOTSTRA/386 iii (2015) 423KB
BOOTSTRA/386 4 (2020) - demo remaining issues - current build
ブートストラップ/386 5.0 (2023) - In progress

bootstrap.mp4

     ____  ____  ____  _____________________  ___    ____        __   _____ ____  _____
    / __ )/ __ \/ __ \/_  __/ ___/_  __/ __ \/   |  / __ \     _/_/  |__  /( __ )/ ___/
   / __  / / / / / / / / /  \__ \ / / / /_/ / /| | / /_/ /   _/_/     /_ </ __  / __ \ 
  / /_/ / /_/ / /_/ / / /  ___/ // / / _,

…

View on GitHub

Geo (Demo)

divshot / geo-bootstrap

A timeless Twitter Bootstrap theme built for the modern web.

Geo

Geo is a timeless Twitter Bootstrap theme built for the modern web.

Usage

Download bootstrap.css or bootstrap.min.css from /swatch. Replace the default Bootstrap stylesheet with one of these files.

To use the image backgrounds download the graphics inside /img. Graphics used on our test page can be found inside /img/test.

Customization

Geo was built with Bootswatch Swatchmaker.

To customize Geo edit /swatch/variables.less and /swatch/bootswatch.less. Refer to the Swatchmaker README for instructions to regenerate the Bootstrap stylesheet.

License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to…

View on GitHub

XP.css (Demo)

botoxparty / XP.css

A CSS framework for building faithful recreations of operating system GUIs.

XP.css

A design system for building faithful recreations of old UIs.

XP.css is an extension of 98.css. A CSS file that takes semantic HTML and makes it look pretty. It does not ship with any JavaScript, so it is compatible with your frontend framework of choice.

Installation / Usage

The easiest way to use XP.css is to import it from unpkg.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>XP.css example</title>
    <meta charset="UTF-8" /&gt
    <!-- Windows XP Theme (include only one theme at a time) -->
    <link rel="stylesheet" href="https://unpkg.com/xp.css" />

    <!-- Windows 98 Theme (include only one theme at a time) -->
    <link rel="stylesheet" href="https://unpkg.com/xp.css@0.2.3/dist/98.css" />
  </head>

  <body>
    <div class="window" style="

…

View on GitHub

PSone.css (Demo)

micah5 / PSone.css

🎮 PS1 style CSS Framework, inspired by NES.css

PSone.css

Please feel free to submit a pull request, no matter how small. I love getting them.

At the moment there's just a CSS file that you can link to:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/98mprice/PSone.css@master/PSone.min.css">

I hope to add some JS eventually to help with progressbars etc.

Reference

Container

From FF7

<div class="container">
  <label class="title">Default</label>
  <p>Kick! Punch! It's all in the mind.</p>
</div>
<div class="container dark">
  <label class="title">dark</label>
  <p>You see, the island is the site of a secret nuclear
   weapons disposal facility.</p>
</div>
<div class="container light">
  <label class="title

…

View on GitHub

RPGUI (Demo)

RonenNess / RPGUI

Lightweight framework for old-school RPG GUI in web!

Israel is under a brutal attack from Gaza on multiple fronts Hundreds of innocent civilians were murdered and kidnapped from their own homes. Hundreds are still missing.

I won't show any gore and horrific photos here. But here's some more information.

Please support Israel in these dark times.

RPGUI

Lightweight framework for old-school RPG GUI in web!

Live examples here

What is it?

This framework provide out-of-the-box GUI for web games with old-school RPG style. Once including this lib all you need to do is start adding regular html elements with RPGUI classes, and RPGUI will do all the rest!

(Image is slightly outdated.)

Key Features

The following are the key features of RPGUI:

Using RPGUI don't require coding at all! Just using css classes.
A complete and whole CSS…

View on GitHub

Win95.css (Demo)

AlexBSoft / win95.css

Responsive Bootstrap 4 windows 95/98 theme & landing page template

Win95.CSS

Make your bootstrap look like Windows 95/98.

Demo
Documentation will be soon.

Features

Windows 95 button styles
Windows 98 cards
Windows 98 icons (256-color)
Fully Responsive
Bootstrap 4

Some screenshots

How your sites can be:

Sources:

Webamp https://github.com/captbaritone/webamp
Clippy.js https://www.smore.com/clippy-js

View on GitHub

7.css (Demo)

khang-nd / 7.css

A JS-independent, tree-shakeable CSS framework for building faithful recreations of the Windows 7 UI.

7.css

7.css is a CSS framework that takes semantic HTML and styles them to the Windows 7 design It is built on top of XP.css, which is an extension of 98.CSS.

It does not ship with any JavaScript, so it is compatible with your frontend framework of choice.

📦 Installation / Usage

Directly via unpkg:

<!DOCTYPE html>
<html>
  <head>
    <title>7.css example</title>
    <meta charset="UTF-8" /&gt
    <link rel="stylesheet" href="https://unpkg.com/7.css" />
  </head>

  <body>
    <div class="window" style="margin: 32px; width: 250px">
      <div class="title-bar">
        <div class="title-bar-text">My First Program</div>
      </div>
      <div class="window-body">
        <p>Hello, world!</p

…

View on GitHub

Pokémon GameBoy CSS (Demo)

luttje / css-pokemon-gameboy

A CSS-framework based on the gameboy color version of the original Pokémon games.

Pokémon GameBoy CSS

Inspired by: https://github.com/nostalgic-css/NES.css

This is a joke CSS-framework and it is not intended for use in production. You can see a demo here. The demo performs poorly on mobile devices or small resolutions.

Using the distribution

Download the latest release
The css is in the styles directory. All other assets are inlined into the css.
The release contains a template.html to get your started.

-OR-

Append the following include on the page where you want this style:
```
<link rel="stylesheet" href="./styles/css-pokemon-gameboy.css">
```
See the demo, index.html or .scss-files for all possible classes and effects.

Compile it yourself

Compiling

Start a terminal/command prompt in the root directory of this repository
Run npm install to install the dependencies
To build the demo run npm run build to build the distribution files to the dist directory (preview the demo with npm run…

View on GitHub

Top comments (1)

shadowtime2000 • Jan 24 '21

xterm is also a retro CSS framework except it is a lot more than a CSS framework

NES.css (Demo)

nostalgic-css / NES.css

NES-style CSS Framework | ファミコン風CSSフレームワーク

Installation

Styles

via package manager

AltCSS(sass, scss...)

JavaScript

HTML

via CDN

98.css (Demo)

jdan / 98.css

A design system for building faithful recreations of old UIs

98.css

Installation / Usage

BOOTSTRA.386 (Demo)

kristopolous / BOOTSTRA.386

A vintage 1980s DOS inspired Twitter Bootstrap theme

See A Demo By Clicking Here

Download for your favorite bootstrap version with all the necessary JS and CSS to get started right away:

Geo (Demo)

divshot / geo-bootstrap

A timeless Twitter Bootstrap theme built for the modern web.

Geo

Usage

Customization

License

XP.css (Demo)

botoxparty / XP.css

A CSS framework for building faithful recreations of operating system GUIs.

XP.css

Installation / Usage

PSone.css (Demo)

micah5 / PSone.css

🎮 PS1 style CSS Framework, inspired by NES.css

PSone.css

Reference

Container

RPGUI (Demo)

RonenNess / RPGUI

Lightweight framework for old-school RPG GUI in web!

RPGUI

Table of Contents

What is it?

Key Features

Win95.css (Demo)

AlexBSoft / win95.css

Responsive Bootstrap 4 windows 95/98 theme & landing page template

Win95.CSS

Sponsored by

Features

Some screenshots

How your sites can be:

Sources:

7.css (Demo)

khang-nd / 7.css

A JS-independent, tree-shakeable CSS framework for building faithful recreations of the Windows 7 UI.

7.css

📦 Installation / Usage

Pokémon GameBoy CSS (Demo)

luttje / css-pokemon-gameboy

A CSS-framework based on the gameboy color version of the original Pokémon games.

Pokémon GameBoy CSS

Using the distribution

Compile it yourself

Compiling

Read next

What Do You Think About Feature-Sliced Design (FSD)?

Easy Animation with Alpine.js

Why Code Reuse is Important in the Age of AI

State of JS 2024