Styleguide generation for nwayo
npm install @absolunet/nwayo-extension-styleguide




> Styleguide generation for nwayo
``sh`
$ npm install @absolunet/nwayo-extension-styleguide
`sh`
$ nwayo run styleguide:build
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
# [...]
`$3
- Under [...]/nwayo/[COMPONENT]/extensions/styleguide/
- A JsRender template of your styleguide for this component`handlebars
{{sgIntro ~title="Base for site"}}
This are the base styles for this site
{{/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> Title
<h2> Title
<h3> Title
{{/sgCell}}
{{sgCell ~nb="2" ~spacing=true}}
<h4> Title
<h5> Title
<h6> Title
{{/sgCell}}
{{/sgBox}} {{sgSubtitle}}Widget{{/sgSubtitle}}
{{sgBox}}
{{/sgBox}}
{{/sgContent}}
`
JsRender custom tags
$3
Styleguide intro#### ~title
String Title of the intro block`handlebars
{{sgIntro ~title="Base for site"}}
This are the base styles for this site
{{/sgIntro}}
`$3
Whole styleguide content wrapper`handlebars
{{sgContent}}
Everything except the intro goes here
{{/sgContent}}
`#### ~class (Optional)
String Additional custom class`handlebars
{{sgContent ~class="special-theme"}}
Everything except the intro goes here
{{/sgContent}}
`$3
Section title (level 1)`handlebars
{{sgTitle}}Section{{/sgTitle}}
`$3
Section subtitle (level 2)`handlebars
{{sgSubtitle}}Subsection{{/sgSubtitle}}
`$3
Section sub-subtitle (level 3)`handlebars
{{sgSubsubtitle}}Subsubsection{{/sgSubsubtitle}}
`$3
Content box#### ~border (Optional)
Boolean If the box has a border#### ~style (Optional)
String Predefined style (dark)#### ~class (Optional)
String Additional custom class`handlebars
{{sgBox ~border=true ~style="dark"}}
- Item 1
- Item 2
- Item 3
{{/sgBox}}{{sgBox ~class="message-box"}}
Hooray
Caution
Booo
{{/sgBox}}
`$3
Content box cell#### ~spacing (Optional)
Boolean If the box should have gutter spacing#### ~nb
Number Number of cell per row (2 to 6)`handlebars
{{sgBox}}
{{sgCell ~nb="2"}}
{{/sgCell}}
{{sgCell ~nb="2"}}
{{/sgCell}}
{{/sgBox}}
`
JsRender templates
$3
Color palette item#### ~hex
String Hexadecimal color code#### ~name
String Readable name`handlebars
{{include tmpl="color" ~hex="#cc0000" ~name="brand-red" /}}
`$3
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`handlebars
{{include tmpl="font" ~name="Roboto Black Italic" ~family="Roboto" ~weight="900" ~style="italic" /}}
`
JsRender helpers
$3
Get item from konstan#### key
String Dot-notation key`handlebars
{{include tmpl="color" ~hex=~konstan('color.brand.red') ~name="Red" /}}
``MIT © Absolunet