Html structure

Html structure

• 1.
  HTML Tags StructureCSSClasses Structure
• 2.
  HTML StructureHTML codeused 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 StructureHTML codeused 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 StructureHTML codeused 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 StructureHTML codeused to create dashboard rhs data<div id="content" class="dashboard-content"></div>
• 6.
  Basic HTML ElementsTocreate a link with icon<a class="anchor-icon update-icon"> <span>&nbsp;</span>Update</a>To create a buttonTo 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 StructureTotal CSSFiles (10, Total size ~ 138KB)colorbox.csscommon.cssdocument.cssjquery.selectbox.cssmango.cssmeyer-reset.csstipsy.csstoken-input-facebook.css + 2
• 8.
  JS StructureTotal JSFiles (14, Total size ~ 192KB)jquery.collapsible.js - jquery.cookie.jsjquery.colorbox.jsjquery.elastic.source.jsjquery.idTabs.jsjquery.scrollTo-min.jsjquery.selectbox-0.6.1.jsjquery.simplyCountable.jsjquery.tipsy.jsjquery-1.5.min.jsjqueryslidemenu.jsmango-func.jsswfobject.jsjquery.tokeninput.js
• 9.
  Common Classesbody{ 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; }
• 12.
  CSS ChecklistAll CSS/JSfiles should be in "combine_static_scripts".
• 13.
  Do notput themes related CSS files into "combine_static_script" because the classes gets conflicted.
• 14.
  If we forgetto 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.
• 15.
  If we areloading CSS files from www.mangospring.com then background images path should be like below background-image:url(https://www.mangospring.com/mangoapps/images/body_bg.png); If we are making separate folders for images then we should update gsub into combine_static_scripts.
• 16.
  CSS file sizeshould not exceed the file size limit ( 288kb per file). ( IE7 )
• 17.
  All style rulesafter the first 4095 rules in a file will not be applied. So try to keep below that. ( IE7 )