DEV Community

Cover image for 10 Retro CSS frameworks to relive your childhood
Khang
Khang

Posted on • Updated on

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)

GitHub logo nostalgic-css / NES.css

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

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

Gitter Commitizen friendly

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode
JavaScript
// script.js
import "nes.css/css/nes.min.css";
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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="
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

98.css (Demo)

GitHub logo jdan / 98.css

A design system for building faithful recreations of old UIs

98.css

npm gzip size

A design system for building faithful recreations of old UIs.

a screenshot of a window with the title 'My First VB4 Program' and two buttons OK and Cancel, styled like a Windows 98 dialog a magnified view showing pixel-perfect borders on a scrollbar and button element

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
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

BOOTSTRA.386 (Demo)

GitHub logo 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:

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

     ____  ____  ____  _____________________  ___    ____        __   _____ ____  _____
    / __ )/ __ \/ __ \/_  __/ ___/_  __/ __ \/   |  / __ \     _/_/  |__  /( __ )/ ___/
   / __  / / / / / / / / /  \__ \ / / / /_/ / /| | / /_/ /   _/_/     /_ </ __  / __ \
  / /_/ / /_/ / /_/ / / /  ___/ // / / _, _/
…
View on GitHub

Geo (Demo)

GitHub logo 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

Copyright (c) 2013 Divshot

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)

GitHub logo botoxparty / XP.css

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

XP.css

npm gzip size

A design system for building faithful recreations of old UIs.

a screenshot of a window with the title 'My First Program' and two buttons OK and Cancel, styled like a Windows XP dialog

a screenshot of a window with the title 'My First Program' and two buttons OK and Cancel, styled like a Windows 98 dialog

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="
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

PSone.css (Demo)

GitHub logo micah5 / PSone.css

🎮 PS1 style CSS Framework, inspired by NES.css

PSone.css

description

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">
Enter fullscreen mode Exit fullscreen mode

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
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

RPGUI (Demo)

GitHub logo RonenNess / RPGUI

Lightweight framework for old-school RPG GUI in web!

RPGUI

Lightweight framework for old-school RPG GUI in web!

Live examples here

Table of Contents

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!

alt tag (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 system that will cover most HTML elements.
  • Containers with several type of frames.
  • Dragging functionality.
  • Beautiful sliders and progress bars.
  • Customized cursors with 8-bit style.
  • A collection of build-in icons for rpgs.
  • Neat checkboxes and Radio buttons.
  • Styled buttons.
  • Sophisticated dropdown widget (based on <select>).
  • Pretty listbox (based on…
View on GitHub

Win95.css (Demo)

GitHub logo AlexBSoft / win95.css

Responsive Bootstrap 4 windows 95/98 theme & landing template

View on GitHub

7.css (Demo)

GitHub logo khang-nd / 7.css

A tiny CSS framework for building faithful recreations of the Windows 7 UI.

7.css

npm gzip size

A screenshot of a window with the title 'My First Program' and two buttons OK and Cancel, styled like a Windows 7 dialog

7.css is a tiny 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!</
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

Pokémon GameBoy CSS (Demo)

GitHub logo luttje / css-pokemon-gameboy

A CSS-framework based on the gameboy colour 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

  1. Copy all the files in the dist/styles directory to styles in your project

  2. Append the following include on the page where you want this style:

<link rel="stylesheet" href="./styles/css-pokemon-gameboy.css">
Enter fullscreen mode Exit fullscreen mode
  1. See the demo, index.html or .scss-files for all possible classes and effects.

Compile it yourself

Requirments

Ensure you have the Grunt CLI installed npm install -g grunt-cli

Compiling

  1. Run npm installin the root directory (the directory where package.json is located)

  2. Run grunt in the root directory to build a distribution

    -OR-

  3. Run grunt watch in the root directory to watch for changes in the src directory and automatically build new distributions.

Licenses

…

View on GitHub

Oldest comments (1)

Collapse
 
shadowtime2000 profile image
shadowtime2000 •

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

Read next

sadanandgadwal profile image

Mastering TypeScript: A Comprehensive Guide

Sadanand gadwal -

samuellubliner profile image

Next.js App Router Course

Samuel Lubliner -

herrington_darkholme profile image

Explore useEffect Alternatives: Beyond the Well-Trodden Paths

Herrington Darkholme -

itsjp profile image

Difference between Func() , ()=>Func() , {Func} , ()=>Func in JS

Jaydeep Pipaliya -