Create 8bit-like site with NES.css
Tags: html, css
Published: 2019-10-08 02:55:02

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 nostalgic-css/NES.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](https://thepracticaldev.s3.amazonaws.com/i/jdpl0wo2ovt9riztycea.gif)

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](https://thepracticaldev.s3.amazonaws.com/i/gf73zcbpni7j5xnq0ifc.png)


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

```

<a href="https://www.buymeacoffee.com/koji"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kA3wM6t6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.buymeacoffee.com/buttons/default-red.png" alt="Buy Me A Coffee" height="41" width="174" loading="lazy"></a>