PageRenderTime 87ms CodeModel.GetById 17ms RepoModel.GetById 1ms app.codeStats 1ms

/Documentation/Smarty/index.html

https://gitlab.com/rodrigo-brave/template
HTML | 952 lines | 841 code | 96 blank | 15 comment | 0 complexity | e984bc3faef83ab2c1054d49ed6913f0 MD5 | raw file
  1. <!doctype html>
  2. <html lang="en-US">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6. <title>Documentation</title>
  7. <meta name="description" content="" />
  8. <meta name="Author" content="Dorin Grigoras [www.stepofweb.com]" />
  9. <!-- mobile settings -->
  10. <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0" />
  11. <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  12. <link href="assets/plugins/shBrush/shBrush.css" rel="stylesheet" type="text/css" />
  13. <link href="assets/css/layout.css" rel="stylesheet" type="text/css" />
  14. </head>
  15. <body>
  16. <div id="aside">
  17. <a href="#start" class="logo">
  18. <img src="assets/images/logo.png" width="100" alt="" />
  19. </a>
  20. <ul id="side-nav" class="list-group">
  21. <li class="list-group-item menu-active">
  22. <a id="pageStartBtn" href="#page-start">Start</a>
  23. <ul class="list-group start-open">
  24. <li><a class="scrollTo submenu-active" href="#page-start">WELCOME</a></li>
  25. <li><a class="scrollTo" href="#page-intro">INTRODUCTION</a></li>
  26. <li><a class="scrollTo" href="#page-structure">PAGE STRUCTURE</a></li>
  27. <li><a class="scrollTo" href="#page-cssjs">CSS/JAVASCRIPT</a></li>
  28. <li><a class="scrollTo" href="#page-styleswitcher">STYLESWITCHER</a></li>
  29. <li><a class="scrollTo" href="#page-fonts">GOOGLE FONTS</a></li>
  30. <li><a class="scrollTo" href="#page-essentials">ESSENTIALS</a></li>
  31. <li><a class="scrollTo" href="#page-dark">Dark Layout</a></li>
  32. <li><a class="scrollTo" href="#page-boxed">Boxed Layout</a></li>
  33. <li><a class="scrollTo" href="#page-rtl">RTL</a></li>
  34. <li><a class="scrollTo" href="#page-preloader">PRELOADER</a></li>
  35. <li><a class="scrollTo" href="#page-demo">NEW PROJECT / DEMO FILES</a></li>
  36. </ul>
  37. </li>
  38. <li class="divider"></li>
  39. <li class="list-group-item">
  40. <a href="#page-php">PHP</a>
  41. <ul class="list-group">
  42. <li><a class="scrollTo" href="#php-confparams">CONFIG PARAMS</a></li>
  43. <li><a class="scrollTo" href="#php-contact">CONTACT</a></li>
  44. <li><a class="scrollTo" href="#php-newsletter">NEWSLETTER</a></li>
  45. </ul>
  46. </li>
  47. <li class="list-group-item">
  48. <a href="#page-headers">HEADERS &amp; MENUS</a>
  49. <ul class="list-group">
  50. <li><a class="scrollTo" href="#headers-1">HEADER STYLES</a></li>
  51. <li><a class="scrollTo" href="#headers-2">MENU DROPDOWN</a></li>
  52. <li><a class="scrollTo" href="#headers-3">MEGA MENU</a></li>
  53. <li><a class="scrollTo" href="#headers-4">PAGE SUBMENU</a></li>
  54. </ul>
  55. </li>
  56. <li class="list-group-item">
  57. <a href="#page-shortcodes">SHORTCODES</a>
  58. </li>
  59. <li class="list-group-item">
  60. <a href="#page-widgets">WIDGETS</a>
  61. </li>
  62. <li class="list-group-item">
  63. <a href="#page-premiumplugins">PREMIUM PLUGINS</a>
  64. </li>
  65. <li class="divider"></li>
  66. <li class="list-group-item">
  67. <a href="#page-credits">Credits</a>
  68. </li>
  69. <li class="divider"></li>
  70. </ul>
  71. </div>
  72. <div id="middle">
  73. <!-- START -->
  74. <div id="page-start" class="page">
  75. <div id="start-welcome">
  76. <h1>
  77. Smarty Multipurpose <small>v1.1.3</small>
  78. <span class="sub block">Responsive Template</span>
  79. </h1>
  80. <p>
  81. <b>First Release:</b> Tuesday, August 25, 2015<br />
  82. <b>Latest Update:</b> Tuesday, January 12, 2016<br />
  83. <b>Author:</b> Dorin Grigoras [<a href="http://www.stepofweb.com" target="_blank">www.stepofweb.com</a>]<br />
  84. <b>Seller:</b> stepofweb [<a href="https://wrapbootstrap.com/user/stepofweb" target="_blank" rel="nofollow">wrapbootstrap.com/user/stepofweb</a>]<br />
  85. <b>Email:</b> <a href="mailto:stepofweb@gmail.com">stepofweb@gmail.com</a>
  86. </p>
  87. <p class="fsize12">
  88. Thank you for purchasing Smarty.<br />
  89. If you have any questions that are beyond the scope of this help file, please feel free to email me via the email address above.
  90. </p>
  91. </div>
  92. <!-- INTRO -->
  93. <div id="page-intro" class="subpage">
  94. <h2>Introduction</h2>
  95. <p>
  96. Smarty &ndash; is unique design and a fully responsive layout.<br />
  97. Smarty comes with 50+ customized jquery plugins to fit your needs &amp; over 550 HTML files.<br />
  98. Smarty is built with the latest version of Bootstrap Framework.<br />
  99. You can find more about bootstrap and its documentation in the following languages below:<br />
  100. <br />
  101. <a target="_blank" rel="nofollow" href="http://getbootstrap.com/getting-started">Bootstrap English (US)</a><br />
  102. <a target="_blank" rel="nofollow" href="http://www.oneskyapp.com/docs/bootstrap/ru">Bootstrap (Russian)</a><br />
  103. <a target="_blank" rel="nofollow" href="http://www.oneskyapp.com/docs/bootstrap/fr">Bootstrap en Français (French)</a><br />
  104. <a target="_blank" rel="nofollow" href="http://holdirbootstrap.de/">Bootstrap auf Deutsch (German)</a><br />
  105. <a target="_blank" rel="nofollow" href="http://twbs.site-konstruktor.com.ua/">Bootstrap ua (Ukrainian)&nbsp;</a><br />
  106. <a target="_blank" rel="nofollow" href="http://www.oneskyapp.com/docs/bootstrap/es">Bootstrap en Español (Spanish)</a><br />
  107. <a target="_blank" rel="nofollow" href="http://v3.bootcss.com/">Bootstrap (Chinese)</a><br />
  108. </p>
  109. <h3>Resend Download Link</h3>
  110. <p>
  111. To resend download links by email: <a target="_blank" rel="nofollow" href="https://wrapbootstrap.com/support/download-resender">https://wrapbootstrap.com/support/download-resender</a>
  112. </p>
  113. </div>
  114. <!-- /INTRO -->
  115. <!-- PAGE STRUCTURE -->
  116. <div id="page-structure" class="subpage">
  117. <h2>Page Structure</h2>
  118. <pre class="brush: html">
  119. &lt;!DOCTYPE html&gt;
  120. &lt;html lang="en-us"&gt;
  121. &lt;head&gt;
  122. [HEAD_META]
  123. &lt;/head&gt;
  124. &lt;body class="smoothscroll enable-animation"&gt;
  125. &lt;div id="slidetop"&gt;
  126. [SLIDE_TOP]
  127. &lt;/div&gt;
  128. &lt;div id="wrapper"&gt;
  129. &lt;div id="topBar"&gt;
  130. [TO_BAR]
  131. &lt;/div&gt;
  132. &lt;div id="header"&gt;
  133. [BUTTONS]
  134. [LOGO]
  135. [NAV_MAIN]
  136. &lt;/div&gt;
  137. &lt;section&gt;
  138. [SECTION_1]
  139. &lt;/section&gt;
  140. ....
  141. &lt;section&gt;
  142. [SECTION_N]
  143. &lt;/section&gt;
  144. &lt;/div&gt;
  145. <!-- FOOTER -->
  146. &lt;footer id="footer"&gt;
  147. [FOOTER_CONTENT]
  148. &lt;/footer&gt;
  149. <!-- /FOOTER -->
  150. [PAGE_JAVASCRIPTS]
  151. &lt;/body&gt;
  152. &lt;/html&gt;
  153. </pre>
  154. </div>
  155. <!-- /PAGE STRUCTURE -->
  156. <!-- CSS/JS -->
  157. <div id="page-cssjs" class="subpage">
  158. <h2>CSS/JAVASCRIPT</h2>
  159. <h3>CSS</h3>
  160. <b>essentials.css</b> - contains bootstrap rewrites, plugins and common rules like <code>.nomargin</code>, <code>.nopadding</code>, etc <br />
  161. <b>layout.css</b> - website main layout rules<br />
  162. <b>layout-dark.css</b> - add this style only if you need a dark layout website <br />
  163. <b>layout-RTL.css</b> - add this style only if you need RTL. Example: arabic language.<br />
  164. <b>layout-shop.css</b> - shop layout<br />
  165. <b>layout-datatables.css</b> datatables table [shortcode/tables]<br />
  166. <b>layout-footable-minimal.css</b>footable table [shortcode/tables]<br />
  167. <b>layout-jqgrid.css</b>jqgrid table [shortcode/tables]<br />
  168. <b>thematics-*.css</b> - thematic layout. Include the chosen style only if you use a predefined thematic.<br />
  169. <b>color_scheme/</b> - is a folder containing 10 predefined color scheme. Create your own scheme replaceing the color (replace only one color, extremly simple)
  170. <h3>JAVASCRIPT</h3>
  171. <p class="lead text-danger">
  172. <strong>Some javascript plugins are loaded asynchronously ONLY where a plugin is needed.</strong>
  173. </p>
  174. <p>
  175. Example: if a specific page needs twitter widget plugin, the twitter javascript is loaded ONLY where the <code>.widget-twitter</code> class is detected.<br />
  176. This is achived using loadScript() function from assets/js/scripts.js<br /><br />
  177. You can use this feature on your custom.js like this:
  178. </p>
  179. <pre class="brush: js">
  180. // Load single script and do something (alert in this example)
  181. loadScript(plugin_path + 'plugin.js', function() {
  182. alert("plugin loaded");
  183. });
  184. // Load multiple scripts and call a final function (alert in this example)
  185. loadScript(plugin_path + "script1.js", function(){
  186. loadScript(plugin_path + "script2.js", function(){
  187. loadScript(plugin_path + "script3.js", function(){
  188. loadScript(plugin_path + "script4.js", function() {
  189. alert('do something');
  190. });
  191. });
  192. });
  193. });
  194. </pre>
  195. <h3>PLUGINS LOADED ASYNCHRONOUSLY (by scripts.js)</h3>
  196. <p>
  197. The plugins above - you don't need to add them in a classic way: &lt;script src="plugin.js">&lt/script><br />
  198. All of them are loaded by assets/js/scripts.js automaticaly ONLY when a specific class or ID is detected on HTML code.<br />
  199. <b class="text-danger">This is the reason why <code class="text-success">var plugin_path = 'assets/plugins/';</code> is used on the bottom of each html template.</b><br /><br />
  200. Please note: using this technique, the page loads faster because the scripts are not included if not needed. Few Mb in size are not loaded if not used!!!
  201. </p><br />
  202. <b>assets/plugins/</b>bootstrap/js/bootstrap.min.js<br />
  203. <small style="color:#999;">bootstrap javascript - always first loaded by scripts.js</small><br /><br />
  204. <b>assets/plugins/</b>smoothscroll.js<br />
  205. <small style="color:#999;">loaded only if &ltbody> contain <code>.smoothscroll </code> class</small><br /><br />
  206. <b>assets/plugins/</b>jquery.nav.min.js<br />
  207. <small style="color:#999;">loaded by one page templates if <code>#topMain.nav-onepage</code> ID is detected</small><br /><br />
  208. <b>assets/plugins/</b>owl-carousel/owl.carousel.min.js<br />
  209. <small style="color:#999;">loaded if <code>.owl-carousel</code> class is detected</small><br /><br />
  210. <b>assets/plugins/</b>slider.flexslider/jquery.flexslider-min.js<br />
  211. <small style="color:#999;">flexslider is a very common slider used by many people. If <code>.flexslider</code> is detected on HTML code, the plugin is loaded. Example: <a href="../../HTML/feature-slider-flexslider-fullwidth.html" target="_blank">feature-slider-flexslider-fullwidth.html</a></small><br /><br />
  212. <b>assets/plugins/</b>magnific-popup/jquery.magnific-popup.min.js<br />
  213. <small style="color:#999;">is the 'lightbox' used on this template. If <code>.lightbox</code> class is detected, the plugin is loaded.</small><br /><br />
  214. <b>assets/plugins/</b>jquery.mb.YTPlayer.min.js<br />
  215. <small style="color:#999;">if <code>#YTPlayer</code> ID is detected, the plugin is loaded</small><br /><br />
  216. <b>assets/plugins/</b>mixitup/jquery.mixitup.min.js<br />
  217. <small style="color:#999;">loaded if <code>.mix-grid</code> is detected. Example: <a href="../../HTML/portfolio-grid-3-columns.html" target="_blank">portfolio-grid-3-columns.html</a></small><br /><br />
  218. <b>assets/plugins/</b>text-rotator/jquery.simple-text-rotator.min.js<br />
  219. <small style="color:#999;">loaded if <code>.word-rotator</code> class is detected. Example: <a href="../../HTML/shortcode-headings.html#wrotator" target="_blank">shortcode-headings.html#wrotator</a></small><br /><br />
  220. <b>assets/plugins/</b>lazyload/jquery.lazyload.min.js<br />
  221. <small style="color:#999;">loaded if <code>.lazy</code> class is detected. Example: <a href="../../HTML/start.html" target="_blank">start.html</a></small><br /><br />
  222. <b>assets/plugins/</b>isotope/isotope.pkgd.min.js<br />
  223. <small style="color:#999;">loaded if isotope filter is needed. Example: <a href="../../HTML/portfolio-masonry-4-columns.html" target="_blank">portfolio-masonry-4-columns.html</a></small><br /><br />
  224. <b>assets/plugins/</b>custom.fle_upload.js<br />
  225. <small style="color:#999;">loaded if <code>.custom-file-upload</code> class is detected. Example: <a href="../../HTML/page-contact-1.html" target="_blank">page-contact-1.html</a></small><br /><br />
  226. <b>assets/plugins/</b>countdown/jquery.countdown.pack.min.js<br />
  227. <small style="color:#999;">loaded if <code>.countTo</code> class is detected. Example: <a href="../../HTML/shortcode-counters.html" target="_blank">shortcode-counters.html</a></small><br /><br />
  228. <b>assets/plugins/</b>toastr/toastr.js<br />
  229. <small style="color:#999;">loaded if <code>.toastr-notify</code> is detected OR if _toastr() used on javascript. Example: <a href="../../HTML/shortcode-notifications.html" target="_blank">shortcode-notifications.html</a></small><br /><br />
  230. <b>assets/plugins/</b>chart.easypiechart/dist/jquery.easypiechart.min.js<br />
  231. <small style="color:#999;">loaded if <code>.piechart</code> class is detected</small><br /><br />
  232. <b>assets/plugins/</b>select2/js/select2.full.min.js<br />
  233. <small style="color:#999;">loaded if <code>.select2</code> is detected. <a href="../../HTML/shortcode-forms.html" target="_blank">shortcode-forms.html</a></small><br /><br />
  234. <b>assets/plugins/</b>form.validate/jquery.validation.min.js<br />
  235. <small style="color:#999;">loaded if <code>.validate</code> class detected on a form. Example: <a href="../../HTML/shortcode-forms-validation.html" target="_blank">shortcode-forms.html</a></small><br /><br />
  236. <b>assets/plugins/</b>form.masked/jquery.maskedinput.js<br />
  237. <small style="color:#999;">loaded if <code>.masked</code> is detected on an input field. Example: <a href="../../HTML/shortcode-forms-masked.html" target="_blank">shortcode-forms-masked.html</a></small><br /><br />
  238. <b>assets/plugins/</b>bootstrap.datepicker/js/bootstrap-datepicker.min.js<br />
  239. <small style="color:#999;"></small><br /><br />
  240. <b>assets/plugins/</b>bootstrap.daterangepicker/daterangepicker.js<br />
  241. <small style="color:#999;">loaded if <code>.datepicker</code> class is detected. <a href="../../HTML/shortcode-forms-pickers.html" target="_blank">shortcode-forms-pickers.html</a></small><br /><br />
  242. <b>assets/plugins/</b>timepicki/timepicki.min.js<br />
  243. <small style="color:#999;">loaded if <code>.timepicker</code> class is detected. <a href="../../HTML/shortcode-forms-pickers.html" target="_blank">shortcode-forms-pickers.html</a></small><br /><br />
  244. <b>assets/plugins/</b>spectrum/spectrum.min.js<br />
  245. <small style="color:#999;">loaded if <code>.colorpicker</code> class is detected. <a href="../../HTML/shortcode-forms-pickers.html" target="_blank">shortcode-forms-pickers.html</a></small><br /><br />
  246. <b>assets/plugins/</b>editor.summernote/summernote.min.js<br />
  247. <small style="color:#999;">loaded if <code>.summernote</code> class is detected. <a href="../../HTML/shortcode-forms-editors.html" target="_blank">shortcode-forms-editors.html</a></small><br /><br />
  248. <b>assets/plugins/</b>editor.markdown/js/bootstrap-markdown.min.js<br />
  249. <small style="color:#999;">loaded if <code>.markdown</code> class is detected. <a href="../../HTML/shortcode-forms-editors.html" target="_blank">shortcode-forms-editors.html</a></small><br /><br />
  250. <b>assets/plugins/</b>pajinate/jquery.pajinate.bootstrap.min.js<br />
  251. <small style="color:#999;">loaded if <code>.pajinate</code> class is detected. <a href="../../HTML/portfolio-loading-jpagination.html" target="_blank">portfolio-loading-jpagination.html</a></small><br /><br />
  252. <b>assets/plugins/</b>infinite-scroll/jquery.infinitescroll.min.js<br />
  253. <small style="color:#999;">loaded if <code>.infinite-scroll</code> class is detected. <a href="../../HTML/portfolio-loading-infinite-scroll.html" target="_blank">portfolio-loading-infinite-scroll.html</a></small><br /><br />
  254. <b>assets/plugins/</b>image.zoom/jquery.zoom.min.js<br />
  255. <small style="color:#999;">loaded if <code>figure.zoom</code> is detected. <a href="../../HTML/shortcode-thumbnails.html#figzoom" target="_blank">shortcode-thumbnails.html#figzoom</a></small><br /><br />
  256. <b>assets/plugins/</b>typeahead.bundle.js<br />
  257. <small style="color:#999;">loaded if <code>.autosuggest</code> class is detected. <a href="../../HTML/shortcode-forms-autosuggest.html" target="_blank">shortcode-forms-autosuggest.html</a></small><br /><br />
  258. <b>assets/plugins/</b>form.stepper/jquery.stepper.min.js<br />
  259. <small style="color:#999;">loaded if <code>input.stepper</code> class is detected.</small><br /><br />
  260. <b>assets/plugins/</b>slimscroll/jquery.slimscroll.min.js<br />
  261. <small style="color:#999;">loaded if <code>.slimscroll</code> class is detected.</small><br /><br />
  262. <b>assets/plugins/</b>jquery.backstretch.min.js<br />
  263. <small style="color:#999;">loaded if <code>data-background="image.jpg"</code> detected on &lt;body></small><br /><br />
  264. <b>assets/plugins/</b>widget.jflickr/jflickrfeed.min.js<br />
  265. <small style="color:#999;">loaded if <code>.widget-flickr</code> class is detected. <a href="../../HTML/shortcode-widgets.html" target="_blank">shortcode-widgets.html</a></small><br /><br />
  266. <b>assets/plugins/</b>widget.twittie/twittie.min.js<br />
  267. <small style="color:#999;">loaded if <code>.widget-twitter</code> class is detected. <a href="../../HTML/shortcode-widgets.html" target="_blank">shortcode-widgets.html</a></small><br /><br />
  268. <b>assets/plugins/</b>widget.dribbble/jribbble.min.js<br />
  269. <small style="color:#999;">loaded if <code>.widget-dribbble</code> class is detected. <a href="../../HTML/shortcode-widgets.html" target="_blank">shortcode-widgets.html</a></small><br /><br />
  270. <b>assets/plugins/</b>widget.mediaelementbuild/mediaelement-and-player.min.js<br />
  271. <small style="color:#999;">loaded if <code>.widget-media</code> class is detected. Also, you can find it used on index-thematics-music.html loaded via an external file: assets/js/view/demo.music.js</small><br /><br />
  272. </div>
  273. <!-- /CSS/JS -->
  274. <!-- STYLESWITCHER -->
  275. <div id="page-styleswitcher" class="subpage">
  276. <h2>STYLESWITCHER</h2>
  277. <p>
  278. Styleswitcher is a plugin created from scratch for demo purposes only. <br />
  279. At the bottom of each page, find and remove:
  280. </p>
  281. <pre class="brush: html">
  282. &lt;!-- STYLESWITCHER - REMOVE -->
  283. &lt;script async type="text/javascript" src="assets/plugins/styleswitcher/styleswitcher.js">&lt;/script>
  284. </pre>
  285. Also, you can delete the plugin from: <b>assets/plugins/styleswitcher/</b> on your production site.
  286. </div>
  287. <!-- /STYLESWITCHER -->
  288. <!-- GOOGLE FONTS -->
  289. <div id="page-fonts" class="subpage">
  290. <h2>GOOGLE FONTS</h2>
  291. <p>
  292. 3 Fonts used:
  293. </p>
  294. <ul>
  295. <li><a href="https://www.google.com/fonts/specimen/Open+Sans" target="_blank">Open Sans (default font)</a></li>
  296. <li><a href="https://www.google.com/fonts/specimen/Raleway" target="_blank">Raleway (used for numbers)</a></li>
  297. <li><a href="https://www.google.com/fonts/specimen/Lato" target="_blank">Lato (to highlight important text - weight 300)</a></li>
  298. </ul><br />
  299. <p>
  300. CSS Classes:<br />
  301. <code>.font-open-sans </code> Force <i>Open Sans</i> Font<br />
  302. <code>.font-lato</code> Force <i>Lato Font</i><br />
  303. <code>.font-raleway</code> Force <i>Raleway</i> Font <br />
  304. </p>
  305. If you want to rewrite the fonts used on Smarty, use <code>assets/css/_layout-font-rewrite.css</code> and modify it according to your needs.
  306. </div>
  307. <!-- /GOOGLE FONTS -->
  308. <!-- ESSENTIALS -->
  309. <div id="page-essentials" class="subpage">
  310. <h2>ESSENTIALS</h2>
  311. <p>Essential classes (assets/css/essentials.css) that helps you to quick position elements without writing new css rules.</p>
  312. <p>You are encouraged to use these classes</p>
  313. <table class="table table-bordered">
  314. <thead>
  315. <tr>
  316. <th style="width:20%">Class</th>
  317. <th style="width:30%">Description</th>
  318. <th style="width:20%">Class</th>
  319. <th style="width:30%">Description</th>
  320. </tr>
  321. </thead>
  322. <tbody>
  323. <tr>
  324. <td><code>.size-11</code></td>
  325. <td>Force font size to 11px (text, icons)</td>
  326. <td><code>.weight-300</code></td>
  327. <td>Force font weight to 300 (text)</td>
  328. </tr>
  329. <tr>
  330. <td><code>.size-12</code></td>
  331. <td>Force font size to 12px (text, icons)</td>
  332. <td><code>.weight-400</code></td>
  333. <td>Force font weight to 400 (text)</td>
  334. </tr>
  335. <tr>
  336. <td><code>.size-13</code></td>
  337. <td>Force font size to 13px (text, icons)</td>
  338. <td><code>.weight-500</code></td>
  339. <td>Force font weight to 500 (text)</td>
  340. </tr>
  341. <tr>
  342. <td><code>.size-14</code></td>
  343. <td>Force font size to 14px (text, icons)</td>
  344. <td><code>.weight-600</code></td>
  345. <td>Force font weight to 600 (text)</td>
  346. </tr>
  347. <tr>
  348. <td><code>.size-15</code></td>
  349. <td>Force font size to 15px (text, icons)</td>
  350. <td><code>.weight-700</code></td>
  351. <td>Force font weight to 700 (text)</td>
  352. </tr>
  353. <tr>
  354. <td><code>.size-16</code></td>
  355. <td>Force font size to 16px (text, icons)</td>
  356. <td><code>.font-lato</code></td>
  357. <td>Force font family: 'Lato', Arial, sans-serif</td>
  358. </tr>
  359. <tr>
  360. <td><code>.size-17</code></td>
  361. <td>Force font size to 17px (text, icons)</td>
  362. <td><code>.padding-0</code></td>
  363. <td>Force padding to 0px</td>
  364. </tr>
  365. <tr>
  366. <td><code>.size-18</code></td>
  367. <td>Force font size to 18px (text, icons)</td>
  368. <td><code>.padding-3</code></td>
  369. <td>Force padding to 3px</td>
  370. </tr>
  371. <tr>
  372. <td><code>.size-19</code></td>
  373. <td>Force font size to 19px (text, icons)</td>
  374. <td><code>.padding-6</code></td>
  375. <td>Force padding to 6px</td>
  376. </tr>
  377. <tr>
  378. <td><code>.size-20</code></td>
  379. <td>Force font size to 20px (text, icons)</td>
  380. <td><code>.padding-8</code></td>
  381. <td>Force padding to 8px</td>
  382. </tr>
  383. <tr>
  384. <td><code>.size-26</code></td>
  385. <td>Force font size to 26px (text, icons)</td>
  386. <td><code>.padding-10</code></td>
  387. <td>Force padding to 10px</td>
  388. </tr>
  389. <tr>
  390. <td><code>.size-30</code></td>
  391. <td>Force font size to 30px (text, icons)</td>
  392. <td><code>.padding-0</code></td>
  393. <td>Force padding to 0px</td>
  394. </tr>
  395. <tr>
  396. <td><code>.size-40</code></td>
  397. <td>Force font size to 40px (text, icons)</td>
  398. <td><code>.padding-15</code></td>
  399. <td>Force padding to 15px</td>
  400. </tr>
  401. <tr>
  402. <td><code>.size-50</code></td>
  403. <td>Force font size to 50px (text, icons)</td>
  404. <td><code>.padding-20</code></td>
  405. <td>Force padding to 20px</td>
  406. </tr>
  407. <tr>
  408. <td><code>.size-60</code></td>
  409. <td>Force font size to 60px (text, icons)</td>
  410. <td><code>.padding-30</code></td>
  411. <td>Force padding to 30px</td>
  412. </tr>
  413. <tr>
  414. <td><code>.size-70</code></td>
  415. <td>Force font size to 70px (text, icons)</td>
  416. <td><code>.padding-40</code></td>
  417. <td>Force padding to 40px</td>
  418. </tr>
  419. <tr>
  420. <td><code>.size-80</code></td>
  421. <td>Force font size to 80px (text, icons)</td>
  422. <td><code>.padding-50</code></td>
  423. <td>Force padding to 50px</td>
  424. </tr>
  425. <tr>
  426. <td><code>.size-90</code></td>
  427. <td>Force font size to 90px (text, icons)</td>
  428. <td><code>.padding-60</code></td>
  429. <td>Force padding to 60px</td>
  430. </tr>
  431. <tr>
  432. <td><code>.size-100</code></td>
  433. <td>Force font size to 100px (text, icons)</td>
  434. <td><code>.padding-70</code></td>
  435. <td>Force padding to 70px</td>
  436. </tr>
  437. <tr>
  438. <td><code>.margin-top-0</code></td>
  439. <td>Force margin top to 0px</td>
  440. <td><code>.margin-bottom-0</code></td>
  441. <td>Force margin bottom to 0px</td>
  442. </tr>
  443. <tr>
  444. <td><code>.margin-top-3</code></td>
  445. <td>Force margin top to 3px</td>
  446. <td><code>.margin-bottom-3</code></td>
  447. <td>Force margin bottom to 3px</td>
  448. </tr>
  449. <tr>
  450. <td><code>.margin-top-6</code></td>
  451. <td>Force margin top to 6px</td>
  452. <td><code>.margin-bottom-6</code></td>
  453. <td>Force margin bottom to 6px</td>
  454. </tr>
  455. <tr>
  456. <td><code>.margin-top-8</code></td>
  457. <td>Force margin top to 8px</td>
  458. <td><code>.margin-bottom-8</code></td>
  459. <td>Force margin bottom to 8px</td>
  460. <td></td>
  461. </tr>
  462. <tr>
  463. <td><code>.margin-top-10</code></td>
  464. <td>Force margin top to 10px</td>
  465. <td><code>.margin-bottom-10</code></td>
  466. <td>Force margin bottom to 10px</td>
  467. </tr>
  468. <tr>
  469. <td><code>.margin-top-20</code></td>
  470. <td>Force margin top to 20px</td>
  471. <td><code>.margin-bottom-20</code></td>
  472. <td>Force margin bottom to 20px</td>
  473. </tr>
  474. <tr>
  475. <td><code>.margin-top-30</code></td>
  476. <td>Force margin top to 30px</td>
  477. <td><code>.margin-bottom-30</code></td>
  478. <td>Force margin bottom to 30px</td>
  479. </tr>
  480. <tr>
  481. <td><code>.margin-top-40</code></td>
  482. <td>Force margin top to 40px</td>
  483. <td><code>.margin-bottom-40</code></td>
  484. <td>Force margin bottom to 40px</td>
  485. </tr>
  486. <tr>
  487. <td><code>.margin-top-50</code></td>
  488. <td>Force margin top to 50px</td>
  489. <td><code>.margin-bottom-50</code></td>
  490. <td>Force margin bottom to 50px</td>
  491. </tr>
  492. <tr>
  493. <td><code>.margin-top-60</code></td>
  494. <td>Force margin top to 60px</td>
  495. <td><code>.margin-bottom-60</code></td>
  496. <td>Force margin bottom to 60px</td>
  497. </tr>
  498. <tr>
  499. <td><code>.margin-top-80</code></td>
  500. <td>Force margin top to 80px</td>
  501. <td><code>.margin-bottom-80</code></td>
  502. <td>Force margin bottom to 80px</td>
  503. </tr>
  504. <tr>
  505. <td><code>.margin-top-100</code></td>
  506. <td>Force margin top to 100px</td>
  507. <td><code>.margin-bottom-100</code></td>
  508. <td>Force margin bottom to 100px</td>
  509. </tr>
  510. <tr>
  511. <td><code>.margin-top-130</code></td>
  512. <td>Force margin top to 130px</td>
  513. <td><code>.margin-bottom-130</code></td>
  514. <td>Force margin bottom to 130px</td>
  515. </tr>
  516. <tr>
  517. <td><code>.margin-top-150</code></td>
  518. <td>Force margin top to 150px</td>
  519. <td><code>.margin-bottom-150</code></td>
  520. <td>Force margin bottom to 150px</td>
  521. </tr>
  522. <tr>
  523. <td><code>.margin-top-180</code></td>
  524. <td>Force margin top to 180px</td>
  525. <td><code>.margin-bottom-180</code></td>
  526. <td>Force margin bottom to 180px</td>
  527. </tr>
  528. <tr>
  529. <td><code>.margin-top-200</code></td>
  530. <td>Force margin top to 200px</td>
  531. <td><code>.margin-bottom-200</code></td>
  532. <td>Force margin bottom to 200px</td>
  533. </tr>
  534. <tr>
  535. <td><code>.margin-left-0</code></td>
  536. <td>Force margin left to 0px</td>
  537. <td><code>.margin-right-0</code></td>
  538. <td>Force margin right to 0px</td>
  539. </tr>
  540. <tr>
  541. <td><code>.margin-left-3</code></td>
  542. <td>Force margin left to 3px</td>
  543. <td><code>.margin-right-3</code></td>
  544. <td>Force margin right to 3px</td>
  545. </tr>
  546. <tr>
  547. <td><code>.margin-left-6</code></td>
  548. <td>Force margin left to 6px</td>
  549. <td><code>.margin-right-6</code></td>
  550. <td>Force margin right to 6px</td>
  551. </tr>
  552. <tr>
  553. <td><code>.margin-left-8</code></td>
  554. <td>Force margin left to 8px</td>
  555. <td><code>.margin-right-8</code></td>
  556. <td>Force margin right to 8px</td>
  557. <td></td>
  558. </tr>
  559. <tr>
  560. <td><code>.margin-left-10</code></td>
  561. <td>Force margin left to 10px</td>
  562. <td><code>.margin-right-10</code></td>
  563. <td>Force margin right to 10px</td>
  564. </tr>
  565. <tr>
  566. <td><code>.margin-left-20</code></td>
  567. <td>Force margin left to 20px</td>
  568. <td><code>.margin-right-20</code></td>
  569. <td>Force margin right to 20px</td>
  570. </tr>
  571. <tr>
  572. <td><code>.margin-left-30</code></td>
  573. <td>Force margin left to 30px</td>
  574. <td><code>.margin-right-30</code></td>
  575. <td>Force margin right to 30px</td>
  576. </tr>
  577. <tr>
  578. <td><code>.margin-left-40</code></td>
  579. <td>Force margin left to 40px</td>
  580. <td><code>.margin-right-40</code></td>
  581. <td>Force margin right to 40px</td>
  582. </tr>
  583. <tr>
  584. <td><code>.margin-left-50</code></td>
  585. <td>Force margin left to 50px</td>
  586. <td><code>.margin-right-50</code></td>
  587. <td>Force margin right to 50px</td>
  588. </tr>
  589. <tr>
  590. <td><code>.margin-left-60</code></td>
  591. <td>Force margin left to 60px</td>
  592. <td><code>.margin-right-60</code></td>
  593. <td>Force margin right to 60px</td>
  594. </tr>
  595. <tr>
  596. <td><code>.margin-left-80</code></td>
  597. <td>Force margin left to 80px</td>
  598. <td><code>.margin-right-80</code></td>
  599. <td>Force margin right to 80px</td>
  600. </tr>
  601. <tr>
  602. <td><code>.margin-left-100</code></td>
  603. <td>Force margin left to 100px</td>
  604. <td><code>.margin-right-100</code></td>
  605. <td>Force margin right to 100px</td>
  606. </tr>
  607. <tr>
  608. <td><code>.margin-left-130</code></td>
  609. <td>Force margin left to 130px</td>
  610. <td><code>.margin-right-130</code></td>
  611. <td>Force margin right to 130px</td>
  612. </tr>
  613. <tr>
  614. <td><code>.margin-left-150</code></td>
  615. <td>Force margin left to 150px</td>
  616. <td><code>.margin-right-150</code></td>
  617. <td>Force margin right to 150px</td>
  618. </tr>
  619. <tr>
  620. <td><code>.margin-left-180</code></td>
  621. <td>Force margin left to 180px</td>
  622. <td><code>.margin-right-180</code></td>
  623. <td>Force margin right to 180px</td>
  624. </tr>
  625. <tr>
  626. <td><code>.margin-left-200</code></td>
  627. <td>Force margin left to 200px</td>
  628. <td><code>.margin-right-200</code></td>
  629. <td>Force margin right to 200px</td>
  630. </tr>
  631. </tbody>
  632. </table>
  633. <table class="table table-bordered">
  634. <thead>
  635. <tr>
  636. <th style="width:20%">Class</th>
  637. <th style="width:30%">Description</th>
  638. <th style="width:20%">Class</th>
  639. <th style="width:30%">Description</th>
  640. </tr>
  641. </thead>
  642. <tbody>
  643. <tr>
  644. <td><code>.height-10</code></td>
  645. <td>Force height to 10px</td>
  646. <td><code>.width-10</code></td>
  647. <td>Force width to 10px</td>
  648. </tr>
  649. <tr>
  650. <td><code>.height-20</code></td>
  651. <td>Force height to 20px</td>
  652. <td><code>.width-20</code></td>
  653. <td>Force width to 20px</td>
  654. </tr>
  655. <tr>
  656. <td><code>.height-30</code></td>
  657. <td>Force height to 30px</td>
  658. <td><code>.width-30</code></td>
  659. <td>Force width to 30px</td>
  660. </tr>
  661. <tr>
  662. <td><code>.height-50</code></td>
  663. <td>Force height to 50px</td>
  664. <td><code>.width-50</code></td>
  665. <td>Force width to 50px</td>
  666. </tr>
  667. <tr>
  668. <td><code>.height-100</code></td>
  669. <td>Force height to 100px</td>
  670. <td><code>.width-100</code></td>
  671. <td>Force width to 100px</td>
  672. </tr>
  673. <tr>
  674. <td><code>.height-150</code></td>
  675. <td>Force height to 150px</td>
  676. <td><code>.width-150</code></td>
  677. <td>Force width to 150px</td>
  678. </tr>
  679. <tr>
  680. <td><code>.height-200</code></td>
  681. <td>Force height to 200px</td>
  682. <td><code>.width-200</code></td>
  683. <td>Force width to 200px</td>
  684. </tr>
  685. <tr>
  686. <td><code>.height-250</code></td>
  687. <td>Force height to 250px</td>
  688. <td><code>.width-250</code></td>
  689. <td>Force width to 250px</td>
  690. </tr>
  691. <tr>
  692. <td><code>.height-250</code></td>
  693. <td>Force height to 250px</td>
  694. <td><code>.width-250</code></td>
  695. <td>Force width to 250px</td>
  696. </tr>
  697. <tr>
  698. <td><code>.height-300</code></td>
  699. <td>Force height to 300px</td>
  700. <td><code>.width-300</code></td>
  701. <td>Force width to 300px</td>
  702. </tr>
  703. <tr>
  704. <td><code>.height-350</code></td>
  705. <td>Force height to 350px</td>
  706. <td><code>.width-350</code></td>
  707. <td>Force width to 350px</td>
  708. </tr>
  709. <tr>
  710. <td><code>.height-400</code></td>
  711. <td>Force height to 400px</td>
  712. <td><code>.width-400</code></td>
  713. <td>Force width to 400px</td>
  714. </tr>
  715. <tr>
  716. <td><code>.height-450</code></td>
  717. <td>Force height to 450px</td>
  718. <td><code>.width-450</code></td>
  719. <td>Force width to 450px</td>
  720. </tr>
  721. <tr>
  722. <td><code>.height-500</code></td>
  723. <td>Force height to 500px</td>
  724. <td><code>.width-500</code></td>
  725. <td>Force width to 500px</td>
  726. </tr>
  727. <tr>
  728. <td><code>.height-550</code></td>
  729. <td>Force height to 550px</td>
  730. <td><code>.width-550</code></td>
  731. <td>Force width to 550px</td>
  732. </tr>
  733. <tr>
  734. <td><code>.height-600</code></td>
  735. <td>Force height to 600px</td>
  736. <td><code>.width-600</code></td>
  737. <td>Force width to 600px</td>
  738. </tr>
  739. <tr>
  740. <td><code>.height-650</code></td>
  741. <td>Force height to 650px</td>
  742. <td><code>.width-650</code></td>
  743. <td>Force width to 650px</td>
  744. </tr>
  745. <tr>
  746. <td><code>.height-700</code></td>
  747. <td>Force height to 700px</td>
  748. <td><code>.width-700</code></td>
  749. <td>Force width to 700px</td>
  750. </tr>
  751. <tr>
  752. <td><code>.height-750</code></td>
  753. <td>Force height to 750px</td>
  754. <td><code>.width-750</code></td>
  755. <td>Force width to 750px</td>
  756. </tr>
  757. <tr>
  758. <td><code>.height-800</code></td>
  759. <td>Force height to 800px</td>
  760. <td><code>.width-800</code></td>
  761. <td>Force width to 800px</td>
  762. </tr>
  763. </tbody>
  764. <tfoot>
  765. <tr>
  766. <td colspan="4">You might also need to use <code>.block</code> together with one of above classes.
  767. </td>
  768. </tr>
  769. </tfoot>
  770. </table>
  771. <table class="table table-bordered">
  772. <thead>
  773. <tr>
  774. <th style="width:20%">Class</th>
  775. <th style="width:30%">Description</th>
  776. <th style="width:20%">Class</th>
  777. <th style="width:30%">Description</th>
  778. </tr>
  779. </thead>
  780. <tbody>
  781. <tr>
  782. <td><code>.nopadding</code></td>
  783. <td>Force no paddings</td>
  784. <td><code>.nomargin</code></td>
  785. <td>Force no margins</td>
  786. </tr>
  787. <tr>
  788. <td><code>.nopadding-left</code></td>
  789. <td>Force no padding left</td>
  790. <td><code>.nomargin-left</code></td>
  791. <td>Force no nomargin left</td>
  792. </tr>
  793. <tr>
  794. <td><code>.nopadding-right</code></td>
  795. <td>Force no padding right</td>
  796. <td><code>.nomargin-left</code></td>
  797. <td>Force no nomargin left</td>
  798. </tr>
  799. <tr>
  800. <td><code>.nopadding-top</code></td>
  801. <td>Force no padding top</td>
  802. <td><code>.nomargin-left</code></td>
  803. <td>Force no nomargin left</td>
  804. </tr>
  805. <tr>
  806. <td><code>.nopadding-bottom</code></td>
  807. <td>Force no padding bottom</td>
  808. <td><code>.nomargin-left</code></td>
  809. <td>Force no nomargin left</td>
  810. </tr>
  811. <tr>
  812. <td><code>.noborder</code></td>
  813. <td>Force no border</td>
  814. <td><code>.lowercase</code></td>
  815. <td>Force text to lowercase</td>
  816. </tr>
  817. <tr>
  818. <td><code>.noradius</code></td>
  819. <td>Force to radius 0</td>
  820. <td><code>.uppercase</code></td>
  821. <td>Force text to uppercase</td>
  822. </tr>
  823. <tr>
  824. <td><code>.italic</code></td>
  825. <td>Force text to <i>italic</i></td>
  826. <td><code>.pointer</code></td>
  827. <td>Force cursor pointer (link)</td>
  828. </tr>
  829. <tr>
  830. <td><code>.block</code></td>
  831. <td>Force display to block</td>
  832. <td><code>.bold</code></td>
  833. <td>Force text bold</td>
  834. </tr>
  835. <tr>
  836. <td><code>.fullwidth</code></td>
  837. <td>Force width 100%</td>
  838. <td><code>.justify</code></td>
  839. <td>Force text to justify</td>
  840. </tr>
  841. <tr>
  842. <td><code>.halfwidth</code></td>
  843. <td>Force width 50%</td>
  844. <td><code>.nofloat</code></td>
  845. <td>Force float:none</td>
  846. </tr>
  847. <tr>
  848. <td><code>.softhide</code></td>
  849. <td>diplay:none , without !important</td>
  850. <td><code>.no-text-underline</code></td>
  851. <td>No underline (link)</td>
  852. </tr>
  853. <tr>
  854. <td><code>.border-bottom-dashed</code></td>
  855. <td>dotted bottom border</td>
  856. <td><code>.border-bottom-dotted</code></td>