1. Pattern Library Project
沖縄科学技術大学院大学
Okinawa Institute of Science and Technology Graduate University
Pattern Library Project
Technical Specification Document
2017年8月7日

2. OIST Pattern Library Usage Guidelines
OIST Pattern Library Project
Specification
OIST Pattern Library Usage Guidelines
2017/03/16
OIST Pattern Library Usage Guidelines
Create the Pattern Library using the patternlab.io < Mustache Edition.
Create the navigation, layout and functions for the Pattern Library in the same format as patternlab.io.
patternlab.io Standard Layout
Navigation (Atoms〜Pages)
Page Width Adjustment
Other Settings
Element Explanation
Element

3. A Visual Representation of Pattern_Definition_Document Contents
OIST Pattern Library Project
Specification
A Visual Representation of Pattern_Definition_Document Contents
2017/03/16
A Visual Representation of Pattern_Definition_Document Contents
Categories and Elements represented as navigation.
The fact that the elements are nested within the categories
will be reflected in the design.
Pattern_Definition_Document

4. A Visual Representation of Pattern_Definition_Document Contents
OIST Pattern Library Project
Specification
A Visual Representation of Pattern_Definition_Document Contents
2017/03/16
A Visual Representation of Pattern_Definition_Document Contents
A Representation of Each Area
Element Name
Explanation and Use
The HTML source will be discussed during the development of the Pattern Library.
The elements that make up this element.
The elements that use this element.
Samples will be discussed during the development of the Pattern 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
General Coding Guidelines
Directory Organization
Use the patternlab.io directories as a foundation.
Basic rules for adding to and changing the directories will be considered and decided on in the development phase.
Naming Conventions for Files and Directories
Naming Conventions will be established during the development phase.
Browsers for Behavior Inspection PC
IE11 and above
Microsoft Edge
Google Chrome (Latest version at the time of development)
Mozilla Firefox (Latest version at the time of development)
Safari (Latest version at the time of development)
Mobile
iOS Safari 9.x and above （iOS 9 and above）
Android 4.4.x and above (standard browser)
Android 4.4.x and above (Chrome)
HTML Coding
Basic Rules
Use HTML5 when coding.
In principle use semantic HTML5, and make sure that not only is it visually correct, but that the related markup and class names also make sense.
Accessibility
The site should conform with the AA level of the WCAG2.0.
Validation
Before releasing it, check the HTML files using the The W3C Markup Validation Service.
Take special care to avoid forgetting to close HTML tags.
CSS Coding
Use the BEM methodology for the CSS selector naming convention.
Use the SCSS notation of Sass when coding.