Blaze :: Demo

Fluid Grid

first
second
third

Widths

first
second
third
first
450px wide only when large screen
third

Offsets

first
second

No wrap

first
second

Wrap

first
second

Grid in a grid

first
second
third
fourth
fifth

Vertical alignment

Per grid

first
second
third
fourth
fourth
fourth
fourth
fourth

Per cell

first
second
third
fourth
fourth
fourth
fourth
fourth

Fluid Snapping

first
second
third

No gutter

Per grid

first
second
third

per cell

first
second
third

Responsive

first
second
third
first
second
third
first
second
third
first
second
third
first
second
third
first
second
third

Responsive Hide/Show

first
second

Typography

Body text

This is a paragraph with a link in it. It has a bit of margin bottom.

so that subsequent paragraphs don't look bunched up. Also this isn't really a link.

If you ever need to highlight some text wrap the highlight class around it, and if you want to speak quietly use the quite class. Don't you think CSS is awesome?! We think so!

Addresses 10010 The Street,
Binary Town,
Offandon City,
CPU01

Energy is inversely equal to the number of children you have multiplied by how young they are!

- Every parent everywhere

Energy is inversely equal to the number of children you have multiplied by how young they are!

- Every parent everywhere

Energy is inversely equal to the number of children you have multiplied by how young they are!

- Every parent everywhere

Energy is inversely equal to the number of children you have multiplied by how young they are!

- Every parent everywhere

Energy is inversely equal to the number of children you have multiplied by how young they are!

- Every parent everywhere

Energy is inversely equal to the number of children you have multiplied by how young they are!

- Every parent everywhere

Need to write some code? You can console.log('write it inline'); or if you want:

(demo = () => { alert('you can write code on multiple lines!') })()

To format your code press ctrl + alt + l

Breadcrumbs

  1. Home
  2. Cars
  3. Electric
  4. Tesla
  5. P100d

Lists

Un-ordered

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
      1. Lorem ipsum dolor sit amet
      2. Consectetur adipiscing elit
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  4. Faucibus porta lacus fringilla vel

Unstyled

Inline

Super

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

xLarge

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Large

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Medium

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Small

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

xSmall

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Page heading Sub-header
Sub-header

Tables

Basic table
First name Last name Username
Gregory Pratt @grumpywizards
Jim Krik @captaink
Mr. Spock @science101

Striped

Striped rows
First name Last name Username
Gregory Pratt @grumpywizards
Jim Krik @captaink
Mr. Spock @science101

Clickable table

Clickable table, row inactive
First name Last name Username
Gregory Pratt @grumpywizards
Jim Krik @captaink
Mr. Spock @science101

Clickable row

Clickable row, inactive row
First name Last name Username
Gregory Pratt @grumpywizards
Jim Krik @captaink
Mr. Spock @science101

Condensed

Condensed
First name Last name Username
Gregory Pratt @grumpywizards
Jim Krik @captaink
Mr. Spock @science101

Using divs

divs instead of trs ths tds
First name Last name Username
Gregory Pratt @grumpywizards
Jim Krik @captaink
Mr. Spock @science101

Images

random image display: block; max-width: 100%; height: auto;

Cards

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Header

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Footer

Title Subtitle

Lorem ipsum dolor sit amet, feugiat corpora ex eam.Lorem ipsum dolor sit amet, feugiat corpora ex eam.Lorem ipsum dolor sit amet, feugiat corpora ex eam.Lorem ipsum dolor sit amet, feugiat corpora ex eam.Lorem ipsum dolor sit amet, feugiat corpora ex eam.

Header

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Footer
Header

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Footer
High

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Higher

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Highest

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Item 1
Item 2
Item divider
Item 3
Item 4
Item 1
Item 2
Item divider
Item 3
Item 4
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

Heading
Sub-heading

To make a contribution to the world by making tools for the mind that advance humankind.

Heading Sub-heading

To make a contribution to the world by making tools for the mind that advance humankind.

Menus

Combo Menu

Divider

Accordion

Pane 1

Title Subtitle

Lorem ipsum dolor sit amet, feugiat corpora ex eam.

Lorem ipsum dolor sit amet, feugiat corpora ex eam.

Lorem ipsum dolor sit amet, feugiat corpora ex eam.

