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 (Famicom) 8-битной эпохи — как будто ваша веб-страница является игрой на старой консоли.
Это полноценный фреймворк с сеткой и системой раскладки или только стили для компонентов?Только стили для компонентов. NES.css даёт исключительно готовые оформленные компоненты — раскладку страницы вам придётся делать самому.
Как добавить его в свой проект?Установите через npm (предпочтительно) или Yarn, либо вообще обойдитесь без пакетного менеджера и подключите CSS с CDN через элемент link. Пользователи 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) — японская часть описания проекта дословно переводится как «CSS-фреймворк в стиле Famicom».
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