Fluff & Fibre Style Guide

Interactive Elements

In-text link

CSS selector

.in-text-link

Sample code

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

Example

In-text link

Navigation Link

CSS selector:

.button-nav

Sample code:

<a href="#" class="button">Navigation Button</a>

Example

Navigation Button

Submit/Reset Buttons

Css selector:

.button

Sample Code


        <button type="submit" value="Submit">Submit</button>%lt; button type="reset" value="Reset" > Reset</button>

Example

Text Input Field with Label

Css selector:

.text-input and input-label

Sample code:

<div class="form-name">

        <label for="password-signin1">Password</label><br>

        <input type="text" id="password-signin1" name="password"><br><br>

        </div>

        <label>

        <input type="checkbox" name="remember">Remember this device

        </label>

        <form action="products.html" method="get" class="redirect-products">

        <button class="button-submit">Login</button>

        </form>

Example

Password

Remember this device

Radio Button with Label

Css selector:

.radio-button

Sample code:

          <fieldset>
  <legend>Select a shipment method:</legend>


  <div>

    <input type="radio" id="regular(5-7businessdays)" name="drone" value="regular(5-7businessdays)" checked >

    <label for="regular(5-7businessdays)">Regular (5-7 business days)</label>

  </div>


  <div>

    <input type="radio" id="express(1-2business days)" name="drone" value="express(1-2businessdays)" >

    <label for="express(1-2businessdays)">Express (1-2 business days)</label>

  </div>


  <div> 

    <input type="radio" id="pick-up" name="drone" value="pick-up" />

    <label for="pick-up">Pickup (free)</label>

  </div>

</fieldset>

Example

Select a shipment method:

Regular (5-7 business days)

Express (1-2 business days)

Pick-up (Free)

Image as a Link

Css selector:

.image-link

Sample code:

<a href="grey-sweater.html"><img src="images/item3.png" alt="Blue sweater"></a>

Example

Combined Elements

Main Navigation

Sample code:


        <header>

        <div class="header">

        <nav>

        <div class="left-nav">

        <a href="index.html">Home</a>

        <a href="products.html">Products</a>

        <a href="about.html">About</a>

        <a href="events.html">Events</a>

        </div>

        <div class="right-nav">

        <a href="styleguide.html">Style Guide</a>

        <a href="account.html">Account</a>

        <a href="cart.html" class="cart-icon"></a>

        </nav>

        </div>

        </header>

Example:

Main Footer

Sample code of one column:


        <section class="footer footer-flex">

        <div class="footer-section footer-section0" id="footer-section0">

        <a href="index.html" class="home-button"><img class="footer-logo" src="images/flufffibre.png"
        alt="Fluff and Fibre logo"></a></div>

        <div class="footer-section footer-section1" id="footer-section1">

        <a href="products.html" class="footer-link-header">

        <p class="footer-header">Products</p></a>

        <a href="products.html" class="footer-link-header">

        <p class="footer-header">Sweaters</p></a>

        <a href="products.html" class="footer-link-header">

        <p class="footer-header">Pants</p></a>

        <a href="products.html" class="footer-link-header">

        <p class="footer-header">Shoes</p></a>

        <a href="products.html" class="footer-link-header">

        <p class="footer-header">Accesories</p></a>

        </div>

Example:

Product Listing

Sample code:

<h4>Backpack</h4>
<a><img src="backpack.png" alt="Backpack" style="width:200px;height:200px;"></a>
<h4>105$</h4>
<a href="#">Description</a>

Example:

Grey Sweater

$105

100% Wool

Payment Form

Sample code:

