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フレームワーク
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" />
<!-- latest -->
<link href="…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>
Top comments (10)
I used this on my todo-list..which I rarely update lol --- never again listing an open todo list here hahaha
Looks pretty good!
AMAZING!!
I really like it, I'm gonna use this to create my portfolio :)
Man I'm getting old
I feel the same
Awesome!!
😱 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