Lorem ipsum dolor sit amet, feugiat corpora ex eam.

Mega Card

Heading
Sub-heading

To make a contribution to the world by making tools for the mind that advance humankind.
Item 1
Item 2
Item divider
Item 3
Item 4
Pane 2
Pane 2

Buttons

Link

Button sizes

Full width

Colours

Ghosts

Rounded (and Ghosted)

Inputs

Input icons

Textarea

Sizes

Select

Checkboxes

Radios

Fieldsets and legends

A group of controls
This fieldset is disabled

Input groups

Hint 1
Hint 2
Hint 3
Hint

Labels, Fieldsets and Forms

And all together now!
Account login:

Input hints

Inline forms

Instead of stacked, elements appear inline
Account login:

Floating labels

e.g 07654321000

Toggles

Ranges

Tabs

One
Disabled
Three
This is tab one
This is tab two
One
Disabled
Three
This is tab one
This is tab two
One
Disabled
Three
This is tab one
This is tab two
One
Disabled
Three
This is tab one
This is tab two
One
Disabled
Three
This is tab one
This is tab two
One
Disabled
Three
This is tab one
This is tab two

Avatars



Tags

  • England
  • Scotland
  • Wales

Overlay

Modal

Modal heading

This is the modal body

Modal heading

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then

Modal heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget neque mollis, sodales nulla ut, porta urna. Vivamus gravida placerat metus ac malesuada. Donec convallis dolor in ex tristique, luctus tempus dui sollicitudin. Suspendisse enim urna, auctor ac viverra eget, venenatis non massa. Nulla magna est, ullamcorper eget feugiat ac, condimentum id diam. Cras tempor felis sit amet facilisis sollicitudin. Ut posuere malesuada feugiat. Morbi ex ex, pretium sit amet dolor eget, malesuada gravida est. Nullam id malesuada massa, ac facilisis elit. Nullam ut metus sit amet nisi finibus mollis. Praesent augue felis, feugiat placerat aliquam ut, ultrices sit amet dolor. Phasellus porta ligula nec sapien tempus commodo. Pellentesque hendrerit aliquet ornare. Integer nec tempus quam, vitae bibendum lectus. Suspendisse vestibulum pulvinar neque at scelerisque. Suspendisse accumsan dolor vitae nulla commodo, volutpat commodo nunc bibendum. Integer ut magna ac velit pharetra molestie. Nullam vestibulum est mattis, posuere augue id, suscipit nulla. Praesent vestibulum sapien hendrerit, sodales elit et, eleifend est. Aliquam ornare iaculis diam, commodo iaculis erat consectetur a. Quisque ut porta est. Mauris vulputate est eu auctor vestibulum. Vestibulum velit libero, cursus vel viverra et, fringilla et est. Donec nibh ipsum, finibus eu urna sed, ullamcorper sollicitudin velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla sit amet bibendum nunc, ut iaculis tellus. Aenean ornare velit vel venenatis scelerisque. Ut ac elit enim. Nulla nec congue ex. Cras nulla ligula, porttitor non pulvinar fermentum, hendrerit sit amet neque. Etiam pulvinar suscipit metus, at lobortis erat eleifend id. Suspendisse scelerisque sem et orci rhoncus posuere. Vivamus faucibus mi et feugiat elementum. Nulla tempor, ligula non ullamcorper condimentum, lorem lorem sagittis tortor, at interdum tellus nunc elementum purus. Nulla tincidunt augue nibh. Ut et augue a ex pretium sodales. Pellentesque quam neque, tincidunt eu fringilla nec, volutpat eget risus. Fusce sit amet arcu sodales, vestibulum quam vel, lacinia mauris. Mauris ut placerat libero, eu gravida lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia felis vel nibh blandit, in vestibulum nisl congue. Integer ac dignissim nisi, id vehicula tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In posuere vitae metus in fermentum. Quisque venenatis ut eros at posuere. Etiam pulvinar, ipsum eu interdum vestibulum, arcu urna dapibus lorem, quis volutpat tortor enim sed leo. Donec dapibus lacinia purus. Nullam ac porttitor ligula. Fusce aliquet mauris tortor, id euismod neque tempus vel. Fusce luctus ex et volutpat pretium. Nulla varius justo quis aliquam accumsan.

