Ethos Style Guide

Colour Scheme

CSS Selector:

#8c3636

#442525

#ffc700

#dbb83b

#d6ad62

#c4b18f

#d1d1d1

Sample Code:


            .className {
              background-color: #ffffff;
              color: #000000;
            }

Rendered element:

#8c3636

#442525

#ffc700

#dbb83b

#d6ad62

#c4b18f

#d1d1d1

Headings

CSS Selector:

Sample Code:


            <h1>Heading One</h1>
            <h2>Heading Two</h2>
            <h3>Heading Three</h3>
            <h4>Heading Four</h4>

Rendered element:

Heading One

Heading Two

Heading Three

Heading Four

Paragraph

CSS Selector:

Sample Code:


          <p>Add paragraph here</p>

Rendered element:

In-Text

CSS Selector:

.inTextLink

Sample Code:


          <p>Aliquam nulla augue, suscipit quis sem sed, dignissim ultrices eros. Cras vehicula...<p><a href="#" class="inTextLink">Read more here</a>!</p>

Rendered element:

Aliquam nulla augue, suscipit quis sem sed, dignissim ultrices eros. Cras vehicula... Read more here!

Bulleted List

CSS Selector:

ul li

Sample Code:


          <ul>
            <li>Listed Item Here</li>
            <li>Listed Item Here</li>
            <li>Listed Item Here</li>
            <li>Listed Item Here</li>
            <li>Listed Item Here</li>
          </ul>

Rendered element:

Listed Item Here
Listed Item Here
Listed Item Here
Listed Item Here
Listed Item Here

Numbered List

CSS Selector:

ol li

Sample Code:


          <ol>
            <li>Listed Item Here</li>
            <li>Listed Item Here</li>
            <li>Listed Item Here</li>
            <li>Listed Item Here</li>
            <li>Listed Item Here</li>
          </ol>

Rendered element:

Listed Item Here
Listed Item Here
Listed Item Here
Listed Item Here
Listed Item Here

Templates

Header Navigation Pane

CSS Selector:

.headerContainer

.headerItem

.centreAlignText

.headerItem a

Sample Code:


          <div class="headerContainer>
            <div class="headerItem">
              <a href="#" class="centreAlignText">Template</a>
            </div>
          </div>

Rendered element:

Template

Footer Navigation Pane

CSS Selector:

.footerContainer

.footerItem

.footerItem a

.categoryFooter

.subcategoryFooter

.centreAlignText

Sample Code:


          <div class="footerContainer>
            <div class="footerItem">
              <a href="#" class="categoryFooter centreAlignText">Template</a>
              <a href="#" class="subcategoryFooter centreAlignText">Template</a>
              <a href="#" class="subcategoryFooter centreAlignText">Template</a>
              <a href="#" class="subcategoryFooter centreAlignText">Template</a>
            </div>
          </section>

Rendered element:

Paragraph with Image

CSS Selector:

.paraWithImgDiv

.paraWithImgContainer

.paraWithImgItem

img

figcaption

.paraWithImgItem p

Sample Code:


          <div class="paraWithImgContainer paraWithImgDiv">
            <div class="paraWithImgItem">
              <p>Add paragraph here</p>
            </div">

            <div class="paraWithImgItem">
              <figure>
                <img src="img/templateImage.jpg" alt="a template image with low-poly art style>
                <figcaption>Figure 1: A placeholder image</figcaption>
              </figure>
            </div">
          </div">

Rendered element:

Nulla vulputate feugiat est nec vestibulum. Aliquam nulla augue, suscipit quis sem sed, dignissim ultrices eros. Cras vehicula hendrerit nunc. Nam ut nisl posuere, tincidunt dui at, fermentum diam. Cras malesuada urna sed augue lacinia aliquam. Sed at dui nulla. Morbi ac placerat odio. Praesent mattis lorem a auctor viverra. Integer tincidunt, ex at viverra cursus, dui nulla viverra quam, at lobortis elit elit eget diam. Morbi dapibus id est ultrices aliquet. Duis vehicula pellentesque mollis. Nulla vulputate feugiat est nec vestibulum. Aliquam nulla augue, suscipit quis sem sed, dignissim ultrices eros. Cras vehicula hendrerit nunc. Nam ut nisl posuere, tincidunt dui at, fermentum diam. Cras malesuada urna sed augue lacinia aliquam. Sed at dui nulla. Morbi ac placerat odio. Praesent mattis lorem a auctor viverra. Integer tincidunt, ex at viverra cursus, dui nulla viverra quam, at lobortis elit elit eget diam. Morbi dapibus id est ultrices aliquet. Duis vehicula pellentesque mollis.

a template image with low-poly art style — Figure 1: A placeholder image

P03: Style Guide

Ethos Style Guide

Colour Scheme

CSS Selector:

Sample Code:

Rendered element:

Headings

CSS Selector:

Sample Code:

Rendered element:

Heading One

Heading Two

Heading Three

Heading Four

Paragraph

CSS Selector:

Sample Code:

Rendered element:

In-Text

CSS Selector:

Sample Code:

Rendered element:

Bulleted List

CSS Selector:

Sample Code:

Rendered element:

Numbered List

CSS Selector:

Sample Code:

Rendered element:

Templates

Header Navigation Pane

CSS Selector:

Sample Code:

Rendered element:

Footer Navigation Pane

CSS Selector:

Sample Code:

Rendered element:

Paragraph with Image

CSS Selector:

Sample Code:

Rendered element: