Difference between revisions of "Team:Waterloo/Example"

(Math section)
m
 
(26 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{Waterloo}}
 
{{Waterloo}}
 
<html>
 
<html>
−
<div id ="mainContainer">
+
<div class="container main-container">
−
<div id ="contentContainer">
+
  
 
     <h1>Example page</h1>
 
     <h1>Example page</h1>
Line 11: Line 10:
 
     <section id="headers" title="Headers">
 
     <section id="headers" title="Headers">
 
         <h2>Headers</h2>
 
         <h2>Headers</h2>
−
         <h1>Title Header</h1>
+
         <table class="split-col">
−
        <h2>Section Header</h2>
+
            <tbody>
−
        <h3>Subsection Header</h3>
+
                <tr>
−
        <h4>Normal Header</h4>
+
                    <td>
−
        <h5>Small Header</h5>
+
                        Title Header
−
        <h6>Extra Small Header</h6>
+
                    </td>
 +
                    <td>
 +
                        <code>
 +
                            &lt;h1&gt;Title Header&lt;/h1&gt;
 +
                        </code>
 +
                    </td>
 +
                </tr>
 +
                <tr>
 +
                    <td>
 +
                        Section Header
 +
                    </td>
 +
                    <td>
 +
                        <code>
 +
                            &lt;h2&gt;Section Header&lt;/h2&gt;
 +
                        </code>
 +
                    </td>
 +
                </tr>
 +
                <tr>
 +
                    <td>
 +
                        Subsection Header
 +
                    </td>
 +
                    <td>
 +
                        <code>
 +
                            &lt;h3&gt;Subsection Header&lt;/h3&gt;
 +
                        </code>
 +
                    </td>
 +
                </tr>
 +
                <tr>
 +
                    <td>
 +
                        Normal Header
 +
                    </td>
 +
                    <td>
 +
                        <code>
 +
                            &lt;h4&gt;Normal Header&lt;/h4&gt;
 +
                        </code>
 +
                    </td>
 +
                </tr>
 +
                <tr>
 +
                    <td>
 +
                        Small Header
 +
                    </td>
 +
                    <td>
 +
                        <code>
 +
                            &lt;h5&gt;Small Header&lt;/h5&gt;
 +
                        </code>
 +
                    </td>
 +
                </tr>
 +
                <tr>
 +
                    <td>
 +
                        Extra Small Header
 +
                    </td>
 +
                    <td>
 +
                        <code>
 +
                            &lt;h6&gt;Extra Small Header&lt;/h6&gt;
 +
                        </code>
 +
                    </td>
 +
                </tr>
 +
            </tbody>
 +
        </table>
 +
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
 +
            <div class="panel panel-default">
 +
                <div class="panel-heading" role="tab" id="headingOne">
 +
                    <h4 class="panel-title">
 +
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
 +
                    Collapsible Group Item #1 (open by default)
 +
                    <span class="hidden-xs toggle-arrow pull-right">Panel Toggle</span>
 +
                    </a>
 +
                    </h4>
 +
                </div>
 +
                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
 +
                    <div class="panel-body">
 +
                        Text 1
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
        <pre><code>
 +
&lt;div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"&gt;
 +
    &lt;div class="panel panel-default"&gt;
 +
        &lt;div class="panel-heading" role="tab" id="headingOne"&gt;
 +
            &lt;h4 class="panel-title"&gt;
 +
            &lt;a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&gt;
 +
            Collapsible Group Item #1 (open by default)
 +
            &lt;span class="hidden-xs toggle-arrow pull-right"&gt;Panel Toggle&lt;/span&gt;
 +
            &lt;/a&gt;
 +
            &lt;/h4&gt;
 +
        &lt;/div&gt;
 +
        &lt;div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"&gt;
 +
            &lt;div class="panel-body"&gt;
 +
                Text 1
 +
            &lt;/div&gt;
 +
        &lt;/div&gt;
 +
    &lt;/div&gt;
 +
