Online Styleguide
The Online Styleguide is a uniformed compendium for project managers, web publisher, designers or developers of how to maintain, update or further develop a website. This section is covering an overview of all available templates developed for this website.
Browser Support
Google Chrome*, Mozilla Firefox*, Apple Safari, Internet Explorer 11+ * latest 2 iterations
Typography
This section defines default stylings and behaviours for HTML and CSS that can be used within a wysiwyg text editor. A full documentation and detailed examples can be found within the Bootstrap documentation. We only display the most important elements here.
Headings
Headings have to follow a chronologically order. For example a <h1> is followed by <h2>
than <h3> and so on. You should not use different headings just because of
their styling. So placing first a <h2> and than a <h4> causes SEO problems.
You should avoid the overuse of <h1> tags. In contrary to some beliefs, it is no problem to use
multiple <h1> tags however the html outline should always be respected.
h1. Sample Heading
h2. Sample Heading
h3. Sample Heading
h4. Sample Heading
h5. Sample Heading
h6. Sample Heading Secondary text
h1, h2, h3, h4, h5, h6, h6.small
Body Text
The main content part of an area. Always be wary that the most important aspect of SEO is to have well written and structured content. The best design and code will not help your ranking with a bad content strategy.
This is a lead text describing the start of a content area to get the attention of the reader.
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.
This line of text is meant to be treated as fine print.
p.lead, p, small
Colors
The color palette defines the main look & feel of a website and is mostly adapted from an available CI & CD
In addition to Bootstrap's defaults, we added the .brand-secondary class to the list as many
brands have at least two main colours.
.text-{name} for text color
.brand-{name} for background color
{name} can be:
primary, secondary, success, info, warning, danger, muted
Lists
Lists are a great way of displaying structured informations. If this data has a specific order
use the <ol> (ordered list) tag otherwise the <ul> (unordered list) tag.
Sometimes you have information that leads to an explanation or more information. For this
the definition list is the markup to choose from. Simple nest a definition term <dt>
and than the definition description <dd> within the definition list <dl>.
There can be multiple definition description follow after a definition term.
Unordered
- Lorem ipsum dolor
-
Facilisis in pretium
- Nulla volutpat aliquam
-
Facilisis in pretium
- Nulla volutpat aliquam
- Eget porttitor
Ordered
- Lorem ipsum dolor
-
Facilisis in pretium
- Nulla volutpat aliquam
-
Facilisis in pretium
- Nulla volutpat aliquam
- Eget porttitor
Description
- Euismod Dolor
- A description list is perfect for defining terms. Etiam porta sem malesuada Etiam porta sem malesuada magna mollis euismod. magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Donec id elit non mi porta gravida at eget metus.
Emphasis
In addition to the main elements described above, you can utilise an even broader set of html tags listed here in the emphasis section.
Most WYSIWYG editors are able to produce them simply by pressing a button, but it is wise to study them and eventually add missing tags through the source code mode.
A full list and detailed description can be found within the W3C HTML5 documentation.
The hyperlink element
<a href="#">My text</a>
The abbr element
<abbr title="#">TXT</abbr>
<address>My text<address>
The cite element
<cite>My text</cite>
The code element
<code>My text</code>
The delete element
<del>My text</del>
The definition element
<dfn>My text</dfn>
The emphasis element
<em>My text</em>
The insert element
<ins>My text</ins>
The keyboard element
<kbd>My text</kbd>
The mark element
<mark>My text</mark>
The strikethrough element
<s>My text</s>
The sample element
<samp>My text</samp>
The small element
<small>My text</small>
The span element
<span>My text</span>
The strong element
<strong>My text</strong>
The subscript element
<sub>My text</sub>
The superscript element
<sup>My text</sup>
The time element
<time>My text</time>
The underline element
<u>My text</u>
The variable element
<var>My text</var>
The
<wbr>My text<wbr>
Block quotes
Per definition block-quotes are cites extracted from resources such as books or articles. They generally consist of a body text and the authors name.
Through Bootstrap's utilities they can be left- or right-aligned. More options are also available through different classes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Spacing
There are also some extra tags and classes which might be helpful when creating your pages in order to manage spacing in between content areas.
Add the .spacer classes to the <hr /> in order do increase or decrease the
spacing. This can be used on almost every element.
Linebreak
<hr />
Margins
.spacer-zero sets margin-top and margin-bottom to 0.
.spacer-xs sets margin-top and margin-bottom to $line-height-computed / 4.
.spacer sets margin-top and margin-bottom to $line-height-computed / 2.
.spacer-lg sets margin-top and margin-bottom to $line-height-computed.
Iconography
Generate font icons using the gulp icons
command. The following icons are available throughout your website. Implement them using
{% include "includes/icon.html" with icon="{name}" [color="{color}" title="{title}" sprite="{sprite}"] %} and replace {name} with the icon name.
Colors
Classes can be applied to non-colored icons to force their color
More will be added shortly from Spot framework
icon-white
icon-brand-primary
icon-light-primary
icon-red
icon-spot-color-neutral-60
Tables
For basic styling — light padding and only horizontal dividers — add the base class .table
to any <table>. It may seem super redundant, but given the widespread use of tables
we've opted to isolate our custom table styles. For complete reference, please visit the
Bootstrap documentation.
Basic Table
The basic table is the default behaviour when using the .table class. Not adding a class will
result in a table without styles at all.
To ensure a table is responsive, add the wrapper class .table-responsive to an element
around the table. For example a <div>.
More about the basics of a table can be found within the Bootstrap documentation.
| Page | Visits | % New Visits | Revenue |
|---|---|---|---|
| /index.html | 1265 | 32.3% | $321.33 |
| /about.html | 261 | 33.3% | $234.12 |
| /sales.html | 665 | 21.3% | $16.34 |
| /blog.html | 9516 | 89.3% | $1644.43 |
| /404.html | 23 | 34.3% | $23.52 |
| /services.html | 421 | 60.3% | $724.32 |
| /blog/post.html | 1233 | 93.2% | $126.34 |
Striped Rows
Sometimes it is necessary to distinguish content form within a table from one another. For this add the
class .table-striped to the table and visual even and odd colours are added.
Use this on larger table where content is difficult to read and a clear separation might be required.
More about striped rows can be found within the Bootstrap documentation.
| Page | Visits | % New Visits | Revenue |
|---|---|---|---|
| /index.html | 1265 | 32.3% | $321.33 |
| /about.html | 261 | 33.3% | $234.12 |
| /sales.html | 665 | 21.3% | $16.34 |
| /blog.html | 9516 | 89.3% | $1644.43 |
| /404.html | 23 | 34.3% | $23.52 |
| /services.html | 421 | 60.3% | $724.32 |
| /blog/post.html | 1233 | 93.2% | $126.34 |
Bordered Tables
These tables are used for displaying table data rather than just general listings or informations.
Simply add the class .table-bordered to the table and a border is added around the table.
Use this on tables where structured data is displayed or the context of the table is separated from the surrounding content.
More about bordered tables can be found within the Bootstrap documentation.
| Page | Visits | % New Visits | Revenue |
|---|---|---|---|
| /index.html | 1265 | 32.3% | $321.33 |
| /about.html | 261 | 33.3% | $234.12 |
| /sales.html | 665 | 21.3% | $16.34 |
| /blog.html | 9516 | 89.3% | $1644.43 |
| /404.html | 23 | 34.3% | $23.52 |
| /services.html | 421 | 60.3% | $724.32 |
| /blog/post.html | 1233 | 93.2% | $126.34 |
Contextual Classes
At any given time, you can combine one or more table styles as described above. But always keep the use cases of each individual style in mind.
Additionally you are able to add contextual classes to the table to highlight single rows. These can be
.active, .success, .info, .warning and .danger.
Simply add them to the <tr> element of the table.
More about bordered tables can be found within the Bootstrap documentation.
| Page | Visits | % New Visits | Revenue |
|---|---|---|---|
| /index.html | 1265 | 32.3% | $321.33 |
| /about.html | 261 | 33.3% | $234.12 |
| /sales.html | 665 | 21.3% | $16.34 |
| /blog.html | 9516 | 89.3% | $1644.43 |
| /404.html | 23 | 34.3% | $23.52 |
| /services.html | 421 | 60.3% | $724.32 |
| /blog/post.html | 1233 | 93.2% | $126.34 |
Forms
Individual form controls automatically receive some global styling. All textual <input>,
<textarea>, and <select> elements with .form-control are set
to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
For complete reference, please visit the
Bootstrap documentation.
Buttons
There are various button sizes and colours to choose from. It is imperative however that you structure the usage according to the importance of the action. When using two actions together, decide which one is of more importance and make it slightly bigger.
For color usage also consider the individual use case. A red button is ideal for cancellation actions while the green counterpart signifies a success action. Please refer to the button names for its descriptive meaning.
The Spot framework only defines Default and Primary buttons, so use of others is discouraged.
Button Utilities
There are additional combinations possible using the button system. You can easily add drop-down menus, icons or append more buttons to one another.
More about button utilities can be found within the Bootstrap documentation.
Basic Elements
The basics of a form element include text inputs and basic controls. A form always starts with the <form>
element followed with a <fieldset>. A fieldset can be the ideal element to create a
two column form. Also always ensure to add the class .form to the forms class.
The entire form can also be easily displayed horizontally
or vertically.
Simply add either .form-horizontal or .form-inline to the forms class.
More about forms can be found within the Bootstrap documentation.
Selection Elements
These elements are ideally used for user choices.
More about controls can be found within the Bootstrap documentation.
Disabled States
Various states can be helpful to restrict user actions prior to certain requirements. They can also be helpful to just display data without the ability to change the form itself.
More about states can be found within the Bootstrap documentation.
Validation States
Validation helps the user to understand what went wrong. It is recommended to display a message as well as to highlight the specific error within input.
These states can either be shown directly using AJAX or after a page reload from the server side.
More about validation can be found within the Bootstrap documentation.
Controls
Messages
Search Groups
Generic input groups aren't supported due to how buttons vs inputs look like, so only search groups are supported.
Grid
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mix-ins for generating more semantic layouts. For complete reference, please visit the Bootstrap documentation.
Standard Grid
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
Advanced Grid
col-md-4 col-lg-2 col-xs-12 Example of what we can do with bootstrap.
col-md-4 col-lg-2 col-xs-12 Example of what we can do with bootstrap.
col-md-4 col-lg-2 col-xs-12 Example of what we can do with bootstrap.
col-md-4 col-lg-2 col-xs-12 Example of what we can do with bootstrap.
col-md-4 col-lg-2 col-xs-12 Example of what we can do with bootstrap.
col-md-4 col-lg-2 col-xs-12 Example of what we can do with bootstrap.
col-md-4 col-lg-3 col-xs-12 Example of what we can do with bootstrap.
col-md-4 col-lg-3 col-xs-12 Example of what we can do with bootstrap.
col-md-4 col-lg-3 col-xs-12 Example of what we can do with bootstrap.
col-md-4 col-lg-3 col-xs-12 Example of what we can do with bootstrap.
col-md-3 col-lg-4 col-xs-12 Example of what we can do with bootstrap.
col-md-3 col-lg-4 col-xs-12 Example of what we can do with bootstrap.
col-md-3 col-lg-4 col-xs-12 Example of what we can do with bootstrap.
col-md-6 col-lg-6 col-xs-12 Example of what we can do with bootstrap.
col-md-6 col-lg-6 col-xs-12 Example of what we can do with bootstrap.
col-lg-12 Example of what we can do with bootstrap.
Components
Components are reusable modular parts of a website that can be implemented multiple times. This list features the most common elements that can be found within the Bootstrap framework.
Navigation
Default nav .nav-default
Tabs
Tabs are controlled over the data-toggle="tab" attribute and a reference name href="#home"
which points to a container with the corresponding id="home"
More about tabs can be found within the Bootstrap documentation.
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.
Pills
Pills behave similar to tabs, they just use another class .nav-pills for styling.
More about tabs can be found within the Bootstrap documentation.
Breadcrumbs
Indicate the current page's location within a navigational hierarchy.
More about tabs can be found within the Bootstrap documentation.
Pagination
Used for navigating within multiple pages like the search results page.
More about tabs can be found within the Bootstrap documentation.
Labels & Badges
Adds additional information to a specific context.
More about tabs can be found within the Bootstrap documentation.
Labels
Default Primary Success Info Warning Danger
Badges
Thumbnails
Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.
More about tabs can be found within the Bootstrap documentation.
Media Object
Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
As of Bootstrap 3.3.0 there are additional alignment options for the media object available such as
media-top, media-middle and media-bottom.
More about the media object can be found within the Bootstrap documentation.
-
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. -
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
List Groups
Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content.
More about tabs can be found within the Bootstrap documentation.
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Morbi leo risus
Wells
Use the well as a simple effect on an element to give it an inset effect.
More about tabs can be found within the Bootstrap documentation.
Tooltips & Popovers
Add small overlays of content, like those on the iPad, to any element for housing secondary information.
More about tabs can be found within the Bootstrap documentation.
Tooltips
Popovers
Collapse
Get base styles and flexible support for collapsible components like accordions and navigation.
More about tabs can be found within the Bootstrap documentation.
Carousel
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
More about tabs can be found within the Bootstrap documentation.
Modals
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
More about tabs can be found within the Bootstrap documentation.
Progress Bars
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.
More about tabs can be found within the Bootstrap documentation.
Basic
Striped
Animated
Stacked
Contextual alternatives
Utility classes
There is a number of utility classes provided, both bootstrap and custom to help with building pages apart from spacers and the ones covered in "Typography" and "Iconography"
img-responsive |
makes image responsive, but the image will not exceed it's original width |
sr-only |
the text inside the element will only be visible for screen readers |
clearfix |
when applied to a container of floated elements will expand the element correctly |
invisible |
when applied to an element will hide it (but will maintain it's dimensions in place) |
white-space-nowrap |
the text inside the element with this class will not wrap |
white-space-normal |
the text inside the element with this class will wrap normally |
font-weight-normal |
the text inside the element with this class will be rendered as a regular Open Sans |
centered-content |
when applied to the element, will center it's contents both vertically and horizontally. for vertical centering needs a height specified |
no-padding |
resets the padding to 0 |
no-margin |
resets the margin to 0 |
pull-left |
floats element to left |
pull-right |
floats element to right |
center-block |
makes block element center aligned, requires a width |
row-middle |
when applied to a bootstrap row will center the contents of the columns vertically. only works with
sm
columns (will stack on xs and will be horizontal on sm |
row-gutter-100 |
when applied to a bootstrap row will increase the gutter width to 100px (others may be added) - only meant to be used in 2 col setups |