Page Details:

Snippet:

webpage-head-and-body

Page constructed from a head and body in an htmlDocument

Basic grid HTML

Snippet:

grid-row-with-two-columns

grid_row with grid_coulmn and placeHolders. Use these items to structure and build your pages.

Typography

Use a p with `lead = True`

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

this is small, muted, left aligned <p> text wrapped in <small> tags

this is bold, warning, centred <p> text wrapped in <strong> tags

this is italic, error, right aligned <p> text wrapped in <em> tags

you can also have success <p> text

and you can have info <p> text

or the default <p> text

use abbr to create this abbreviation - hover

abbr

use address for an address block:

name
addressLine1
addressLine2
addressLine3
p: phone
e: email
t: @twitterHandle

for a quote use blockquote

this is the source

Lists

for a unordered list use ul with li:

• list Item
• list Item
• list Item
• list Item
• list Item

for a ordered list use ol with li:

1. list Item
2. list Item
3. list Item
4. list Item
5. list Item

you can also have an unstyled list using ul with li:

• list Item
• list Item
• list Item
• list Item
• list Item

for a description list use descriptionLists

keyOne

valueOne

or line them up with `sideBySide = True`

keyOne

valueOne

Code

for inline code use code

for a code block use `code` with `inline = False`

Tables

for a table use table, with thead, tbody and trs

for a caption use tableCaption

th	th	th	th
td	td	td	td
td	td	td	td
td	td	td	td

for a striped table set `striped = True`

th	th	th	th
td	td	td	td
td	td	td	td
td	td	td	td

for a bordered table set `bordered = True`

th	th	th	th
td	td	td	td
td	td	td	td
td	td	td	td

for hover table set `hover = True`

th	th	th	th
td	td	td	td
td	td	td	td
td	td	td	td

for condensed table set `condensed = True` - you can also have colored rows

th	th	th	th
td	td	td	td
td	td	td	td
td	td	td	td
td	td	td	td

Forms

set `formType = 'horizontal'` for horizontal form.

For a form item use snippet horizontal-form-item- this places a horizontalFormControlLabel and a controlRow within a horizontalFormControlGroup

email

@

password

?

date

textarea

radio button

option 1 option 2

checkbox

checkbox

selection

select list link link link link

uneditable input

uneditableInput

multiple selection

select list link link link link

inline checkboxes

1 2 3

url

Go

input with dropdown

Actions

• link
• link
• link
• link
• link

default button button2 button3 button4 button5

button4 link button large block-level and disabled

search me

Images

Icons

Dropdowns

Button Groups

Button Dropdowns

Navs

• link
• link
• link
• page

• link
• link
• link
• page

• link
• link
• link
• page

• link
• link
• link
• dropdown
  • page
  • page
  • page
• page

• link
• link
• link
• dropdown
  • page
  • page
  • page
• page

• header title
• page
• page
• page
• header title
• page
• page
• page

Tabbable Navigation

Snippet:

x-tabbableNavigation

Navbar

Snippet:

responsive-navigation-bar-tmpx

Breadcrumbs

• page /
• page /
• page

Pagination

• page
• page

• next
• previous

Labels and Badges

default success warning important info inverse 1 2 3 4 5 6

Typography

Thumbnails

• header

  some text

Alerts

Progress Bars

Media Object

Misc

×Launch Modal

mediaObject

well

closeIcon

×

button

button

button group

dropdown menu

unescape html

&@$^(*^) 123 {}()_+~?><

image

thumbnail

t h u m b n a i l

label

label

badge

badge

alert!

progressBar

stackedProgressBar

responsive_navigation_bar

nav_list

• list
• list
• list
• list
• list

searchbox

tabbableNavigation

navBar

pagination

grid_row

grid_column

p

p

emphasizeText

emphasizeText

a

a

heroUnit

pageHeader