Difference between revisions of "Team:Waterloo/Example"

(change table style)
m
 
(7 intermediate revisions by 3 users not shown)
Line 10: 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-group" id="accordion" role="tablist" aria-multiselectable="true">
 
             <div class="panel panel-default">
 
             <div class="panel panel-default">
Line 32: Line 90:
 
                 </div>
 
                 </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 panel-default">
 
                 <div class="panel-heading" role="tab" id="headingTwo">
 
                 <div class="panel-heading" role="tab" id="headingTwo">
Line 48: Line 127:
 
             </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 57: Line 155:
 
         <a href="#">link</a>
 
         <a href="#">link</a>
 
         <blockquote>
 
         <blockquote>
−
             Quote
+
             <p>Text of the quote</p>
−
             <p style="font-size:small">Quote author, caption, or citation</p>
+
             <p class="source">Quote author, caption, or citation</p>
 
         </blockquote>
 
         </blockquote>
 
         <p class="highlightBox">
 
         <p class="highlightBox">
Line 70: Line 168:
 
     <section id="references" title="References">
 
     <section id="references" title="References">
 
         <h2>References</h2>
 
         <h2>References</h2>
−
         This is a minimal example of the cite tag <cite ref="Khelifa2010"></cite>. 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 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.
 
">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:
 
         References will show up in a list at the bottom of the page, like so:
Line 80: Line 178:
 
         <h2>Tables</h2>
 
         <h2>Tables</h2>
 
         <p>Tabular data should be in a table, as below</p>
 
         <p>Tabular data should be in a table, as below</p>
−
       
+
 
−
         <div class="table-responsove">
+
         <div class="table-responsive">
 
         <table class="table table-condensed">
 
         <table class="table table-condensed">
 
           <thead>
 
           <thead>

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