Skip to content

Latest commit

 

History

History
134 lines (93 loc) · 5 KB

README-jp.md

File metadata and controls

134 lines (93 loc) · 5 KB
Raw

NES.cssは ファミコン風(8bit ライク) なCSSフレームワークです。

Gitter Commitizen friendly

インストール

スタイル

NES.cssはnpm(推奨)、またはYarn、CDNのいずれかを介して利用できます。

パッケージマネージャを使う場合

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

私たちのpackage.jsonには、以下のキーの配下にいくつかの追加のメタデータが含まれています:

  • sass - メインのSassソースファイルへのパス
  • style - 非圧縮の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-loaderが必要です。

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

CDNを使う場合

<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 もち
韓国語 둥근모꼴
中国語 Zpix (最像素)

使い方

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>

CSSのみ

NES.cssはCSSのみで構成されており、JavaScriptには依存しません。

ブラウザサポート

NES.cssは次のブラウザの最新バージョンと互換性があります。

  • Chrome
  • Firefox
  • Safari

未確認

  • IE/Edge

コピーライトとライセンス

コードとドキュメント copyright 2018 B.C.Rikko. コードはMITライセンスの下で公開されています。ドキュメントはクリエイティブ コモンズの下で公開されています。

開発

このプロジェクトにご協力いただける場合は、すべてのコントリビュートを歓迎します。NES.cssを素晴らしいものにする方法の詳細はCONTRIBUTING.mdをご覧ください。