Welcome to my Style Guide!
Ethos Style Guide
Colour Scheme
CSS Selector:
#ffffff
#c1c1c1
#686868
#565656
#262626
#111111
#000000
#ce8944
#e55b5b
Sample Code:
.className {
background-color: #ffffff;
color: #000000;
}
Rendered Element:
#ffffff
#c1c1c1
#686868
#565656
#262626
#111111
#000000
#ce8944
#e55b5b
Headings
CSS Selector:
h1
h2
h3
h4
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:
p
Sample Code:
<p>Type the paragraph here!</p>
Rendered Element:
Type the paragraph here!
In-Text Link
CSS Selector:
.inTextLink
.inTextLink:active
.inTextLink:hover
.inTextLink:focus
Sample Code:
<p>Type the in-text link <a href="#" class="inTextLink">here</a>!</p>
Rendered Element:
Type the in-text link here!
Bulleted List
CSS Selector:
ul
li
Sample Code:
<ul>
<li>Listed Item</li>
<li>Listed Item</li>
<li>Listed Item</li>
<li>Listed Item</li>
<li>Listed Item</li>
</ul>
Rendered Element:
- Listed Item
- Listed Item
- Listed Item
- Listed Item
- Listed Item
Templates
Header Navigation Bar
CSS Selector:
.navHeaderContainer
.navHeaderItem
.navHeaderItem a
.navHeaderItem a:active
.navHeaderItem a:hover
.navHeaderItem a:focus
Sample Code:
<nav class="navHeaderContainer">
<div class="navHeaderItem">
<a href="#">Template</a>
</div>
</nav>
Rendered Element:
Footer Navigation Bar
CSS Selector:
.navFooterContainer
.navFooterItem
.navFooterItem a
.navFooterItem a:active
.navFooterItem a:hover
.navFooterItem a:focus
.footerCategory
.footerCategory a
.separateBorder
Sample Code:
<nav class="navFooterContainer">
<div class="navFooterItem">
<div class="footerCategory">
<a href="#sectionCategory">Section Category</div>
</div>
<a href="#section" class="separateBorder">Section</div>
<a href="#section" class="separateBorder">Section</div>
<a href="#section">Section</div>
</div>
</nav>
Rendered Element:
Project Card
CSS Selector:
.clickProjectTitle
.projectCardContainer
.projectCardContainer img:active
.projectCardContainer img:hover
.projectCardContainer img:focus
.projectCardItem
Sample Code:
<div class="projectCardContainer">
<div class="projectCardItem">
<a href= "#" class="clickProjectTitle">Project Title</a>
<p>Write a short description here about the project.</p>
<h4>Project Title</h4>
<ul>
<li>Program</li>
</ul>
</div>
<div class="projectCardItem">
<figure>
<a href="#">
<img src="#" alt="Descriptive words">
</a>
</figure>
</div>
</div>
Rendered Element:
Comparing Content
CSS Selector:
.compareContentContainer
.compareContentItem
Sample Code:
<div class="compareContentContainer">
<div class="compareContentItem">
<figure>
<img src="#" alt="Descriptive words">
<figcaption>Image Caption</figcaption>
</figure>
</div>
<div class="compareContentItem">
<figure>
<img src="#" alt="Descriptive words">
<figcaption>Image Caption</figcaption>
</figure>
</div>
</div>
Rendered Element: