Fit to a Tee Style Guide

Brendan Lane

Welcome to the Fit to a Tee style guide. This guide is a resource for maintaining a consistent design language and coding convention around Fit to a Tee's UI. It's used for storing and maintaining a living database of modular UI elements that make up our site, so that compliancy and consistency can be found across Fit to a Tee's site.

Interactive Elements

Navigation and Checkout Button

CSS selector:

.button.navlink
.button.navlink.checkout

Sample code:

<a class="button navlink" href="">Navigation Button</a>
<a class="button navlink checkout" href="">Checkout Button</a>

Rendered element:

Navigation ButtonCheckout Button

In-text link

CSS selector:

a

Sample code:

<a href="">This is a link.</a>

Rendered element:

This is a link.

Submit and Reset Buttons

CSS selector:

.button.submit
.button.reset

Sample code:

<input type="submit" class="button submit" value="Submit form">
<input type="submit" class="button reset" value="Clear all">

Rendered element:

Text Input Label and Field

CSS selector:

.textfield-label
.textfield

Sample code:

<label class="textfield-label" for="text-input-field">Name</label>
<input type="text" class="textfield" placeholder="Enter your name here" id="input-first-name">

Rendered element:

Text Elements

Headings

CSS selectors:

h1
h2
h3
h4

Sample code:

<h1>This is an h1 heading.</h1> <h2>This is an h2 heading.</h2> <h3>This is an h3 heading.</h3> <h4>This is an h4 heading.</h4>

Rendered elements:

This is an h1 heading.

This is an h2 heading.

This is an h3 heading.

This is an h4 heading.

Paragraph

CSS selector:

p

Sample code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Rendered element:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Bulleted Lists

CSS selector:

ul

Sample code:

<ul>
<li><span class="listitem">This is a list item.<span></li>
<li><span class="listitem">This is a list item.<span></li>
<li><span class="listitem">This is a list item.<span></li>
</ul>

Rendered element:

  • This is a list item.
  • This is a list item.
  • This is a list item.

Note on code:

The CSS for the <ul> tag colours the bullets, so the <span> tag with the "listitem" class exists to recolour the text back to grey.

Numbered Lists

CSS selectors:

ol

Sample code:

<ol>
<li><span class="listitem">This is a list item.<span></li>
<li><span class="listitem">This is a list item.<span></li>
<li><span class="listitem">This is a list item.<span></li>
</ol>

Rendered element:

  1. This is a list item.
  2. This is a list item.
  3. This is a list item.

Note on code:

The CSS for the <ol> tag colours the numbers, so the <span> tag with the "listitem" class exists to recolour the text back to grey.

Combined Elements

Main Navigation

CSS selector:

nav

Sample code:

<nav>
<a class="button navlink" href="">Current Styles</a>
<a class="button navlink" href="">Past Styles</a>
<a class="button navlink" href="">About</a>
<a class="button navlink checkout" href="">Checkout</a>
</nav>

Rendered element:

Product Listing

CSS selector:

.product-listing

Sample code:

<div class="product-listing">
<img src="img/tshirt-bike.png" alt="T-shirt with a bike on the front. The bike has people standing on its seat.">
<div class="product-info">
<p class="product-name">Bike T-Shirt</p>
<p class="product-price">$24.99</p>
</div>
</div>

Rendered element:

T-shirt with a bike on the front. The bike has people standing on its seat.

Bike T-Shirt

$24.99

Grid Structure

CSS selector:

.container

Sample code:

<div class="container">
<div class="product-listing container-item">
<img src="img/tshirt-bike.png" alt="T-shirt with a bike on the front. The bike has people standing on its seat.">
<div class="product-info">
<p class="product-name">Bike T-Shirt</p>
<p class="product-price">$24.99</p>
</div>
</div>
<div class="product-listing container-item">
<img src="img/tshirt-mountain.png" alt="T-shirt with two mountains on the front. The tall mountain is thinking about food.">
<div class="product-info">
<p class="product-name">Mountain T-Shirt</p>
<p class="product-price">$24.99</p>
</div>
</div>
<div class="product-listing container-item">
<img src="img/tshirt-picnic.png" alt="T-shirt with a picnic basket containing chicken, watermelon, and lemonade on the front.">
<div class="product-info">
<p class="product-name">Picnic T-Shirt</p>
<p class="product-price">$24.99</p>
</div>
</div>
<div class="product-listing container-item">
<img src="img/tshirt-trees.png" alt="T-shirt with walking trees on the front.">
<div class="product-info">
<p class="product-name">Trees T-Shirt</p>
<p class="product-price">$24.99</p>
</div>
</div>
<div class="product-listing container-item">
<img src="img/tshirt-ufo.png" alt="T-shirt with a UFO abducting a man on the front.">
<div class="product-info">
<p class="product-name">UFO T-Shirt</p>
<p class="product-price">$24.99</p>
</div>
</div>
<div class="product-listing container-item">
<img src="img/tshirt-falling.png" alt="T-shirt with two falling children on the front.">
<div class="product-info">
<p class="product-name">Falling T-Shirt</p>
<p class="product-price">$29.99</p>
</div>
</div>
</div>

Rendered element:

T-shirt with a bike on the front. The bike has people standing on its seat.

Bike T-Shirt

$24.99

T-shirt with two mountains on the front. The tall mountain is thinking about food.

Mountain T-Shirt

$24.99

T-shirt with a picnic basket containing chicken, watermelon, and lemonade on the front.

Picnic T-Shirt

$24.99

T-shirt with walking trees on the front.

Trees T-Shirt

$24.99

T-shirt with a UFO abducting a man on the front.

UFO T-Shirt

$24.99

T-shirt with two falling children on the front.

Falling T-Shirt

$29.99