&lt;/div&gt;
 +
        </code></pre>
 +
        <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
 +
            <div class="panel panel-default">
 +
                <div class="panel-heading" role="tab" id="headingTwo">
 +
                    <h4 class="panel-title">
 +
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
 +
                    Collapsible Group Item #2 (closed on default)
 +
                    <span class="hidden-xs toggle-arrow pull-right">Panel Toggle</span>
 +
                    </a>
 +
                    </h4>
 +
                </div>
 +
                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
 +
                    <div class="panel-body">
 +
                        Text 2
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
        <pre><code>
 +
&lt;div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true"&gt;
 +
    &lt;div class="panel panel-default"&gt;
 +
        &lt;div class="panel-heading" role="tab" id="headingTwo"&gt;
 +
            &lt;h4 class="panel-title"&gt;
 +
            &lt;a class="collasped" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"&gt;
 +
            Collapsible Group Item #2 (closed on default)
 +
            &lt;span class="hidden-xs toggle-arrow pull-right"&gt;Panel Toggle&lt;/span&gt;
 +
            &lt;/a&gt;
 +
            &lt;/h4&gt;
 +
        &lt;/div&gt;
 +
        &lt;div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"&gt;
 +
            &lt;div class="panel-body"&gt;
 +
                Text 2
 +
            &lt;/div&gt;
 +
        &lt;/div&gt;
 +
    &lt;/div&gt;
 +
&lt;/div&gt;
 +
        </code></pre>
 
     </section>
 
     </section>
  
Line 25: Line 154:
 
         </p>
 
         </p>
 
         <a href="#">link</a>
 
         <a href="#">link</a>
−
         <q cite="">Quotes</q>
+
         <blockquote>
 +
            <p>Text of the quote</p>
 +
            <p class="source">Quote author, caption, or citation</p>
 +
        </blockquote>
 +
        <p class="highlightBox">
 +
            Text with class="highlightBox"
 +
        </p>
 +
        <p class="prevHighlightBox">
 +
            Text with class="prevHighlightBox" (reserved for default wiki content that is to be removed)
 +
        </p>
 
     </section>
 
     </section>
 +
 +
    <section id="references" title="References">
 +
        <h2>References</h2>
 +
        This is a minimal example of the cite tag </cite><cite ref="Khelifa2010"></cite>. Citations can be added with this: <code>&lt;cite ref="Khelifa2010"&gt;&lt;/cite&gt;</code>. Good to check if your changes will work <cite ref="Bak2013"></cite>. This sentence is followed by a non-existent cite tag <cite ref="thereisnone"></cite> which just displays "undefined". I don't think that's much of a problem. This sentence is to confirm that referencing the same thing twice doesn't repeat the reference in the list <cite ref="Khelifa2010"></cite>. To add a new reference, enter it on <a href="https://2015.igem.org/Template:Waterloo/JS/references
 +
">this page</a>. The references should have the JSON format "FirstauthorlastnameYear" : "textToAddToReferenceList" which you'll be able to see examples of in the file.
 +
        References will show up in a list at the bottom of the page, like so:
 +
        <ol id="reflist">
 +
        </ol>
 +
    </section>
 +
 +
    <section id="tables" title="Tables">
 +
        <h2>Tables</h2>
 +
        <p>Tabular data should be in a table, as below</p>
 +
 +
        <div class="table-responsive">
 +
        <table class="table table-condensed">
 +
          <thead>
 +
            <tr>
 +
              <th>Name</th>
 +
              <th>Value</th>
 +
              <th>Units</th>
 +
              <th>Rationale</th>
 +
            </tr>
 +
          </thead>
 +
          <tbody>
 +
            <tr>
 +
              <td>beta_1</td>
 +
              <td>0.1</td>
 +
              <td>min^-1</td>
 +
              <td>Found it in a paper.</td>
 +
            </tr>
 +
            <tr>
 +
              <td>volume</td>
 +
              <td>1</td>
 +
              <td>mL</td>
 +
              <td>Made it up, to be honest.</td>
 +
            </tr>
 +
          </tbody>
 +
        </table>
 +
        </div>
 +
    </section>
 +
 
     <section id="math" title="Math">
 
     <section id="math" title="Math">
 
         <h2>Math</h2>
 
         <h2>Math</h2>
