Styling

Color palette

Lime green
#e8edaa

Orange
#f17530

Turquoise
#5ba88a

Red
#e9232f

Navy
#4e606e

White
#ffffff

Light gray
#f2f2f2

Medium gray
#d3d3d3

Charcoal
#333333

Black
#000000

Text

To write text

<p> Text  </p>

Links

When creating links

Example

<a href="link"> LINK </a>

Lists

Use the following example to create a simple list.

Painting materials

Brushes
Acrylic paint
Watercolors

<b>Painting Materials</b>

<ul> 

 <li> Brushes  </li> 
 <li> Acrylic paint </li>  
 <li> Watercolors </li> 

</ul>

To create a numbered list, use the following example

Things to buy:

Milk
Eggs
Flour

<b>Things to buy: </b>

<ol> 

 <li> Milk </li> 
 <li> Eggs </li> 
 <li> Flour </li> 

</ol>

Nested Lists

Here is an example of a nested list.

Cold Colors
Warm Colors
1. Red
2. Orange
3. Yellow

   <ul>

      <li> Cold Colors </li> 
      <li> Warm Colors 
         <ol>
            <li> Red  </li>
            <li> Orange </li>
            <li> Yellow </li>
         </ol>
      </li>

   </ul>

H titles

   <h2> Title </h2>

H1 Title

Used only on the first title of the page.

H4 Title

Used for red highlight text

H2 Title

Used for the main item titles of the page.

H5 Title

Highlighting text, similar to bold.

H3 Title

Used for subtitles

H6 Title

Not used

Tables

Tables created within in a page already have styling and will display:

Header 1	Header 2
Content A 1	Content B 1
Content A 2	Content B 2

<table> 

<tr> 
<th>  Header 1  </th>  <th>  Header 2 </th> 
</tr> 

<tr>  
<td>  Content A 1 </td>  <td> Content B 1 </td>  
</tr> 

<tr> 
<td>  Content A 2 </td>  <td> Content B 2 </td> 
</tr> 

</table>

Images

You will need to call the "photo_container" class. Images width for the different layout classes are specified bellow.

 
<div class="twoColumns photo_container">

<img src= "URL" >

</div>

Full width

width = 950 px
height = 300 px (suggested)

Half width

width = 474 px
height = 300 px (suggested)

Third width

width = 315 px
height = 215 px (suggested)

Quarter width

width = 236 px
height = 156 px (suggested)

Classes

Button

When naming a button, please remember to use the style convention and write it in CAPS.

REGISTER NOW!

<a href="URL">
    <div class="button"> 	
        REGISTER NOW!
    </div>
</a>

Why ? pop up

The ? button is used to provide a more detailed explanation

The answer code must be written in: https://2016.igem.org/HQ:Why
Make sure you follow the naming convention " why_NAME "
NAME being the title you chose for your ? and its corresponding answer.

Also make sure that "which_why" and div id are the same so the button calls the correct answer.

×

Title

Text

<span class="pop_why" onclick="which_why='why_NAME'">  
?  
</span>

<div id="why_NAME"> 

<h3>Title </h3> 
<p>Text</p> 

</div>

Expandable content

Title

▼

Example content

<div class="click_open"> <h5>Title</h5> <div class="click_icon">▼</div>

<div class="click_content">
<p> Example content </p>

</div>
</div>

Layout classes

Full width Column

Lorem ipsum dolor sit amet, ubique vivendo his at, eruditi officiis molestiae pro cu, ne per admodum recteque intellegat. Mea id inani nusquam tractatos, ea vei.

Half width Columns

Lorem ipsum dolor sit amet, ubique vivendo his at, eruditi officiis molestiae.

Third width Columns

Lorem ipsum dolor sit amet, ubique vivendo his

Quarter width Columns

Lorem ipsum dolor sit amet, ubique

Full width

<div class="oneColumn"> 
</div>

Half width

<div class="twoColumns"> 
</div>

Third width

<div class="threeColumns"> 
</div>

Quarter width

<div class="fourColumns"> 
</div>