Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html structure

740 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Html structure

  1. 1. HTML Tags Structure<br />CSS Classes Structure<br />
  2. 2. HTML Structure<br />HTML code used to create basic container<br />// Main container - Page body<br /><div id="wrapper"></div><br />// Container - Width ~ 1000px, margin ~ 0px auto;<br /><div class="mango-shell"></div><br />// Main header <br /><div id="mango-header"></div><br /><div class="mango-shell" id="main"> <br /> <div id="shell-holder"> // Inner pages required class="breadcrumb-shell" <br /> <div id="shell-holder-b"> <br /> <div id="shell-holder-t"><br /> </div><br /> </div><br /> </div><br /></div><br /></div><br />
  3. 3. HTML Structure<br />HTML code used to create basic container<br /><div id="main" class="mango-shell"><br /> <div id="shell-holder"> <br /> <div id="shell-holder-b"> <br /> <div id="shell-holder-t"> <br /> <div class="mango-breadcrumb"> <br /> <div id="breadcrumb-left">Left</div> <br /> <div id="breadcrumb-right">Right</div> <br /> </div> <br /> <div class="cl"></div> <br /> </div> <br /> </div> <br /> </div> <br /></div><br />
  4. 4. HTML Structure<br />HTML code used to create left widget<br /><div id="left-sidebar"><br /> <div class="sidebar"><br /> <div class="sidebar-b"><br /> <div class="sidebar-t"><br /> <div class="mango-widget"><br /> <h2 class="widgettitle"><span>My Notifications</span></h2><br /> <div class="list notifications"><br /> <ul class="list-starter"><br /> <li class="left-widget-li"></li><br /> </ul><br /> <div class="widget-view-more"><%= link_to("View all", "#") -%></div><br /> </div><br /> </div><br /> </div><br /> </div><br /> </div><br /></div><br />
  5. 5. HTML Structure<br />HTML code used to create dashboard rhs data<br /><div id="content" class="dashboard-content"><br /></div><br />
  6. 6. Basic HTML Elements<br />To create a link with icon<br /><a class="anchor-icon update-icon"><br /> <span>&nbsp;</span>Update<br /></a><br />To create a button<br />To create link like a button<br /><button class="mangobutton mangoblue"><br /> <span><br /> <span>Update</span><br /> </span><br /></button><br /><a class="mangobutton mangoblue"><br /> <span><br /> <span>Update</span><br /> </span><br /></a><br />To create a medium size button<br /><button class="mangobutton medium mangoblue"><br /> <span><br /> <span>Update</span><br /> </span><br /></button><br />
  7. 7. CSS Structure<br />Total CSS Files (10, Total size ~ 138KB)<br />colorbox.css<br />common.css<br />document.css<br />jquery.selectbox.css<br />mango.css<br />meyer-reset.css<br />tipsy.css<br />token-input-facebook.css + 2<br />
  8. 8. JS Structure<br />Total JS Files (14, Total size ~ 192KB)<br />jquery.collapsible.js - jquery.cookie.js<br />jquery.colorbox.js<br />jquery.elastic.source.js<br />jquery.idTabs.js<br />jquery.scrollTo-min.js<br />jquery.selectbox-0.6.1.js<br />jquery.simplyCountable.js<br />jquery.tipsy.js<br />jquery-1.5.min.js<br />jqueryslidemenu.js<br />mango-func.js<br />swfobject.js<br />jquery.tokeninput.js<br />
  9. 9. Common Classes<br />body{ <br /> background: #bdcbd2 url(/mangoapps/images/body_bg.png) repeat-x left top; <br /> color: #333333; <br /> font-size: 12px; <br /> line-height: 1.4;<br /> }<br />a{ <br /> color: #09f; <br /> cursor: pointer; <br /> text-decoration: none;<br /> outline: none; <br />} <br />a:hover{<br /> color: #06c; <br />}<br /> a.active{<br /> cursor: default;<br /> }<br />.grey{<br /> color: #999999 !important; <br />}<br />.normal-grey{ <br /> color: #333 !important;<br /> } <br />.dark-grey{<br /> color: #666666 !important;<br />}<br />.black{<br /> color: #000000 !important;<br /> } <br />a img, img { <br /> border: 0;<br /> vertical-align: middle;<br /> } <br />
  10. 10. Common Classes<br /> .center{ <br /> text-align: center;<br /> } <br />.italic{ <br /> font-style: italic !important;<br /> }<br /> .relative{ <br /> position: relative; <br />} <br />.absolute{ <br /> position: absolute; <br />} <br />.hidden{ <br /> overflow: hidden; <br />} <br />.font10{ <br /> font-size: 10px !important;<br /> }<br /> .font11{ <br /> font-size: 11px !important; <br />}<br /> .font12{ <br /> font-size: 12px !important; <br />} <br />.font13{ <br /> font-size: 13px !important;<br /> } <br />.font14{ font-size: 14px !important; } .font15{ font-size: 15px !important; } <br />.d-table{<br /> display: table; <br /> width: 100%; <br />} <br />.d-table-cell{ <br /> display: table-cell; <br />} <br />.d-none{ <br /> display: none; <br />} <br />.d-block{ <br /> display: block !important;<br /> } <br />.d-inline{ <br /> display: inline !important; <br />} <br />.cl { <br /> display: block; <br /> height: 0; <br /> *height: auto; <br /> font-size: 0; <br /> line-height: 0; <br /> text-indent: -4000px; <br /> clear: both; <br />}<br />.d-.left, alignleft {<br /> float: left; <br /> display: inline; <br />} <br />.right, .alignright { <br /> float: right; <br /> display: inline; <br />} <br />.pointer{ <br /> cursor: pointer !important; <br />}<br /> .bold{ <br /> font-weight: bold !important;<br /> } <br />.normal{<br /> font-weight: normal.<br />}<br /> .v-middle{ <br /> vertical-align: middle !important; <br />}<br /> v-top{<br /> vertical-align: top !important; <br />}<br /> .v-bottom{ <br /> vertical-align: bottom;<br /> }<br />
  11. 11. Common Classes<br /> .font14{ <br /> font-size: 14px !important; <br />} <br />.font15{ <br /> font-size: 15px !important; <br />}<br /> .top-5{ <br /> margin-top: 5px !important; <br />}<br /> .right-5{ <br /> margin-right: 5px !important;<br /> } <br />.bottom-5{ <br /> margin-bottom: 5px !important; <br />} <br />.left-5{ <br /> margin-left: 5px !important;<br /> } <br />.top-10{ <br /> margin-top: 10px !important; <br />} <br />.right-10{ <br /> margin-right: 10px !important; <br />} <br />.bottom-10{ <br /> margin-bottom: 10px !important; <br />}<br /> .left-10{ margin-left: 10px !important; } <br />.left-10{<br /> margin-left: 10px !important; <br />}<br /> .top-15{ <br /> margin-top: 15px !important; <br />} <br />.right-15{ <br /> margin-right: 15px !important;<br /> } <br />.bottom-15{ <br /> margin-bottom: 15px !important; <br />} <br />.left-15{ <br /> margin-left: 15px !important;<br /> } <br />.top-20{ <br /> margin-top: 20px !important; <br />} <br />.right-20{ <br /> margin-right: 20px !important; <br />}<br /> .bottom-20{<br /> margin-bottom: 20px !important; <br />} <br />.left-20{ <br /> margin-left: 20px !important; <br />}<br />
  12. 12. CSS Checklist<br /><ul><li>All CSS/JS files should be in "combine_static_scripts".
  13. 13. Do not put themes related CSS files into "combine_static_script" because the classes gets conflicted.
  14. 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.
  15. 15. If we are loading CSS files from www.mangospring.com then background images path should be like below </li></ul> background-image:url(https://www.mangospring.com/mangoapps/images/body_bg.png)<br />; <br /><ul><li>If we are making separate folders for images then we should update gsub into combine_static_scripts.
  16. 16. CSS file size should not exceed the file size limit ( 288kb per file). ( IE7 )
  17. 17. All style rules after the first 4095 rules in a file will not be applied. So try to keep below that. ( IE7 )</li>

×