Templates
Style Guide
In case if you need new pages inside of your style guide you can use this page as template.
Components
Use this component in case if you need to display single unique component. You can nest any type of content, whatever suits your purpose and create any structure.
Default
Place your component here.
In case if you have a lot of variations of a particular component, you can place component instances on separate tab. This is especially handy to avoid long scrolls. You can nest any type of content, whatever suits your purpose and create any structure.
Tabs
Place your component here.
Place your component here.
Place your component here.
Place your component here.
Place your component here.
How to
Work with classes
For style guide pages were created its own components and classes, which could be identified by Style Guide prefix inside of class and components names. Styling them will affect only style guide.
Customize tabs
For tabs component you can set any amount of tabs.Use Style Guide Tabs Link class to assign it to newly added tabs. Remember that large amount of tabs might case visual issues on small resolutions.
Create wide examples
You might notice that on some style guide page examples are shown as wide blocks. In order to achieve same result you need to add Wide class after Style Guide Component class to build Style Guide ComponentWide combo class.
Update side navigation
Side navigation used across all style guide pages to navigate between them. To update connection between pages open Side Navigation component, select any link block and switch to Element Settings (D) tab. From there you can choose any page, which you wanna add to your navigation.
Update page contents
Page contents used to quickly navigate inside of particular style guide page. You can add any amount of items.
In order to make connections between content on the page and inner navigation you need to :
In order to make connections between content on the page and inner navigation you need to :
Set ID name for an element you wish style guide page will be scrolled to
Select tab item from the navigation and switch to Element Settings (D) tab
From there click Choose page section and select ID from the list.
For example for Components and Customize headlines were set unique IDs like Components and Customize accordingly. Which then will be used as an anchors on the page. For each tab item from Contents menu selected the right anchor like Component = Components and Customize = Customize.