Style Guide

FED Guide

Download a copy of the FED Guide for your site.

Headings

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus mi nibh, et iaculis orci finibus sit amet. Phasellus velit odio, sagittis non euismod ut, rhoncus id arcu. Nulla placerat ac dui vel porttitor. Suspendisse tincidunt elementum nisi eu venenatis. Vivamus a lacus ut nibh volutpat vulputate imperdiet lobortis sem. Aliquam pharetra risus at convallis consectetur. Suspendisse vestibulum gravida sapien, eget viverra urna luctus sed.

Lists

Unordered List

• List item
• List item
• List item
• List item

Ordered List

1. List item
2. List item
3. List item
4. List item

Tables

For tables we make use of the classes in the Bootstrap framework. As a minimum we like to apply 'table', 'table-striped' and 'table-bordered'.

To ensure the table can be viewed on mobile devices the table needs to be put inside a div container with class 'table-responsive'. For ease of use we dynamically inject this via javascript so publishers don't need to worry about it.

Table 1	Table 2	Table 3	Table 4	Table 5
Table 1	Table 2	Table 3	Table 4	Table 5
Table 1	Table 2	Table 3	Table 4	Table 5
Table 1	Table 2	Table 3	Table 4	Table 5
Table 1	Table 2	Table 3	Table 4	Table 5
Table 1	Table 2	Table 3	Table 4	Table 5

Margins

You can add margins to elements by applying one or more of these classes. These would normally be applied to elements in conjunction with the 'block' class (see below). Elements such as paragraphs and buttons already have margins applied so there is usually no need to apply classes to those elements.

For situations where there are gaps to the left and right due to the layout you can apply class 'margin-over' to the container element.

Padding / Gutters

You can add padding (or gutters) to elements by applying one or more of these classes. These would normally be applied to elements in conjunction with the 'block' class (see below). Elements such as paragraphs and buttons already have padding applied so there is usually no need to apply classes to these elements. Padding is different to margins. Margins are applied outside the element while padding is applied inside the element.

'padding-all' applies padding around the entire element

'padding-top' applies padding to the top of the element

'padding-right' applies padding to the right of the element

'padding-bottom' applies padding to the bottom of the element

'padding-left' applies padding to the left of the element

If you need bigger padding then you can apply the following classes.

Typical application would be a container element for a section such as on the home page.

'padding-all-full' applies padding around the entire element

'padding-top-full' applies padding to the top of the element

'padding-right-full' applies padding to the right of the element

'padding-bottom-full' applies padding to the bottom of the element

'padding-left-full' applies padding to the left of the element

Alignment

To align text within an element you can apply one of these classes. Typical application would be on a paragraph, button or block.

'align-left' aligns the text to the left within the element

'align-center' aligns the text to the middle of the element

'align-right' aligns the text to the right within the element

If you have a series of blocks and would like the height of each to line up regardless of the content size within then you can apply class 'align' to the container around the blocks.

If you would like content to sit vertically in the middle of an element then apply class 'align-vertical' to the element. This usually requires a container element that has a height set on it.

Colours

To set the font/text colour of an element, you can apply one of these classes

• 'primary'
• 'secondary'
• 'tertiary'
• 'highlight'
• 'section'
• 'shade'
• 'dark'
• 'light'

Background Colours

To set a background apply one of the following classes to set a background colour or image. If more than one is specified then the latter class in the list will be used.

bg-primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bg-secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bg-tertiary

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bg-highlight

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bg-section

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bg-shade

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bg-dark

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bg-light

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Background Colours with Gradients

To apply a gradient add the class 'bg-grad' in conjunction with one of the following.

bg-grad primary

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bg-grad secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bg-grad tertiary

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bg-grad highlight

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bg-grad section

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bg-grad shade

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bg-grad dark

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

bg-grad light

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Background Images

To apply a background image add the class 'bg-image' in conjunction with one of the following.

The default repeat is 'no-repeat', the default position is '50% 50%' and the default size is 'cover'. These can be overridden using additional classes below.

Hex

Apply class 'bg-hex'

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Road

Apply class 'bg-road'

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hex Pale

Apply class 'bg-hex-pale'

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Background Repeat

You can control how the background image repeats by setting one of these classes.

'bg-repeat' will set the background image to repeat.

Background Position

You can control the background image position by setting one of these classes. Please note that depending on the Background Size setting and size of the image and area, it may not have an affect.

• 'bg-top-left' will set the background image to start top left.
• 'bg-top-right' will set the background image to start top right.
• 'bg-bot-left' will set the background image to start bottom left.
• 'bg-bot-right' will set the background image to start bottom right.

Background Size

You can control how the background image appears by setting one of these classes.

• 'bg-size-cover' scales the background image so that the area is completely covered. This may result in some of the background image.
• 'bg-size-contain' scales the background image so that the width and height fit within the area.
• 'bg-size-initial' the background image is seen at its default size.
• 'bg-size-half' scales the background image to half its default size.

