Skip to content

Add layout section on the top of Demo page to make it easy to see how themes look like when the controls are used together #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kruyvanna wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Add layout section on the top of Demo page to make it easy to see how themes look like when the controls are used together #5

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b9495a1
add assembled example
kruyvanna Nov 3, 2013
594d121
add more controls to showcase
kruyvanna Nov 3, 2013
1307e5e
add font-awesome
kruyvanna Jan 22, 2014
a55c5f0
add font awesome icon to navigation bar
kruyvanna Jan 22, 2014
74c0646
fix font awesome link
ytr-mt Jan 22, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 102 additions & 0 deletions index.jade
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ html
link(rel = 'stylesheet', type = 'text/css', href = document.relativeSource)
link(rel = 'stylesheet', type = 'text/css', href = 'css/main.css')
link(rel = 'stylesheet', type = 'text/css', href = 'css/brackets.css')
link(href="http://netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.css", rel="stylesheet")
//if lt IE 9
script(src = '//html5shiv.googlecode.com/svn/trunk/html5.js')
body(class=tint)
Expand Down Expand Up @@ -56,6 +57,107 @@ html
a#slide-menu-button.topcoat-icon-button--large--quiet
span.topcoat-icon--large.topcoat-icon--menu-stack
#content.max-width
article.component
div.showcase(style="width:300px; float:left; margin-right: 50px; margin-bottom: 50px")
div(class="topcoat-navigation-bar")
div(class="topcoat-navigation-bar__item left quarter")
span(class="topcoat-icon-button--quiet", style="vertical-align: middle")
i.fa.fa-lg.fa-bars
div(class="topcoat-navigation-bar__item center half")
span(class="topcoat-navigation-bar__title") Title
div(class="topcoat-navigation-bar__item right quarter")
span(class="topcoat-icon-button--quiet", style="vertical-align: middle")
i.fa.fa-lg.fa-angle-right
div.topcoat-list
h3.topcoat-list__header Category
ul.topcoat-list__container
li.topcoat-list__item Item
li.topcoat-list__item Item
h3.topcoat-list__header Category
ul.topcoat-list__container
li.topcoat-list__item Item
li.topcoat-list__item Item
li.topcoat-list__item Item
h3.topcoat-list__header Category
ul.topcoat-list__container
li.topcoat-list__item Item
li.topcoat-list__item Item
li.topcoat-list__item Item
li.topcoat-list__item Item
div.topcoat-tab-bar.full
label.topcoat-tab-bar__item
input(type="radio", name="tab-bar")
button.topcoat-tab-bar__button.full One
label.topcoat-tab-bar__item
input(type="radio", name="tab-bar")
button.topcoat-tab-bar__button.full Two
label.topcoat-tab-bar__item
input(type="radio", name="tab-bar")
button.topcoat-tab-bar__button.full Three
div.showcase(style="width:300px; float:left; margin-right: 50px; margin-bottom: 50px")
div(class="topcoat-navigation-bar")
div(class="topcoat-navigation-bar__item left quarter")
span(class="topcoat-icon-button--quiet", style="vertical-align: middle")
i.fa.fa-lg.fa-bars
div(class="topcoat-navigation-bar__item center half")
span(class="topcoat-navigation-bar__title") Title
div(class="topcoat-navigation-bar__item right quarter")
span(class="topcoat-icon-button--quiet", style="vertical-align: middle")
i.fa.fa-lg.fa-angle-right
div.topcoat-list
h3.topcoat-list__header
input.topcoat-search-input.full(placeholder="Search")
h3.topcoat-list__header
input(type="text", class="topcoat-text-input full", placeholder="text", value="")
ul.topcoat-list__container
li.topcoat-list__item
span Notification
span.topcoat-notification(style="float: right") 1
li.topcoat-list__item
span Radio Button
span(style="float: right")
label.topcoat-radio-button
input(type="radio", name="topcoat")
div.topcoat-radio-button__checkmark
label.topcoat-radio-button OR
input(type="radio", name="topcoat")
div.topcoat-radio-button__checkmark
li.topcoat-list__item
span Checkbox
span(style="float: right")
label.topcoat-checkbox
input(type="checkbox")
div.topcoat-checkbox__checkmark
li.topcoat-list__item
span Switch
span(style="float: right")
label.topcoat-switch
input(type="checkbox", class="topcoat-switch__input")
div.topcoat-switch__toggle
li.topcoat-list__item
span Range
span(style="float: right")
input(type="range", class="topcoat-range")
h3.topcoat-list__header Button
ul.topcoat-list__container
li.topcoat-list__item
button.topcoat-button Button
button.topcoat-button--cta Button cta
h3.topcoat-list__header Quiet Button
ul.topcoat-list__container
li.topcoat-list__item
button.topcoat-button--quiet Button
div.topcoat-tab-bar.full
label.topcoat-tab-bar__item
input(type="radio", name="tab-bar")
button.topcoat-tab-bar__button.full One
label.topcoat-tab-bar__item
input(type="radio", name="tab-bar")
button.topcoat-tab-bar__button.full Two
label.topcoat-tab-bar__item
input(type="radio", name="tab-bar")
button.topcoat-tab-bar__button.full Three
div(style="clear: both")
- each component in document.components
article.component(id=component.slug)
header
Expand Down