How to Use
ライブラリー導入について
各ページに記述しているコードはCSSのノーマライズやJSのグローバル変数を省いています。
使用の際は下記の [CDN,HTML,CSS,jQuery] の構成を組み込んでください。
CDN
jQueryとアイコンフォントのCDNです。
アイコンフォントはGoogle Fontsのマテリアルデザイン用のアイコンを使用しています。
※ ライブラリはコピペで使用できますが、詳しい使い方を知りたい方は下記リンクを参照してください。
HTML
<body>
</body>*-body-*の直下に+-#root-+のwrapperを設置して、その中にDOMを構成しています。
メニューオープンなどDOM全体に状況を伝えるような時に+-#root-+にclassを付与したり、一時的に保持したい値を[root]の[data]属性に付与したりしています。
+-#root-+に該当するwrapper要素がすでにある場合は、+-#root-+を対象とする箇所を適宜書き換えてください。
モーダルなどの[position: fixed;]要素は+-#root-+の外に設置しています。
CSS
ノーマライズとrootとアイコン用のCSSです。
| ノーマライズ | 一行目は基本的なノーマライズ用の記述で、*-form-*関連の記述を抜いてありますが、基本的なものと変わらないと思うので既存のノーマライズがあればそちらでも問題ないはずです。 |
|---|---|
| default | [default]のセクションがrootと大元の値など、DOM全体の基準となるCSSです。 ルート用のCSSはプライマリーカラー、セカンダリーカラーなど、必要があれば適宜変更して使用してください。 |
| font | [font]のセクションはフォントの設定をしています。 英語優先表示で日本語はヒラギノ角ゴ、メイリオを採用しています。 |
| icon | [icon]のセクションは上記CDNで読み込んでいるMUIのアイコン表示で使用しています。 |
| parameter | [parameter]のセクションはCSSライブラリで使用しているコードになります。 |
| module | [module]のセクションはJS等で汎用的に使用するCSSになります。 ※モーダル表示のoverlayなど。 |
| layout | [layout]のセクションはセクション毎のマージン等のCSSになります。 +-.sec-fulltf-+は背景に色を入れる場合に使用しています。 [width]の設定や上記背景色等は適宜変更してください。 |
jQuery
var $win = $(window);
var $bd = $('body');
var $rt = $('#root');ライブラリ内で使用しているグローバル変数です。
グローバル変数が嫌な方や既存の変数名を使用したい場合は該当箇所を変更してご利用ください。
CSSライブラリ
CSSライブラリはベースクラスとオプションクラスを付けることで設定されるようにしています。
例：文字サイズの拡大と太字）<p class="txt h1 bld">
複数のデザインを同一のタグに使用すると、サイズ指定のクラスが競合するなどしてCSSが上書きされてしまうことがあります。
その場合はクラス別にHTMLをネストするなどして設定してください。
マークアップルール（個人的な備忘録）
| サイズ指定 | 規則的なサイズ展開は[xs] [xm] [xl]で指定 規則から外れる展開は[min] [full] [large]等で指定 無制限の展開は数字で指定 |
|---|---|
| スマホ指定 | スマホ時に適用する専用のクラスは[XS_*]で指定 |
| アイコン指定 | +-.ico-mui-+ *-i-*など単体で使用、または下記2つとの住み分けで使用する +-.ico-bef-+ beforeで指定する場合 +-.ico-aft-+ afterで指定する場合 +-data-ico-+ 疑似要素でアイコンの指定に使用 |
Form ライブラリ
[<input>]などのform用HTMLは全て[.form-wrap]に格納する。この中に[label]や説明等を格納。
[.form-labeltf-txt]にタイトルを入力。[.form-meta]に説明やエラー等を格納。
不要な場合も空で設置（JSの実行でエラーが起きます）。
| JS生成コードについて | 生成用inputの属性に設定を入れることで、上記のややこしいHTMLをJSで生成します。 詳細は左メニューのJS生成コード欄を御覧ください。 |
|---|---|
| オプション | [.form-wrap]に[req]のクラス追加でrequired設定。 [.form-wrap]に[data-count]属性を付与することで文字数カウント機能をJSで追加。 |