Difference between revisions of "HQ:Code Documentation"
| Line 16: | Line 16: | ||
<h1> CODE DOCUMENTATION </h1> | <h1> CODE DOCUMENTATION </h1> | ||
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| Line 57: | Line 51: | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
| Line 92: | Line 68: | ||
<li>Calendar </li> | <li>Calendar </li> | ||
<li>Teams </li> | <li>Teams </li> | ||
| − | |||
| − | |||
| − | |||
| − | |||
<li>Competition | <li>Competition | ||
<ul> | <ul> | ||
| − | <li> Registration</li> | + | <li>Team Registration</li> |
| + | <li>Rules of Conduct/li> | ||
<li>Deliverables </li> | <li>Deliverables </li> | ||
| − | <li> Tracks </li> | + | <li>Tracks </li> |
</ul></li> | </ul></li> | ||
| Line 108: | Line 81: | ||
<li>Human Practices </li> | <li>Human Practices </li> | ||
<li>Measurement </li> | <li>Measurement </li> | ||
| + | <li> Resources </li> | ||
| + | <ul><li>Cloning Help</li></ul> | ||
<li>Sponsors | <li>Sponsors | ||
<ul> <li> Special Offers </li> </ul> | <ul> <li> Special Offers </li> </ul> | ||
</li> | </li> | ||
| − | |||
| − | |||
| − | |||
<li> Sitemap</li> | <li> Sitemap</li> | ||
</ul> | </ul> | ||
| Line 119: | Line 91: | ||
<br><br> | <br><br> | ||
| − | <p> Here is an example for creating a new <b>application</b> page under the <b> | + | <p> Here is an example for creating a new <b>application</b> page under the <b>Teams</b> namespace and within the <b>Mentorship</b> submenu: <br> |
| − | <b> 2019.igem.org/ | + | <b> 2019.igem.org/Teams/Mentorship/Apply </b> |
</p> | </p> | ||
| Line 695: | Line 667: | ||
<div class="clear extra_space"></div> | <div class="clear extra_space"></div> | ||
| + | <div class="line_divider"></div> | ||
<div class="clear extra_space"></div> | <div class="clear extra_space"></div> | ||
| Line 771: | Line 744: | ||
<h3> Post items </h3> | <h3> Post items </h3> | ||
<p> Post items is a class that has multiple purposes and can be styled and divided as needed. | <p> Post items is a class that has multiple purposes and can be styled and divided as needed. | ||
| − | They can be a standard way of highlighting information, making it easy to recognize types of announcements such as notes or alerts. They are also used as a structural type of class, to easily delineate between a list of items, | + | They can be a standard way of highlighting information, making it easy to recognize types of announcements such as notes or alerts. They are also used as a structural type of class, to easily delineate between a list of items,for example meetups or news items. |
</p> | </p> | ||
</div> | </div> | ||
| Line 792: | Line 765: | ||
<div class="column half_size"> | <div class="column half_size"> | ||
<div class="highlight gray"> | <div class="highlight gray"> | ||
| − | + | <p> <div class="highlight post_item"><br> | |
<div class="details "> <br> | <div class="details "> <br> | ||
<span class="icon announcement"></span><br> | <span class="icon announcement"></span><br> | ||
| Line 799: | Line 772: | ||
</div><br> | </div><br> | ||
| − | <p>Description </p> | + | <p>Description </p><br> |
| + | |||
| + | <div> | ||
| + | </p> | ||
</div> | </div> | ||
| Line 807: | Line 783: | ||
| + | <div class="clear"></div> | ||
| + | <div class="column half_size"> | ||
| + | <div class="highlight post_item"> | ||
| + | <div class="details"> | ||
| + | <div class="title"> Title </div> | ||
| + | <div class="date"> Date </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <p>25% </p> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="column three_quarter_size"> | ||
| + | <p>65%</p> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear"></div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="column half_size"> | ||
| − | |||
| − | |||
<div class="highlight gray"> | <div class="highlight gray"> | ||
<p> | <p> | ||
| + | <div class="highlight post_item"> | ||
| + | <div class="details"> | ||
| + | <div class="title"> Title </div> | ||
| + | <div class="date"> Date </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <p>25% </p> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="column three_quarter_size"> | ||
| + | <p>65%</p> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear"></div> | ||
| + | |||
| + | </div> | ||
| + | |||
</p> | </p> | ||
| Line 822: | Line 836: | ||
</div> | </div> | ||
</div> | </div> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| Line 827: | Line 846: | ||
<div class="highlight post_item"> | <div class="highlight post_item"> | ||
| − | <div class="details "> <span class="icon announcement"></span> <div class="title"> | + | <div class="details "> <span class="icon announcement"></span> <div class="title"> announcement</div> </div> |
| − | <div class="details "> <span class="icon alert"></span> <div class="title"> | + | <div class="details "> <span class="icon alert"></span> <div class="title"> alert</div></div> |
| − | <div class="details "> <span class="icon note"></span> <div class="title"> | + | <div class="details "> <span class="icon note"></span> <div class="title"> note </div></div> |
| − | <div class="details "> <span class="icon notice"></span> <div class="title"> | + | <div class="details "> <span class="icon notice"></span> <div class="title"> notice</div></div> |
| − | <div class="details "> <span class="icon reminder"></span> <div class="title"> | + | <div class="details "> <span class="icon reminder"></span> <div class="title"> reminder</div></div> |
| − | <div class="details "> <span class="icon pinned"></span> <div class="title"> | + | <div class="details "> <span class="icon pinned"></span> <div class="title"> pinned</div></div> |
</div> | </div> | ||
| Line 838: | Line 857: | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Revision as of 16:15, 1 March 2019
CODE DOCUMENTATION
Website Visuals
Colors
The colors used on 2019.igem.org are:
| #00A19B | #007B8A | #085156 | #00BFD6 | #FF9012 | #FFB819 | #F42534 |
Creating a new page
Pages created in the 2019.igem.org website must follow a naming convention in order fit the website structure and to be reflected properly in the menu system. The naming convention should make them fall under these categories:
- About
- Calendar
- Teams
- Competition
- Team Registration
- Rules of Conduct/li>
- Deliverables
- Tracks
- Giant Jamboree
- Judging
- Safety
- Human Practices
- Measurement
- Resources
- Cloning Help
- Sponsors
- Special Offers
- Sitemap
Here is an example for creating a new application page under the Teams namespace and within the Mentorship submenu:
2019.igem.org/Teams/Mentorship/Apply
If a page that doesn't fall under the previous categories needs to be created, please contact Ana or Traci before creating said page.
<div class="igem_menu_item">
<a href="https://2019.igem.org/Colors">
<div class="hub_icon">
<img src="https://static.igem.org/mediawiki/2019/8/81/colors_icon.svg">
</div>
<div class="hub_title">
COLORS
</div>
</a>
</div>
<div class="igem_menu_item">
<a href="https://2019.igem.org/Colors">
<div class="hub_icon">
<img src="https://static.igem.org/mediawiki/2019/8/81/colors_icon.svg">
</div>
<div class="hub_title">
COLORS
</div>
</a>
<div class="submenu_access"></div>
<div class="igem_submenu">
<div class="submenu_item subsection_title"> Warm Colors </div>
<a href="https://2019.igem.org/Colors/Red">
<div class="submenu_item">
Red
</div>
</a>
<a href="https://2019.igem.org/Colors/Yellow">
<div class="submenu_item">
Yellow
</div>
</a>
</div>
</div>
<div class="igem_menu_item">
<a href="https://2019.igem.org/Colors">
<div class="hub_icon">
<img src="https://static.igem.org/mediawiki/2019/8/81/colors_icon.svg">
</div>
<div class="hub_title">
COLORS
</div>
</a>
<div class="submenu_access"></div>
<div class="igem_submenu">
<div class="submenu_item subsection_title"> Warm Colors </div>
<a href="https://2019.igem.org/Colors/Reds">
<div class="submenu_item with_subsub_menu">
Reds
</div>
</a>
<div class="submenu_access"></div>
<div class="igem_subsubmenu">
<a href="https://2019.igem.org/Colors/Reds/Scarlet">
<div class="subsubmenu_item">
Scarlet
</div>
</a>
</div>
<a href="https://2019.igem.org/Colors/Yellow">
<div class="submenu_item">
Yellow
</div>
</a>
</div>
</div>
HTML
Hypertext Markup Language, or HTML, is a standardized system for tagging text to create font, color, graphic, and hyperlink styling on websites. Below we will go voer the general tags used to create a standard wiki page
Text
To write text use the < p > tag
<p> Text </p>
Titles
You can add title using the h tag, here is how the different sizes look:
Title one
Title two
Title three
Title four
Title five
Title six
<h1>Title one </h1>
<h2>Title two </h2>
<h3>Title three </h3>
<h4>Title four </h4>
<h5>Title five </h5>
<h6>Title six </h6>
Links
When creating links use the < a > tag, links will display : Example
<a href="link url "> LINK </a>
Images
You can add images to your website by using the img tag, remember all your images must be hosted on the iGEM server.
<img src="image URL ">
Unordered 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>
Numbered Lists
To create an ordered list, use:
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
- Red
- Orange
- Yellow
<ul>
<li> Cold Colors </li>
<li> Warm Colors
<ol>
<li> Red </li>
<li> Orange </li>
<li> Yellow </li>
</ol>
</li>
</ul>
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>
Layout classes
Columns
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 four types of layout options, which vary between one column up to four in the same row.
- One column (100%) : class="column full_size"
- Three quarters column (75%) : class="column three_quarter_size"
- Two thirds column (66%) : class="column two_thirds_size"
- Two columns (50%) : class="column half_size"
- Three columns (33%): class="column third_size"
- Four columns (25%) : class="column quarter_size"
<div class="column half_size" >
<p> Content goes here </p>
</div>
Support Classes
Highlight
Highlight 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 half_size" >
<div class="highlight">
</div>
</div>
Styling highlight class
There are ways to style the highlight class, you can add:
- class="highlight gray" to add a gray background
- class="highlight decoration_top" to add a decorative line on top
- class="highlight decoration_full" to add a border around the div
- class="highlight decoration_red_top" to add a red line on top
- class="highlight decoration_red_full" to add a red border around the div
These classes can be combined to create different effects, as seen in the next examples.
<div class="column quarter_size" >
<div class="highlight decoration_full">
</div>
</div>
<div class="column quarter_size" >
<div class="highlight gray decoration_top">
</div>
</div>
Post items
Post items is a class that has multiple purposes and can be styled and divided as needed. They can be a standard way of highlighting information, making it easy to recognize types of announcements such as notes or alerts. They are also used as a structural type of class, to easily delineate between a list of items,for example meetups or news items.
Description
<div class="highlight post_item">
<div class="details ">
<span class="icon announcement"></span>
<div class="title"> Title </div>
<div class="date"> Date </div>
</div>
<p>Description </p>
<div>
25%
65%
<div class="highlight post_item"> <div class="details"> <div class="title"> Title </div> <div class="date"> Date </div> </div> <div class="column quarter_size"> <p>25% </p> </div> <div class="column three_quarter_size"> <p>65%</p> </div> <div class="clear"></div> </div>
Button
You can use the button class to highlight a link in your wiki.
<div class="button"> <a href="URL"> REGISTER NOW! </a> </div>
Clear
This class clears the content, it is basically the same as clicking "enter" when you are writing a text.
If you add the "extra_space" class, it will add extra vertical spacing between your divs.
<div class="clear extra_space"> </div>
SPECIAL CASES
There are some specific sections in the wiki where certain support classes are called or when a different resource is called. Here a few of them.
Calendar
The Calendar uses a set of special classes that display and control the viewing of the deadlines in each month. Information is divided in the date of the event and the information pertinent to it. The following code shows how to create a month with one event, the final result can be seen bellow.
MONTH
Title
Lorem ipsum dolor sit amet, mundi similique at nam, ius soleat efficiantur te. Reque errem voluptatibus in his.
<div class="calendar_month">
<h1> MONTH <div class="calendar_month_access content_control displaying_content"> </div> </h1>
<div class="calendar_month_content" >
<div class="deadline_date">
##
</div>
<div class="deadline_content">
<h3>Title </h3>
<p> Text </p>
</div>
<div class="clear extra_space"></div>
</div>
</div>
Image Slider
Remember to keep the same number of items in both lists so the numbers match and work correctly.
- 1
- 2
- 3
<div id="image_carrousel">
<ul class="image_slider" >
<li class="current_image"><img src="https://placehold.it/550x200"></li>
<li><img src="https://placehold.it/550x200"></li>
<li><img src="https://placehold.it/550x200"></li>
</ul>
<div class="image_controller prev"> </div>
<ul class="image_number">
<li class="current_image_number"> 1</li>
<li> 2</li>
<li> 3</li>
</ul>
<div class="image_controller next"> </div>
</div>