Borders

You can add borders to elements by applying one or more of these classes. Elements such as links and buttons may already have borders as part of their default look so it is typically not required to add these classes to those elements.

The default border colour is a light grey but can be altered by applying one of the classes from the Colours section below.

'border' applies a border around the entire element

'border-top' applies a border to the top of the element

'border-right' applies a border to the top of the element

'border-bottom' applies a border to the top of the element

'border-left' applies a border to the top of the element

If an element has a border as part of its default style and you wish to remove it on certain elements only, you can remove it by applying class 'border-none'. It will remove the entire border from the element.

Some examples on changing the border colour

border with colour class 'border-primary'

border-top with colour class 'border-secondary'

border-right with colour class 'border-tertiary'

border-bottom with colour class 'border-dark'

border-left with colour class 'border-light'

Links and Buttons

Links

A typical link

Buttons

Apply class 'btn' to a link to turn it into a button. If you want the button to take up 100% width then also apply class 'full'.

Button

Button full width

The default background of the button is grey so you can also apply a secondary class to define the buttons importance or use a class from the Backgrounds and Images section below to change the background colour of the button.

Button using btn-default

Button using btn-primary

Button using btn-danger

Button using btn-success

Button using btn-link

Button using btn-secondary

Button using btn-tertiary

Button using btn-highlight

Button using btn-section

Button using btn-shade

Button using btn-dark

Button using btn-light

Block of Content

Apply class 'block' to a div, section or article element. This will add some default padding as well. Usually used in conjunction with a Background Colour or Image. Example here shown using 'dark' class for background colour.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Effects

Apply the following classes if you want certain effects applied. You can apply one or more of these classes in any order.

Uppercase

Apply class 'uppercase' if you want text to appear in uppercase. This is preferable to writing out the text in capitals. This can be applied to headings, links, buttons, paragraphs etc...

Heading in uppercase

Link in uppercase

Button in uppercase

Overlay

Typically when putting text over a background image it can be hard to read. To combat this you can apply class 'overlay' that will apply a light grey transparent layer over the background image. This will help to bring out the text and make it easier to read. And negates the need to alter the actual image.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Hover

Apply class 'hover'. This class can be applied to a div, section, article or list element. The hover effect is a very light grey transparent layer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Translucent

Apply class 'translucent' if you want something to appear slightly transparent. The colour is determined by the background colour the content is on. See Background Colours and Images below for setting a background. The opacity is fixed at 80%. Example here shown using the 'primary' class for background colour.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Transparent

Apply class 'transparent' if you want something to appear quite transparent. The colour is determined by the background colour the content is on. See Background Colours and Images below for setting a background. The opacity is fixed at 40%. Example here shown using the 'primary' class for background colour.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Shadow

Apply class 'shadow' if you would like to add a shadow to an element. Typical elements this would be applied to include buttons and 'blocks'.

If you like the shadow to only be at the bottom then apply class 'shadow-bot' instead.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Animations

To control how fast or slow an element animates from one state to another you can apply one of these class.

• 'animate'
• 'animate-fast'
• 'animate-faster'
• 'animate-slow'
• 'animate-slower'

The below block is the one from the Hover effect above, now with the 'animate' class applied. Notice how the effect applies over time rather than instantly.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Icons

The icons used on this site are not background images or background sprites but rather font icons. This allows the icons to be used at different scales and colours without multiple versions being created.

To add an icon to an element, first apply class 'icon'. The default size of the icon will be the medium version. If you want a larger version then also apply class 'icon-large'.

You can also apply one of the colour classes above to colour the heading/text and icon. If you only want the icon to be a specific colour then also apply class 'icon-only'.

To position the icon there are four class options - 'icon-top', 'icon-right', 'icon-bottom', 'icon-left'.

• 'icon-right-dir'
• 'icon-left-dir'
• 'icon-tick'
• 'icon-cross'
• 'icon-times'
• 'icon-dir-left'
• 'icon-dir-right'
• 'icon-dir-up'
• 'icon-dir-down'
• 'icon-angle-left'
• 'icon-angle-right'
• 'icon-angle-up'
• 'icon-angle-down'
• 'icon-arrow-left'
• 'icon-arrow-right'
• 'icon-arrow-up'
• 'icon-arrow-down'
• 'icon-menu'
• 'icon-search'
• 'icon-person'
• 'icon-location'
• 'icon-notes'
• 'icon-question'
• 'icon-pen'
• 'icon-cog'
• 'icon-design'
• 'icon-form'
• 'icon-flow'
• 'icon-padlock'
• 'icon-monitor'
• 'icon-phone'
• 'icon-tv'
• 'icon-desktop'
• 'icon-latop'
• 'icon-mobile'
• 'icon-flow'
• 'icon-flow'
• 'icon-cloud'
• 'icon-facebook'
• 'icon-linkedin'
• 'icon-twitter'
• 'icon-youtube'
• 'icon-instagram'
• 'icon-email'

