The document provides code snippets for HTML tags and CSS classes used to structure pages and components. It includes HTML for page containers, headers, breadcrumbs, left widgets, and content areas. It also includes common CSS classes for styling text, positioning, spacing and more. Finally, it outlines best practices for organizing CSS/JS files and setting image paths.

1. HTML Tags Structure CSS Classes Structure

2. HTML Structure HTML code used to create basic container // Main container - Page body <div id="wrapper"></div> // Container - Width ~ 1000px, margin ~ 0px auto; <div class="mango-shell"></div> // Main header <div id="mango-header"></div> <div class="mango-shell" id="main"> <div id="shell-holder"> // Inner pages required class="breadcrumb-shell" <div id="shell-holder-b"> <div id="shell-holder-t"> </div> </div> </div> </div> </div>

3. HTML Structure HTML code used to create basic container <div id="main" class="mango-shell"> <div id="shell-holder"> <div id="shell-holder-b"> <div id="shell-holder-t"> <div class="mango-breadcrumb"> <div id="breadcrumb-left">Left</div> <div id="breadcrumb-right">Right</div> </div> <div class="cl"></div> </div> </div> </div> </div>

4. HTML Structure HTML code used to create left widget <div id="left-sidebar"> <div class="sidebar"> <div class="sidebar-b"> <div class="sidebar-t"> <div class="mango-widget"> <h2 class="widgettitle"><span>My Notifications</span></h2> <div class="list notifications"> <ul class="list-starter"> <li class="left-widget-li"></li> </ul> <div class="widget-view-more"><%= link_to("View all", "#") -%></div> </div> </div> </div> </div> </div> </div>

5. HTML Structure HTML code used to create dashboard rhs data <div id="content" class="dashboard-content"> </div>

6. Basic HTML Elements To create a link with icon <a class="anchor-icon update-icon"> <span>&nbsp;</span>Update </a> To create a button To create link like a button <button class="mangobutton mangoblue"> <span> <span>Update</span> </span> </button> <a class="mangobutton mangoblue"> <span> <span>Update</span> </span> </a> To create a medium size button <button class="mangobutton medium mangoblue"> <span> <span>Update</span> </span> </button>

7. CSS Structure Total CSS Files (10, Total size ~ 138KB) colorbox.css common.css document.css jquery.selectbox.css mango.css meyer-reset.css tipsy.css token-input-facebook.css + 2

8. JS Structure Total JS Files (14, Total size ~ 192KB) jquery.collapsible.js - jquery.cookie.js jquery.colorbox.js jquery.elastic.source.js jquery.idTabs.js jquery.scrollTo-min.js jquery.selectbox-0.6.1.js jquery.simplyCountable.js jquery.tipsy.js jquery-1.5.min.js jqueryslidemenu.js mango-func.js swfobject.js jquery.tokeninput.js

9. Common Classes body{ background: #bdcbd2 url(/mangoapps/images/body_bg.png) repeat-x left top; color: #333333; font-size: 12px; line-height: 1.4; } a{ color: #09f; cursor: pointer; text-decoration: none; outline: none; } a:hover{ color: #06c; } a.active{ cursor: default; } .grey{ color: #999999 !important; } .normal-grey{ color: #333 !important; } .dark-grey{ color: #666666 !important; } .black{ color: #000000 !important; } a img, img { border: 0; vertical-align: middle; }

10. Common Classes .center{ text-align: center; } .italic{ font-style: italic !important; } .relative{ position: relative; } .absolute{ position: absolute; } .hidden{ overflow: hidden; } .font10{ font-size: 10px !important; } .font11{ font-size: 11px !important; } .font12{ font-size: 12px !important; } .font13{ font-size: 13px !important; } .font14{ font-size: 14px !important; } .font15{ font-size: 15px !important; } .d-table{ display: table; width: 100%; } .d-table-cell{ display: table-cell; } .d-none{ display: none; } .d-block{ display: block !important; } .d-inline{ display: inline !important; } .cl { display: block; height: 0; *height: auto; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; } .d-.left, alignleft { float: left; display: inline; } .right, .alignright { float: right; display: inline; } .pointer{ cursor: pointer !important; } .bold{ font-weight: bold !important; } .normal{ font-weight: normal. } .v-middle{ vertical-align: middle !important; } v-top{ vertical-align: top !important; } .v-bottom{ vertical-align: bottom; }

11. Common Classes .font14{ font-size: 14px !important; } .font15{ font-size: 15px !important; } .top-5{ margin-top: 5px !important; } .right-5{ margin-right: 5px !important; } .bottom-5{ margin-bottom: 5px !important; } .left-5{ margin-left: 5px !important; } .top-10{ margin-top: 10px !important; } .right-10{ margin-right: 10px !important; } .bottom-10{ margin-bottom: 10px !important; } .left-10{ margin-left: 10px !important; } .left-10{ margin-left: 10px !important; } .top-15{ margin-top: 15px !important; } .right-15{ margin-right: 15px !important; } .bottom-15{ margin-bottom: 15px !important; } .left-15{ margin-left: 15px !important; } .top-20{ margin-top: 20px !important; } .right-20{ margin-right: 20px !important; } .bottom-20{ margin-bottom: 20px !important; } .left-20{ margin-left: 20px !important; }

13. Do not put themes related CSS files into "combine_static_script" because the classes gets conflicted.

14. If we forget to move css file into "combine_static_scripts", then do not apply the "<%=@static_file_prepend-%>" to the file, because what happens is the CSS file gets downloaded from CDN but the background images not, as we always apply relative path to it.

16. CSS file size should not exceed the file size limit ( 288kb per file). ( IE7 )

17. All style rules after the first 4095 rules in a file will not be applied. So try to keep below that. ( IE7 )