Create 8bit-like site with NES.css

#html #css

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.

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

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/

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

<!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>