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

推荐字体

使用

浏览器支持