ChuChu

This is a style guide for Churros food truck website that called ChuChu (imaginary name not real).

Interactive Elements

In-text link

CSS selector:

.intext_link

In-text link Code:

<a href="#top" class="intext_link">Top</a>
<a href="#footer" class="intext_link">Bottom</a>

Rendered element:

Top Bottom

Navigation Link

CSS selector:

.button-nav

Button Code:

<a href="#" class="button-nav">Order</a>

Rendered element:

Order

Different type of button

CSS selector:

.button-nav, .button-error, .button-disable

Different type of button Codes:

<button href="#" class="button-nav button-error">Error</button>
<button href="#" class="button-nav button-disable">Disable</button>

Rendered element:

Text Input Field amd select with Label

CSS selector:

form div, label, input, select, .marleft

Input Field and select Code:

<form method="post" action="#">
 <div class="marleft">
  <label for="form-name"> Your Name: </label>
  <input type="text" id="form-name">
 </div>

 <div class="marleft">
  <label for="form-flavor"> Flavor: </label>
  <select name="flavor" id="form-flavor">
  <option value="original"> Original </option>
  <option value="chocolate"> Chocolate </option>
  <option value="matcha"> Matcha </option>
  <option value="strawberry"> Strawberry </option>
  <option value="cookieAndCream"> Cookie & Cream </option>
  </select>
 </div>

 <div class="marleft">
  <label for="form-topping"> Topping: </label>
  <select name="topping" id="form-topping">
  <option value="vanillaIce"> Vanilla Ice Cream </option>
  <option value="chocolateIce"> Chocolate Ice Cream </option>
  <option value="sprinkles"> Sprinkles </option>
  <option value="almond"> Almond </option>
  </select>
 </div>

 <div class="marleft">
  <label for="form-amount"> Amount: </label>
  <input type="number" id="form-amount">
 </div>
</form>

Rendered element:

Colour Elements

Colour palette

CSS selector:

.grid, .color_box, .color1, .color2, .color3, .color4, .color5, .color6, .color7

Colour palette Code:

<section class="grid eight-column six-column four-column two-column one-column">
<div class="color_box color1">
  RGB (255, 171, 44)
  HEX #FFAB2C
</div>
<div class="color_box color2">
  RGB (243, 91, 4)
  HEX #F35B04
</div>
<div class="color_box color3">
  RGB (236, 228, 183)
  HEX #ECE4B7
</div>
<div class="color_box color4">
  RGB (87, 184, 255)
  HEX #57B8FF
</div>
<div class="color_box color5">
  RGB (33, 118, 174)
  HEX #2176AE
</div>
<div class="color_box color6">
  RGB (255, 255, 255)
  HEX #FFFFFF
</div>
<div class="color_box color7">
  RGB (0,0,0)
  HEX #000000
</div>
</section>

Rendered element:

RGB (255, 171, 44) HEX #FFAB2C
RGB (243, 91, 4) HEX #F35B04
RGB (236, 228, 183) HEX #ECE4B7
RGB (87, 184, 255) HEX #57B8FF
RGB (33, 118, 174) HEX #2176AE
RGB (255, 255, 255) HEX #FFFFFF
RGB (0,0,0) HEX #000000

Text Elements

Headings

CSS selector:

.hfont

Heading Code:

<h1 class="hfont">H1 : ChuChu. The H1 is the main page heading</h1>
<h2 class="hfont">H2 : This is the heading for section</h2>
<h3 class="hfont">H3 : This is a thrid level heading. usually use for menu list's title</h3>
<h4 class="hfont">H4 : This is a fourth level heading.</h4>
<h5 class="hfont">H5 : This heading font is quicksand! You can check the different size for heading and navigation button font</h4>

Rendered element:

H1 : ChuChu. The H1 is the main page heading

H2 : This is the heading for section

H3 : This is a thrid level heading. usually use for menu list's title

H4 : This is a fourth level heading.

H5 : This heading font is quicksand! You can check the different size for heading and navigation button font

Paragraphs

CSS selector:

.pfont, .lfont

paragraph Code:

<p class="pfont">ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789. This font is Inconsolata that use for explanation that wrapped in p tag!</p>
<p class="lfont">ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789. This font is Dosis that use for menu list and title for each list</p>

Rendered element:

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789. This font is Inconsolata that use for explanation that wrapped in p tag!

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789. This font is Dosis that use for menu list and title for each list

Numbered Lists

CSS selector:

.hfont,.lfont, ol, li

Numbered lists Code:

<h3 id="flavor" class="hfont"> Flavor </h3>
 <ol class="lfont">
  <li> Original - $25 </li>
  <li> Chocolate - $30 </li>
  <li> Matcha - $30 </li>
  <li> Strawberry - $32 </li>
  <li> Cookie and Cream - $33 </li>
 </ol>

<h3 id="topping" class="hfont"> Topping </h3>
 <ol class="lfont">
  <li> Vanilla ice cream - $5 </li>
  <li> Chocolate ice cream - $7 </li>
  <li> Sprinkles - $3 </li>
  <li> Almonds - $4 </li>
 </ol>

Rendered element:

Flavor

  1. Original - $25
  2. Chocolate - $30
  3. Matcha - $30
  4. Strawberry - $32
  5. Cookie and Cream - $33

Topping

  1. Vanilla ice cream - $5
  2. Chocolate ice cream - $7
  3. Sprinkles - $3
  4. Almonds - $4

Icons

CSS selector:

.nodot, .grid

In-text link Code:

<ul class="nodot grid four-column two-column one-column">
 <li> <img src="icon/001-home.svg" alt="icon - home"> icon - home </li>
 <li> <img src="icon/058-ticket.svg" alt="icon - ticket"> icon - ticket </li>
 <li> <img src="icon/059-cart.svg" alt="icon - cart"> icon - cart </li>
 ......
 <li> <img src="icon/234-grin.svg" alt="icon - grin"> icon - grin </li>
</ul>

Rendered element:

  • icon - home icon - home
  • icon - ticket icon - ticket
  • icon - cart icon - cart
  • icon - coin dollar icon - coin dollar
  • icon - card icon - card
  • icon - location icon - location
  • icon - clock icon - clock
  • icon - user icon - user
  • icon - gift icon - gift
  • icon - heart icon - heart
  • icon - grin icon - grin

Combined Elements

Main Navigation

CSS selector:

.nav-item, .grid

Colour palette Code:

<nav class=:"grid eight-column six-column four-column two-column one-column add-gutters">
 <a href="#home" class="nav-item"> Home </a>
 <a href="#about_us" class="nav-item"> About Us </a>
 <a href="#menu" class="nav-item"> Menu </a>
 <a href="#order_online" class="nav-item"> Order Online </a>
 <a href="#location" class="nav-item"> Location </a>
 <a href="#news" class="nav-item"> News </a>
 <a href="#support" class="nav-item"> Support </a>
 <a href="#profile" class="nav-item"> Profile </a>
</nav>

Rendered element:

Product/Service Image with link

CSS selector:

.grid, .container, .image, .overlay, .text

Product Image with link Code:

<div class="container">
 <a href="#flavor">
  <img src="img/original_c.jpg" alt="original flavor churros image" class="image">
  <div class="overlay">
    <div class="text">Flavor</a>
  </div>
 </a>
</div>

<div class="container">
 <a href="#topping">
  <img src="img/churo_t.jpg" alt="topping image" class="image">
  <div class="overlay">
    <div class="text">Topping</a>
  </div>
 </a>
</div>

Rendered element:

Citations