An in-text e-mail link:

The Code

The navigation button style

Example:

The Code

                        
<nav>
    <a href="index.html"><span class="limify"><</span> go home</a>
</nav>
                        
                    

Three levels of headings

.h1, .h2, .h3

Example:

• Heading 1

• Heading 2

• Heading 3

The Code

A paragraph

Example:

The Code

                        
<div class="col-xs-12 col-lg-6">
    <div class="box">
        <h3>Reprehenderit in Voluptate</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
    </div>
</div>
                        
                    

Bulleted list

Example:

• Item 1
• Item 2
• Item 3

The Code

                    
<ul class="bullets">
    <li><a class="h1">Item 1</a></li>
    <li><a class="h2">Item 2</a></li>
    <li><a class="h3">Item 3</a></li>
</ul>
                
                

Numbered lists

.numbered

Example:

1. Item 1
2. Item 2
3. Item 3

The Code

<ol class="numbered">
    <li><a class="h1">Item 1</a></li>
    <li><a class="h2">Item 2</a></li>
    <li><a class="h3">Item 3</a></li>
</ol>
                

Combination Case Study Elements

Example:

The Code

<div class="row centre-xs">
    <div class="col-xs">
        <div class="box">
            <a href="caseStudy2.html">
                <div class="caseStudyBox">
                    <h2>A Case Study</h2>
                    <h3>Android for Mobile: FoleyFind</h3>
                    </div>
                </a>
            </div>
        </div>
    <div class="col-xs">
        <div class="box">
            <a href="caseStudy1.html">
                <div class="caseStudyBox">
                    <h2>A Case Study</h2>
                    <h3>Spatial Design: Jubilee Church</h3>
                    </div>
                </a>
            </div>
        </div>
    </div>
            

Combination Grid Element

Example:

The Code

                        
<div class="row center-xs">
    <div class="col-xs-12">
        <div class="box ">

        </div>
    </div>
</div>
<div class="row middle-xs">
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
        <div class="box">

        </div>
    </div>
    <div class="col-xs bottom-xs center-xs start-md">
        <div class="box">

        </div>
    </div>
    <div class="col-xs bottom-xs center-xs start-md">
        <div class="box">

        </div>
    </div>
</div>

<div class="row center-xs">
    <div class="col-xs">
        <div class="box ">

        </div>
    </div>
</div>
                        
                    

Footer

Example:

The Code

                        
<footer>
    <hr>
    <div class="flexLayoutGroup col-2-3">
        <a href="styleGuide.html">StyleGuide</a>
        <a href="https://github.com/NatashaWainwright">GitHub</a>
        <a href="https://www.instagram.com/natashaeawainwright/">Instagram</a>
    </div>
</footer>