DEV Community

loading...

Create 8bit-like site with NES.css

Koji (he/him)
Never lose curiosity Software Engineer in NYC/Research Resident@NYU-ITP18-19 Mostly I work with typescript, javascript, react, and python. code to do something weird/useless/helpful
Updated on ・4 min read

It's been a while since I posted the last time lol. This post will show you how to create a 8-bit like website with a CSS framework, NES.css.

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

NES.css is NES-style (8bit-like) CSS Framework. This is a great framework because it's very easy to use.

You can understand how to use NES.css here.
https://nostalgic-css.github.io/NES.css/

Alt Text

Basically, you just need to add class. If you know how to use a grid system, you can create like the following image.

Alt Text

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css"
    type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
  <link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
  <title>8bit site</title>
  <style>
    body {
      padding-bottom: 90px;
    }
    .nes-progress {
      height: 25px;
    }
  </style>
</head>
<body>
  <nav style="padding: 20px; border-bottom: 3px solid #ccc; margin-bottom: 60px;">
    <div class="container">
      <h2 style="margin-bottom: 0;">
        <i class="snes-jp-logo"></i>
        NES css test
      </h2>
    </div>
  </nav>

  <div class="container" style="margin-bottom: 50px;">
    <div class="row">
      <div class="col">
        <i class="nes-bcrikko"></i>
      </div>
      <div class="col-sm-9 col-xs-12">
        <div class="nes-balloon from-left">
          <p style="color: #ff0000"><span>Hit 5000 followers</span></p>
          <p>Thank you!!!</p>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <!-- left -->
      <div class="col-md-4 col-sm-12 col-xs-12">
        <div class="nes-container with-title">
          <h3 class="title">About me</h3>
          <div>
            <div class="lists">
              <ul class="nes-list is-circle" style="margin-bottom: 0;">
                <li>human</li>
                <li>human</li>
                <li>human</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="nes-container with-title is-dark" style="margin-top: 50px; margin-bottom: 50px;">
          <h3 class="title">Key Word</h3>
          <div>
            <i class="nes-icon is-small heart"></i>
            Test test test
            <i class="nes-icon is-small star"></i>
          </div>
        </div>
        <div class="nes-container with-title" style="margin-top: 50px; margin-bottom: 50px;">
          <div class="title">social media</div>
          <div>
            <a href="">
              <i class="nes-icon twitter"></i>
            </a>
            <a href="">
              <i class="nes-icon facebook"></i>
            </a>
            <a href="">
              <i class="nes-icon github"></i>
            </a>
            <a href="">
              <i class="nes-icon google"></i>
            </a>
            <a href="">
              <i class="nes-icon youtube"></i>
            </a>
          </div>
        </div>
      </div>
     <!-- right      -->
      <div class="col-md-8 col-sm-12 col-xs-12">
        <div class="nes-container with-title">
          <h3 class="title">Somthing</h3>
          <div class="row">
            <div class="col-sm-4 col-xs-12">something 1</div>
            <div class="col-sm-8 col-xs-12">
              <progress
                class="nes-progress is-success"
                value="65"
                max="100"
              >
              </progress>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-4 col-xs-12">something 2</div>
            <div class="col-sm-8 col-xs-12">
              <progress class="nes-progress is-error" value="25" max="100">
              </progress>
            </div>
          </div>

          <div class="row">

          </div>

          <div class="row">
            <div class="col-sm-4 col-xs-12">something 3</div>
            <div class="col-sm-8 col-xs-12">
              <progress class="nes-progress is-pattern" value="50" max="100">
              </progress>
            </div>
          </div>
        </div>

        <div class="nes-container with-title is-dark" style="margin-top: 40px;">
          <h3 class="title">Item</h3>
          <div class="row">
            <div class="col-sm-4 col-xs-12">something 1</div>
            <div class="col-sm-8 col-xs-12">
              <progress class="nes-progress" value="95" max="100">
              </progress>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-4 col-xs-12">something 2</div>
            <div class="col-sm-8 col-xs-12">
              <progress class="nes-progress is-warning" value="95" max="100">
              </progress>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-4 col-xs-12">something 3</div>
            <div class="col-sm-8 col-xs-12">
              <progress class="nes-progress is-error" value="95" max="100">
              </progress>
            </div>
          </div>
        </div>

        <div class="nes-container with-title" style="margin-top: 40px; margin-bottom: 40px">
          <h3 class="title">Room</h3>
          <div class="row">
            <div class="col-sm-4 col-xs-12">something 1</div>
            <div class="col-sm-8 col-xs-12">
              <progress class="nes-progress" value="95" max="100">
              </progress>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-4 col-xs-12">something 2</div>
            <div class="col-sm-8 col-xs-12">
              <progress class="nes-progress is-warning" value="95" max="100">
              </progress>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-4 col-xs-12">something 3</div>
            <div class="col-sm-8 col-xs-12">
              <progress class="nes-progress is-error" value="95" max="100">
              </progress>
            </div>
          </div>
        </div>

        <h3 class="topic-title">
          <i class="nes-icon star"></i> Hey hey hey
        </h3>
        <div class="nes-container is-dark">
          <div class="row">
            <div class="col-xs-2">
              <img
              src="https://github.com/BcRikko.png?size=20"
              style="width: 100%; height: auto; image-rendering: pixelated; image-rendering: -moz-crisp-edges;"
              />
            </div>
            <div class="col-xs-10">
              <h3>Hello hello hello</h3>
              <p>bye bye bye</p>
            </div>
          </div>
          <div class="row" style="margin-top: 30px;">
            <div class="col-xs-2">
              <img src="https://github.com/BcRikko.png?size=20"
                style="width: 100%; height: auto; image-rendering: pixelated; image-rendering: -moz-crisp-edges;" />
            </div>
            <div class="col-xs-10">
              <h3>Hello hello hello</h3>
              <p>bye bye bye</p>
            </div>
          </div>
          <div class="row" style="margin-top: 30px;">
            <div class="col-xs-2">
              <img src="https://github.com/BcRikko.png?size=20"
                style="width: 100%; height: auto; image-rendering: pixelated; image-rendering: -moz-crisp-edges;" />
            </div>
            <div class="col-xs-10">
              <h3>Hello hello hello</h3>
              <p>bye bye bye</p>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
  <div class="container" style="margin-top: 50px; font-size: 90%;">
    <div class="row">
      <div class="col-xs-12" style="text-align: center; color: #a9f9a9; background: #000;">
        Using NES.css 2019
      </div>
    </div>
  </div>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Buy Me A Coffee

Discussion (12)

Collapse
highcenburg profile image
Vicente G. Reyes • Edited

I used this on my todo-list..which I rarely update lol --- never again listing an open todo list here hahaha

Collapse
kojikanao profile image
Koji (he/him) Author

Looks pretty good!

Collapse
abrandao profile image
Anderson Brandão

AMAZING!!

Collapse
tayfunerbilen profile image
Tayfun Erbilen

I really like it, I'm gonna use this to create my portfolio :)

Collapse
simonholdorf profile image
Simon Holdorf

Man I'm getting old

Collapse
kojikanao profile image
Koji (he/him) Author

I feel the same

Collapse
plaoo profile image
Paolo Monni

Awesome!!

Collapse
fsuffieldcode profile image
Fabian

😱 This is so cool! I'm going to have so much fun with this!

Collapse
lawjeremy profile image
Jeremy Law

This is so cool. I'm fighting the urge to rewrite all of my apps using it!

Collapse
kojikanao profile image
Koji (he/him) Author

😂😂😂
I thought the same thing, but O recently rebuilt my portfolio, so gave up doing that lol