Split demo in :target views

1 files changed, 62 insertions, 674 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index 7c0c3ff..400ec64 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -1,5 +1,8 @@
 -
-    let loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
+    const loremIpsum = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
+
+    const views = [];
+
 
 include layouts/container.pug
 
@@ -25,8 +28,13 @@ include objects/list-group.pug
 include objects/table.pug
 include objects/alert.pug
 
-mixin box 
-    +container(padX=true padY=true inPage=true)
+mixin view(id, title)
+    -
+        views.push({ id, title });
+
+    +container(padX=true padY=true narrow=true)(class='c-view' id=id)
+        +h1-heading('xl')= title
+        +rule('medium')
         block
 
 mixin user-card(name, hue)
@@ -38,6 +46,29 @@ mixin user-card(name, hue)
             = avaName
         = name
 
+include views/heading.pug
+include views/rule.pug
+include views/colored-links.pug
+include views/badge.pug
+include views/button.pug
+include views/text-field.pug
+include views/field-label.pug
+include views/radio.pug
+include views/checkbox.pug
+include views/switch.pug
+include views/form.pug
+include views/action-button.pug
+include views/status-indicator.pug
+include views/avatar.pug
+include views/action-menu.pug
+include views/menu.pug
+include views/backdrop.pug
+include views/dialog.pug
+include views/lightbox.pug
+include views/list-group.pug
+include views/table.pug
+include views/alert.pug
+
 
 doctype html
 html
@@ -49,674 +80,31 @@ html
         script(src="script.js")
 
     body
