You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
extensions:
'@absolunet/styleguide':
enabled: trueoptions:
main: # IDname: My wonderful site # Display namebundle: site # Bundle to base everything fromoutput: ../pub/styleguide # Output pathicons-component: site # Which component to use for iconographyscripts-collections: # List of scripts collections to use
- dependencies-head-sync
- dependencies
- mainstyles-collections: # List of styles collections to use
- mainsections: # Ordered list of components to crawl for styleguide files
- name: Generalcomponent: site
- name: Home widgetscomponent: widgetdivider: trueblog: # 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 <ahref="/">this site</a></p>
{{/sgIntro}}{{sgContent}}{{sgTitle}}Common{{/sgTitle}}{{sgSubtitle}}Color palettes{{/sgSubtitle}}{{sgSubsubtitle}}Brands{{/sgSubsubtitle}}{{sgBox ~border=true}}{{includetmpl="color" ~hex=~konstan('color.brand.red') ~name="Red" /}}{{includetmpl="color" ~hex=~konstan('color.brand.green') ~name="Green" /}}{{/sgBox}}{{sgSubsubtitle}}Texts, borders and backgrounds{{/sgSubsubtitle}}{{sgBox ~border=true}}{{includetmpl="color" ~hex=~konstan('color.charcoal') ~name="Charcoal" /}}{{/sgBox}}{{sgSubtitle}}Fonts{{/sgSubtitle}}{{sgBox ~border=true}}{{includetmpl="font" ~name="Roboto Regular" ~family="~konstan('font.base')" ~weight="400" /}}{{includetmpl="font" ~name="Roboto Black" ~family="~konstan('font.base')" ~weight="900" /}}{{includetmpl="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}}
<asideclass="widget"style="background-image:url(/images/our-product.jpg)">
<divclass="widget-content">
<h6class="title">Our product<sup>™</sup></h6>
<pclass="text">Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod</p>
<ahref="/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 <ahref="/">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}}