Style Guide

Use to position content on top of other content.

Use to allow parts of one webpage to load or update within a second webpage (repurpose content).

Use to provide contextual feedback messages for typical user actions. Choose from a handful of available and flexible alert messages.

Use to align text to the left, centre or right. Or, use to align a block of content or an image to the centre.

Use badges (numerical indicators) to highlight the number of updates, new or unread items associated with a link.

Use to add single or multiple borders to design elements in order to separate or call attention to content. Additionally, remove default borders or sharpen corners that appear in design components such as a "well".

Use buttons to create a call to action that entices the user to submit content from a form. Also, use buttons also take users to a webpage that provides additional information.

Use the Calendar of events interface to navigate a chronological list of events.

Use a carousel to tab or cycle through content in a slide show format.

Use to dynamically generate charts and graphs from a table.

Use to emulate source code and display it in monospace font.

Use to provide syntax and highlight source code snippets within an HTML page.

Use colour as a presentation element for decorative purposes to convey information.

Use a country identifier, a basic AjaxLoader wrapper, to  insert Ajaxed-in content, based on a visitor's country (determined by Free Geo IP).

Use data inview to display an overlay when a section moves out of the viewport.

Use to allow a webpage to specify different image sources to display, based on media queries.

Use to enhance a data table and allow sorting, filtering, searching, pagination and other such features.

Use to add auto-complete functionality to specific input fields; dynamically display a list of words that match a datalist.

Use to update the contents of a datalist element dynamically, based upon user input.

Use to provide an interface to select a date in a form.

Use to make grid cells the same height. Make the inner elements (panels, wells and so forth) inherit the height from the parent grid.

Use to create collapsible expand and hide widgets that a user can select to show or hide content.

Use a feed widget to aggregate and display the entries from one or more web feeds on a webpage. Supported Web feed formats are Atom, RSS, and Media RSS.

Use a float to change the normal flow of an element. Push the element to the left or right of its container, where text and inline elements wrap around it.

Use a footnote to note a reference, citation, or comment that provides details about something on that page. It is non-critical content that relates to the main text, and is always at the bottom of the page.

Use a geomap to display a dynamic map and overlay information from additional sources.

Use a grid system (a series of rows and columns that house content) to create page layouts.

Use a heading to title a section of content that immediately follows it. Headings are large, bold, concise text that are hierarchical in nature.

Use one of the two icon sets, Glyphicons or Font Awesome for decorative purposes. Icons are glyphs − picture-based fonts, similar to wingdings. They do not convey meaning, unlike traditional fonts. Therefore, real text must accompany the icon to ensure accessibility requirements are met. Make the text visible or invisible, as long as it is present.

Use images to visually represent a noun (person, place, thing) or a verb (action). An image is a static two dimensional visual artifact that is a type of non-text content. It is classified as decorative, simple, complex, or an image of text.

Use to show or hide content − it all depends on what you need to accomplish. There are styles specific to assistive technology (aid screen-reader users), responsive design (view from small to large devices), general usage (use of toggle tabs), and print (print only necessary info).

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

Use to mimic the keys of a computer keyboard.

Use the appropriate label to describe and highlight text-based (non-numerical) information.

Use a link (text and/or image) to take a user to another webpage, jump to another location within the same webpage, or perform a user-control function determined by client-side scripting (JavaScript).

Use list group components to contain related content.

Use to display a number of connected items in a consecutive manner. Typically list items appear one below the other.

Use to display mathematical formulas (not variables within a sentence) with MathML.

Use to increase or decrease the proximity of one object to another. This adjusts the white space between two elements to suggest whether items are related or unrelated. Additionally, these classes allow grid and non-grid content to exist in the same row.

Use to display a value in a range when there is a known minimum and maximum value (for example, the height of something).

Use a modal pop-up window for information that stays in front of the original window.

Use to provide an accessible multimedia player to embed video and audio into webpages.

Use to adjust the opacity of any element.

Use to position one element over another.

Use a pagination index for long documents that are best broken up over several pages. A user can select a specific page within a document through either the "Next", "Previous", or (if present) the numeric pagination hyperlinks.

Use to create a visual grouping of content. Panels have colour themed options, as well as offer a distinct header and footer.

Use to style a navigation list and to draw focus to an active link.

The progress bar is used to provide up-to-date feedback on the progress of a workflow or action. Meter is used to display a value in a range when there is a known minimum and maximum value (scalar measurement).

Use to display the progress of a task.

Use quotations to cite a group of words by someone other than the original author or speaker.

Use to reflow and wrap non-grid content around and below a grid cell (box of content).

Use to provide session timeout and inactivity timeout functionality.

Use to override the default size of any text (make text large or small).

Use to display a slider control bar.

Use this web editor tool to produce tables that conform to WCAG 2.0. This tool helps to identify relationship errors within a complex table.

Use to organize data into rows and columns in order to create data cells.

Use to show multiple aspects of related content in different panes, side by side.

Use to display images in a lightbox, either individually or as part of a gallery.

Use to create a content transition with optional states (fade in, fade out, slide right or slide left).

Use to implement and embed Twitter timelines.

Use when there is reference to a variable like “x.”, "n" or "y" within a sentence (a non-mathematical phrase). New

Use to provide alternate white and grey stripes to table rows in horizontal or multiple directions. This helps to visually connect horizontal with vertical data.