Company Style Guide

Check out the Javascript Guide for details on how it works along with some of the widget features.

Headers and Text

Header Size 1: Also can use class: h1

Header Size 2: Also can use class: h2

Header Size 3: Also can use class: h3

Header Size 4: Also can use class: h4

Header Size 5: Also can use class: h5
Header Size 6: Also can use class: h6

Paragraph text: Lorem as a link sit amet, consectetur adipiscing elit. Pellentesque eget sapien eu sem imperdiet sagittis eu eu massa. Cras id eros ut arcu dapibus fringilla. Aliquam luctus orci vitae nunc ultrices pretium. Aliquam vitae malesuada velit. Fusce ligula diam, varius ut vehicula ut, vulputate et justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sit amet ex venenatis, ornare diam in, vestibulum neque. Etiam vel tristique turpis. Vivamus sit amet sem tellus. Sed at ipsum libero. Phasellus consectetur erat non sapien semper, ac ornare nisl commodo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur sed odio sit amet tellus vehicula vehicula. Phasellus sapien tortor, egestas et odio id, sollicitudin fermentum risus. Quisque pulvinar ipsum nulla, vitae maximus velit aliquet facilisis.


h1 tag using h3 class

h2 tag using h4 class

h3 tag using h5 class

h4 tag using h6 class

h5 tag using h2 class
h6 tag using h1 class

Background Colors

CLASSES: Primary Color Backgrounds

  • bg-primary-lightest
  • bg-primary-light
  • bg-primary
  • bg-primary-dark
  • bg-primary-darkest

Background Primary Lightest

Background Primary Light

Background Primary

Background Primary Dark

Background Primary Darkest

CLASSES: Secondary Color Backgrounds

  • bg-secondary-light
  • bg-secondary

Background Secondary Light

Background Secondary

CLASSES: Grey/Gray Color Backgrounds

  • bg-grey-lightest
  • bg-grey-light
  • bg-grey
  • bg-grey-dark
  • bg-grey-darkest

Background Grey Lightest

Background Grey Light

Background Grey

Background Grey Dark

Background Grey Darkest

Text Colors

CLASSES: Primary Font Color

  • color-primary-lightest

  • color-primary-light

  • color-primary

  • color-primary-dark

  • color-primary-darkest

CLASSES: Secondary Font Color

  • color-secondary-light

  • color-secondary

CLASSES: Grey/Gray Font Color

  • color-grey-lightest

  • color-grey-light

  • color-grey

  • color-grey-dark

  • color-grey-darkest

Breakpoints

Sizes

Bear in mind that there are no specific mobile or tablet sizes unless you merely want to do IOS devices. Breakpoints are exactly what they say, Break Points. Most components could have their own bespoke breakpoints which are not globally required.

The naming of the breakpoints is irrelevent, they could have been named Smallest, Small, Medium and Large.

The following are the global break points.

  • 450px : Smallest
  • 600px : Mobile
  • 768px : Tablet
  • 950px : Desktop

Resize the page to see the blocks hide based on the page size using hide classes

Default 0 - 449px

Smallest 450px - 599px

Mobile 600px - 767px

Tablet 768px - 949px

Desktop 950px - Inifinity

The site also aims at Mobile first, meaning styling goes upward in value using min-width in media queries. There are only a few instances where the smallest requires a lot of styling not needed for desktop and so if you need to do this then use max-width instead of min-width

Responsive Hide Classes

As seen in the Break points example, there is some content you want to show or hide based on the size of the page.

For example, the following items show when it reaches it's breakpoint name: Resize the page to find out.

Desktop

Tablet

Mobile

Smallest

Always Show


You can also change the direction.

For example, the following items hide when it reaches it's breakpoint name: Resize the page to find out.

Desktop

Tablet

Mobile

Smallest

Always Show

Flexible Blocks

2 flexible blocks

Used quite a lot where there are only 2 blocks side by side with ratios of either 10 or 12 The gap is the small size: 15px

For example: the class fb activates the flexbox and the class fb_1-12 sets the ratio of 1/12th for the left box and 11/12ths for the right box

<div class="fb fb_1-12">
<div>1/12</div>
<div>11/12</div>
</div>
1/12
11/12

Classes: fb fb_3-12

3/12
9/12

Classes: fb fb_6-12

6/12
6/12

Responsive 2 flexible blocks

You can set ratios for different sizes. Default, Smallest, Mobile, Tablet, Desktop

<div class="fb fb_1-12 fb_smallest fb_5-12_mobile fb_8-12_tablet fb_6-12_desktop">
<div>Left</div>
<div>Right</div>
</div>
Left
Right

