Company Style Guide

Back to Style Guide home.

Options

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

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.