In-text link

CSS Selector:

.paragraph

.inTextLink

Sample Code:


          <p class="paragraph">Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus volutpat tellus eget tellus gravida lacinia. Donec fermentum mi felis, nec ullamcorper ligula maximus sit amet. Sed nec turpis... <a class="inTextLink" href="Main_StyleGuide.html">Read more</a></p>

Rendered Element:

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus volutpat tellus eget tellus gravida lacinia. Donec fermentum mi felis, nec ullamcorper ligula maximus sit amet. Sed nec turpis... Read more

Navigation Button

CSS Selector:

.navButton

Sample Code:


          <a class="navButton" href="Main_StyleGuide.html">Navigation Button</a>

Rendered Element:

Navigation Button

Submit and Reset Buttons

CSS Selector:

.submitButton

.resetButton

Sample Code:


          <a class="submitButton" href="Main_StyleGuide.html">Submit Button</a>
          <a class="resetButton" href="Main_StyleGuide.html">Reset Button</a>

Rendered Element:

Submit Button Reset Button

Text Input Field and Label

CSS Selector:

form[method=login]

input[type=text]

input[type=password]

Sample Code:


          <form method="login" action="#login">
            <label for="formUsername">Username:</label>
            <type="text" id="formUsername" placeholder="Username">

            <label for="formPassword">Password:></label>
            <type="password" id="formPassword" placeholder="Password">
          </form>

Rendered Element:

Three Levels of Headings

CSS Selector:

.levelOneHeading

.levelTwoHeading

.levelThreeHeading

Sample Code:


          <h1 class="levelOneHeading">Heading One</h1>
          <h2 class="levelTwoHeading">Heading Two</h2>
          <h3 class="levelThreeHeading">Heading Three</h3>

Rendered Element:

Heading One

Heading Two

Heading Three

Paragraph

CSS Selector:

.paragraph

Sample Code:


          <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac fermentum ante. Nullam luctus, eros at luctus convallis, nisi quam suscipit nulla, viverra sollicitudin neque diam sit amet risus. Cras consectetur venenatis facilisis. Fusce at lectus magna. Maecenas posuere vulputate nunc, ac egestas lacus auctor at. Donec commodo sagittis porta. Mauris quis quam leo. In gravida arcu nec mauris aliquam vehicula. Ut dignissim nibh eu vestibulum rutrum. Cras pretium ante finibus orci tincidunt molestie. Phasellus vehicula scelerisque magna, sed ullamcorper ligula convallis egestas.</p>

Rendered Element:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ac fermentum ante. Nullam luctus, eros at luctus convallis, nisi quam suscipit nulla, viverra sollicitudin neque diam sit amet risus. Cras consectetur venenatis facilisis. Fusce at lectus magna. Maecenas posuere vulputate nunc, ac egestas lacus auctor at. Donec commodo sagittis porta. Mauris quis quam leo. In gravida arcu nec mauris aliquam vehicula. Ut dignissim nibh eu vestibulum rutrum. Cras pretium ante finibus orci tincidunt molestie. Phasellus vehicula scelerisque magna, sed ullamcorper ligula convallis egestas.

Bulleted Lists

CSS Selector:

.bulletedList

Sample Code:


          <ul class="bulletedList">
            <li>Nunc id libero a nunc blandit volutpat</li>
            <li>Nulla cursus libero et dignissim porta</li>
            <li>Quisque egestas arcu at libero ornare sempe</li>
            <li>Etiam vitae erat ac magna egestas maximus vel a nisl</li>
            <li>In a nulla ac velit placerat consequat</li>
          </ul>

Rendered Element:

Nunc id libero a nunc blandit volutpat
Nulla cursus libero et dignissim porta
Quisque egestas arcu at libero ornare sempe
Etiam vitae erat ac magna egestas maximus vel a nisl
In a nulla ac velit placerat consequat

Numbered Lists

CSS Selector:

.orderedList

Sample Code:


          <ol class="orderedList">
            <li>Nunc id libero a nunc blandit volutpat</li>
            <li>Nulla cursus libero et dignissim porta</li>
            <li>Quisque egestas arcu at libero ornare sempe</li>
            <li>Etiam vitae erat ac magna egestas maximus vel a nisl</li>
            <li>In a nulla ac velit placerat consequat</li>
          </ol>

Rendered Element:

Nunc id libero a nunc blandit volutpat
Nulla cursus libero et dignissim porta
Quisque egestas arcu at libero ornare sempe
Etiam vitae erat ac magna egestas maximus vel a nisl
In a nulla ac velit placerat consequat

Main Navigation

CSS Selector:

.navButton

.navBar

