NES.css红白机像素风 CSS 框架-技术圈

NES.css 是一款 NES-风格(8位机) 的 CSS 框架，只需要 CSS ，不依赖其他任何 JavaScript，可以使用它实现红白机风格的按钮，字体，对话框。

安装

via package manager

npm install nes.css
# or
yarn add nes.css

AltCSS (sass, scss...)

// style.scss
@import "./node_modules/nes.css/css/nes.css"

JavaScript

// script.js
import "nes.css/css/nes.min.css";

需要安装 css 加载程序.

HTML

<!-- index.html -->
<html>
  <head>
    <link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
  </head>
  <body></body>
</html>

via CDN

<!-- non-minified -->
<link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
<!-- latest -->
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<!-- core style only -->
<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />

语言	字体
(默认)	Press Start 2P
英语	Kongtext
日语	美咲フォント
日语	Nu もち
韩语	둥근모꼴
中文	Zpix (最像素)

使用

NES.css 只提供组件，你需要定义自己的布局.

默认字体 Press Start 2P 只支持英文字符.，把这个框架与其他非英语的语言一起使用的时候,，请使用另外的字体.。

请根据这个关于 Google Fonts 的说明了解如何把它引入项目, 或者按照如下方式简单引入:

<head>
    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
    <link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
    <style>
      html, body, pre, code, kbd, samp {
          font-family: "font-family you want to use";
      }
    </style>
</head>

浏览器支持

NES.css 与如下浏览器的最新版本兼容.

Chrome
Firefox
Safari

未经测试

IE/Edge

NES.css红白机像素风 CSS 框架

安装

via package manager

via CDN

推荐字体

使用

浏览器支持