スタイルガイドジェネレーター

npm や CSS のコメントを使用せず、静的な HTML を読み込んで表示するだけのシンプルなスタイルガイドジェネレーターです。

※外部ファイルを読み込むのでサーバー上でしか動作しません。

ダウンロード zip

ファイル構成

index.html └─doc/ └─**.html（サイトやアプリ内で使う HTML のテンプレート） └─**.html sample/ └─css/style.css（サイトやアプリ内で使う CSS のサンプルが書かれています。index.html 内で読み込まれているので実際に使用する CSS に差し変えてください） └─js/main.js（サイトやアプリ内で使う JS のサンプルが書かれています。index.html 内で読み込まれているので実際に使用する JS に差し変えてください） assets/ └─css/ └─gd-style.css（スタイルガイドのサイドバーなどスタイルガイドのフレームとして使用する CSS） └─js/ └─gd-main.js（スタイルガイドの HTML などの読み込みを行うスタイルガイドのフレームとして使用する JavaScript） └─module/**（同上） └─class/**（同上） └─example-txt.js（スタイルガイドで使うダミーテキストのテンプレート）

使い方

基本設定

1. ZIP ファイルをダウンロードし、展開すると、上記のようなファイル構成になっています。
2. doc/ 以下に任意の名前で html ファイルを作成し、index.html にある .guide-nav__list の中の button タグのdata-url 属性に作成した html のパスを書いてください。 例えば html のファイル名が layout.html の場合は下記のようになります。

   <li><button type="button" data-url="./doc/layout.html"></button></li>

3. 基本設定は以上で終わりです。

doc/**.html の記述のルール

body の中に <div id="guide-wrap"> を追加し、HTML を追加してください。

#guide-wrap の直下にある h1 がサイドバーのボタンのラベルになります。

#guide-wrap の直下にある h2 がサイドバーのサブボタンのラベルになります。

各要素の HTML は <sg-unit class="guide-unit"> の中に書いてください。

.guide-unit の中の HTML がコードとして画面上に表示されます。

HTML 内に {ttl} {txt} {sentence} と書くと assets/js/example-txt.js の中に書いてあるテキストに置換されます。

JavaScript の追加

スタイルガイド内では、画面は別ファイルを読み込んでいるので、onload や DOMContentLoaded では HTML の要素を取得できません。

JavaScript を実行する場合は下記にように rendered イベントを使ってください。

window.addEventListener('rendered', (e) => { console.log("renderd"); });