早速ですが、こちらのデモをご覧ください。
装飾的なCSSは一切かかずに、すべてNES.cssというライブラリのみで装飾しています。
(演出として、タイピングエフェクト部分はTyped.jsというJSライブラリを使っています)
デモ以外にも、チェックボックスやリスト、テーブルなど基本的なHTML要素のスタイルはそろっています。
詳しくは公式サイトをご覧ください。
作者は日本人です。作者自身の紹介記事はこちらです。
ページの
内を編集できる場合は、こちら<link href="https://unpkg.com/nes.css@2.2.0/css/nes.min.css" rel="stylesheet" />インストールします。
npm install nes.css
# or
yarn add nes.csscss-loaderが設定されている場合は、JSファイルでcssをインポート
import "nes.css/css/nes.css";scssの場合は、scssファイル内でインポートします。
@import "~nes.css/scss/nes.scss";英語のレトロフォントはGoogle Fontsにあるのですぐ使えますが、
日本語を使う場合は、別途サーバーなどにWebフォントを準備する必要があります。
大抵のフォントファイルはTTF形式で配布されているので、WOFFコンバータなどを使ってEOT, WOFF形式のWebフォントを生成し、サーバーに配置してCSSから読み込みましょう。この記事ではその方法は割愛します。
dialogにはhtmlの<dialog>要素が使われているため、デフォルトだと対応しているブラウザしか動きません。
JSとCSSの２つのpolyfillファイルのimportが必要です。
CDNの場合は以下を<head>タグ内で読み込みましょう
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.4.9/dialog-polyfill.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.min.js"></script>NES.cssはあくまでウィンドウやボタンなどの単体コンポーネントの装飾スタイルのみ提供します。
デモのコードもそうですが、Bootstrapやtailwindcssなどと組み合わせることにより、CSSは書かずに使うことができます。
Bootstrapではお馴染みのカラー、Primary, Info, Danger, Warn, Successが用意されています。
prefixとしてis-primaryといったようにis-***がつきます。
暗くしたい場合はis-dark、丸みをもたせる場合はis-roundedとなります。
とてもシンプルです。
趣向性が高い分、使い所はけっこう限られていますが、なんといっても見た目がかわいいので個人的にはうまく使っていきたいところです。