Difference between revisions of "Code Documentation2"

 
(34 intermediate revisions by the same user not shown)
Line 162: Line 162:
 
<div class="twoColumns">
 
<div class="twoColumns">
 
<h3> Nested  Lists </h3>
 
<h3> Nested  Lists </h3>
 
+
<p> Here is an example of a nested list. </p>
 
   <ul>
 
   <ul>
  
       <li> List item 1
+
       <li> Cold Colors </li>
 +
      <li> Warm Colors
 
         <ol>
 
         <ol>
             <li> sublist item 1 </li>
+
             <li> Red </li>
             <li> sublist item 2 </li>
+
             <li> Orange </li>
             <li> sublist item 3 </li>
+
             <li> Yellow </li>
 
         </ol>
 
         </ol>
 
       </li>
 
       </li>
Line 183: Line 184:
 
   &#60;ul&#62;
 
   &#60;ul&#62;
  
       &#60;li&#62; List item 1
+
       &#60;li&#62; Cold Colors &#60;/li&#62;
 +
      &#60;li&#62; Warm Colors
 
         &#60;ol&#62;
 
         &#60;ol&#62;
             &#60;li&#62; sublist item 1 &#60;/li&#62;
+
             &#60;li&#62; Red  &#60;/li&#62;
             &#60;li&#62; sublist item 2 &#60;/li&#62;
+
             &#60;li&#62; Orange &#60;/li&#62;
             &#60;li&#62; sublist item 3 &#60;/li&#62;
+
             &#60;li&#62; Yellow &#60;/li&#62;
 
         &#60;/ol&#62;
 
         &#60;/ol&#62;
 
       &#60;/li&#62;
 
       &#60;/li&#62;
Line 208: Line 210:
  
 
<pre>
 
<pre>
   &#60;h2&#62;     &#60;/h2&#62;
+
   &#60;h2&#62; Title &#60;/h2&#62;
 
</pre>
 
</pre>
 
</div>
 
</div>
Line 298: Line 300:
 
<div class="twoColumns">
 
<div class="twoColumns">
 
<h3> Images </h3>
 
<h3> Images </h3>
 
+
<p>You will need to call the "photo_container" class.  Images width for the different layout classes are specified bellow. </p>
  
 
</div>
 
</div>
Line 304: Line 306:
 
<div class="twoColumns">
 
<div class="twoColumns">
 
<pre>  
 
<pre>  
&#60;div class="twoColumns photo_container"&#62;
+
&#60;div class="twoColumns <b class="red_text">photo_container</b>"&#62;
  
&#60;img src= " URL " &#62;
+
&#60;img src= "<b class="red_text">URL</b>" &#62;
  
 
&#60;/div&#62;
 
&#60;/div&#62;
Line 355: Line 357:
  
  
<div class="clear_id"  id="Buttons"></div>
 
  
 +
 +
 +
 +
<div class="clear_id"  id="Button"></div>
 +
 +
 +
<div class="oneColumn">
 +
<h2> Classes </h2>
 +
</div>
  
  
Line 363: Line 373:
 
<p> When naming a button, please remember to use the style convention and write it in CAPS. </p>
 
<p> When naming a button, please remember to use the style convention and write it in CAPS. </p>
 
<a href=""><div class="button">
 
<a href=""><div class="button">
CHECKING BUTTON NAME
+
REGISTER NOW!
 
</div></a>
 
</div></a>
 
</div>
 
</div>
Line 369: Line 379:
 
<div class="twoColumns">
 
<div class="twoColumns">
 
<br><br>
 
<br><br>
<pre>&#60;a href=" URL "&#62;
+
<pre>&#60;a href="<b class="red_text">URL</b>"&#62;
 
     &#60;div class="button"&#62;
 
     &#60;div class="button"&#62;
         BUTTON NAME
+
         <b class="red_text">REGISTER NOW!</b>
 
     &#60;/div&#62;
 
     &#60;/div&#62;
 
&#60;/a&#62;
 
&#60;/a&#62;
Line 404: Line 414:
 
<br><br>
 
<br><br>
 
<pre>
 
<pre>
&#60;span class="pop_why" onclick="which_why='why_NAME'"&#62;   
+
&#60;span class="pop_why" onclick="which_why='<b class="red_text">why_NAME</b>'"&#62;   
 
?   
 
?   
 
&#60;/span&#62;  
 
&#60;/span&#62;  
Line 411: Line 421:
 
<br><br><br><br><br><br>
 
<br><br><br><br><br><br>
 
<pre>
 
<pre>
&#60;div id="why_NAME"&#62; &#60;div class="pop_close"&#62;X&#60;/div&#62;  
+
&#60;div id="<b class="red_text">why_NAME</b>"&#62;  
  
 
&#60;h3&#62;Title &#60;/h3&#62;  
 
