Distinctive

A preview of changes in this theme.

Typography

The Distinctive Theme starts with great Typography. It includes the Free Web Font Montserrat for clear clean text. Wells have also been extended to include an optional raised state to give focus to the most important content.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Example body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

Example addresses

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@gmail.com

Buttons

Bootstrap buttons are awesome. The Distinctive Theme builds upon this with new button colors which look great together as well as light drop shadows to increase the three dimensional feel to the button.

Examples
Default
Large
Normal
Small
Mini
Disabled
Icon
Icon
Split
Primary
Large
Normal
Small
Mini
Disabled
Icon
Badge
Split
Info
Large
Normal
Small
Mini
Disabled
Icon
Icon
Split
Special
Large
Normal
Small
Mini
Disabled
Icon
Icon
Split
Success
Large
Normal
Small
Mini
Disabled
Icon
Icon
Split
Warning
Large
Normal
Small
Mini
Disabled
Icon
Icon
Split
Danger
Large
Normal
Small
Mini
Disabled
Icon
Icon
Split
Inverse
Large
Normal
Small
Mini
Disabled
Icon
Icon
Split

Labels and Badges

The default twitter labels and badges are very useful in a variety of situations. The Distinctive Theme builds upon this but gives you so many more options. All labels and badges come in all the main theme colors and have Normal, Raised, Bordered, and Raised Bordered states and go great with buttons.

Labels

Normal
Default Primary Info Info Success Warning Important Inverse Passive
Raised
Default Primary Info Info Success Warning Important Inverse Passive
Bordered
Default Primary Info Info Success Warning Important Inverse Passive
Raised Bordered
Default Primary Info Info Success Warning Important Inverse Passive

Badges

Normal
1 2 3 4 5 6 7 99+ 99+
Raised
1 2 3 4 5 6 7 99+ 99+
Bordered
1 2 3 4 5 6 7 99+ 99+
Bordered Raised
1 2 3 4 5 6 7 99+ 99+

Buttons with Badges and Labels

  Messages  12
    
Click Here!
    
  Emails  8
    
Go  
    
  Favorites  13
    
Danger

Progress bars

The Distinctive Theme contains several enhancements to Twitter Bootstrap's default progress bars. They are now framed in a small well, enhancing their look. Additionally, they now come in several new colors that match the theme.

Forms

Forms are one of the most important parts of a website and this is one area where Twitter Bootstrap shines. The Distinctive Theme enhances forms as raised wells are often a great place for a form. It also includes the File Upload Plugin and styling from Jasny's excellent work which creates a file upload input which is consistent cross-browser and much more visually appealing. Vertical forms are also enhanced with slightly different control labels and better spacing.

Vertical Form Example

In addition to freeform text, any HTML5 text-based input appears like so.

Select fileChangeRemove
Some value here
Something may have gone wrong
Please correct the error
Woohoo!
Woohoo!
Horizontal Form Example

In addition to freeform text, any HTML5 text-based input appears like so.

Select fileChangeRemove
Some value here
Something may have gone wrong
Please correct the error
Woohoo!
Woohoo!

Icons

The Distinctive theme integrates Font Awesome Icons. Because the icons are really a font they look great at any size and can be styled with css.

Icon Size:
Shadow:
Icon Color:

Web Application Icons

Text Editor Icons

Directional Icons

Video Player Icons

Social Icons

Miscellaneous

Twitter Bootstrap is truly a UI toolkit with lots of additional components, many of which have been enhanced in the Distinctive theme. Of particular note is Pagination which has been greatly improved. It is now wrapped in a small well and with the help of some tasteful shadows it has much more definition and personality.

Images

  • Home

Pagination

Alerts

×

Alert block

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

× Error Change a few things up and try submitting again.
× Success You successfully read this important alert message.
× Information This alert needs your attention, but it's not super important.