SIY Market style template

Patterns

Title Pattern 1

by Vanessa Paradis

Short description of the pattern

Title Pattern 2

by Zoe Deschanel

Short description of the pattern

Title Pattern 3

by Pamela Anderson

Short description of the pattern

Title Pattern 4

by Marilyn Monroe

Short description of the pattern

Alert Messages

  Signed in successfully
  Info label
  Warning label
  New

Data tables

Date added   Pattern Name   Categories   Current status   Actions  
12/05/2013 Pattern Skirt   Women updated  delete
01/24/2014 Pattern Men Trousers   Men removed  cancel
01/01/2014 Pattern Kids Pyjama   Kids unavailable  cancel
06/18/2014 Pattern Women T-shirt   Women new  cancel

Labels

new updated unavailable removed info

Buttons

Button Class name Small Buttons Class name
submit class="btn" submit class="btn btn-small"
 edit class="btn btn-primary"  edit class="btn btn-small btn-primary"
 save changes class="btn btn-primary"  save changes class="btn btn-small btn-primary"
 cancel class="btn btn-warning"  cancel class="btn btn-small btn-warning"
 delete class="btn btn-danger"  delete class="btn btn-small btn-danger"
 info class="btn btn-info"  info class="btn btn-small btn-info"
 search class="btn btn-primary"  search class="btn btn-small btn-primary"
 add pattern to my cart class="btn btn-primary"  add pattern to my cart class="btn btn-small btn-primary"
 add pattern class="btn btn-primary"  add pattern class="btn btn-small btn-primary"
 checkout class="btn btn-primary"  checkout class="btn btn-small btn-primary"
← back to overview class="btn btn-info" ← back to overview class="btn btn-small btn-info"

Pagination

Icons

# Icon Element (x2) Code
1. Search <i class="fa fa-search"></i>
2. Remove item from shopping cart <i class="fa fa-times-circle"></i>
3. Delete item <i class="fa fa-trash-o"></i>
4. User / Designer / Admin <i class="fa fa-user"></i>
5. Shopping cart / Requests <i class="fa fa-shopping-cart"></i>
6. Caret down <i class="fa fa-caret-down"></i>
7. Angle down <i class="fa fa-angle-down"></i>
8. Angle up <i class="fa fa-angle-up"></i>
9. Long arrow right <i class="fa fa-long-arrow-right"></i>
10. Long arrow left <i class="fa fa-long-arrow-left"></i>
11. Sign out <i class="fa fa-sign-out"></i>
12. Sign in <i class="fa fa-sign-in"></i>
13. My patterns <i class="fa fa-scissors"></i>
14. Collection <i class="fa fa-archive"></i>
15. Favorites <i class="fa fa-heart"></i>
16. Add to favorites <i class="fa fa-heart-o"></i>
17. Success <i class="fa fa-check"></i>
18. Info <i class="fa fa-info-circle"></i>
19. Warning <i class="fa fa-exclamation-circle"></i>
20. Forum <i class="fa fa-comments"></i>
21. Info <i class="fa fa-info"></i>
22. Warning <i class="fa fa-exclamation"></i>
23. Picture <i class="fa fa-image"></i>
24. Datepicker - Calendar <i class="fa fa-calendar"></i>
25. Print <i class="fa fa-print"></i>
26. Documents <i class="fa fa-paperclip"></i>
27. Edit <i class="fa fa-pencil"></i>
28. New Pattern <i class="fa fa-plus"></i>
29. All patterns <i class="fa fa-th"></i>
30. Patterns by group <i class="fa fa-th-list"></i>
31. Address <i class="fa fa-map-marker"></i>
32. Contact <i class="fa fa-headphones"></i>
33. Comments <i class="fa fa-comment"></i>
34. Barcode <i class="fa fa-barcode"></i>
35. Classes <i class="fa fa-building"></i>
36. Community <i class="fa fa-group"></i>
37. Twitter <i class="fa fa-twitter"></i>
38. Facebook <i class="fa fa-facebook"></i>
39. Google+ <i class="fa fa-google-plus"></i>
40. Pinterest <i class="fa fa-pinterest"></i>
41. Rating <i class="fa fa-star"></i>
42. Blog <i class="fa fa-rss"></i>
43. How To <i class="fa fa-question-circle"></i>
44. Help <i class="fa fa-support"></i>
45. Edit my profile <i class="fa fa-cog"></i>
46. Home <i class="fa fa-home"></i>
47. Download <i class="fa fa-download"></i>
48. Female <i class="fa fa-female"></i>
49. Male <i class="fa fa-male"></i>
50. Child <i class="fa fa-child"></i>

Colors

# Color class Hex code
1. class="color-yellow-light" #f4ec60
2. class="color-orange" #f6712a
3. class="color-red" #fb6f58
4. class="color-pink" #ff4981
5. class="color-purple" #5856d6
6. class="color-blue" #34aadc
7. class="color-green" #23cdb7
8. class="color-greybg" #edebe2
9. class="color-lightgrey" #d7d6cf
10. class="color-silver" #c4c1b2
11. class="color-greyconcrete" #8e8e8e
12. class="color-darkgrey" #505050
Top