NES.css README

The project's README from github.com/nostalgic-css/NES.css. As one markdown file: README.md.

NES.css: NES-style  CSS framework

日本語 / 简体中文 / Español / Português / Русский / Français

NES.css is a NES-style(8bit-like) CSS Framework.

Gitter Commitizen friendly

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:

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/[email protected]/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" />

Fonts

NES.css doesn't provide any fonts, but we do maintain the following list of fonts that we recommend for usage alongside the library.

Language Font
(Default) Press Start 2P
English Kongtext
Japanese 美咲フォント
Japanese Nu もち
Korean 둥근모꼴
Chinese Zpix (最像素)

Usage

NES.css only provides components. You will need to define your own layout.

The recommended font for NES.css is Press Start 2P. However, Press Start 2P only supports English characters. When you're using this framework with any language other than English, please use another font. Follow the Google Fonts instructions about how to include them, or simply include it as below:

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

CSS Only

NES.css only requires CSS and doesn't depend on any JavaScript.

Browser Support

NES.css is compatible with the newest version of the following browsers:

Untested

Code and documentation copyright 2018 B.C.Rikko. Code released under the MIT License. Docs released under Creative Commons.

Development

If you'd like to help us out with the project, we welcome contributions of all types! Check out our CONTRIBUTING.md for more details on how you can help make NES.css amazing!

NES.css (nostalgic-css/NES.css)

Searching Database…

21.8K ·GitHub
这是做什么用的?NES.css 是一个 CSS 框架,能让 HTML 组件呈现出 NES(FC 红白机)8 位复古游戏的风格,就像你的网页是老游戏机上的一款游戏。
它是带栅格和布局系统的完整框架,还是只做组件样式?只做组件样式。NES.css 只提供带样式的组件——页面布局需要你自己动手设计。
怎么把它加到我的项目里?用 npm(推荐)或 Yarn 安装,也可以完全不用包管理器,直接用 link 元素从 CDN 导入 CSS。用 Sass/SCSS 的用户可以直接导入 Sass 源码。
需要额外引入 JavaScript 才能正常工作吗?不需要。NES.css 是纯 CSS 的,没有任何运行时 JavaScript 依赖——只需加载样式表即可。唯一的例外是通过打包工具导入时,需要 css-loader。
我的文字显示不太对——这种复古风格需要专用字体吗?需要,而且字体不包含在包里:NES.css 不自带任何字体。推荐默认使用 Press Start 2P,但它只覆盖英文字符,如果要用日文、韩文或中文,建议从 README 列出的专用像素字体中选一款。
支持哪些浏览器?面向最新版的 Chrome、Firefox 和 Safari。Internet Explorer 和 Edge 未经测试。
可以免费在自己的项目里使用吗?可以。代码采用 MIT 许可证发布,文档采用 Creative Commons 许可——免费使用,包括商业用途。
我可以导入 Sass 源码来代替编译好的 CSS 吗?可以。这个包公开了主要的 Sass 源文件,用 Sass 和 SCSS 的用户可以直接引入源码,而不必使用编译好的 CSS。
我想自定义样式并从源码重新构建,该怎么做?克隆仓库后使用它自带的 npm 构建脚本:脚本会编译 Sass、添加厂商前缀并压缩 CSS。构建需要 Node 10 或更高版本。
为什么叫 NES.css?它模仿的是 NES(Nintendo Entertainment System,在日本以 Famicom 之名发售)的外观——项目描述的日文部分字面意思就是“FC 红白机风格的 CSS 框架”。
What are similar projects?css, yeti, mdb-ui-kit, Flat-UI, materialize, daisyui, weui, 98.css
Size
4.6 MB
Stars
21.8K
Age
8y
Commits · 90 Days