&#60;h3&#62;Title &#60;/h3&#62;  
Line 424: Line 434:
  
  
 +
<div class="clear"></div>
  
  
 +
<div class="twoColumns">
  
  
 +
<h3> Expandable content </h3>
  
  
  
 +
<div class="click_open"> <h5>Title</h5> <div class="click_icon">▼</div>
  
 +
<div class="click_content">
 +
<p> Example content </p>
  
 +
</div>
 +
</div>
  
 +
</div>
  
  
 +
<div class="twoColumns">
 +
 +
 +
</div>
 +
 +
 +
 +
 +
<div class="clear_id"  id="layout"></div>
  
  
Line 485: Line 513:
 
<h5> Full width </h5>
 
<h5> Full width </h5>
 
<pre>
 
<pre>
&#60;div class="oneColumn"&#62;  
+
&#60;div class="<b class="red_text">oneColumn</b>"&#62;  
 
&#60;/div&#62;  
 
&#60;/div&#62;  
 
</pre>
 
</pre>
Line 494: Line 522:
 
<h5> Half width </h5>
 
<h5> Half width </h5>
 
<pre>
 
<pre>
&#60;div class="twoColumns"&#62;  
+
&#60;div class="<b class="red_text">twoColumns</b>"&#62;  
 
&#60;/div&#62;  
 
&#60;/div&#62;  
 
</pre>
 
</pre>
Line 503: Line 531:
 
<h5> Third width </h5>
 
<h5> Third width </h5>
 
<pre>
 
<pre>
&#60;div class="threeColumns"&#62;  
+
&#60;div class="<b class="red_text">threeColumns</b>"&#62;  
 
&#60;/div&#62;  
 
&#60;/div&#62;  
 
</pre>
 
</pre>
Line 512: Line 540:
 
<h5> Quarter width </h5>
 
<h5> Quarter width </h5>
 
<pre>
 
<pre>
&#60;div class="fourColumns"&#62;  
+
&#60;div class="<b class="red_text">fourColumns</b>"&#62;  
 
&#60;/div&#62;  
 
&#60;/div&#62;  
 
</pre>
 
</pre>
Line 519: Line 547:
  
  
<div class="clear"></div>
+
<div class="clear_id"  id="style_layout"></div>
  
 
<div class="oneColumn">
 
<div class="oneColumn">
Line 527: Line 555:
  
  
<div class="twoColumns background_gray">  
+
 
 +
<div class="fourColumns">
 
<h5> Gray background </h5>
 
<h5> Gray background </h5>
 +
<p> This can be used to highlight some text</p>
 +
</div>
 +
  
 +
<div class="fourColumns background_gray">
 +
<p> Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.</p>
 
</div>
 
</div>
  
Line 535: Line 569:
 
<div class="twoColumns">
 
<div class="twoColumns">
 
<pre>  
 
<pre>  
&#60;div class="threeColumns <b>background_gray</b>"&#62;  
+
&#60;div class="threeColumns <b class="red_text">background_gray</b>"&#62;  
 +
 
 
</pre>
 
</pre>
 
</div>
 
</div>
  
 +
<div class="clear"></div>
  
  
  
<div class="twoColumns full_border">  
+
 
 +
 
 +
<div class="fourColumns">
 
<h5> Solid Border</h5>
 
<h5> Solid Border</h5>
 +
</div>
  
 +
<div class="fourColumns full_border">
 +
<p> Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.</p>
 
</div>
 
</div>
 
 
  
 
<div class="twoColumns">
 
<div class="twoColumns">
 
<pre>  
 
<pre>  
&#60;div class="threeColumns <b>full_border</b>"&#62;  
+
&#60;div class="threeColumns <b class="red_text">full_border</b>"&#62;  
 +
 
 
</pre>
 
</pre>
 
</div>
 
</div>
Line 557: Line 597:
  
  
<div class="twoColumns dot_border">  
+
 
 +
<div class="clear"></div>
 +
 
 +
<div class="fourColumns">
 
<h5> Dotted Border</h5>
 
<h5> Dotted Border</h5>
 +
</div>
  
 +
<div class="fourColumns dot_border">
 +
<p> Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.</p>
 
</div>
 
</div>
 
 
  
 
<div class="twoColumns">
 
<div class="twoColumns">
 
<pre>  
 
<pre>  
&#60;div class="threeColumns <b>dot_border</b>"&#62;  
+
&#60;div class="threeColumns <b class="red_text">dot_border</b>"&#62;  
 +
 
 
</pre>
 
</pre>
 
</div>
 