Accordions

You can easily add a set of accordion panels to your content by applying the class 'accordion' to a heading. All the content between that heading and the next (of the same level) will become the content for an accordion.

The structure for the accordions is then added in via javascript and uses the Bootstrap Framework. This allows for an easy editing experience.

Accordion heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et malesuada tortor. Maecenas dictum auctor magna, varius aliquam tellus tempus in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse vitae condimentum sem. Sed ultricies lobortis orci, eu ultrices tellus tincidunt non. Mauris nulla nibh, condimentum ut est eu, vestibulum vulputate tortor. Nam rutrum ac lectus nec varius. Integer mollis auctor est. Sed at augue a tortor tincidunt ornare aliquet quis arcu. Maecenas fermentum odio id metus rutrum, aliquet convallis lacus gravida. Morbi neque lacus, lacinia sed maximus egestas, scelerisque eget enim. Phasellus lorem diam, interdum mollis mi a, egestas sagittis tellus.

Accordion heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et malesuada tortor. Maecenas dictum auctor magna, varius aliquam tellus tempus in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse vitae condimentum sem. Sed ultricies lobortis orci, eu ultrices tellus tincidunt non. Mauris nulla nibh, condimentum ut est eu, vestibulum vulputate tortor. Nam rutrum ac lectus nec varius. Integer mollis auctor est. Sed at augue a tortor tincidunt ornare aliquet quis arcu. Maecenas fermentum odio id metus rutrum, aliquet convallis lacus gravida. Morbi neque lacus, lacinia sed maximus egestas, scelerisque eget enim. Phasellus lorem diam, interdum mollis mi a, egestas sagittis tellus.

Accordion heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et malesuada tortor. Maecenas dictum auctor magna, varius aliquam tellus tempus in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse vitae condimentum sem. Sed ultricies lobortis orci, eu ultrices tellus tincidunt non. Mauris nulla nibh, condimentum ut est eu, vestibulum vulputate tortor. Nam rutrum ac lectus nec varius. Integer mollis auctor est. Sed at augue a tortor tincidunt ornare aliquet quis arcu. Maecenas fermentum odio id metus rutrum, aliquet convallis lacus gravida. Morbi neque lacus, lacinia sed maximus egestas, scelerisque eget enim. Phasellus lorem diam, interdum mollis mi a, egestas sagittis tellus.

Tabs

You can easily create a set of tabbed content by first applying the class 'tabs' to a list of items that will form the tab links.

Then apply the class 'tab' to a heading and all the content between that heading and the next (of the same level) will become the content for a tab. All content for each tab must follow one after the other.

The structure for the tabs is then added in via javascript and uses the Bootstrap Framework. This allows for an easy editing experience.

• Tab 1
• Tab 2
• Tab 3

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et malesuada tortor. Maecenas dictum auctor magna, varius aliquam tellus tempus in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse vitae condimentum sem. Sed ultricies lobortis orci, eu ultrices tellus tincidunt non. Mauris nulla nibh, condimentum ut est eu, vestibulum vulputate tortor. Nam rutrum ac lectus nec varius. Integer mollis auctor est. Sed at augue a tortor tincidunt ornare aliquet quis arcu. Maecenas fermentum odio id metus rutrum, aliquet convallis lacus gravida. Morbi neque lacus, lacinia sed maximus egestas, scelerisque eget enim. Phasellus lorem diam, interdum mollis mi a, egestas sagittis tellus.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et malesuada tortor. Maecenas dictum auctor magna, varius aliquam tellus tempus in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse vitae condimentum sem. Sed ultricies lobortis orci, eu ultrices tellus tincidunt non. Mauris nulla nibh, condimentum ut est eu, vestibulum vulputate tortor. Nam rutrum ac lectus nec varius. Integer mollis auctor est. Sed at augue a tortor tincidunt ornare aliquet quis arcu. Maecenas fermentum odio id metus rutrum, aliquet convallis lacus gravida. Morbi neque lacus, lacinia sed maximus egestas, scelerisque eget enim. Phasellus lorem diam, interdum mollis mi a, egestas sagittis tellus.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et malesuada tortor. Maecenas dictum auctor magna, varius aliquam tellus tempus in. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse vitae condimentum sem. Sed ultricies lobortis orci, eu ultrices tellus tincidunt non. Mauris nulla nibh, condimentum ut est eu, vestibulum vulputate tortor. Nam rutrum ac lectus nec varius. Integer mollis auctor est. Sed at augue a tortor tincidunt ornare aliquet quis arcu. Maecenas fermentum odio id metus rutrum, aliquet convallis lacus gravida. Morbi neque lacus, lacinia sed maximus egestas, scelerisque eget enim. Phasellus lorem diam, interdum mollis mi a, egestas sagittis tellus.