You are here

Navigation

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

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.

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.

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.

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.

Search Groups

Generic input groups aren't supported due to how buttons vs inputs look like, so only search groups are
supported.

Sizing

LargeLarge

DefaultDefault

SmallSmall

There is no input-xs option available as of Bootstrap 3.

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-4col-lg-2col-xs-12Example of what we can do with bootstrap.

col-md-4col-lg-2col-xs-12Example of what we can do with bootstrap.

col-md-4col-lg-2col-xs-12Example of what we can do with bootstrap.

col-md-4col-lg-2col-xs-12Example of what we can do with bootstrap.

col-md-4col-lg-2col-xs-12Example of what we can do with bootstrap.

col-md-4col-lg-2col-xs-12Example of what we can do with bootstrap.

col-md-4col-lg-3col-xs-12Example of what we can do with bootstrap.

col-md-4col-lg-3col-xs-12Example of what we can do with bootstrap.

col-md-4col-lg-3col-xs-12Example of what we can do with bootstrap.

col-md-4col-lg-3col-xs-12Example of what we can do with bootstrap.

col-md-3col-lg-4col-xs-12Example of what we can do with bootstrap.

col-md-3col-lg-4col-xs-12Example of what we can do with bootstrap.

col-md-3col-lg-4col-xs-12Example of what we can do with bootstrap.

col-md-6col-lg-6col-xs-12Example of what we can do with bootstrap.

col-md-6col-lg-6col-xs-12Example of what we can do with bootstrap.

col-lg-12Example of what we can do with bootstrap.

Grid System allows you to use some responsive helpers classes to hide or show depending of the device size.

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.

We use cookies to ensure that we give you the best experience on our website. To learn more about cookies and how we use them, and to learn how to change your cookie settings, please visit our Cookie Statement. By using this website you agree to our use of these cookies.