<div class="checkout">

      <div class="row">

      <div class="col-75">

      <div class="container">

        <form action="/action_page.php">


          <div class="row">

            <div class="col-50">

              <h3>Shipping</h3>

              <div class="payment">

                <form action="payment" method="post" autocomplete="on">

                  <div class="form-module-flex">

                    <div class="payment-module">

                      <div class="form-name">

                        <label for="first-name">First Name</label>

                        <input type="text" id="first-name" name="first-name" placeholder="Jane"><br><br>

                      </div>

                    </div>


                    <div class="payment-module">

                      <div class="form-name">

                        <label for="first-name">Last Name</label>

                        <input type="text" id="last-name" name="last-name" placeholder="Doe"><br><br>

                      </div>

                    </div>

                  </div>



                  <div class="payment-module">

                    <div class="form-full-address">

                      <label for="address-line-1">Address</label>

                      <input type="text" id="address-line-1" name="address-line-1" placeholder="123 Bacon Avenue" required>

                      <input type="text" id="address-line-2" name="address-line-2" placeholder="#100"><br><br>

                    </div>


                    <div class="form-module-flex">

                      <div class="form-city">

                        <label for="city">City</label>

                        <input type="text" id="city" name="city" placeholder="Eggs" required><br><br>

                      </div>


                      <div class="form-region">

                        <label for="region">Province</label>

                        <select id="region" name="region" required>

                          <option value="">Choose option</option>

                          <option value="alta">Alberta</option>

                          <option value="bc">British Columbia</option>

                          <option value="man">Manitoba</option>

                          <option value="nb">New Brunswick</option>

                          <option value="nl">Newfoundland and Labrador</option>

                          <option value="ns">Nova Scotia</option>

                          <option value="nl">Nunavut</option>

                          <option value="ont">Ontario</option>

                          <option value="pei">Prince Edward Island</option>

                          <option value="nque">Quebec</option>

                          <option value="sask">Saskatchewan</option>

                          <option value="nwt">The Northwest Territories</option>

                          <option value="yt">The Yukon</option>

                        </select><br><br>

                      </div>


                      <div class="form-postal-code">

                        <label for="postal-code">Postal code</label>

                        <input type="text" id="postal-code" name="postal-code" placeholder="1A2 3B4" required maxlength="7" autocapitalize="characters"><br><br>

                      </div>

                    </div>


                    <div class="payment-module">

                      <div class="form-phone-number">

                        <label for="phone-number">Phone number</label>

                        <input type="tel" id="phone-number" name="phone-number" placeholder="123-123-1234" required maxlength="12"><br><br>

                      </div>

                    </div>



                    <div class="payment-module">

                      <div class="form-email">

                        <label for="email">Email address</label>

                        <input type="email" id="email" name="email" placeholder="email@domain.com" required><br><br>

                      </div>

                    </div>



                  </div>

                </form>

              </div>

            </div>



            <div class="col-50">

              <h3>Payment</h3>

              <div class="payment">

                <form action="payment" method="post" autocomplete="on">

                  <div class="form-module-flex">

                    <div class="payment-module">

                      <div class="form-name">

                        <label for="first-name">Name On Card:</label>

                        <input type="text" id="first-name" name="first-name" placeholder="Jane Doe"><br><br>

                      </div>

                    </div>



                    <div class="payment-module">

                      <div class="form-card">

                        <label for="card number">Credit Card Number:</label>

                        <input type="text" id="card number" name="card number" placeholder="111-222-333-444"><br><br>

                      </div>

                    </div>



                  </div>



                  <div class="payment-module">

                    <div class="expiry">

                      <label for="exp-month">Expiry Month:</label>

                      <input type="text" id="exp-month" name

Example:

Shipping

First Name

Last Name

Address

City

Province

Postal code

Phone number

Email address

Payment

Name On Card:

Credit Card Number:

Expiry Month:

Expiry Year:

CVV:

Shipping address same as billing

Select a shipment method:

Regular (5-7 business days)

Express (1-2 business days)

Pickup (Free)

Checkout Cart

Sample code:

<div class="col-25">

      <div class="container">

      <h4>Shopping Cart

      <span class="price" style="color:black">

        <i class="fa fa-shopping-cart"></i>

        <b> </b>

          <h4> </h4>

      </span>

      </h4>

      <p><a href="#">Backpack</a> <span class="price">$109</span></p>

      <p><a href="#">Wool Sweater</a> <span class="price">$51</span></p>

      <p><a href="#">T-Shirt</a> <span class="price">$20</span></p>

      <p><a href="#">Sticker</a> <span class="price">$2</span></p>

      <hr>

      <p>Total <span class="price" style="color:black"><b>$182</b></span></p>

      </div>

      </div>

Example:

Grey Sweater

Remove

$109

Navy Sweater

Remove

$120

Striped Green and Black Sweater

Remove

$150

Total Price

$379

Brand Components

Fonts

45 Univers Lt Light

ABCDEFGHIJKLMNOPQRSTUVWSYZabcdefghijklmnopqrstuvwxyz

Montreal Nueue

Colours

Art Direction

Citations

