Difference between revisions of "Code Documentation2"

Line 363: Line 363:
  
 
<div class="fourColumns">
 
<div class="fourColumns">
 +
<h3> Register </h3>
  
 +
<p>Per ut minim iriure aliquid, eam posse dicunt impetus id. Deleniti reprimique ut vel, consul ignota te eos, his facete equidem pertinacia et. Laoreet detracto scribentur has an, ad vis elitr vituperata. Nec at copiosae consectetuer, regione consulatu ius ne, nec laboramus consectetuer te. </p>
  
 
<a href=" URL ">
 
<a href=" URL ">
 
     <div class="button">
 
     <div class="button">
−
FORM
+
REGISTER
 
     </div>
 
     </div>
 
</a>
 
</a>

Revision as of 16:25, 19 November 2015

×

Loading ...

Color palette

Lime green
#e8edaa

Orange
#f27631

Turquoise
#5ba88a

Red
#e9232f

Navy
#4e606e

White
#ffffff

Light gray
#f2f2f2

Medium gray
#d3d3d3

Charcoal
#333333

Black
#000000

H titles

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

Basic 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>

Styling layout

Gray background
Border

Alert

When creating an alert !

Highlight

Hover to see !
This can be used to make the whole div highlight and indicate that it is clickable

Classes

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>

Button

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

BUTTON NAME 


<a href=" URL ">
    <div class="button"> 	
        BUTTON NAME
    </div>
</a>

Why ? pop up

The ? button is used to provide a more detailed explanation

The answer code must be written in: https://2015.igem.org/Why_demo
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"> <div class="pop_close">X</div> 

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

</div>

Layout examples

Title

Per ut minim iriure aliquid, eam posse dicunt impetus id. Deleniti reprimique ut vel, consul ignota te eos, his facete equidem pertinacia et. Laoreet detracto scribentur has an, ad vis elitr vituperata. Nec at copiosae consectetuer, regione consulatu ius ne, nec laboramus consectetuer te. Ex homero labores adversarium pri, sanctus assentior vis ea. Postea convenire vituperata nam ne, ius vocibus phaedrum consequat in, scaevola honestatis nec id. Has te verterem constituam, sed omnes fuisset an.
Sea blandit sadipscing reprehendunt et.

Deadlines

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

Register

Per ut minim iriure aliquid, eam posse dicunt impetus id. Deleniti reprimique ut vel, consul ignota te eos, his facete equidem pertinacia et. Laoreet detracto scribentur has an, ad vis elitr vituperata. Nec at copiosae consectetuer, regione consulatu ius ne, nec laboramus consectetuer te.

REGISTER