loading...

Create 8bit-like site with NES.css

kojikanao profile image Koji (he/him) 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

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="https://unpkg.com/nes.css@latest/css/nes.min.css" 

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>

Buy Me A Coffee

Posted on by:

kojikanao profile

Koji (he/him)

@kojikanao

Looking for opportunities! Software Engineer in NYC/Research Resident@NYU-ITP18-19 Mostly I work with reactjs and sometimes python. code to do something weird/useless/helpful Japanese

Discussion

markdown guide
 

sings to the tune of Mario Paint: Creative Exercise

Wow this is cool dude,
it really brings back that - NEStolgic mood,
the one we all had, when we were kids, just playin' Mario Paaaaiint-!
It was the first game on the SNES to use a mouse,
this website acts like, it's upper graphics house,
The one I'm sayin', The one I'm playin',
The one and only: Mario-Paintt-!

 

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

 
 
 

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

 
 
 

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

 

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

 

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