If you only want the blocks to activate from mobile upwards for example, you activate with the usual fb but this time you add _mobile. So fb_mobile

The blocks will now stack until they reach the width of mobile and then go into flex box mode

<div class="fb_mobile fb_2-12_mobile fb_9-12_tablet fb_6-12_desktop margin-bottom-normal">
<div>Left</div>
<div>Right</div>
</div>
Left
Top
Right
Bottom

Grids

Default mode

CLASSES: Flex Grid default mode

  • fg fg1
  • fg fg2
  • fg fg3
  • fg fg4
  • fg fg5
  • fg fg6
  • fg fg7
  • fg fg8
  • fg fg9
  • fg fg10
  • fg fg11
  • fg fg12

The grid system runs pretty much the same as the Flexible Blocks. You activate it and then add the different configuration classes after. All sounds very technical and then you see below that it is rather simple.

<div class="fg fg2">
<div>Grid Item</div>
<div>Grid Item</div>
</div>
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item

So fg activates flex grid and fg2 sets the grid to be 2 x 2 with a (15px:Small) gap in between

Another example using a grid of 7: Classfg fg7

Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item

Responsive mode

CLASSES: Flex Grid responsive mode all run from 1 to 12 like default mode

  • fg_smallest fg1_smallest
  • fg_mobile fg1_mobile
  • fg_tablet fg1_tablet
  • fg_desktop fg1_desktop

So what does this all mean?

It means you can initiate a grid mode from any of the breakpoint sizes. So if you want them to all stack until you reach Tablet then:

<div class="fg_tablet fg4_tablet">
<div>Grid Item</div>
...repeated
<div>Grid Item</div>
</div>
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item

You notice there is no gap between them when they stack. You can fix this by adding fg fg1

<div class="fg fg1 fg4_tablet">
<div>Grid Item</div>
...repeated
<div>Grid Item</div>
</div>
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item

You can also change the grid over multiple different sizes

<div class="fg fg1 fg3_smallest fg5_mobile fg2_tablet fg7_desktop">
<div>Grid Item</div>
...repeated
<div>Grid Item</div>
</div>
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item

Tables

Time to get a coffee for this bit.

Classes

  • nicetable
  • responsive-table
  • product-table

The nicetable class applies the styling for most tables on the site while responsive-table or product-table makes the table responsive.


Responsive Table

The following is an example of a basic responsive table structure

<table class="nicetable responsive-table">
<thead>
<tr>
<th>Products</th>
<th>Isotype</th>
<th>Reactivity</th>
</tr>
</thead>
<tbody>
<tr>
<td data-name="Products">3-Methylcytosine (3-mC) antibody (pAb)</td>
<td data-name="Isotype">IgG</td>
<td data-name="Reactivity">Human, Mouse, Other (Wide Range)</td>
</tr>
<tr>
<td data-name="Products">3-Methylcytosine (3-mC) antibody (pAb)</td>
<td data-name="Isotype">Serum</td>
<td data-name="Reactivity">Human, Mouse, Other (Wide Range)</td>
</tr>
</tbody>
</table>
Products Isotype Reactivity
3-Methylcytosine (3-mC) antibody (pAb) IgG Human, Mouse, Other (Wide Range)
3-Methylcytosine (3-mC) antibody (pAb) Serum Human, Mouse, Other (Wide Range)

You must wrap the table headers (th and not a td!) and add them to a thead tag.

<thead>
<tr>
<th>Products</th>
<th>Isotype</th>
<th>Reactivity</th>
</tr>
</thead>

All other rows must be added to the tbody tag and require an attribute called data-name. This allows us to style a ::before pseudo-element to contain the text from the attribute that we shows when the screen width changes.

<tbody>
<tr>
<td data-name="Products">3-Methylcytosine (3-mC) antibody (pAb)</td>
<td data-name="Isotype">IgG</td>
<td data-name="Reactivity">Human, Mouse, Other (Wide Range)</td>
</tr>
</tbody>

Product Table

The following is an example of a basic responsive table for products

