Resources/Template Documentation

This year we have created a responsive base template for teams to use for their project documentation and style up as they wish.

Using the Template

Colors

This is the color palette used for the example template:

Here are some websites that can help you create your own palette:

#000000 #D3D3D3 #F2F2F2 #FFFFFF #72c9b6

Layout classes

Layout classes will help structure your page. You will need to call it when you start your page to have the proper layout and make it responsive. There are two types of layout options having two columns or just one. For one column call the class column full_size and for two columns call column half_size. Here is an example to the right.



<div class="column half_size" >
<p> Content goes here </p>
</div>

Highlight Box

Highlight bow will need to be declared inside another layout box, this highlight class will make the background gray and the size will be slightly smaller.

<div class="column full_size" >
<div class="highlight">

<h5> Example </h5>
<p> Example text </p>

</div>
</div>

Menu

The menu is very simple to edit!

Adding a menu item

These are the steps to add a menu item

  1. Create a li item and add the class "menu_item". <li class="menu_item"> This declares that everything inside this li is part of the menu.
  2. Place a link: < a href="https://2016.igem.org/Team:Example/EXAMPLE"> EXAMPLE < /a>
  3. Close the li tag: </li>
  4. Done!

The code bellow shows the same example:


< li class="menu_item"> < a href="https://2016.igem.org/Team:Example/EXAMPLE"> EXAMPLE < /a> < /li>


Adding a submenu

These are the steps to add a menu item with a submenu:

  1. Create a li item and add the class "menu_item". <li class="menu_item"> This declares that everything inside this li is part of the menu.
  2. Create a div with the class "icon plus" <div class="icon plus"></div> This is the icon that reflects submenu status.
  3. Name your menu item! EXAMPLE
  4. In the next line, create a ul with the class "submenu" < ul class="submenu"> This is were our submenu begins.
  5. Create a li for the submenu li and place a link inside it <li> <a href="https://2016.igem.org/Team:Example/YourLink"> Your Link </a></li>
  6. Add as many submenu li s as you need.
  7. Close the ul tag for the submenus < /ul > This ends the submenus.
  8. Close the li tag for menu_item < /li > This ends the menu item "EXAMPLE"
  9. Done!

The code bellow shows the same example:


<li class="menu_item"> <div class="icon plus"></div> EXAMPLE

    <ul class="submenu">

       <li> <a href="https://2016.igem.org/Team:Example/YourLink"> Your Link </a></li>

   </ul>
</li>


HTML

We strongly recommend using html rather than wiki code. HTML is highly flexible and is supported on almost every browser.

To start using html in your wiki page, you simply have to open a < html > tag:

Link

Links can be created with the < a > tag and they will look like this:

name of the link



<a href=" link url "> name of the link </a>

List

To create a simple list you will need to open a < ul > tag and then create < li > list item for every bulleted item you wish to create. You can also use < ol > (ordered list) instead of < ul > (unordered list) to replace the bullet points with numbers

<ol>

<li> List item 1 </li>
<li> List item 2 </li>
<li> List item 3 </li>

</ol>

<ul>

<li> List item 1
<ol>
<li> sublist item 1 </li>
<li> sublist item 2 </li>
<li> sublist item 3 </li>
</ol>
</li>

</ul>

Tables

Tables are styled and ready to use! They will look the image bellow. To create the a table, use the code on the right.


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

CSS

CSS will provide styling for your HTML elements, the code in the template is organized by the following way:

  • size
    • width
    • height
  • layout
    • position
    • margin
    • padding
    • float
    • display
  • color
    • border
    • background-color
  • font
    • text-align
    • font-weight
    • text decoration
    • color
  • other
    • list-style-type
    • cursor
    • -transition

Take a look at the code and see how each element is defined, if you want change a color for a particular thing, you can modify the hex code for that color or modify the size or anything you need!