NES.cssは ファミコン風(8bit ライク) なCSSフレームワークです。
NES.cssはnpm(推奨)、またはYarn、CDNのいずれかを介して利用できます。
npm install nes.css
# or
yarn add nes.css
私たちのpackage.json
には、以下のキーの配下にいくつかの追加のメタデータが含まれています:
sass
- メインのSassソースファイルへのパスstyle
- 非圧縮のCSSへのパス
<link />
要素を使ってCSSをインポートする:
<!-- 圧縮版 -->
<link href="https://unpkg.com/[email protected]/css/nes.min.css" rel="stylesheet" />
<!-- 最新版 -->
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<!-- コアスタイルのみ -->
<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
NES.cssはいかなるフォントも提供していませんが、ライブラリと一緒に使用をお勧めするフォントリストを整備しています。
言語 | フォント |
---|---|
(デフォルト) | Press Start 2P |
英語 | Kongtext |
日本語 | 美咲フォント |
日本語 | Nu もち |
韓国語 | 둥근모꼴 |
NES.cssはコンポーネントのスタイルのみを提供しています。レイアウトはみなさんが好きなように定義してください。
NES.cssの推奨フォントはPress Start 2Pです。ただし、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はCSSのみで構成されており、JavaScriptには依存しません。
NES.cssは次のブラウザの最新バージョンと互換性があります。
- Chrome
- Firefox
- Safari
未確認
- IE/Edge
コードとドキュメント copyright 2018 B.C.Rikko. コードはMITライセンスの下で公開されています。ドキュメントはクリエイティブ コモンズの下で公開されています。
このプロジェクトにご協力いただける場合は、すべてのコントリビュートを歓迎します。NES.cssを素晴らしいものにする方法の詳細はCONTRIBUTING.md
をご覧ください。