P02: Style Guide

Atletica

Willy Manuel - Jaime Tatsubana

Our company is a sports equipment retailer which sell equipments that soccer players use or have used. The company does not sell the same exact equipment the players have physically worn. Rather, it is a place where people can browse and buy the same equipments that soccer players wear in their games. It offers a range of products such as player shoes, jerseys, shorts, and other sports wear. The website is not only a place for soccer fans to come and learn more about their favorite players, but also a place to buy the equipments they use.

In-text link

CSS selector:

.text-link

Sample code:

<a href="#" class="text-link">In-Text Link</a>

Rendered element:

In-Text Link

Text Input Field

CSS selector:

.input-text-field

Sample code:

<input id="form-name" class="input-text-field" type="text"> <input id="form-email" class="input-text-field" type="text">

Rendered element:

Default/Header Buttons

CSS selector:

.button-style

.button-style-header

Sample code:

<a href="#" class="button-style">Default Button</a> <a href="#" class="button-style-header">Header Button</a>

Rendered element:

Default Button

Header Button

Full-Width Default/Header Buttons

CSS selector:

.button-style-full-width

.button-style-full-width-header

Sample code:

<a href="#" class="button-style-full-width">Submit Button</a> <a href="#" class="button-style-full-width-header">Header Button</a>

Rendered element:

Default Button Header Button

Default Dropdown Button

CSS selector:

.dropdown

Sample code:

<div class="dropdown">
<h3>Size</h3>
<select>
<option class="dropdown-text">Select size</option>
<option value="8"></option>
<option value="8.5"></option>
<option value="9"></option>
<option value="9.5"></option>
<option value="10"></option>
</select>
</div>

Rendered element:

Size

Quantity

Headings

CSS selector:

h1

Sample code:

<h1>Heading 1</h1>

Rendered element:

Heading 1

CSS selector:

h2

Sample code:

<h2>Heading 2</h2>

Rendered element:

Heading 2

CSS selector:

h3

Sample code:

<h3>Heading 3</h3>

Rendered element:

Heading 3

Paragraphs

CSS selector:

p

Sample code:

<p>This is a sample paragraph text for use on the company website. It is just a simple paragraph that uses Open Sans font with 300 weight and a black color text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor, tellus non hendrerit dictum, metus nulla maximus quam, non semper nunc nisi sit amet ante.</p>

Rendered element:

This is a sample paragraph text for use on the company website. It is just a simple paragraph that uses Open Sans font with 300 weight and a black color text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor, tellus non hendrerit dictum, metus nulla maximus quam, non semper nunc nisi sit amet ante.

Bulleted Lists

CSS selector:

ul, ul li

Sample code:

<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>

Rendered element:

  • Item
  • Item
  • Item
  • Item

Numbered Lists

CSS selector:

ol, ol li

Sample code:

<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ol>

Rendered element:

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

Main Navigation

CSS selector:

nav

Sample code:

<nav>
<a class="menu-icon">Menu</a>
<a class="logo-link" href="index.html">Logo</a>
<ul class="menu">
<li class="home-link"><a href="index.html">Home</a></li>
<li><a href="#">Find Your Player</a></li>
<li><a href="#">Latest Products</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">My Cart</a></li>
</ul>
</nav>

Rendered element:

Product Listing

CSS selector:

.product-thumbnail

Sample code:

<div class="product-thumbnail">
<img src="img/product.jpg">
<h2>Puma evoSPEED 1.3 FG</h2>
<p>Celebrating its heritage and legacy of speed, the PUMA v1.06 10th FG football boots feature the same unique outsole and pattern as the original boots, which were released in 2006.</p>
</div>

Rendered element:

product image

Puma evoSPEED 1.3 FG

Celebrating its heritage and legacy of speed, the PUMA v1.06 10th FG football boots feature the same unique outsole and pattern as the original boots, which were released in 2006.
product image

Puma evoPOWER 3.2 FG Youths

With a new GripTex print for improved control and soft PU upper, get more power and accuracy with every kick in the Puma evoPOWER 3.2 FG Jr kids soccer cleats.

DEFAULT GRID STYLE

CSS selector:

.col-header

.col-(3/4/6/12)of12

Sample code:

<div class="col-header">
<content>
</div>
<div class="col-3of12">
<content>
</div>
<div class="col-4of12">
<content>
</div>
<div class="col-6of12">
<content>
</div>
<div class="col-12of12">
<content>
</div>

Rendered Element:

col-header

col-3of12

col-4of12

col-6of12

col-12of12

Default Color Palette

Colors to be used for both text and assets

#000000

#333333

#5D5E5E

#0286CE

#F1F1F1

#FFFFFF