-        +container(padX=true padY=true narrow=true)
-
-            +h1-heading('xl')= 'Heading'
-            +rule('medium')
-
-            +box
-                +div-heading('xxl')= 'XXL Heading'
-                +div-heading('xl')= 'XL Heading'
-                +div-heading('lg')= 'LG Heading'
-                +div-heading('md')= 'MD Heading'
-                +div-heading('sm')= 'SM Heading'
-                +div-heading('xs')= 'XS Heading'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Rule'
-            +rule('medium')
-
-            +box
-                +div-heading('lg')= 'Heading'
-                +rule('strong')
-                p= loremIpsum
-
-            +box
-                +div-heading('sm')= 'Heading'
-                +rule('medium')
-                p= loremIpsum
-
-            +box
-                +div-heading('xs')= 'Heading'
-                +rule('faint')
-                p= loremIpsum
-
-            +box
-                +rule('strong')= 'Strong'
-                +rule('medium')= 'Medium'
-                +rule('faint')= 'Faint'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Colored links'
-            +rule('medium')
-
-            +box
-                .s-colored-links
-                    = 'Lorem ipsum dolor '
-                    a(href='https://mk.vulpes.one/')= 'https://mk.vulpes.one/'
-                    = ' sit amet, consetetur '
-                    a(href='https://v.reddit.com/')= 'https://v.reddit.com/'
-                    = ' sadipscing elitr, sed diam nonumy eirmod tempor'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Badge'
-            +rule('medium')
-
-            +box
-                +badge= '100'
-                = ' '
-                +badge('accent')= 'new'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Button'
-            +rule('medium')
-
-            +box
-                .l-button-group
-                    +a-button(variant='accent')= 'Button'
-                    +a-button(variant='accent' disabled=true)= 'Button'
-                    +a-button(variant='accent' outline=true)= 'Button'
-                    +a-button(variant='accent' outline=true disabled=true)= 'Button'
-                br
-                .l-button-group
-                    +a-button(variant='primary')= 'Button'
-                    +a-button(variant='primary' disabled=true)= 'Button'
-                    +a-button(variant='primary' outline=true)= 'Button'
-                    +a-button(variant='primary' outline=true disabled=true)= 'Button'
-                br
-                .l-button-group
-                    +a-button(variant='secondary')= 'Button'
-                    +a-button(variant='secondary' disabled=true)= 'Button'
-                    +a-button(variant='secondary' outline=true)= 'Button'
-                    +a-button(variant='secondary' outline=true disabled=true)= 'Button'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Text field'
-            +rule('medium')
-
-            +box
-                div(style={ display: 'flex', gap: '1rem' })
-                    +text-field(placeholder='Placeholder')
-                    +text-field(value='Just landed in L.A.')
-                    +text-field(value='Readonly' readonly=true)
-                    +text-field(value='Incorrect input' pattern='a+' required=true)
-                br
-                div(style={ display: 'flex', gap: '1rem' })
-                    +text-field(placeholder='Placeholder' disabled=true)
-                    +text-field(value='Just landed in L.A.' disabled=true)
-                    +text-field(value='Readonly' readonly=true disabled=true)
-                    +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
-                br
-                div
-                    +text-field(placeholder='Just landed in L.A.')
-                        +slot('pre')
-                            +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon'
-                        +slot('post')
-                            +action-button(quiet=true icon='smile' class='l-card__block')
-                            +action-button(quiet=true icon='send' class='l-card__block')
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Field label'
-            +rule('medium')
-
-            +box
-                +field-label('First name')
-                    +text-field(placeholder='Placeholder')
-                br
-                +field-label('Password', 'At least 6 characters required')
-                    +text-field(placeholder='Placeholder' type='password')
-                br
-                +field-label('Password', 'At least 6 characters required')(invalid=true)
-                    +text-field(placeholder='Placeholder' type='password' invalid=true)
-                br
-                +field-label('First name')(disabled=true)
-                    +text-field(placeholder='Placeholder' disabled=true)
-                br
-                +field-label('Password', 'At least 6 characters required')(disabled=true)
-                    +text-field(placeholder='Placeholder' type='password' disabled=true)
-                br
-                +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true)
-                    +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
-
-            +box
-                +field-label('First name')(align='left' labelWidth='100px')
-                    +text-field(placeholder='Placeholder')
-                br
-                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px')
-                    +text-field(placeholder='Placeholder' type='password')
-                br
-                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true)
-                    +text-field(placeholder='Placeholder' type='password' invalid=true)
-                br
-                +field-label('First name')(align='left' labelWidth='100px' disabled=true)
-                    +text-field(placeholder='Placeholder' disabled=true)
-                br
-                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true)
-                    +text-field(placeholder='Placeholder' type='password' disabled=true)
-                br
-                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true)
-                    +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
-
-            +box
-                +field-label('First name')(align='right' labelWidth='100px')
-                    +text-field(placeholder='Placeholder')
-                br
-                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px')
-                    +text-field(placeholder='Placeholder' type='password')
-                br
-                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true)
-                    +text-field(placeholder='Placeholder' type='password' invalid=true)
-                br
-                +field-label('First name')(align='right' labelWidth='100px' disabled=true)
-                    +text-field(placeholder='Placeholder' disabled=true)
-                br
-                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true)
-                    +text-field(placeholder='Placeholder' type='password' disabled=true)
-                br
-                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true)
-                    +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Radio'
-            +rule('medium')
-
-            +box
-                +radio(name="radio-demo-1")= 'Cats'
-                +radio(name="radio-demo-1")= 'Dogs'
-                +radio(name="radio-demo-1" checked=true)= 'Foxes'
-                br
-                +radio(name="radio-demo-2" disabled=true)= 'Cats'
-                +radio(name="radio-demo-2" disabled=true)= 'Dogs'
-                +radio(name="radio-demo-2" checked=true disabled=true)= 'Foxes'
-                br
-                +radio(accent=true name="radio-demo-3")= 'Cats'
-                +radio(accent=true name="radio-demo-3")= 'Dogs'
-                +radio(accent=true name="radio-demo-3" checked=true)= 'Foxes'
-                br
-                +radio(accent=true name="radio-demo-4" disabled=true)= 'Cats'
-                +radio(accent=true name="radio-demo-4" disabled=true)= 'Dogs'
-                +radio(accent=true name="radio-demo-4" checked=true disabled=true)= 'Foxes'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Checkbox'
-            +rule('medium')
-
-            +box
-                +checkbox(indeterminate=true)= 'Cats'
-                +checkbox= 'Dogs'
-                +checkbox(checked=true)= 'Foxes'
-                br
-                +checkbox(indeterminate=true disabled=true)= 'Cats'
-                +checkbox(disabled=true)= 'Dogs'
-                +checkbox(checked=true disabled=true)= 'Foxes'
-                br
-                +checkbox(accent=true indeterminate=true)= 'Cats'
-                +checkbox(accent=true)= 'Dogs'
-                +checkbox(accent=true checked=true)= 'Foxes'
-                br
-                +checkbox(accent=true indeterminate=true disabled=true)= 'Cats'
-                +checkbox(accent=true disabled=true)= 'Dogs'
-                +checkbox(accent=true checked=true disabled=true)= 'Foxes'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Switch'
-            +rule('medium')
-
-            +box
-                +switch= 'Cats'
-                +switch= 'Dogs'
-                +switch(checked=true)= 'Foxes'
-                br
-                +switch(disabled=true)= 'Cats'
-                +switch(disabled=true)= 'Dogs'
-                +switch(checked=true disabled=true)= 'Foxes'
-                br
-                +switch(accent=true)= 'Cats'
-                +switch(accent=true)= 'Dogs'
-                +switch(accent=true checked=true)= 'Foxes'
-                br
-                +switch(accent=true disabled=true)= 'Cats'
-                +switch(accent=true disabled=true)= 'Dogs'
-                +switch(accent=true checked=true disabled=true)= 'Foxes'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Form'
-            +rule('medium')
-
-            +box
-                +form(labelsAlign="left")
-                    +form-item('Username')
-                        +text-field(placeholder='Example: Volpeon')
-
-                    +form-item('Password', 'At least 6 characters, all characters allowed')
-                        +text-field(placeholder='Example: hunter2' type='password')
-
-                    +form-item('Bio')
-                        +text-field(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...')
-
-                    +form-item('Favorite animal')
-                        +radio(name="form-demo-1" checked=true)= 'Foxes'
-                        +radio(name="form-demo-1")= 'Other'
-
-                    +form-item('Notification settings')
-                        +switch= 'In-app notifications'
-                        br
-                        +switch= 'Desktop notifications'
-                        br
-                        +switch= 'Email notifications'
-
-                    +form-item('')
-                        +checkbox= 'I\'ve read and accept the terms and conditions'
-
-                    +form-item('')
-                        +a-button(variant='primary')= 'Register'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Action button'
-            +rule('medium')
-
-            +box
-                +action-button= 'Idle'
-                = ' '
-                +action-button(selected=true)= 'Selected'
-                = ' '
-                +action-button(disabled=true)= 'Disabled'
-                = ' '
-                +action-button(selected=true disabled=true)= 'Selected + disabled'
-                br
-                br
-                +action-button(icon='trash')= 'Idle'
-                = ' '
-                +action-button(icon='trash' selected=true)= 'Selected'
-                = ' '
-                +action-button(icon='trash' disabled=true)= 'Disabled'
-                = ' '
-                +action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'
-                br
-                br
-                +action-button(icon='trash')
-                = ' '
-                +action-button(icon='trash' selected=true)
-                = ' '
-                +action-button(icon='trash' disabled=true)
-                = ' '
-                +action-button(icon='trash' selected=true disabled=true)
-
-            +box
-                +action-button(quiet=true )= 'Idle'
-                = ' '
-                +action-button(quiet=true selected=true)= 'Selected'
-                = ' '
-                +action-button(quiet=true disabled=true)= 'Disabled'
-                = ' '
-                +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled'
-                br
-                br
-                +action-button(quiet=true icon='trash')= 'Idle'
-                = ' '
-                +action-button(quiet=true icon='trash' selected=true)= 'Selected'
-                = ' '
-                +action-button(quiet=true icon='trash' disabled=true)= 'Disabled'
-                = ' '
-                +action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled'
-                br
-                br
-                +action-button(quiet=true icon='trash')
-                = ' '
-                +action-button(quiet=true icon='trash' selected=true)
-                = ' '
-                +action-button(quiet=true icon='trash' disabled=true)
-                = ' '
-                +action-button(quiet=true icon='trash' selected=true disabled=true)
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Status indicator'
-            +rule('medium')
-
-            +box
-                +status-indicator
-                = ' '
-                +status-indicator('green')
-                = ' '
-                +status-indicator('yellow')
-                = ' '
-                +status-indicator('red')
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Avatar'
-            +rule('medium')
-
-            +box
-                div(style={ display: 'flex', gap: '.3em' })
-                    +avatar
-                        = 'Vo'
-                    +avatar(status='green' hue=45)
-                        = 'lp'
-                    +avatar(src='avatar.png')
-                    +avatar(src='avatar.png' status='red')
-                br
-                br
-                div(style={ display: 'flex', gap: '.3em' })
-                    +avatar(size='75' hue=90)
-                        = 'eo'
-                    +avatar(size='75' status='green' hue=135)
-                        = 'n'
-                    +avatar(size='75' src='avatar.png')
-                    +avatar(size='75' src='avatar.png' status='red')
-                br
-                br
-                div(style={ display: 'flex', gap: '.3em' })
-                    +avatar(size='50' hue=180)
-                        = 'V'
-                    +avatar(size='50' hue=225)
-                        = 'o'
-                    +avatar(size='50' src='avatar.png')
-
-            +box
-                div(style={ display: 'flex', gap: '.3em' })
-                    +avatar(circle=true)
-                        = 'Vo'
-                    +avatar(circle=true status='green' hue=45)
-                        = 'lp'
-                    +avatar(circle=true src='avatar.png')
-                    +avatar(circle=true src='avatar.png' status='red')
-                br
-                br
-                div(style={ display: 'flex', gap: '.3em' })
-                    +avatar(circle=true size='75' hue=90)
-                        = 'eo'
-                    +avatar(circle=true size='75' status='green' hue=135)
-                        = 'n'
-                    +avatar(circle=true size='75' src='avatar.png')
-                    +avatar(circle=true size='75' src='avatar.png' status='red')
-                br
-                br
-                div(style={ display: 'flex', gap: '.3em' })
-                    +avatar(circle=true size='50' hue=180)
-                        = 'V'
-                    +avatar(circle=true size='50' hue=225)
-                        = 'o'
-                    +avatar(circle=true size='50' src='avatar.png')
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Action menu'
-            +rule('medium')
-
-            +box
-                div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' })
-                    +action-button(quiet=true selected=true)= 'Menu'
-                    +action-menu
-                        +action-menu-slot(class='l-card l-card--flush')
-                            +avatar(block=true circle=true size='100' src='avatar.png' class='l-card__block')
-                            .l-card__block.l-card__block--main
-                                strong.u-d-block= 'Volpeon'
-                                small.u-d-block= '@volpeon@mk.vulpes.one'
-                        +action-menu-separator
-                        +action-menu-item(icon='user')= 'View profile'
-                        +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away'
-                        +action-menu-separator
-                        +action-menu-item(icon='trash' disabled=true)= 'Delete'
-                        +action-menu-item(icon='bookmark')= 'Bookmark'
-                        +action-menu-item(icon='tags')= 'Tags'
-                        +action-menu-item(postIcon='chevron-right')= 'More'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Menu'
-            +rule('medium')
-
-            +box
-                div(style={ display: 'flex', gap: '3rem' })
-                    +menu
-                        +menu-header= 'Category 1'
-                        +menu-item= 'Mark as away'
-                        +menu-item= 'Delete'
-                        +menu-separator
-                        +menu-header= 'Category 2'
-                        +menu-item(icon='bookmark')= 'Bookmark'
-                        +menu-item(icon='tags')= 'Tags'
-
-                    +menu
-                        +menu-item
-                            strong= 'Bouncer'
-                        +menu-separator
-                        +menu-item
-                            strong= 'Libera'
-                        +menu-item(icon='hash')= 'achannel'
-                        +menu-item(icon='hash')= 'kitsuneirc'
-                        +menu-item(icon='green' iconIsStatus=true)= 'volpeon'
-                        +menu-item(icon='red' iconIsStatus=true)= 'someone'
-                        +menu-separator
-                        +menu-item
-                            strong= 'Ergo Testnet'
-                        +menu-separator
-                        +menu-item
-                            strong= 'NixNet'
-
-                    +menu
-                        +menu-header= 'Operators'
-                        +menu-item
-                            +user-card('volpeon', 0)
-                        +menu-item
-                            +user-card('curiousfox', 90)
-                        +menu-separator
-                        +menu-header= 'Moderators'
-                        +menu-item
-                            +user-card('user3567', 135)
-                        +menu-item
-                            +user-card('johndoe', 270)
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Backdrop'
-            +rule('medium')
-
-            +box
-                +backdrop
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Dialog'
-            +rule('medium')
-
-            +box
-                +backdrop
-                    +dialog('Lorem ipsum')
-                        +slot('body')
-                            = loremIpsum
-
-            +box
-                +backdrop
-                    +dialog('Lorem ipsum')(bodyClass='l-overflow')
-                        +slot('body')
-                            p.u-mt-0= loremIpsum
-                            p= loremIpsum
-                            p= loremIpsum
-                            p= loremIpsum
-                            p= loremIpsum
-
-            +box
-                +backdrop
-                    +dialog('Lorem ipsum')(noRule=true)
-                        +slot('sidebar')
-                            +menu(style={ 'min-width': '10em' })
-                                +menu-header= '#channel'
-                                +menu-item(icon='bookmark')= 'Bookmark'
-                                +menu-item(icon='tags', selected=true)= 'Tags'
-                                +menu-item(icon='hash')= 'achannel'
-                        +slot('body')
-                            p.u-mt-0= loremIpsum
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Lightbox'
-            +rule('medium')
-
-            +box
-                +backdrop(class='t-dark')
-                    +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
-                        = "Let's try multiple links! "
-                        a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
-                            = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
-                        = ' '
-                        a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c")
-                            = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c"
-                        = ' '
-                        a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
-                            = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'List group'
-            +rule('medium')
-
-            +box
-                +list-group
-                    +list-group-item= 'First item'
-                    +list-group-item= 'Second item'
-                    +list-group-item= 'Third item'
-                    +list-group-item= 'Fourth item'
-
-            +box
-                +list-group
-                    +list-group-item(action=true)= 'First item'
-                    +list-group-item(action=true)= 'Second item'
-                    +list-group-item(action=true)= 'Third item'
-                    +list-group-item(action=true)= 'Fourth item'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Table'
-            +rule('medium')
-
-            +box
-                +table(interactive=true)
-                    +table-head
-                        +table-row 
-                            +table-head-cell= 'Title'
-                            +table-head-cell= 'Title'
-                            +table-head-cell= 'Title'
-                    +table-body
-                        +table-row 
-                            +table-cell= 'Row 1,1'
-                            +table-cell= 'Row 1,2'
-                            +table-cell= 'Row 1,3'
-                        +table-row 
-                            +table-cell= 'Row 2,1'
-                            +table-cell= 'Row 2,2'
-                            +table-cell= 'Row 2,3'
-                        +table-row 
-                            +table-cell= 'Row 3,1'
-                            +table-cell= 'Row 3,2'
-                            +table-cell= 'Row 3,3'
-                        +table-row 
-                            +table-cell= 'Row 4,1'
-                            +table-cell= 'Row 4,2'
-                            +table-cell= 'Row 4,3'
-
-            +box
-                +table(flush=true)
-                    +table-head
-                        +table-row 
-                            +table-head-cell= 'Title'
-                            +table-head-cell= 'Title'
-                            +table-head-cell= 'Title'
-                    +table-body
-                        +table-row 
-                            +table-cell= 'Row 1,1'
-                            +table-cell= 'Row 1,2'
-                            +table-cell= 'Row 1,3'
-                        +table-row 
-                            +table-cell= 'Row 2,1'
-                            +table-cell= 'Row 2,2'
-                            +table-cell= 'Row 2,3'
-                        +table-row 
-                            +table-cell= 'Row 3,1'
-                            +table-cell= 'Row 3,2'
-                            +table-cell= 'Row 3,3'
-                        +table-row 
-                            +table-cell= 'Row 4,1'
-                            +table-cell= 'Row 4,2'
-                            +table-cell= 'Row 4,3'
-
-            +box
-                +table(box=true)
-                    +table-head
-                        +table-row 
-                            +table-head-cell= 'Title'
-                            +table-head-cell= 'Title'
-                            +table-head-cell= 'Title'
-                    +table-body
-                        +table-row 
-                            +table-cell(divider=true)= 'Row 1,1'
-                            +table-cell= 'Row 1,2'
-                            +table-cell= 'Row 1,3'
-                        +table-row 
-                            +table-cell(divider=true)= 'Row 2,1'
-                            +table-cell= 'Row 2,2'
-                            +table-cell= 'Row 2,3'
-                        +table-row 
-                            +table-cell(divider=true)= 'Row 3,1'
-                            +table-cell= 'Row 3,2'
-                            +table-cell= 'Row 3,3'
-                        +table-row 
-                            +table-cell(divider=true)= 'Row 4,1'
-                            +table-cell= 'Row 4,2'
-                            +table-cell= 'Row 4,3'
-
-            +box
-                +table(box=true, size50=true)
-                    +table-head
-                        +table-row 
-                            +table-head-cell= 'Title'
-                            +table-head-cell= 'Title'
-                            +table-head-cell= 'Title'
-                    +table-body
-                        +table-row 
-                            +table-cell= 'Row 1,1'
-                            +table-cell= 'Row 1,2'
-                            +table-cell= 'Row 1,3'
-                        +table-row 
-                            +table-cell= 'Row 2,1'
-                            +table-cell= 'Row 2,2'
-                            +table-cell= 'Row 2,3'
-                        +table-row 
-                            +table-cell= 'Row 3,1'
-                            +table-cell= 'Row 3,2'
-                            +table-cell= 'Row 3,3'
-                        +table-row 
-                            +table-cell= 'Row 4,1'
-                            +table-cell= 'Row 4,2'
-                            +table-cell= 'Row 4,3'
-
-            //-----------------------------------------
-
-            +h1-heading('xl')= 'Alert'
-            +rule('medium')
-
-            +box
-                +alert= loremIpsum
-                br
-                +alert('primary')= loremIpsum
-                br
-                +alert('error')= loremIpsum
-                br
-                +alert('success')= loremIpsum
-                br
-                +alert('warning')= loremIpsum
-
-
+        .c-content
+            +view-heading
+            +view-rule
+            +view-colored-links
+            +view-badge
+            +view-button
+            +view-text-field
+            +view-field-label
+            +view-radio
+            +view-checkbox
+            +view-switch
+            +view-form
+            +view-action-button
+            +view-status-indicator
+            +view-avatar
+            +view-action-menu
+            +view-menu
+            +view-backdrop
+            +view-dialog
+            +view-lightbox
+            +view-list-group
+            +view-table
+            +view-alert 
+
+        .c-sidebar
+            +menu
+                each view in views
+                    +menu-item(tag='a' href='#' + view.id)= view.title