</div>
Line 574: Line 619:
  
  
<div class="twoColumns alert_box">
+
<div class="fourColumns">
<h4> Alert </h4>
+
<h5> Alert box </h5>
<p> When creating an alert !</p>
+
</div>
 +
 
 +
<div class="fourColumns alert_box">
 +
<p> Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.</p>
 
</div>
 
</div>
  
Line 582: Line 630:
 
<div class="twoColumns">
 
<div class="twoColumns">
 
<pre>
 
<pre>
&#60;div class="twoColumns <b> alert_box</b>"&#62;
+
&#60;div class="twoColumns <b class="red_text">alert_box</b>"&#62;
 +
 
 
</pre>
 
</pre>
 
</div>
 
</div>
  
<div class="clear"> </div>
 
  
 +
<div class="clear"> </div>
  
<div class="twoColumns highlight">
+
<div class="fourColumns">
 
<h5> Highlight </h5>
 
<h5> Highlight </h5>
 
<p> Hover to see ! <br>  This can be used to make the whole div highlight and indicate that it is clickable</p>
 
<p> Hover to see ! <br>  This can be used to make the whole div highlight and indicate that it is clickable</p>
 +
</div>
 +
 +
<div class="fourColumns highlight">
 +
<p> Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. <a href="">Quo lorem periculis definitionem an</a>, quo no labores definitionem.</p>
 
</div>
 
</div>
  
Line 602: Line 655:
 
</div>
 
</div>
  
<div class="clear"> </div>
 
  
 +
 +
<div class="clear"> </div>
  
  
Line 612: Line 666:
  
  
 +
<div class="clear_id"  id="example_layout"></div>
  
 
<div class="clear"></div>
 
<div class="clear"></div>
Line 677: Line 732:
 
<img src="https://static.igem.org/mediawiki/2015/9/95/HQposter_judging.jpg" width="315px">
 
<img src="https://static.igem.org/mediawiki/2015/9/95/HQposter_judging.jpg" width="315px">
 
</a>
 
</a>
 +
 +
<p> Image 1.1 - text </p>
 
</div>
 
</div>
  
Line 701: Line 758:
  
  
 +
<div class="clear_id"  id="Menu"></div>
  
 
<div class="oneColumn">
 
<div class="oneColumn">
Line 706: Line 764:
 
<h2>Menu </h2>
 
<h2>Menu </h2>
  
<p> All the menus live in : <a href=""> </a>  
+
<p> In this example the menu will be created for pages that have "Elements_of_Art" in their name space.</p>
 +
 
 +
 
 +
<h3> Placing your code </h3>
 +
<p> All the menus live in : <a href="https://2015.igem.org/Menu/DemoSafety">https://2015.igem.org/Menu/DemoSafety </a>
 +
Please be careful to not delete any of the other menus, look for the section where it says "PLACE YOUR MENU HERE" to make sure everything is properly wrapped. </p>
 +
 
 +
 
 +
<h3> Activating your hub menu </h3>
 +
<p> To enable the code to know that your menu exists, you will need to add to the array that holds the list of hub menus</p>
 +
 
 +
<p> Got to: <a href="" > https://2016.igem.org/HQ_Hub_List</a> and add the following line </p>
 +
 
 +
<pre>
 +
 
 +
