Style Guide
Branding Elements
Typography
Exo, Sans-serif
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Colour Palettes
Heading #675FFF
Text #675FFF Opacity:0.8
Anchor Hover #675FFF Opacity:0.4
Button #FF4846
Text #4C4C4C
Container #CCCCCC
Interactive Elements
In-text link
CSS selector:
.intext-link
Sample code:
<p>text<a class="intext-link" href="url">text</a></p>
Rendered element:
See what's on SALE
Button
CSS selector:
.button-nav
Sample code:
<a href="url" class="button">text name</a>
Rendered element:
SHOP NOW SUBSCRIBE NOWNavigation Link
CSS selector:
.navbar, .topnav, .navbar-logo, .logo
Sample code:
<nav class="navbar">
<div class="navbar-logo">
<a href="url" ><img src="url" alt="logo"></a>
</div>
<div class="topnav">
<a href="url" class="navbar">text name</a>
</div>
</nav>
Rendered element:
Submit/Reset Buttons
CSS selector:
.btn
Sample code:
<input type="submit" value="textname" class="btn">
Rendered element:
Radio Button with Label
CSS selector:
.input[type=radio]
Sample code:
<div class="name">
<input type="radio" class="name" checked />
<label for="name">textname</label>
</div>
Rendered element:
Image as a Link
CSS selector:
.product-list section a
Sample code:
<div class="product-list">
<section>
<a href="url"><img src="img.jpg" alt="img name"></a>
</section>
</div>
Rendered element:
Text Elements
Headings
CSS selector:
h1,h2,h3,h4
Sample code:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
Rendered element:
Heading 1
Heading 2
Heading 3
Heading 4
Paragraphs
CSS selector:
p
Sample code:
<p></P>
Rendered element:
Yumm is a e-commerce company that focus on Asian snacks and drinks. Most of the snacks and drinks are from China, Japan and South Korea. It provides a shopping platform for customers living outside Asia to buy Asian snacks and drinks at any time. The goal of the company is to make customers buy Asian snacks and drinks in an assured way with quality guaranteed and fast delivery guaranteed.
Numbered Lists
CSS selector:
ol,li
Sample code:
<ol><li></li></ol>
Rendered element:
- Hi-chew brand
- Meiji brand
- Oricon brand
Combined Elements
Product/Service Listing
CSS selector:
.product-list,.product-list section,.product-list section p, product-list section a,.add-to-cart
Sample code:
<div class="product-list">
<section>
<a href="url"><img src="img.jpg" alt="img name"></a>
<a href="url"><h4>text</h4></a>
<a href="url"><p>text</p></a>
<a class="add-to-cart" href="#">ADD TO CART</a>
</section>
</div>
Rendered element:
Payment Form
CSS selector:
label, input[type=text], input[type=month], input[type=submit]
Sample code:
<div class="creditCardForm" >
<div class="payment" >
<form >
<div class="form-group owner" >
<label for="owner">Name On Card</label>
<input type="text" class="form-control" id="owner">
</div>
<div class="form-group CVV" >
<label for="cvv">CVV</label>
<input type="text" class="form-control" id="cvv">
</div>
<div class="form-group" id="card-number-field">
<label for="cardNumber">Card Number</label>
<input type="text" class="form-control" id="cardNumber">
</div>
<div class="form-group" id="expiration-date">
<label>Expiration Date</label>
<select>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
<option value="22">2022</option>
<option value="23">2023</option>
</select>
<div class="form-group" id="pay-now">
<input type="submit" value="textname class="btn">
</div>
</form>
</div>
</div>
Rendered element:
CHECKOUT
1.Shipping Address
2.Payment Method
Checkout Cart
CSS selector:
.cart-container,.item,.image,.item-name,.item-name span,.price,.total-price
Sample code:
<div class="cart-container">
<h4>Shopping Cart</h4>
<div class="item">
<div class="image"><img src="url" alt="snacks"/></div>
<div class="item-name"><span>textname</span></div>
<div class="price">textname</div>
<div class="item"><div class="total"><span>Total</span></div>
<div class="total-price"><span>$13.25</span></div></div>
<div class="item">
<div class="total">
<span>TOTAL</span>
</div>
<div class="total-price">
<span>price</span>
</div>
</div>
</div>
Rendered element:
Shopping Cart
Lemon Gummy
$1.75
Uji Matcha Jelly Japanese Drink
$6.70
Flower Candy
$2.35
Total
$10.80
Citations
- Nolan, J. (n.d.).EXO [Font]. Retrieved from https://www.1001freefonts.com/exo.font
- HTML5 Tutorial. (n.d.). Retrived from https://www.w3schools.com/html/default.asp
- Fried egg icons. Flaticon. Retrived from https://www.flaticon.com/search/2?word=fried%20egg
- Image. Retrived from https://www.flickr.com/photos/pkoceres/4636175203/in/photolist-84FBne-WLc7Mk-8T2ZpC-fooZwF-U6wk8z-4MYs5N-7627s8-4HjaAJ-29hnT6-29hnSK-4FSqwe-orcA2B-7krvm2-9f9uaF-5Xi9HD-6DCR92-oHFJpp-4skeFD-oHDWpN-59T8ib-5F1L8C-7RzFvY-2G7EQV-oHiYhK-65KGQE-fjpYS-84JHVo-2corKY-oHDUdo-8r7xxh-5U19bq-8r7nJY-84FBbX-4UZwqe-4jeENj-4R8W67-9fcCqf-2VYxAa-6sHJ6i-orc7in-6bsvQG-d9M4U5-oD9dYc-7YDgL4-8r7hJ1-4jeERq-8rp5o9-bbzA4X-82cZUL-5L86DD
- Image. Retrived from https://ninjapo.com/products/kanro-pure-gummy-fruits-gummy-candies-lemon-flavor-56g-1-97-oz
- Image. Retrived from https://www.worldofsnacks.com/store/p525/Haitai_Sweet_Plum_Candy.html
- Image. Retrived from https://www.worldofsnacks.com/store/p981/Samyang_Zzaldduck_Snack.html
- Image. Retrived from https://usagikun.net/en/candy/2098-hanatouka-4946842526031.html
- Image. Retrieved from http://www.nongshimusa.com/homev2/snack/
- Image. Retrieved from https://www.hktvmall.com/hktv/en/main/Play-Fun/s/H5522002/Supermarket/Supermarket/Beverages/Non-Carbonated-Drinks/Jeleets-Uji-Matcha-Green-Tea-Jelly-275g-x-3-45824091895563/p/H5522002_S_DK90013C
- Image. Retrieved from https://katemita.com/2018/04/13/asahiinryo-calpis-apple-mango/
- Image. Retrieved from https://redmart.com/product/kagome-original-vegetable-juice-70675
- Image. Retrieved from https://japanhaul.com/products/pepsi-j-cola-midnight?variant=9092515430452
- Image. Retrieved from https://oyatsucafe.com/shop/buy-japanese-drinks/japanese-takoyaki-ramune/
- Image. Retrieved from https://tokyotreat.com/tokyozine/may-2018
- Tryit Editor v3.5. (n.d.). Retrived from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_icon_buttons
- How to build a responsive navbar with a toggle menu using Flexbox. (2018, March 23). Retrived from https://medium.freecodecamp.org/how-to-build-a-responsive-navbar-with-a-toggle-menu-using-flexbox-3438e1d08783
- How to Create a Shopping Cart UI using CSS & JavaScript. (2018, April 22). Retrieved from https://designmodo.com/shopping-cart-ui/
- Making a Simple Credit Card Validation Form. (n.d.). Retrived from https://tutorialzine.com/2016/11/simple-credit-card-validation-form
- T. (2017, January 13). How to FIX RIGHT-SIDE WHITESPACE PROBLEM IN HTML/CSS. Retrived from https://www.youtube.com/watch?v=OASSKoiCfqY
- Flexbox Cards Layout Fallback. (n.d.). Retrived from https://codepen.io/LucaRosaldi/pen/NPXwjW
- Freebie: 5 Responsive Footer Templates. (n.d.). Retrieved from https://demo.tutorialzine.com/2015/01/freebie-5-responsive-footer-templates/footer-distributed-with-address-and-phones.html
- HTML Snippets for Twitter Boostrap framework. (n.d.). Retrieved from https://bootsnipp.com/snippets/featured/ecommerce-product-detail
- How TO - Responsive Sidebar. (n.d.). Retrieved from https://www.w3schools.com/howto/howto_css_sidebar_responsive.asp