BME Style Guide

BME Style Guide

This page includes every single element so that we can make sure things work together smoothly.

Top Bar


Icon bar


Orbit

  • Caption 1 (One). Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  • Caption 2 (Two). Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
  • Caption T3 (Tee Three). The Terminator’s an infil-tration unit. Part man, part machine. Underneath, it’s a hyperalloy combat chassis,mircoprocessor-controlled, fully armored. Very tough. But outside, it’s living human tissue. Flesh, skin, hair,blood, grown for the cyborgs.

Type

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.
h6. This is an invisible header.

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader
h6.subheader

 

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
Ordered lists are great for lists that need order, duh.
  1. List Item 1
  2. List Item 2
  3. List Item 3
Definition lists are great for small block of copy that describe the header
Definition List
Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
Blockquote

I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.Isaac Asimov


Contact (Vcard)

Alert Boxes

This is a standard alert (div.alert-box).
×
This is a success alert (div.alert-box.success).
×
This is an alert (div.alert-box.alert.round).
×
This is a secondary alert (div.alert-box.secondary).
×

Block Grid



Buttons


Button Groups


Dropdown Button
Dropdown Button
Dropdown Button
Dropdown Button
Dropdown Button


Split Buttons

Split Button
Split Button
Split Button
Split Button


Clearing


Forms

Fieldset



.com


Link Dropdown »
Content Dropdown »

Title

Some text that people will think is awesome! Some text that people will think is awesome! Some text that people will think is awesome!

Launching a Discovery Mission

Button


Flex Video


Inline Lists


Labels

Regular Label
Radius Secondary Label
Radius Alert Label
Success Label


Pagination


Panels

This is a regular panel.

It has an easy to override visual style, and is appropriately subdued.

This is a callout panel with radiused edges.

It’s a little ostentatious, but useful for important content.


Progress Bars


Reveal

Example Modal…
Example Modal w/Video…

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.

Second Modal…
×

This is a second modal.

See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.

×

This modal has video

×


Sliders


Accordion

  • Accordion 1
  • Accordion 2

    Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Accordion 3
    Panel 3. 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.

Tabs

Tab 1
Tab 2
Tab 3
Tab 4

First panel content goes here…

Second panel content goes here…

Third panel content goes here…

Fourth panel content goes here…

Tab 1
Tab 2
Tab 3
Tab 4

Panel 1. Content goes here.

Panel. 2 content goes here.

Panel 3 content. Goes here.

Panel 4 content goes. Here.


Side Nav



Tables

Table Header Table Header Pants Is it Responsive?
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. No Yeah, it is responsive. Of course it’s responsive!
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Yes ¡Claro que si!
Content Goes Here Content Goes Here No Yup.

Thumbnails


Tooltips

The tooltips can be positioned on the “tip-bottom”, which is the default position, “tip-top” (hehe), “tip-left”, or “tip-right” of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full width and bottom aligned.