hub_list[#] ="Elements_of_Art";                                            (# stands for the next number in the list)
 +
 
 +
</pre>
 +
 
 +
 
 +
 
 +
<h3> Naming </h3>
 +
 
 +
<p>All pages that have "Elements_of_Art" under their namespace will have the same menu. </p>
 +
 
 +
 
 +
<ul>
 +
<b>The name has to be  exactly the same in three places:</b>
 +
<br>
 +
 
 +
<li> Array with the list of hub menus <br>
 +
<b>hub_list[4] ="<b class="red_text">Elements_of_Art</b>"; </b> </li>
 +
 
 +
<li> Menu code page
 +
<br> <b> div id="<b class="red_text">Elements_of_Art</b>" </b>
 +
 
 +
<li> URLs
 +
<br><b>https://2016.igem.org/<b class="red_text">Elements_of_Art </b></b></li>
 +
</ul>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 
</div>
 
</div>
  
Line 713: Line 815:
  
 
<div class="fourColumns">
 
<div class="fourColumns">
<h3> Naming </h3>
 
  
  
<p> URL should be:
+
<h3> Addind Section Titles</h3>
<br> https://2016.igem.org/Elements_of_Art </p>
+
The Section Title needs to be placed in the h4 tag.
 +
 
 +
 
 +
<h3> Adding a Page </h3>
 +
The first page under it is "Cold Colors".
 +
 
 +
 
 +
 
 +
<h3> Listing Page Sections </h3>
 +
 
 +
 
 +
 
 
</div>
 
</div>
  

Latest revision as of 17:45, 30 November 2015

×

Loading ...

Styling

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

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:
  1. Milk
  2. Eggs
  3. 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://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"> 

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

</div> 

Expandable content

Title

Example content

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 classes

Gray background

This can be used to highlight some text

Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.

 
<div class="threeColumns background_gray"> 

Solid Border

Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.

 
<div class="threeColumns full_border"> 

Dotted Border

Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.

 
<div class="threeColumns dot_border"> 

Alert box

Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.

<div class="twoColumns alert_box">

Highlight

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

Lorem ipsum dolor sit amet, duo labitur nostrum consulatu ex. Quo lorem periculis definitionem an, quo no labores definitionem.

<div class="twoColumns  highlight"
onClick=" parent.location= ' URL '">  

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.



REGISTER

Image 1.1 - text

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.

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.

Menu

In this example the menu will be created for pages that have "Elements_of_Art" in their name space.

Placing your code

All the menus live in : https://2015.igem.org/Menu/DemoSafety Please be careful to not delete any of the other menus, look for the section where it says "PLACE YOUR MENU HERE" to make sure everything is properly wrapped.

Activating your hub menu

To enable the code to know that your menu exists, you will need to add to the array that holds the list of hub menus

Got to: https://2016.igem.org/HQ_Hub_List and add the following line


hub_list[#] ="Elements_of_Art";                                            (# stands for the next number in the list) 

Naming

All pages that have "Elements_of_Art" under their namespace will have the same menu.

    The name has to be exactly the same in three places:
  • Array with the list of hub menus
    hub_list[4] ="Elements_of_Art";
  • Menu code page
    div id="Elements_of_Art"
  • URLs
    https://2016.igem.org/Elements_of_Art

Addind Section Titles

The Section Title needs to be placed in the h4 tag.

Adding a Page

The first page under it is "Cold Colors".

Listing Page Sections


<div id="Elements_of_Art">  

<div> <a class="switch_Menus">◀</a> </div>  

<a href="URL"> 
<div class="sideMenuTitle">Elements of Art</div> 
</a> 

<div><a class="expand_subMenus"> + </a></div> 

<div class="clear"> </div> 



<h4> Color</h4> 

<ul> 

<a href="URL"><li>Cold Colors</li></a>



<a href="URL"><li>Warm Colors</a>
<a class="subMenu_toggle">▼</a> 			
		
<div class="subMenu"> 

<ul> 			
<a href="URL"><li>Red</li></a> 
<a href="URL"><li>Orange</li></a> 
<a href="URL"><li>Yellow</li></a> 
</ul> 

</div> 

</li> 

</ul>
      
<div id="Elements_of_Art">  

 <div><a class="switch_Menus"> ◀ </a> </div>  

 <a href=" https://2016.igem.org/Elements_of_Art "> 
   <div class="sideMenuTitle">Elements of Art
   </div> 
 </a> 

 <div><a class="expand_subMenus"> + </a> </div> 

 <div class="clear"></div> 

 <h4>Color</h4> 

  <ul> 

    <a href="https://2016.igem.org/Elements_of_Art/Color/Cold_Colors "><li>Warm Colors</a> 
     <a class="subMenu_toggle">▼</a> 			
      <div class="subMenu"> 
       <ul> 			
        <a href="https://2016.igem.org/Elements_of_Art/Color/Cold_Colors#Blue"><li>Blue</li></a> 
        <a href="https://2016.igem.org/Elements_of_Art/Color/Cold_Colors#Purple"><li>Purple</li></a> 
        <a href="https://2016.igem.org/Elements_of_Art/Color/Cold_Colors#Green"><li>Green</li></a> 
       </ul> 
      </div> 
    </li> 


    <a href="https://2016.igem.org/Elements_of_Art/Color/Warm_Colors "><li>Warm Colors</a> 
     <a class="subMenu_toggle">▼</a> 			
      <div class="subMenu"> 
       <ul> 			
        <a href="https://2016.igem.org/Elements_of_Art/Color/Warm_Colors#Red"><li>Red</li></a> 
        <a href="https://2016.igem.org/Elements_of_Art/Color/Warm_Colors#Orange"><li>Orange</li></a> 
        <a href="https://2016.igem.org/Elements_of_Art/Color/Warm_Colors#Yellow"><li>Yellow</li></a> 
       </ul> 
      </div> 
    </li> 

  </ul>


 <h4>Line</h4> 

  <ul> 

    <a href="https://2016.igem.org/Elements_of_Art/Line/Direction"><li>Direction</li></a>

    <a href="https://2016.igem.org/Elements_of_Art/Line/Width"><li>Width</li></a>

    <a href="https://2016.igem.org/Elements_of_Art/Line/Length"><li>Length</li></a>

  </ul> 


</div>