Company Style Guide

Different panel options

Panel 1

Epigenetics Blog

Follow our posts about the latest trends in epigenetics research.

<div class="hover-shadow content-block">

<a href="#">

<div class="fb fb_7-12">

<div class="text-container">

<h3 class="sub-title color-secondary">Epigenetics Blog</h3>

<p class="para">Follow our posts about the latest trends in epigenetics research.</p>

<div>

<div class="img">

<img src="/uploads/images/web_site/resources-page/home-page-brochures-thumb.jpg">

<div>

</div>

</a>

</div>

Panel 2

Promoter Reporter GoClone Controls

The LightSwitch system contains many positive and negative promoter controls to optimize experimental conditions and normalize for non-specific effects.

<div class="hover-shadow content-block type-1">

<a href="#">

<div class="img">

<img src="/uploads/images/web_site/LightSwitch/Promoter-3.jpg">

<div>

<div class="text-container">

<h3 class="sub-title color-secondary">Promoter Reporter GoClone Controls</h3>

<p class="para">The LightSwitch system contains many positive and negative promoter controls to optimize experimental conditions and normalize for non-specific effects.</p>

<div>

</a>

</div>

Panel 3

Transcriptional Regulation

Active Motif provides a wide range of products and services for transcriptional regulation research including Transcription Factor Activity Assays and over 18,000 pre-cloned human promoters and transcription factor response elements.

Learn More

<div class="aname-nav content-block type-3">

<a href="/catalog/1249/transcriptional-reg">

<div class="img">

<img src="/uploads/images/web_site/genereg-services/GeneReg-v1.jpg">

</div>

</a>

<div class="aname-text-container">

<div class="aname-head-container">

<a href="/catalog/1249/transcriptional-reg" class="aname-head">

<span class="aname-sub">Transcriptional Regulation</span>

</a>

</div>

<p class="aname-sub">Active Motif provides a wide range of products and services for transcriptional regulation research including Transcription Factor Activity Assays and over 18,000 pre-cloned human promoters and transcription factor response elements.</p>

<p class="aname-links">

<p href="/catalog/1249/transcriptional-reg"> <strong>Learn More</strong></a>

</p>

</div>

</div>

Panel 4: aname-nav

Methylated DNA Enrichment

Here are some words that will explain what this category is. Maybe it's longer like this.

Option 001
Option 002
Option 003
Option 004

<div class="aname-nav">

<div class="fb fb_10-12">

<div class="aname-head-container">

<a href="/catalog/696/methylated-dna-enrichment" class="aname-head">

<span>Methylated DNA Enrichment</span>

</a>

</div>

<div class="icon-container">

<img src="/uploads/images/web_site/featured-products/NuQ-v2-178x108.jpg">

</div>

<p class="aname-sub">Here are some words that will explain what this category is. Maybe it's longer like this.</p>

<p class="aname-links">

<a href="/catalog/736/medip">Option 001</a>

<a href="/catalog/699/hmedip">Option 002</a>

<a href="/catalog/775/hydroxymethyl-collector">Option 003</a>

<a href="/catalog/43/methylcollector-ultra">Option 004</a>

</p>

</div>

</div>

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

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