Common Elements & Helpful Stuff!

Useful elements to help when creating different layouts, forms and other stuff!

Notes

Bootstrap

Great effort has been made to use the Bootstrap 3 framework to its fullest, and so you will find the documentation on the Bootstrap website very helpful, use it!


Colours

We have some variables setup that can be used:

LESS Variables / CSS Classes

Variable NameHex Colour Value
@wex_gray_light #f0f0f0
@wex_gray_medium_light #d0d0d0
@wex_gray_medium #e4e4e4
@wex_gray_medium_dark #959595
@wex_gray_very_dark #333
@wex_red #EE4238
@wex_red_hover #E01E13
@wex_blue #20066A
@wex_green #6ad147
Useful CSS ClassVariableHex Colour Value
.wex-red @wex_red #EE4238
.wex-text @wex_text #333333
.wex-blue @wex_blue #20066A

Forms

There have been slight tweaks to the way that Bootstrap styles form elements such as text boxes to bring them into line with the Wex styling, but in the main you should be able to achieve any layouts that you require using the helper classes provided by Bootstrap.

Note: All Checkboxes, Radios, Textboxes, Password Boxes etc.. should be given a corisponding label, if required the label can be hidden using the 'hidden' class.

Text Box Example

<label for="text_input" class="hidden">Text Label</label> <input class="form-control" type="text" name="text_input" id="text_input" placeholder="Text Input" />

Checkbox Example

<div class="checkbox"> <label for="text_input"><input type="checkbox" name="checkbox_input" id="checkbox_input" />Checkbox Label</label> </div>

Buttons

There are three main button styles that can be easily achieved using CSS classes. Some of the button styles have a small icon, this is achieved using a font icon and so requires the addition of a small snippet of HTML (span).

Primary Button

This is the main 'Primary' call to action button on the site and should be used primarily for Add to Basket and Checkout buttons

Primary Button

<a href="#" class="wex-btn-a">Primary Button<span><i class="fa fa-caret-right"><!-- h --></i></span></a>

Secondary Button

The secondary button - used for updates, cancels, closes.. that kind of thing

Secondary Button

<a href="#" class="wex-btn-b">Secondary Button<span><i class="fa fa-caret-right"><!-- h --></i></span></a>

Standard Button

Plain old button used for Back to top and things like that.

Standard Button

<a href="#" class="wex-btn-c">Standard Button</a>

Other buttons

If you're linking to an action (add to basket), or a form submision or just a link you don't want search engines to follow for some reason, use the HTML 'button' tag rather than the HTML 'a' tag.

<button href="#" class="wex-btn-c"> Random Button </button>

Button href tags don;t do anything without alittle bootstrap JS help, so this link only functions in JS aware browsers.


General Layout

The majority of the layout sticks very closely to Bootstrap 3 guidelines and uses the Bootstrap 3 clases to the fullest. Check their documentation for more information about creating rows / columns / grid layouts.

Bordered Content Panels

There are styles setup to help with bordered content areas, by default applying them will add the correct border and padding to your container

Some content

Code:

<div class="bordered-content">Some content</div>

Typography

The base text size is 12px with a hex colour value of #333333

Our base font family: "Helvetica Neue",Helvetica,Arial,sans-serif is currently being used for everything

LESS

Font Sizes

Variable NameFont Size
@xs_text 11px
@lg_text 14px
@xlg_text 16px
@xxlg_text 20px

Headings

Headings across the site are pretty standard, any bootstrap elements and functionality should be styled by default, ie - things like Panels and Wells. Headings inside the default Blocks that have been created should be styled accordingly providing the correct structure is met and the correct CSS classes are applied to the block.

There is a "no-margin-top" CSS class that can be used to remove any gaps that may be added at the top of blocks if a non standard block is created.

Heading 1 - 24px

Heading 2 - 21px

Heading 3 - 18px

Heading 4 - 16px

Heading 5 - 14px
Heading 6 - 14px

Each heading also has a corresponding CSS class, this is to allow you to achieve the correct design without ruining the document outline, and hindering SEO efforts!

.h1, .h2, .h3, .h4, .h5, .h6

<h3 class="no-margin-top h2">Some Heading Here</h3>

Font Awesome 4.0.3

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

See the Font Awesome website for a list of icons that are available. Note this site uses version 4.0.3 the current Font Awesome library is 4.4.0 so not all icons lists on their website will be available.

<i class="fa fa-caret-right"><!-- h --></i>

Note the use of the !-- h -- which is required when applying this code to the site via a TinyMCE editor. By default this 'cleans' the HTML stripping out empty tags.

fa-spin, can also be added to spin icons , and fa-border can be used to apply a border around icons. Many other options are also possible - see Font Awesome examples for more details.

When used in combination with bootstrap classes and HTML, you can achieve quite a lot, with very little effort.


Blocks

There are a number of blocks that have been created and are ready to use, you will find all of the CSS for blocks is generated by a blocks.less file, all blocks inherit from a main block mixin.

By default all blocks will expand to the width of their container to enable them to be used in different layouts.

An effort was made to keep the way in which each block type is constructed as simple and similar as possible, so they all follow the same structure where possible and inherit styles from one another.

Example Blog Block

Fox

Developing a local wildlife photography project.
Read article

Fox

Developing a local wildlife photography project.
Read article

Fox

Developing a local wildlife photography project.
Read article

Fox

Developing a local wildlife photography project.
Read article

<div class="block blog-block editorial-block">
<a title="#" class="clearfix" href="#">
<div class="block-content">
<img alt="Fox" src="images/blocks/blog_fox.jpg">
<h4 class="block-text"> <strong>Developing</strong> a local wildlife photography project. <br>
<span class="wex-red read-more">Read article <i class="icon-caret-right"></i></span> </h4>
</div>
</a>
</div>

Accessibility

The templates make use of the new HTML5 ARIA (Accessible Rich Internet Applications) attributes where appropriate. This includes marking up navigation, main content, search etc..

There shouldn't be too much to think about here as the appropriate attributes have been placed into the templates, however please make sure that forms across the site should be marked with the form role.

Example usage

<form method="post" action="#" name="example-form" id="example-form" role="form">
...
</form>

Labels

Please ensure that all form elements are given a corresponding label!

The label should be given a "for" attribute that links it to the appropriate element. If the design calls for the label to be hidden you can do this by giving it the 'hidden' class as shown below.

<label for="searchbox" class="hidden">Search</label>
<input type="search" name="searchbox" id="searchbox" placeholder="Search" />