CLASSES: Primary Color Backgrounds

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

CLASSES: Secondary Color Backgrounds

• bg-secondary-light
• bg-secondary

CLASSES: Grey/Gray Color Backgrounds

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

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

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

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

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.

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.

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

Classes: fb fb_3-12

Classes: fb fb_6-12

Responsive 2 flexible blocks

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

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

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.

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

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:

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

You can also change the grid over multiple different sizes

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

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

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.

Product Table

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

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:

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.

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.

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

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

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:

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.

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.

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:

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

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

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.

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

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

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.

Example

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.

There are also vertical and horizontal options:

• margin-y-normal
• margin-x-normal
• padding-y-normal
• padding-x-normal

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

• no-padding
• no-margin

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

Indenters

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

Examples

Borders

Examples

Center

Block