Modal heading

Ghost modal...it hasn't got a body. Get it?!

Modal heading

Blocking modal, not dismissable

Modal heading

Same as cards, high, higher, highest classes for shadows

Modal heading

Block foooter

Modal animated

Modal heading

This is the modal body

Drawers

Heading
Sub-heading

To make a contribution to the world by making tools for the mind that advance humankind.

Heading
Sub-heading

To make a contribution to the world by making tools for the mind that advance humankind.

Bubbles

This bubble is on the right
This bubble is on the top
This bubble is on the bottom
This bubble is on the left

Alert

Default
Brand
Info
Warning
Success
Error

Alerts (formally Toasts)

Default
Brand
Info
Warning
Success
Error

Badges

This is a badge and this is a rounded badge

They're useful when you want to add additional info. Like a version number to a page, such as v.1.0.0

Default brand info warning success error Default brand info warning success error
Default brand info warning success error Default brand info warning success error

Calendar

2016
January
Sun
Mon
Tue
Wed
Thu
Fri
Sat

Pagination

… …

Tree

Progress bars







Stacked


Sizes








Text

15% .u-xsmall

30% .u-small

30% .u-small

45% .u-medium

60% .u-large

85% .u-xlarge

99% .u-super

Nav

Nav + Panel

Nav + Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget neque mollis, sodales nulla ut, porta urna. Vivamus gravida placerat metus ac malesuada. Donec convallis dolor in ex tristique, luctus tempus dui sollicitudin. Suspendisse enim urna, auctor ac viverra eget, venenatis non massa. Nulla magna est, ullamcorper eget feugiat ac, condimentum id diam. Cras tempor felis sit amet facilisis sollicitudin. Ut posuere malesuada feugiat. Morbi ex ex, pretium sit amet dolor eget, malesuada gravida est. Nullam id malesuada massa, ac facilisis elit. Nullam ut metus sit amet nisi finibus mollis. Praesent augue felis, feugiat placerat aliquam ut, ultrices sit amet dolor. Phasellus porta ligula nec sapien tempus commodo. Pellentesque hendrerit aliquet ornare. Integer nec tempus quam, vitae bibendum lectus. Suspendisse vestibulum pulvinar neque at scelerisque. Suspendisse accumsan dolor vitae nulla commodo, volutpat commodo nunc bibendum. Integer ut magna ac velit pharetra molestie. Nullam vestibulum est mattis, posuere augue id, suscipit nulla. Praesent vestibulum sapien hendrerit, sodales elit et, eleifend est. Aliquam ornare iaculis diam, commodo iaculis erat consectetur a. Quisque ut porta est. Mauris vulputate est eu auctor vestibulum. Vestibulum velit libero, cursus vel viverra et, fringilla et est. Donec nibh ipsum, finibus eu urna sed, ullamcorper sollicitudin velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla sit amet bibendum nunc, ut iaculis tellus. Aenean ornare velit vel venenatis scelerisque. Ut ac elit enim. Nulla nec congue ex. Cras nulla ligula, porttitor non pulvinar fermentum, hendrerit sit amet neque. Etiam pulvinar suscipit metus, at lobortis erat eleifend id. Suspendisse scelerisque sem et orci rhoncus posuere. Vivamus faucibus mi et feugiat elementum. Nulla tempor, ligula non ullamcorper condimentum, lorem lorem sagittis tortor, at interdum tellus nunc elementum purus. Nulla tincidunt augue nibh. Ut et augue a ex pretium sodales. Pellentesque quam neque, tincidunt eu fringilla nec, volutpat eget risus. Fusce sit amet arcu sodales, vestibulum quam vel, lacinia mauris. Mauris ut placerat libero, eu gravida lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia felis vel nibh blandit, in vestibulum nisl congue. Integer ac dignissim nisi, id vehicula tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In posuere vitae metus in fermentum. Quisque venenatis ut eros at posuere. Etiam pulvinar, ipsum eu interdum vestibulum, arcu urna dapibus lorem, quis volutpat tortor enim sed leo. Donec dapibus lacinia purus. Nullam ac porttitor ligula. Fusce aliquet mauris tortor, id euismod neque tempus vel. Fusce luctus ex et volutpat pretium. Nulla varius justo quis aliquam accumsan.