Pattern Library Project

Presentation on theme: "Pattern Library Project"— Presentation transcript:

1 Pattern Library Project
沖縄科学技術大学院大学 Okinawa Institute of Science and Technology Graduate University Pattern Library Project 構成仕様書 2017年8月7日

2 OIST Pattern Libraryの基本仕様
OIST Pattern Library Project Specification OIST Pattern Libraryの基本仕様 2017/03/16 OIST Pattern Libraryの基本仕様 patternlab.io < のMustache Editionを元にして制作。 Libraryのナビゲーション、レイアウト、各種機能もpatternlab.ioのそれに準じる。 patternlab.ioの基本レイアウト Navigation (Atoms〜Pages) ページ幅の切り替え機能 その他の機能 elementの説明 element

3 Pattern_Definition_Documentの内容の反映
OIST Pattern Library Project Specification Pattern_Definition_Documentの内容の反映 2017/03/16 Pattern_Definition_Documentの内容の反映。 ナビゲーションへの反映 Categoryをナビゲーションの親要素に、 elementをナビゲーションの子要素に反映。 Pattern_Definition_Document

4 Pattern_Definition_Documentの内容の反映
OIST Pattern Library Project Specification Pattern_Definition_Documentの内容の反映 2017/03/16 Pattern_Definition_Documentの内容の反映。 各エリアへの反映 element名称 説明と使用方法 HTMLソースはPattern Library開発の際に検討。 このelementを構成するelement このelementが適用されるelement SampleはPatten Library開発の際に検討。 Pattern_Definition_Document

5 Markup and Stylesheet Guidelines
OIST Pattern Library Project Specification Markup and Stylesheet Guidelines 2017/03/16 Markup and Stylesheet Guidelines コーディング全般 ディレクトリ構成 patternlab.ioのディレクトリ構成を基本とする。 ディレクトリの追加や、変更をする場合の基本ルールを開発フェーズにおいて検討し策定すること。 ファイル名・ディレクトリ名の命名規則 開発フェーズにおいて命名規則を定めること。 動作検証ブラウザ PC IE11以降 Microsoft Edge Google Chrome 開発時の最新版 Mozilla Firefox 開発時の最新版 Safari 開発時の最新版 Mobile iOS Safari 9.x 以降 （iOS 9 以降） Android 4.4.x 以降 標準ブラウザ Android 4.4.x 以降 Chrome HTMLコーディング 基本ルール HTML5にて記述すること。 セマンティックな記述を原則とし、「見た目」ではなく「意味」に紐付いたマークアップやクラス名を意識すること。 アクセシビリティ WCAG2.0のレベルAAに準拠すること。 バリデーション 納品前の HTML ファイルはThe W3C Markup Validation Serviceによるチェックを行うこと。 特にHTMLタグの閉じ忘れミスを避ける。 CSSコーディング CSSセレクタの命名規則はBEMの概念を採用する。 スタイル記法はSassのscss記法で記述する。