Aran. Online store. n.d.. Model in white sweater [Image]. Retrieved from https://www.aran.com/big-and-tall-mens.
Bloesem. Blog. 2015. People talking [Image]. Retrieved from https://bloesem.blogs.com/bloesem/2015/02/class-recap-instafood.html.
Conscious Life and Style. Blog. 2023. Clothing swap [Image]. Retrieved from https://www.consciouslifeandstyle.com/clothing-swaps-how-to-host/.
Eco Stylist. Blog. 2023. Model in white t-shirt [Image]. Retrieved from https://www.eco-stylist.com/the-best-ethical-alternatives-for-mens-spring-fashion/.
Etsy. Online store. n.d.. Model in grey sweater [Image]. Retrieved from https://www.etsy.com/il-en/listing/1274449324/merino-wool-minimalistic-jumper-supreme.
Etsy. Online store. n.d.. Model in white sweater [Image]. Retrieved from https://www.etsy.com/ca/listing/1076948863/hand-knit-braided-sweater-with.
Geeks for Geeks. Blog. n.d.. Design an Event Webpage using HTML and CSS [Code Reference]. Retrieved from https://www.geeksforgeeks.org/design-an-event-webpage-using-html-css/.
Onca. Blog. 2023. Clothing rack [Image]. Retrieved from https://onca.org.uk/event/clothes-swap-with-onca/.
Patagonia. Online store. n.d.. Navy sweater [Image]. Retrieved from https://www.patagonia.ca/product/womens-recycled-wool-crewneck-sweater/51025.html.
Superibosk. Online store. n.d.. Grey sweater [Image]. Retrieved from https://superibosk.live/product_details/48360839.html.
Sustainability Mag. Blog. 2021. Afends Branding [Image]. Retrieved from https://sustainabilitymag.com/top10/top-10-sustainable-clothing-brands.
Sustainable Jungle. Blog. n.d.. Model in tan sweater [Image]. Retrieved from https://www.sustainablejungle.com/sustainable-fashion/gender-neutral-clothing/.
Sustainably Chic. Blog. 2023. Clothing rack [Image]. Retrieved from https://www.sustainably-chic.com/blog/what-is-sustainable-fashion.
Sustainably Chic. Blog. n.d.. Model in grey sweater [Image]. Retrieved from https://www.sustainably-chic.com/blog/climate-neutral-certified-brandss.
The Green Hub. Blog. n.d.. Clothing rack [Image]. Retrieved from https://thegreenhubonline.com/how-to-join-the-relove-movement/.
Venla. Blog. n.d.. Clothing rack [Image]. Retrieved from https://www.venla.com.au/.
W3 Schools. Blog. n.d.. HOW TO - CSS Calender [Code Reference]. Retrieved from https://www.w3schools.com/howto/howto_css_calendar.asp.
Zara. Online store. n.d.. Blue sweater [Image]. Retrieved from https://www.zara.com/ca/en/extrasoft-100-wool-knit-sweater-p09598146.html.
Termly. Online privacy service. 2023. Copyright Examples [Text reference]. Retrieved from https://termly.io/resources/articles/copyright-examples/#:~:text=There%20are%20only%20four%20simple,from%20the%20year%20of%20creation.

Interactive Elements

In-text link

CSS selector

Sample code

Example

Navigation Link

CSS selector:

Sample code:

Example

Submit/Reset Buttons

Css selector:

Sample Code

Example

Text Input Field with Label

Css selector:

Sample code:

Example

Radio Button with Label

Css selector:

Sample code:

Example

Image as a Link

Css selector:

Sample code:

Example

Text Elements

Headings

Sample code:

Examples:

New Arrivals

Our Story

Light Grey Sweater

Paragraphs

Sample code:

Example:

Numbered Lists

Sample code:

Example:

Combined Elements

Main Navigation

Sample code:

Example:

Main Footer

Sample code of one column:

Example:

Sign up for our newsletter!

Product Listing

Sample code:

Example:

Grey Sweater

$105

Payment Form

Sample code:

Example:

Shipping

Payment

Checkout Cart

Sample code:

Example:

Brand Components

Fonts

45 Univers Lt Light

ABCDEFGHIJKLMNOPQRSTUVWSYZabcdefghijklmnopqrstuvwxyz

ABCDEFGHIJKLMNOPQRSTUVWSYZabcdefghijklmnopqrstuvwxyz

Montreal Nueue

Colours

Art Direction

Citations