The Style Guide

This style guide is designed to aid the styling of elements within the templates and make sure that the majority of possible requirements of most website builds are covered. Each website is different, so not all needs may be met with this guide, but it is able to grow in the future. So when building, make sure that all these elements are styled up appropriately for when they are utilised on the website you are building.

NB. When initially created, this style guide is classified as unstyled.

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5

Headline 6

---

Lists

Unordered Lists

• Style the lists as appropriate,
  • but make sure they can be nested
• so that the flow is not interrupted.

Ordered Lists

1. Style the lists as appropriate,
   1. Make sure they can be nested
      1. and nested again
   2. Make sure they can be nested
2. That was easy.

---

Cookie Policy

This is an example of how the cookie layout will automatically render so it can be amended.

---

Tooltips

If the design requires it, this allows some basic CSS driven functionality to have a nice looking tooltip*. Use a class of 'tooltip' with additional appending of 'tooltip-left' or 'tooltip-right' dependent on needs.

.tooltip .tooltip-Left .tooltip-right

---

Blockquotes

Styling of the <blockquote> tag if quotes are utilised within the design.

---

Code

Code - wrap with a <pre> tag if you would like to keep layout, although do think about how this will work responsively.

---

Buttons

Colours

All buttons require the class of 'button' and then additional classes as per requirements. Most contrasting call to action colour would be primary and this would filter down based upon the design. Delete classes as appropriate.

.button .button-primary .button-secondary

Format

To alter format and sizing of buttons, use these classes. Delete classes as appropriate.

.button-large .button-small .button-full

---

Alerts

---

Dropdowns

Dropdowns have a basic structure. Container with a class of 'dropdown', a child <a> and a <div>. The <a> has an href attribute of the id of the child <div>. The 'dropdown' class allows for functionality on touch devices.

---

Tables

Tables should have markup as below. This allows the Footable plugin to make it work responsively. Certain columns columns can be hidden with the 'data-hide' attribute on the initial <th> in the <thead> based upon the breakpoints set within the 'common.js' file Has ability to add Sorting, Filtering & Pagination

Title1	Title2	Title3	Title4
Data1	Data2	Data3	Data4
Data1	Data2	Data3	Data4

---

Tabs to Mobile Accordions

Initially rendered as separate items, javascript generates a new layout. Initial layout* of on desktop is a tab system, but once a breakpoint is achieved, the layout should change to an accordion. Multiple can be used on a page.

*Must add additional layouts. MC

---

Accordions

Same as a mobile tab/accordion layout. Styling will need to be updated similar to Accordions in Tabs to Mobile Accordions. Multiple can be used on a page. Set an "data-independent" attribute to "true" if you would like other sections to be independent of the current one. If not required, this can be removed.

*Must merge funtionality and styling with Tabs to Accordions. MC

---

Forms

When creating a form use this layout.

Fields

Below are some examples of an <input> of type="text", textarea and a RadDropDownList. Add a label to each as appropriate, even if not visible in the design (make it invisible with the class of 'visuallyhidden').

Errors

Error Summary

At the top of the form, include a summary. A <div> with the class of 'error-summary'. Within the summary, create an unordered list <ul> the fields which have errors. Add an <a> tag to link to the corresponding field or parent <div>. It must include an error message which is consistent with what is next to the field.

Error Notice

After the input label add a <span> with a class of 'error-notice'. Include the same error message as in the summary.