<table class="nicetable product-table">
<thead>
<tr>
<th>Some Name</th>
<th>Products</th>
<th>Isotype</th>
<th>Reactivity</th>
</tr>
</thead>
<tbody>
<tr>
<td data-name="Name" class="row first">Some Name here</td>
<td data-name="Products" class="row">3-Methylcytosine (3-mC) antibody (pAb)</td>
<td data-name="Isotype" class="row">IgG</td>
<td data-name="Reactivity" class="row">Human, Mouse, Other (Wide Range)</td>
</tr>
<tr>
<td data-name="Name" class="row first" rowspan="2">Some Name here</td>
<td data-name="Products" class="row">3-Methylcytosine (3-mC) antibody (pAb)</td>
<td data-name="Isotype" class="row">IgG</td>
<td data-name="Reactivity" class="row">Human, Mouse, Other (Wide Range)</td>
</tr>
<tr>
<td data-name="Products" class="row">3-Methylcytosine (3-mC) antibody (pAb)</td>
<td data-name="Isotype" class="row">IgG</td>
<td data-name="Reactivity" class="row">Human, Mouse, Other (Wide Range)</td>
</tr>
</tbody>
</table>
Some Name Products Isotype Reactivity
Some Name here 3-Methylcytosine (3-mC) antibody (pAb) IgG Human, Mouse, Other (Wide Range)
Some Name here 3-Methylcytosine (3-mC) antibody (pAb) Serum Human, Mouse, Other (Wide Range)
3-Methylcytosine (3-mC) antibody (pAb) Serum Human, Mouse, Other (Wide Range)

As before you must wrap the table headers (th and not a td!) and add them to a thead tag.

The difference to this table type is the tbody rows require the class row and the first td tag requires the class first, see below:

<tbody>
<tr>
<td data-name="Name" class="row first">Some Name here</td>
<td data-name="Products" class="row">3-Methylcytosine (3-mC) antibody (pAb)</td>
<td data-name="Isotype" class="row">IgG</td>
<td data-name="Reactivity" class="row">Human, Mouse, Other (Wide Range)</td>
</tr>
</tbody>

For rows which have 1 Name and many rows associated with it for purchase you must do the following.

Also, notice how the first row has the first class with a rowspan of 2 and then the 1st td of the 2nd tr doesn't have the first class or a rowspan.

<tbody>
<tr>
<td data-name="Name" class="row first" rowspan="2">Some Name here</td>
<td data-name="Products" class="row">3-Methylcytosine (3-mC) antibody (pAb)</td>
<td data-name="Isotype" class="row">IgG</td>
<td data-name="Reactivity" class="row">Human, Mouse, Other (Wide Range)</td>
</tr>
<tr>
<td data-name="Products" class="row">3-Methylcytosine (3-mC) antibody (pAb)</td>
<td data-name="Isotype" class="row">IgG</td>
<td data-name="Reactivity" class="row">Human, Mouse, Other (Wide Range)</td>
</tr>
</tbody>

If there are 3 or more rows to do with 1 product then you would change the rowspan accordingly. Here are 4 rows and 3 of them are associated with the 1st. So a rowspan of 4.

<tbody>
<tr>
<td data-name="Name" class="row first" rowspan="4">Some Name here</td>
<td data-name="Products" class="row">3-Methylcytosine (3-mC) antibody (pAb)</td>
<td data-name="Isotype" class="row">IgG</td>
<td data-name="Reactivity" class="row">Human, Mouse, Other (Wide Range)</td>
</tr>
<tr>
<td data-name="Products" class="row">3-Methylcytosine (3-mC) antibody (pAb)</td>
<td data-name="Isotype" class="row">IgG</td>
<td data-name="Reactivity" class="row">Human, Mouse, Other (Wide Range)</td>
</tr>
<tr>
<td data-name="Products" class="row">3-Methylcytosine (3-mC) antibody (pAb)</td>
<td data-name="Isotype" class="row">IgG</td>
<td data-name="Reactivity" class="row">Human, Mouse, Other (Wide Range)</td>
</tr>
<tr>
<td data-name="Products" class="row">3-Methylcytosine (3-mC) antibody (pAb)</td>
<td data-name="Isotype" class="row">IgG</td>
<td data-name="Reactivity" class="row">Human, Mouse, Other (Wide Range)</td>
</tr>
</tbody>
Some Name Products Isotype Reactivity
Some Name here 3-Methylcytosine (3-mC) antibody (pAb) Serum Human, Mouse, Other (Wide Range)
3-Methylcytosine (3-mC) antibody (pAb) Serum Human, Mouse, Other (Wide Range)
3-Methylcytosine (3-mC) antibody (pAb) Serum Human, Mouse, Other (Wide Range)
3-Methylcytosine (3-mC) antibody (pAb) Serum Human, Mouse, Other (Wide Range)

The big one is if you want a purchase option in there too. So here are some examples:

<table class="nicetable product-table">
<thead>
<tr>
<th>Some Name</th>
<th>Products</th>
<th>Isotype</th>
<th>Reactivity</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td data-name="Name" class="row first" rowspan="2">Some Name here</td>
<td data-name="Products" class="row">3-Methylcytosine (3-mC) antibody (pAb)</td>
<td data-name="Isotype" class="row">IgG</td>
<td data-name="Reactivity" class="row">Human, Mouse, Other (Wide Range)</td>
<td class="col-action"><a href="#" class="buy-btn">Buy</a></td>
</tr>
<tr>
<td data-name="Products" class="row">3-Methylcytosine (3-mC) antibody (pAb)</td>
<td data-name="Isotype" class="row">IgG</td>
<td data-name="Reactivity" class="row">Human, Mouse, Other (Wide Range)</td>
<td class="col-action not_applicable">N/A</td>
</tr>
</tbody>
</table>
Some Name Products Isotype Reactivity  
Some Name here 3-Methylcytosine (3-mC) antibody (pAb) Serum Human, Mouse, Other (Wide Range) Buy
3-Methylcytosine (3-mC) antibody (pAb) Serum Human, Mouse, Other (Wide Range) N/A

Notice how there is a buy button and a Not Applicable state, both of these require classes on the td of a base col-action

Images

Current Image Pattern

  • All images in bespoke articles, center and right column are now 100% width overriding the width set in it's attribute

When adding an image the main things to focus on are:

  • The image size, large or small?
  • is the image inside of an anchor tag?

An example of the wrong way:

<div class="center">
<img width="425" height="259" alt="Polycomb complexes and subunits" src="/images/products/target_stem_cell_2.jpg">
</div>
Polycomb complexes and subunits

There are a few reasons this is the wrong thing to do:

  1. By default without the 100% width added, the image would be fixed at 425px even when the screen size is less.
  2. With the 100% applied by default the image will stretch and looked pixelated, or of a lesser quality.

The best way to cater for this, is to apply to any images the following.

<div class="center">
<img style="max-width: 425px;" alt="Polycomb complexes and subunits" src="/images/products/target_stem_cell_2.jpg">
</div>
Polycomb complexes and subunits

You'll notice the image never exceeds 425px even though it's set by default to 100%. The optional class of center is there to wrap the image just for consistent presentation but you can remove that if you need too.

Images in anchors

There are exceptions where the image width won't go to 100% but you still require the max-width style applying.

<div class="center">
<a href="#">
<img style="max-width: 425px;" alt="Polycomb complexes and subunits" src="/images/products/target_stem_cell_2.jpg">
</a>
</div>

Because anchors on the site are display inline by default the anchor tag will not stretch to 100% of it's container. The image will stretch to 100% of the anchors size and so the image will not need any max width styling thanks to this example:

Buttons

Each of these buttons stretch to fit the area they reside except for bttn-main

Button Full Chevron

<a href="#" class="bttn-full-chevron">Button Full Chevron</a>
OR: if you want to use Javascript to click event
<div class="bttn-full-chevron">Button Full Chevron</div>
Button Full Chevron

Button Full Chevron

<a href="#" class="bttn-full-chevron large">Button Full Chevron Large</a>
OR: if you want to use Javascript to click event
<div class="bttn-full-chevron large">Button Full Chevron Large</div>
Button Full Chevron Large

Buy Button

Buy Button

Button Main

<a href="#" class="bttn-main">Button Main</a>
OR: if you want to use Javascript to click event
<div class="bttn-main">Button Main</div>
Button Main

Templates

For re-usable content in many areas of the site you have access to templates in the CMS.

  • Log into the Admin pages
  • Click the PAGES option
  • You will see an option in the upper right corner for Pages/Templates
  • Click Templates

You will now be greeted with a list which you can contribute to and utilise throughout the site. make sure you follow the naming conventions of the other templates.

IMPORTANT regarding templates within templates: There seems to be a possible order of loading alphabetically, or you cannot go more than 2 deep with templates importing. global/active-motif-offices would not load global/office-details-all

<?php include_template('global/active-motif-offices'); ?>

global/active-motif-offices displays all global contact details within a wrapper, you also have:

  • global/office-details-china
  • global/office-details-europe
  • global/office-details-japan
  • global/office-details-north-america

and finally: global/offices-details-all which displays all office details but without a wrapper, so you can use this anywhere you want.

If you find there is duplicate content in the site, then get templating, but try to retain a good naming structure, like: fluorescence/chromeo/data if you find there is repetative data content being used in that area.

Icons

In order to create icons for the site but still keep things optimised gulp iconfont was used. These icons are ready to use by adding classes to any dom element.

Examples