.flexBox

.flexBoxNav

Sample Code:


          <nav class="navBar flexBox">
            <a class="navButton flexBoxNav" href="Main_StyleGuide.html">Home</a>
            <a class="navButton flexBoxNav" href="Main_StyleGuide.html">About</a>
            <a class="navButton flexBoxNav" href="Main_StyleGuide.html">News</a>
            <a class="navButton flexBoxNav" href="Main_StyleGuide.html">Products</a>
            <a class="navButton flexBoxNav" href="Main_StyleGuide.html">Forums</a>
            <a class="navButton flexBoxNav" href="Main_StyleGuide.html">Login</a>
          </nav>

Rendered Element:

Product Listing

CSS Selector:

.centerAlignH2

.product

.paragraph

.submitButton

.flexBox

.flexBoxProductOptions

Sample Code:


          <div class="flexBox">
            <div class="product">
              <h2 class="centerAlignH2">Octopus</h2>
              <figure>
                <img src="images1_octopus.jpg" alt="A red octopus underwater">
              </figure>
              <p class="paragraph">Sed a mauris sit amet dui malesuada tempor a vitae diam. Nullam euismod non dui a blandit. Class aptent taciti sociosqu ad litora torquent...<a class="inTextLink" href="Main_StyleGuide.html">Read more</a></p>
              <div class="flexbox">
                <a class="submitButton flexBoxProductOptions" href="Main_StyleGuide.html">BUY</a>
                <a class="submitButton flexBoxProductOptions" href="Main_StyleGuide.html">CART</a>
                <a class="submitButton flexBoxProductOptions" href="Main_StyleGuide.html">SIMILAR</a>
              </div>
            </div>
          </div>

Rendered Element:

Octopus

Sed a mauris sit amet dui malesuada tempor a vitae diam. Nullam euismod non dui a blandit. Class aptent taciti sociosqu ad litora torquent...Read more

BUY CART SIMILAR

Nautilus

Sed a mauris sit amet dui malesuada tempor a vitae diam. Nullam euismod non dui a blandit. Class aptent taciti sociosqu ad litora torquent...Read more

BUY CART SIMILAR

Cuttlefish

Sed a mauris sit amet dui malesuada tempor a vitae diam. Nullam euismod non dui a blandit. Class aptent taciti sociosqu ad litora torquent...Read more

BUY CART SIMILAR

Aquarium

Sed a mauris sit amet dui malesuada tempor a vitae diam. Nullam euismod non dui a blandit. Class aptent taciti sociosqu ad litora torquent...Read more

BUY CART SIMILAR

Website Grid Structure

CSS Selector:

.gridBackground

.gridStructure

.paragraph

.flexBox

.flexBoxGridStructure

Sample Code:


          <div class="gridBackground  flexBox">
            <div class="gridStructure flexBoxGridStructure">
              <figure>
                <img src="images/img1_octopus.jpg" alt="A red octopus underwater">
              </figure>
              <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna lacus, tincidunt sed interdum id, aliquam in ligula. Suspendisse maximus eu orci nec vulputate. Morbi convallis efficitur felis, a imperdiet tortor convallis ut. Vivamus dolor enim, cursus auctor eleifend sit amet, lacinia quis eros. Cras sed ex scelerisque, rutrum libero auctor, pulvinar enim. Vestibulum efficitur nisl ut leo ultricies fringilla. Proin tempor nulla ligula, in porttitor sem semper sed. Integer molestie lacus nec purus tristique, et fermentum magna molestie.</p>
            </div>
          </div>

Rendered Element:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna lacus, tincidunt sed interdum id, aliquam in ligula. Suspendisse maximus eu orci nec vulputate. Morbi convallis efficitur felis, a imperdiet tortor convallis ut. Vivamus dolor enim, cursus auctor eleifend sit amet, lacinia quis eros. Cras sed ex scelerisque, rutrum libero auctor, pulvinar enim. Vestibulum efficitur nisl ut leo ultricies fringilla. Proin tempor nulla ligula, in porttitor sem semper sed. Integer molestie lacus nec purus tristique, et fermentum magna molestie.

Sollicitudin ornare mauris accumsan mi velit, sit amet auctor mauris sagittis eu. Sed auctor lobortis diam, eu feugiat metus dignissim vel. Duis tincidunt arcu facilisis ultricies tincidunt. Sed hendrerit massa vel dignissim ullamcorper. Nullam in pretium purus, sed placerat felis. Suspendisse tempus metus eget mattis vulputate. Vestibulum id efficitur enim. Fusce ultricies justo eget.