Line 42: Line 222:
 
     </section>
 
     </section>
 
     <section id="images" title="Images &amp; Files">
 
     <section id="images" title="Images &amp; Files">
 +
        <h2>Images &amp; Files</h2>
 
         <figure>
 
         <figure>
−
             <img src="" alt="Example Image" />
+
             <img src="/wiki/images/1/1c/Waterloo_crispier_logo.png" alt="Example Image" style="width:200px;"/>
 +
            <figcaption>Example caption</figcaption>
 +
            <div class="img-att">i
 +
                <ul class="img-att-bubble">
 +
                    <li>Photo &copy; <a href="#">Name of IP holder</a></li>
 +
                    <li>List modifications made (if any)</li>
 +
                    <li><a href="#">Link to original Photo</a></li>
 +
                </ul>
 +
            </div>
 
         </figure>
 
         </figure>
 +
 +
        <h3>Colour Scheme</h3>
 +
        <ul>
 +
            <li>Green (#92cc78) rgb(146, 204, 120) </li>
 +
            <li>Blue (#79bcc7) rgb(121, 188, 199)</li>
 +
            <li>Orange (#fbb67a) rgb(251, 182, 122)</li>
 +
            <li>Charcoal (#373b40) rgb(55, 59, 64) </li>
 +
            <li>Teal (#23b593) rgb(35, 181, 147)</li>
 +
        </ul>
 
     </section>
 
     </section>
  
  
−
</div>
 
 
</div>
 
</div>
 
</html>
 
</html>
 
{{Waterloo_Footer}}
 
{{Waterloo_Footer}}

Latest revision as of 18:36, 3 October 2015

Example page

Copy and past code from this page as a template for the rest of the site

Headers

Title Header <h1>Title Header</h1>
Section Header <h2>Section Header</h2>
Subsection Header <h3>Subsection Header</h3>
Normal Header <h4>Normal Header</h4>
Small Header <h5>Small Header</h5>
Extra Small Header <h6>Extra Small Header</h6> 

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Collapsible Group Item #1 (open by default)
            <span class="hidden-xs toggle-arrow pull-right">Panel Toggle</span>
            </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                Text 1
            </div>
        </div>
    </div>
</div>
        

<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
            <a class="collasped" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Collapsible Group Item #2 (closed on default)
            <span class="hidden-xs toggle-arrow pull-right">Panel Toggle</span>
            </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                Text 2
            </div>
        </div>
    </div>
</div>

Text

Paragraph text

link

Text of the quote

Quote author, caption, or citation

Text with class="highlightBox"

Text with class="prevHighlightBox" (reserved for default wiki content that is to be removed)

References

This is a minimal example of the cite tag . Citations can be added with this: <cite ref="Khelifa2010"></cite>. Good to check if your changes will work . This sentence is followed by a non-existent cite tag which just displays "undefined". I don't think that's much of a problem. This sentence is to confirm that referencing the same thing twice doesn't repeat the reference in the list . To add a new reference, enter it on this page. The references should have the JSON format "FirstauthorlastnameYear" : "textToAddToReferenceList" which you'll be able to see examples of in the file. References will show up in a list at the bottom of the page, like so:

Tables

Tabular data should be in a table, as below

Name Value Units Rationale
beta_1 0.1 min^-1 Found it in a paper.
volume 1 mL Made it up, to be honest.

Math

MathJax is used to write equations using $.

Inline math

Equation is $a = \frac{p}{q}$.

Block equation

$$\nabla \times \vec B = \mu_0 \left( \vec J + \epsilon_0 \frac{\partial \vec E}{\partial t}\right)$$

Greek

You can either use the regular unicode with &greek_letter; (ex. &alpha; = α) inline as if you were using LaTeX with $\greek_letter$ (ex. $alpha$ = $\alpha$).

Images & Files

Example Image
Example caption
i

Colour Scheme

  • Green (#92cc78) rgb(146, 204, 120)
  • Blue (#79bcc7) rgb(121, 188, 199)
  • Orange (#fbb67a) rgb(251, 182, 122)
  • Charcoal (#373b40) rgb(55, 59, 64)
  • Teal (#23b593) rgb(35, 181, 147)
Top