<div class="if if-cart"></div>
<div class="if if-chevron-down"></div>
<div class="if if-chevron-left"></div>
<div class="if if-chevron-right"></div>
<div class="if if-chevron-up"></div>
<div class="if if-cross"></div>
<div class="if if-facebook"></div>
<div class="if if-linkedin"></div>
<div class="if if-loader-1"></div>
<div class="if if-remove"></div>
<div class="if if-search"></div>
<div class="if if-twitter"></div>
 
 
 
 
 
 
 
 
 
 
 

You can use them in your text, or for links and change their colour & size

<div style="font-size: 30px;">
<div class="color-primary-dark if if-cart"></div>
<div class="color-grey if if-chevron-down"></div>
<div class="color-secondary if if-chevron-left"></div>
<div class="color-primary-light if if-remove"></div>
<div class="color-primary if if-search"></div>
<div class="color-secondary-light if if-twitter"></div>
</div>
 
 
 
 
 

Youtube Wrapper

The youtube iframes by default have a fixed width and height just like images.

To tackle this we add a wrapper div with a class that scales the youtube video at a ratio. This also overrides the width and height attributes.

<div class="youtube-wrap">
<iframe src="//www.youtube.com/embed/r4PZ4IS0tWU "
allowfullscreen="" width="480" height="315" frameborder="0"></iframe>
</div>

Example

Margin and Padding

For consistency there are 5 sizes for padding and margin which can be applied in different ways

Directional

  • margin-top-normal
  • margin-right-normal
  • margin-bottom-normal
  • margin-left-normal
  • padding-top-normal
  • padding-right-normal
  • padding-bottom-normal
  • padding-left-normal

Margin example using size variants which can also be applied to padding.

<div class="margin-top-smallest">margin-top-smallest<div>
<div class="margin-top-small">margin-top-small<div>
<div class="margin-top-normal">margin-top-normal<div>
<div class="margin-top-large">margin-top-large<div>
<div class="margin-top-largest">margin-top-largest<div>
10px
15px
20px
35px
40px

There are also vertical and horizontal options:

  • margin-y-normal
  • margin-x-normal
  • padding-y-normal
  • padding-x-normal
<div class="margin-bottom-normal border-dark padding-y-largest">
<div class="bg-grey-light center">Padding Y Largest 40px Vertical</div>
</div>
Padding Y Largest 40px Vertical

There are 2 other margin and padding helpers which override everything to set a value of zero

  • no-padding
  • no-margin

Other Helper Classes

There are a number of helper classes which can be used in the CMS which also help to retain consistency especially when global changes are required.

Opacity

<h2 class="op-100">Opacity 100<h2>
<h2 class="op-90">Opacity 90<h2>
<h2 class="op-80">Opacity 80<h2>
<h2 class="op-70">Opacity 70<h2>
<h2 class="op-60">Opacity 60<h2>
<h2 class="op-50">Opacity 50<h2>
<h2 class="op-40">Opacity 40<h2>
<h2 class="op-30">Opacity 30<h2>
<h2 class="op-20">Opacity 20<h2>
<h2 class="op-10">Opacity 10<h2>
<h2 class="op-0">Opacity 0<h2>
Opacity 100
Opacity 90
Opacity 80
Opacity 70
Opacity 60
Opacity 50
Opacity 40
Opacity 30
Opacity 20
Opacity 10
Opacity 0

Indenters

Were actually created for the code blocks to format the lines of html

<div class="indent-1">Indented by 10px<div>
<div class="indent-2">Indented by 20px<div>
<div class="indent-3">Indented by 30px<div>
<div class="indent-4">Indented by 40px<div>
<div class="indent-5">Indented by 50px<div>
<div class="indent-6">Indented by 60px<div>
<div class="indent-7">Indented by 70px<div>
<div class="indent-8">Indented by 80px<div>
<div class="indent-9">Indented by 90px<div>
<div class="indent-10">Indented by 100px<div>
<div class="indent-11">Indented by 110px<div>
<div class="indent-12">Indented by 120px<div>

Examples

Normal
Indented by 10px
Indented by 30px
Indented by 6px
Indented by 90px

Borders

<div class="border-lightest">Border Lightest<div>
<div class="border-light">Border Lightest<div>
<div class="border">Border Lightest<div>
<div class="border-dark">Border Lightest<div>
<div class="border-darkest">Border Lightest<div>

Examples

Border Lightest
Border Light
Border Normal
Border Dark
Border Darkest

Center

<div class="center">Centered Text<div>
Centered Text

Block

<a href="#" class="block">Display Block<a>
Display Block