Pellentesque at arcu eget dui elementum mattis eget ut urna. Nam scelerisque congue varius. Sed hendrerit massa vel dignissim ullamcorper. Nullam in pretium purus, sed placerat felis. Suspendisse tempus metus eget mattis vulputate. Vestibulum id efficitur enim. Fusce ultricies justo eget sapien congue, nec convallis dolor fermentum. Morbi dapibus malesuada efficitur. Mauris sit amet iaculis sapien. Vivamus blandit gravida ornare. Vestibulum ultrices aliquet vestibulum. Sed fringilla sed dui et ultricies.

Donec et velit efficitur, iaculis ligula venenatis, consectetur ligula. Proin bibendum faucibus euismod. Mauris facilisis, urna ut scelerisque pharetra. Vestibulum dignissim quis ante id sodales.

Pellentesque et nisl nec nibh sollicitudin ornare. Mauris accumsan mi velit, sit amet auctor mauris sagittis eu. Sed auctor lobortis diam, eu feugiat metus dignissim vel. Duis tincidunt arcu facilisis ultricies tincidunt. Vestibulum dignissim quis ante id sodales. In accumsan aliquam enim ac blandit. Donec porta ligula sed turpis pharetra accumsan. Donec et velit efficitur, iaculis ligula venenatis, consectetur ligula. Proin bibendum faucibus euismod. Mauris facilisis, urna ut scelerisque pharetra, magna enim.

Fusce vulputate eget ante ac gravida. Maecenas ullamcorper blandit efficitur. Aliquam convallis maximus massa. Aliquam vitae turpis mauris. Integer efficitur eros non diam dignissim, non malesuada sem aliquam. Morbi eget ante at sem faucibus pharetra. Praesent et risus a turpis posuere scelerisque sit amet consectetur nisi. Integer ac risus in dui pulvinar vestibulum. Fusce libero sapien, rhoncus varius orci eget, accumsan vestibulum tellus. Duis ut nulla justo. Pellentesque volutpat nisl ac dictum tincidunt. Nullam et scelerisque leo. Nunc id laoreet nibh. Integer consequat eros ac ante lacinia condimentum. Etiam auctor urna ut placerat mollis. Nunc bibendum efficitur luctus.

Maecenas et ultrices urna, quis hendrerit ex. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sagittis enim ac feugiat hendrerit. Ut egestas est orci, sed gravida risus imperdiet in. Duis a augue mollis, luctus tortor eget, interdum turpis. Donec quis aliquam metus. Aliquam pharetra porttitor libero sit amet rutrum. Etiam finibus enim ullamcorper, pretium nulla nec, malesuada eros. Nunc ex mi, hendrerit in viverra in, consectetur vitae enim. Aenean orci lacus, volutpat eu risus in, mollis luctus quam. Etiam maximus ornare ante, sit amet finibus lacus elementum aliquam. Nullam arcu leo, gravida sed egestas consequat, dapibus a dui. Etiam maximus tincidunt pulvinar. Nulla id est imperdiet turpis pretium placerat. Phasellus ac ornare magna. (Source)

Website Colour Swatches

CSS Selector:

#swatchffffff, #swatch000000, #swatch49c8e5, #swatchf9bd77, #swatch225c89, #swatchcc4e20, #swatch77e5ff, #swatchf9bd77, #swatchf79c7b, #swatch112035, #swatch4385b7

Sample Code:


          <div id="swatchffffff">
            <p>#FFFFFF</p>
          </div>

Rendered Element:

#FFFFFF

#000000

#49c8e5

#f9bd77

#225c89

#cc4e20

#77e5ff

#f79c7b

#112035

#4385b7

P01 Style Guide

In-text link

CSS Selector:

Sample Code:

Rendered Element:

Navigation Button

CSS Selector:

Sample Code:

Rendered Element:

Submit and Reset Buttons

CSS Selector:

Sample Code:

Rendered Element:

Text Input Field and Label

CSS Selector:

Sample Code:

Rendered Element:

Three Levels of Headings

CSS Selector:

Sample Code:

Rendered Element:

Heading One

Heading Two

Heading Three

Paragraph

CSS Selector:

Sample Code:

Rendered Element:

Bulleted Lists

CSS Selector:

Sample Code:

Rendered Element:

Numbered Lists

CSS Selector:

Sample Code:

Rendered Element:

Main Navigation

CSS Selector:

Sample Code:

Rendered Element:

Product Listing

CSS Selector:

Sample Code:

Rendered Element:

Octopus

Nautilus

Cuttlefish

Aquarium

Website Grid Structure

CSS Selector:

Sample Code:

Rendered Element:

Website Colour Swatches

CSS Selector:

Sample Code:

Rendered Element: