This is a style guide for Churros food truck website that called ChuChu (imaginary name not real).
.intext_link
<a href="#top" class="intext_link">Top</a>
<a href="#footer" class="intext_link">Bottom</a>
.button-nav
<a href="#" class="button-nav">Order</a>
.button-nav, .button-error, .button-disable
<button href="#" class="button-nav button-error">Error</button>
<button href="#" class="button-nav button-disable">Disable</button>
form div, label, input, select, .marleft
<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>
.grid, .color_box, .color1, .color2, .color3, .color4, .color5, .color6, .color7
<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>
.hfont
<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>
.pfont, .lfont
<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>
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
.hfont,.lfont, ol, li
<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>
.nodot, .grid
<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>
.nav-item, .grid
<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>
.grid, .container, .image, .overlay, .text
<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>