@absolunet/nwayo-extension-styleguide 中文文档教程
@absolunet/nwayo-extension-styleguide
Install
$ npm install @absolunet/nwayo-extension-styleguide
Build
$ nwayo run styleguide:build
Usage
nwayo.yaml
extensions:
'@absolunet/styleguide':
enabled: true
options:
main: # ID
name: My wonderful site # Display name
bundle: site # Bundle to base everything from
output: ../pub/styleguide # Output path
icons-component: site # Which component to use for iconography
scripts-collections: # List of scripts collections to use
- dependencies-head-sync
- dependencies
- main
styles-collections: # List of styles collections to use
- main
sections: # Ordered list of components to crawl for styleguide files
- name: General
component: site
- name: Home widgets
component: widget
divider: true
blog: # Second styleguide [...]
name: My wonderful blog
# [...]
styleguide.jshtml
- Under
[...]/nwayo/[COMPONENT]/extensions/styleguide/
- A JsRender template of your styleguide for this component
{{sgIntro ~title="Base for site"}}
<p>This are the base styles for <a href="/">this site</a></p>
{{/sgIntro}}
{{sgContent}}
{{sgTitle}}Common{{/sgTitle}}
{{sgSubtitle}}Color palettes{{/sgSubtitle}}
{{sgSubsubtitle}}Brands{{/sgSubsubtitle}}
{{sgBox ~border=true}}
{{include tmpl="color" ~hex=~konstan('color.brand.red') ~name="Red" /}}
{{include tmpl="color" ~hex=~konstan('color.brand.green') ~name="Green" /}}
{{/sgBox}}
{{sgSubsubtitle}}Texts, borders and backgrounds{{/sgSubsubtitle}}
{{sgBox ~border=true}}
{{include tmpl="color" ~hex=~konstan('color.charcoal') ~name="Charcoal" /}}
{{/sgBox}}
{{sgSubtitle}}Fonts{{/sgSubtitle}}
{{sgBox ~border=true}}
{{include tmpl="font" ~name="Roboto Regular" ~family="~konstan('font.base')" ~weight="400" /}}
{{include tmpl="font" ~name="Roboto Black" ~family="~konstan('font.base')" ~weight="900" /}}
{{include tmpl="font" ~name="Mali Regular" ~family="~konstan('font.alt')" ~weight="400" /}}
{{/sgBox}}
{{sgSubtitle}}Typography{{/sgSubtitle}}
{{sgBox ~class="page-main"}}
{{sgCell ~nb="2" ~spacing=true}}
<h1><h1> Title</h1>
<h2><h2> Title</h2>
<h3><h3> Title</h3>
{{/sgCell}}
{{sgCell ~nb="2" ~spacing=true}}
<h4><h4> Title</h4>
<h5><h5> Title</h5>
<h6><h6> Title</h6>
{{/sgCell}}
{{/sgBox}}
{{sgSubtitle}}Widget{{/sgSubtitle}}
{{sgBox}}
<aside class="widget" style="background-image:url(/images/our-product.jpg)">
<div class="widget-content">
<h6 class="title">Our product<sup>™</sup></h6>
<p class="text">Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod</p>
<a href="/en/our-product" class="button">Buy</a>
</div>
</aside>
{{/sgBox}}
{{/sgContent}}
JsRender custom tags
{{sgIntro}}
Styleguide intro
~title
String
标题生成介绍块
{{sgIntro ~title="Base for site"}}
<p>This are the base styles for <a href="/">this site</a></p>
{{/sgIntro}}
{{sgContent}}
整个样式指南内容包装器
{{sgContent}}
Everything except the intro goes here
{{/sgContent}}
~class (Optional)
String
附加自定义类
{{sgContent ~class="special-theme"}}
Everything except the intro goes here
{{/sgContent}}
{{sgTitle}}
Section title (level 1)
{{sgTitle}}Section{{/sgTitle}}
{{sgSubtitle}}
Section subtitle (level 2)
{{sgSubtitle}}Subsection{{/sgSubtitle}}
{{sgSubsubtitle}}
Section sub-subtitle (level 3)
{{sgSubsubtitle}}Subsubsection{{/sgSubsubtitle}}
{{sgBox}}
Content box
~border (Optional)
Boolean
如果框有边框
~style (Optional)
String
预定义样式(dark
)
~class (Optional)
String
附加自定义类
{{sgBox ~border=true ~style="dark"}}
<ol class="reversed">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
{{/sgBox}}
{{sgBox ~class="message-box"}}
<div class="success">Hooray</div>
<div class="warning">Caution</div>
<div class="error">Booo</div>
{{/sgBox}}
{{sgCell}}
Content box cell
~spacing (Optional)
Boolean
如果框应该有间距
~nb
Number
每行单元格数(2 到 6)
{{sgBox}}
{{sgCell ~nb="2"}}
<button class="primary">Primary</button>
{{/sgCell}}
{{sgCell ~nb="2"}}
<button class="secondary">Secondary</button>
{{/sgCell}}
{{/sgBox}}
JsRender templates
color
调色板项目
~hex
String
十六进制颜色代码
~name
String
可读名称
{{include tmpl="color" ~hex="#cc0000" ~name="brand-red" /}}
font
字体项目
~name
String
可读名称
~family
String
font-family css 属性
~weight (Optional)
String
font-weight css 属性
~style (Optional)
String
font-style css property
{{include tmpl="font" ~name="Roboto Black Italic" ~family="Roboto" ~weight="900" ~style="italic" /}}
JsRender helpers
~konstan(key)
从 konstan
key
String
点符号键
{{include tmpl="color" ~hex=~konstan('color.brand.red') ~name="Red" /}}
License
MIT © Absolunet
@absolunet/nwayo-extension-styleguide
Styleguide generation for nwayo
Install
$ npm install @absolunet/nwayo-extension-styleguide
Build
$ nwayo run styleguide:build
Usage
nwayo.yaml
extensions:
'@absolunet/styleguide':
enabled: true
options:
main: # ID
name: My wonderful site # Display name
bundle: site # Bundle to base everything from
output: ../pub/styleguide # Output path
icons-component: site # Which component to use for iconography
scripts-collections: # List of scripts collections to use
- dependencies-head-sync
- dependencies
- main
styles-collections: # List of styles collections to use
- main
sections: # Ordered list of components to crawl for styleguide files
- name: General
component: site
- name: Home widgets
component: widget
divider: true
blog: # Second styleguide [...]
name: My wonderful blog
# [...]
styleguide.jshtml
- Under
[...]/nwayo/[COMPONENT]/extensions/styleguide/
- A JsRender template of your styleguide for this component
{{sgIntro ~title="Base for site"}}
<p>This are the base styles for <a href="/">this site</a></p>
{{/sgIntro}}
{{sgContent}}
{{sgTitle}}Common{{/sgTitle}}
{{sgSubtitle}}Color palettes{{/sgSubtitle}}
{{sgSubsubtitle}}Brands{{/sgSubsubtitle}}
{{sgBox ~border=true}}
{{include tmpl="color" ~hex=~konstan('color.brand.red') ~name="Red" /}}
{{include tmpl="color" ~hex=~konstan('color.brand.green') ~name="Green" /}}
{{/sgBox}}
{{sgSubsubtitle}}Texts, borders and backgrounds{{/sgSubsubtitle}}
{{sgBox ~border=true}}
{{include tmpl="color" ~hex=~konstan('color.charcoal') ~name="Charcoal" /}}
{{/sgBox}}
{{sgSubtitle}}Fonts{{/sgSubtitle}}
{{sgBox ~border=true}}
{{include tmpl="font" ~name="Roboto Regular" ~family="~konstan('font.base')" ~weight="400" /}}
{{include tmpl="font" ~name="Roboto Black" ~family="~konstan('font.base')" ~weight="900" /}}
{{include tmpl="font" ~name="Mali Regular" ~family="~konstan('font.alt')" ~weight="400" /}}
{{/sgBox}}
{{sgSubtitle}}Typography{{/sgSubtitle}}
{{sgBox ~class="page-main"}}
{{sgCell ~nb="2" ~spacing=true}}
<h1><h1> Title</h1>
<h2><h2> Title</h2>
<h3><h3> Title</h3>
{{/sgCell}}
{{sgCell ~nb="2" ~spacing=true}}
<h4><h4> Title</h4>
<h5><h5> Title</h5>
<h6><h6> Title</h6>
{{/sgCell}}
{{/sgBox}}
{{sgSubtitle}}Widget{{/sgSubtitle}}
{{sgBox}}
<aside class="widget" style="background-image:url(/images/our-product.jpg)">
<div class="widget-content">
<h6 class="title">Our product<sup>™</sup></h6>
<p class="text">Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod</p>
<a href="/en/our-product" class="button">Buy</a>
</div>
</aside>
{{/sgBox}}
{{/sgContent}}
JsRender custom tags
{{sgIntro}}
Styleguide intro
~title
String
Title of the intro block
{{sgIntro ~title="Base for site"}}
<p>This are the base styles for <a href="/">this site</a></p>
{{/sgIntro}}
{{sgContent}}
Whole styleguide content wrapper
{{sgContent}}
Everything except the intro goes here
{{/sgContent}}
~class (Optional)
String
Additional custom class
{{sgContent ~class="special-theme"}}
Everything except the intro goes here
{{/sgContent}}
{{sgTitle}}
Section title (level 1)
{{sgTitle}}Section{{/sgTitle}}
{{sgSubtitle}}
Section subtitle (level 2)
{{sgSubtitle}}Subsection{{/sgSubtitle}}
{{sgSubsubtitle}}
Section sub-subtitle (level 3)
{{sgSubsubtitle}}Subsubsection{{/sgSubsubtitle}}
{{sgBox}}
Content box
~border (Optional)
Boolean
If the box has a border
~style (Optional)
String
Predefined style (dark
)
~class (Optional)
String
Additional custom class
{{sgBox ~border=true ~style="dark"}}
<ol class="reversed">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
{{/sgBox}}
{{sgBox ~class="message-box"}}
<div class="success">Hooray</div>
<div class="warning">Caution</div>
<div class="error">Booo</div>
{{/sgBox}}
{{sgCell}}
Content box cell
~spacing (Optional)
Boolean
If the box should have gutter spacing
~nb
Number
Number of cell per row (2 to 6)
{{sgBox}}
{{sgCell ~nb="2"}}
<button class="primary">Primary</button>
{{/sgCell}}
{{sgCell ~nb="2"}}
<button class="secondary">Secondary</button>
{{/sgCell}}
{{/sgBox}}
JsRender templates
color
Color palette item
~hex
String
Hexadecimal color code
~name
String
Readable name
{{include tmpl="color" ~hex="#cc0000" ~name="brand-red" /}}
font
Font item
~name
String
Readable name
~family
String
font-family css property
~weight (Optional)
String
font-weight css property
~style (Optional)
String
font-style css property
{{include tmpl="font" ~name="Roboto Black Italic" ~family="Roboto" ~weight="900" ~style="italic" /}}
JsRender helpers
~konstan(key)
Get item from konstan
key
String
Dot-notation key
{{include tmpl="color" ~hex=~konstan('color.brand.red') ~name="Red" /}}
License
MIT © Absolunet