Kaffee Style Guide

Interactive Elements

Button and alternate

Default Button Alternate Button

HTML CODE

<a class="button-default" href="#">Default Button</a>
<a class="button-alternate" href="#">Alternate Button</a>

Css selector:

.button-defaut, .button-alternate

In-Text Link

In a paragraph, this is what a in text link would look like.

HTML Code

<p>In a paragraph, this is what a <a href="#">in text link</a> would look like.</p>

Navigation Button Style

Shop

Form. Text Field, Label and Button

HTML Code

<form id="form-contact-id" class="form-contact" method="post" action="#">
<div class="form-input-section">
<label for="form-name">Full Name</label>
<input type="text" id="form-name" placeholder="John Smith">
</div>
<div class="form-input-section">
<label for="form-subject">Subject</label>
<input type="text" id="form-subject" placeholder="Customer service/ returns/ order ect">
</div>
<div class="form-input-section">
<label for="form-message">Message</label>
<textarea id="form-message" placeholder="Type here""></textarea>
</div>
</div>
<div class="form-input-section">
<input class="form-button-submit" type="submit" value="Submit your comment">
</div>
</form>

Css selector:

.form-input-section, .form-contact-id, .form-contact, .form-button-submit

Button

Text Styling

Heading Levels

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5

HTML Code

<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>

Paragraph

Bacon ipsum dolor amet tail andouille corned beef pork frankfurter kielbasa jerky. Cow cupim chuck, meatball pig bacon brisket tail biltong ribeye shoulder capicola turducken picanha turkey. Shank ball tip sausage short ribs corned beef doner prosciutto jerky ham hock burgdoggen meatball. Porchetta meatloaf pastrami prosciutto salami. Meatloaf prosciutto pork, shoulder tri-tip tongue spare ribs tail.

HTML Code

<p>Bacon ipsum dolor amet tail andouille corned beef pork frankfurter kielbasa jerky. Cow cupim chuck, meatball pig bacon brisket tail biltong ribeye shoulder capicola turducken picanha turkey. Shank ball tip sausage short ribs corned beef doner prosciutto jerky ham hock burgdoggen meatball. Porchetta meatloaf pastrami prosciutto salami. Meatloaf prosciutto pork, shoulder tri-tip tongue spare ribs tail.</p>

Bulletted List

  • List item

  • List item

  • List item

Numbered List

  1. List item

  2. List item

  3. List item

Combined Elements

Main Navigation

HTML Code

<div class="grid-row">
<div class="grid-col-1of4 pink-nav">
<a id="nav-button-shop" class="nav-section" href="#">Shop<a/>
</div>
<div class="grid-col-1of4 teal-nav">
<a id="nav-button-about" class="nav-section" href="#">About<a/>
</div>
<div class="grid-col-6of6 blue-nav">
<a id="logo" class="nav-section" href="#">
<figure><img id="img-logo" src="img/logo.png" alt="kaffee logo">
</figure>
<a/>
</div>
<div class="grid-col-1of4 pink-nav">
<a id="nav-button-contact" class="nav-section" href="#">Contact<a/>
</div>
<div class="grid-col-1of4 teal-nav">
<a id="nav-button-cart" class="nav-section" href="#">Cart<a/>
</div>
</div>

Css selector:

.grid-col-1of4, .grid-col-6of6

Grid Structure

Gutter
Main
Gutter
Gutter
Product
Gutter
Product
Gutter
Product
Gutter
Gutter
Product
Gutter
Product
Gutter
Product
Gutter
Product
Gutter
Gutter
Footer
Gutter

HTML Code

<div class="grid-row">
<div class="grid-col-1of1 gray">Gutter</div>
<div class="grid-col-8of8 purple-main">Main</div>
<div class="grid-col-1of1 gray">Gutter</div>
</div>
<div class="grid-row">
<div class="grid-col-1of1p gray">Gutter</div>
<div class="grid-col-1of3 pink-product">Product</div>
<div class="grid-col-1of1p gray">Gutter</div>
<div class="grid-col-1of3 pink-product">Product</div>
<div class="grid-col-1of1p gray">Gutter</div>
<div class="grid-col-1of3 pink-product">Product</div>
<div class="grid-col-1of1p gray">Gutter</div>
</div>
<div class="grid-row">
<div class="grid-col-1of5 gray">Gutter</div>
<div class="grid-col-1of4p green-product">Product</div>
<div class="grid-col-1of5 gray">Gutter</div>
<div class="grid-col-1of4p green-product">Product</div>
<div class="grid-col-1of5 gray">Gutter</div>
<div class="grid-col-1of4p green-product">Product</div>
<div class="grid-col-1of5 gray">Gutter</div>
<div class="grid-col-1of4p green-product">Product</div>
<div class="grid-col-1of5 gray">Gutter</div>
</div> <div class="grid-row">
<div class="grid-col-1of1 gray">Gutter</div>
<div class="grid-col-8of8 footer">Footer</div>
<div class="grid-col-1of1 gray">Gutter</div>
</div>

Grid Structure

css selector:

.grid-row, .grid-col-1of1, .grid-col-1of8, .grid-col-1of1p, .grid-col-1of3, .grid-col-1of5, .grid-col-1of4p, .grid-col-8of8

Product Listing

productNo1

Coffee Name

$27