/Documentation/Smarty/index.html
HTML | 952 lines | 841 code | 96 blank | 15 comment | 0 complexity | e984bc3faef83ab2c1054d49ed6913f0 MD5 | raw file
- <!doctype html>
- <html lang="en-US">
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
- <title>Documentation</title>
- <meta name="description" content="" />
- <meta name="Author" content="Dorin Grigoras [www.stepofweb.com]" />
-
- <!-- mobile settings -->
- <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0" />
-
- <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
- <link href="assets/plugins/shBrush/shBrush.css" rel="stylesheet" type="text/css" />
- <link href="assets/css/layout.css" rel="stylesheet" type="text/css" />
-
- </head>
- <body>
-
- <div id="aside">
-
- <a href="#start" class="logo">
- <img src="assets/images/logo.png" width="100" alt="" />
- </a>
-
- <ul id="side-nav" class="list-group">
- <li class="list-group-item menu-active">
- <a id="pageStartBtn" href="#page-start">Start</a>
- <ul class="list-group start-open">
- <li><a class="scrollTo submenu-active" href="#page-start">WELCOME</a></li>
- <li><a class="scrollTo" href="#page-intro">INTRODUCTION</a></li>
- <li><a class="scrollTo" href="#page-structure">PAGE STRUCTURE</a></li>
- <li><a class="scrollTo" href="#page-cssjs">CSS/JAVASCRIPT</a></li>
- <li><a class="scrollTo" href="#page-styleswitcher">STYLESWITCHER</a></li>
- <li><a class="scrollTo" href="#page-fonts">GOOGLE FONTS</a></li>
- <li><a class="scrollTo" href="#page-essentials">ESSENTIALS</a></li>
- <li><a class="scrollTo" href="#page-dark">Dark Layout</a></li>
- <li><a class="scrollTo" href="#page-boxed">Boxed Layout</a></li>
- <li><a class="scrollTo" href="#page-rtl">RTL</a></li>
- <li><a class="scrollTo" href="#page-preloader">PRELOADER</a></li>
- <li><a class="scrollTo" href="#page-demo">NEW PROJECT / DEMO FILES</a></li>
- </ul>
- </li>
- <li class="divider"></li>
- <li class="list-group-item">
- <a href="#page-php">PHP</a>
- <ul class="list-group">
- <li><a class="scrollTo" href="#php-confparams">CONFIG PARAMS</a></li>
- <li><a class="scrollTo" href="#php-contact">CONTACT</a></li>
- <li><a class="scrollTo" href="#php-newsletter">NEWSLETTER</a></li>
- </ul>
- </li>
- <li class="list-group-item">
- <a href="#page-headers">HEADERS & MENUS</a>
- <ul class="list-group">
- <li><a class="scrollTo" href="#headers-1">HEADER STYLES</a></li>
- <li><a class="scrollTo" href="#headers-2">MENU DROPDOWN</a></li>
- <li><a class="scrollTo" href="#headers-3">MEGA MENU</a></li>
- <li><a class="scrollTo" href="#headers-4">PAGE SUBMENU</a></li>
- </ul>
- </li>
- <li class="list-group-item">
- <a href="#page-shortcodes">SHORTCODES</a>
- </li>
- <li class="list-group-item">
- <a href="#page-widgets">WIDGETS</a>
- </li>
- <li class="list-group-item">
- <a href="#page-premiumplugins">PREMIUM PLUGINS</a>
- </li>
- <li class="divider"></li>
- <li class="list-group-item">
- <a href="#page-credits">Credits</a>
- </li>
- <li class="divider"></li>
- </ul>
-
- </div>
-
-
- <div id="middle">
-
- <!-- START -->
- <div id="page-start" class="page">
- <div id="start-welcome">
-
- <h1>
- Smarty Multipurpose <small>v1.1.3</small>
- <span class="sub block">Responsive Template</span>
- </h1>
- <p>
- <b>First Release:</b> Tuesday, August 25, 2015<br />
- <b>Latest Update:</b> Tuesday, January 12, 2016<br />
- <b>Author:</b> Dorin Grigoras [<a href="http://www.stepofweb.com" target="_blank">www.stepofweb.com</a>]<br />
- <b>Seller:</b> stepofweb [<a href="https://wrapbootstrap.com/user/stepofweb" target="_blank" rel="nofollow">wrapbootstrap.com/user/stepofweb</a>]<br />
- <b>Email:</b> <a href="mailto:stepofweb@gmail.com">stepofweb@gmail.com</a>
- </p>
- <p class="fsize12">
- Thank you for purchasing Smarty.<br />
- 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.
- </p>
-
- </div>
-
- <!-- INTRO -->
- <div id="page-intro" class="subpage">
- <h2>Introduction</h2>
- <p>
- Smarty – is unique design and a fully responsive layout.<br />
- Smarty comes with 50+ customized jquery plugins to fit your needs & over 550 HTML files.<br />
- Smarty is built with the latest version of Bootstrap Framework.<br />
- You can find more about bootstrap and its documentation in the following languages below:<br />
- <br />
-
- <a target="_blank" rel="nofollow" href="http://getbootstrap.com/getting-started">Bootstrap English (US)</a><br />
- <a target="_blank" rel="nofollow" href="http://www.oneskyapp.com/docs/bootstrap/ru">Bootstrap (Russian)</a><br />
- <a target="_blank" rel="nofollow" href="http://www.oneskyapp.com/docs/bootstrap/fr">Bootstrap en Français (French)</a><br />
- <a target="_blank" rel="nofollow" href="http://holdirbootstrap.de/">Bootstrap auf Deutsch (German)</a><br />
- <a target="_blank" rel="nofollow" href="http://twbs.site-konstruktor.com.ua/">Bootstrap ua (Ukrainian) </a><br />
- <a target="_blank" rel="nofollow" href="http://www.oneskyapp.com/docs/bootstrap/es">Bootstrap en Español (Spanish)</a><br />
- <a target="_blank" rel="nofollow" href="http://v3.bootcss.com/">Bootstrap (Chinese)</a><br />
-
- </p>
-
-
- <h3>Resend Download Link</h3>
- <p>
- 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>
- </p>
-
-
-
-
- </div>
- <!-- /INTRO -->
-
-
-
- <!-- PAGE STRUCTURE -->
- <div id="page-structure" class="subpage">
- <h2>Page Structure</h2>
- <pre class="brush: html">
- <!DOCTYPE html>
- <html lang="en-us">
-
- <head>
- [HEAD_META]
- </head>
-
- <body class="smoothscroll enable-animation">
-
- <div id="slidetop">
- [SLIDE_TOP]
- </div>
-
- <div id="wrapper">
-
- <div id="topBar">
- [TO_BAR]
- </div>
-
- <div id="header">
- [BUTTONS]
- [LOGO]
- [NAV_MAIN]
- </div>
-
- <section>
- [SECTION_1]
- </section>
-
- ....
-
- <section>
- [SECTION_N]
- </section>
-
- </div>
-
-
- <!-- FOOTER -->
- <footer id="footer">
- [FOOTER_CONTENT]
- </footer>
- <!-- /FOOTER -->
-
- [PAGE_JAVASCRIPTS]
-
- </body>
- </html>
- </pre>
-
- </div>
- <!-- /PAGE STRUCTURE -->
-
-
-
- <!-- CSS/JS -->
- <div id="page-cssjs" class="subpage">
- <h2>CSS/JAVASCRIPT</h2>
-
- <h3>CSS</h3>
- <b>essentials.css</b> - contains bootstrap rewrites, plugins and common rules like <code>.nomargin</code>, <code>.nopadding</code>, etc <br />
- <b>layout.css</b> - website main layout rules<br />
- <b>layout-dark.css</b> - add this style only if you need a dark layout website <br />
- <b>layout-RTL.css</b> - add this style only if you need RTL. Example: arabic language.<br />
- <b>layout-shop.css</b> - shop layout<br />
- <b>layout-datatables.css</b> datatables table [shortcode/tables]<br />
- <b>layout-footable-minimal.css</b>footable table [shortcode/tables]<br />
- <b>layout-jqgrid.css</b>jqgrid table [shortcode/tables]<br />
- <b>thematics-*.css</b> - thematic layout. Include the chosen style only if you use a predefined thematic.<br />
- <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)
-
- <h3>JAVASCRIPT</h3>
- <p class="lead text-danger">
- <strong>Some javascript plugins are loaded asynchronously ONLY where a plugin is needed.</strong>
- </p>
- <p>
- 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 />
- This is achived using loadScript() function from assets/js/scripts.js<br /><br />
-
- You can use this feature on your custom.js like this:
- </p>
- <pre class="brush: js">
- // Load single script and do something (alert in this example)
- loadScript(plugin_path + 'plugin.js', function() {
- alert("plugin loaded");
- });
-
- // Load multiple scripts and call a final function (alert in this example)
- loadScript(plugin_path + "script1.js", function(){
- loadScript(plugin_path + "script2.js", function(){
- loadScript(plugin_path + "script3.js", function(){
- loadScript(plugin_path + "script4.js", function() {
- alert('do something');
- });
- });
- });
- });
- </pre>
- <h3>PLUGINS LOADED ASYNCHRONOUSLY (by scripts.js)</h3>
- <p>
- The plugins above - you don't need to add them in a classic way: <script src="plugin.js"></script><br />
- All of them are loaded by assets/js/scripts.js automaticaly ONLY when a specific class or ID is detected on HTML code.<br />
- <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 />
- 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!!!
- </p><br />
-
- <b>assets/plugins/</b>bootstrap/js/bootstrap.min.js<br />
- <small style="color:#999;">bootstrap javascript - always first loaded by scripts.js</small><br /><br />
-
- <b>assets/plugins/</b>smoothscroll.js<br />
- <small style="color:#999;">loaded only if <body> contain <code>.smoothscroll </code> class</small><br /><br />
-
- <b>assets/plugins/</b>jquery.nav.min.js<br />
- <small style="color:#999;">loaded by one page templates if <code>#topMain.nav-onepage</code> ID is detected</small><br /><br />
-
- <b>assets/plugins/</b>owl-carousel/owl.carousel.min.js<br />
- <small style="color:#999;">loaded if <code>.owl-carousel</code> class is detected</small><br /><br />
-
- <b>assets/plugins/</b>slider.flexslider/jquery.flexslider-min.js<br />
- <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 />
-
- <b>assets/plugins/</b>magnific-popup/jquery.magnific-popup.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>jquery.mb.YTPlayer.min.js<br />
- <small style="color:#999;">if <code>#YTPlayer</code> ID is detected, the plugin is loaded</small><br /><br />
-
- <b>assets/plugins/</b>mixitup/jquery.mixitup.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>text-rotator/jquery.simple-text-rotator.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>lazyload/jquery.lazyload.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>isotope/isotope.pkgd.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>custom.fle_upload.js<br />
- <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 />
-
- <b>assets/plugins/</b>countdown/jquery.countdown.pack.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>toastr/toastr.js<br />
- <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 />
-
- <b>assets/plugins/</b>chart.easypiechart/dist/jquery.easypiechart.min.js<br />
- <small style="color:#999;">loaded if <code>.piechart</code> class is detected</small><br /><br />
-
- <b>assets/plugins/</b>select2/js/select2.full.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>form.validate/jquery.validation.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>form.masked/jquery.maskedinput.js<br />
- <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 />
-
- <b>assets/plugins/</b>bootstrap.datepicker/js/bootstrap-datepicker.min.js<br />
- <small style="color:#999;"></small><br /><br />
-
- <b>assets/plugins/</b>bootstrap.daterangepicker/daterangepicker.js<br />
- <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 />
-
- <b>assets/plugins/</b>timepicki/timepicki.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>spectrum/spectrum.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>editor.summernote/summernote.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>editor.markdown/js/bootstrap-markdown.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>pajinate/jquery.pajinate.bootstrap.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>infinite-scroll/jquery.infinitescroll.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>image.zoom/jquery.zoom.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>typeahead.bundle.js<br />
- <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 />
-
- <b>assets/plugins/</b>form.stepper/jquery.stepper.min.js<br />
- <small style="color:#999;">loaded if <code>input.stepper</code> class is detected.</small><br /><br />
-
- <b>assets/plugins/</b>slimscroll/jquery.slimscroll.min.js<br />
- <small style="color:#999;">loaded if <code>.slimscroll</code> class is detected.</small><br /><br />
-
- <b>assets/plugins/</b>jquery.backstretch.min.js<br />
- <small style="color:#999;">loaded if <code>data-background="image.jpg"</code> detected on <body></small><br /><br />
-
- <b>assets/plugins/</b>widget.jflickr/jflickrfeed.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>widget.twittie/twittie.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>widget.dribbble/jribbble.min.js<br />
- <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 />
-
- <b>assets/plugins/</b>widget.mediaelementbuild/mediaelement-and-player.min.js<br />
- <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 />
-
- </div>
- <!-- /CSS/JS -->
-
-
- <!-- STYLESWITCHER -->
- <div id="page-styleswitcher" class="subpage">
- <h2>STYLESWITCHER</h2>
-
- <p>
- Styleswitcher is a plugin created from scratch for demo purposes only. <br />
- At the bottom of each page, find and remove:
- </p>
- <pre class="brush: html">
- <!-- STYLESWITCHER - REMOVE -->
- <script async type="text/javascript" src="assets/plugins/styleswitcher/styleswitcher.js"></script>
- </pre>
- Also, you can delete the plugin from: <b>assets/plugins/styleswitcher/</b> on your production site.
- </div>
- <!-- /STYLESWITCHER -->
-
-
- <!-- GOOGLE FONTS -->
- <div id="page-fonts" class="subpage">
- <h2>GOOGLE FONTS</h2>
-
- <p>
- 3 Fonts used:
- </p>
- <ul>
- <li><a href="https://www.google.com/fonts/specimen/Open+Sans" target="_blank">Open Sans (default font)</a></li>
- <li><a href="https://www.google.com/fonts/specimen/Raleway" target="_blank">Raleway (used for numbers)</a></li>
- <li><a href="https://www.google.com/fonts/specimen/Lato" target="_blank">Lato (to highlight important text - weight 300)</a></li>
- </ul><br />
-
- <p>
- CSS Classes:<br />
- <code>.font-open-sans </code> Force <i>Open Sans</i> Font<br />
- <code>.font-lato</code> Force <i>Lato Font</i><br />
- <code>.font-raleway</code> Force <i>Raleway</i> Font <br />
- </p>
-
- 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.
- </div>
- <!-- /GOOGLE FONTS -->
-
- <!-- ESSENTIALS -->
- <div id="page-essentials" class="subpage">
- <h2>ESSENTIALS</h2>
-
- <p>Essential classes (assets/css/essentials.css) that helps you to quick position elements without writing new css rules.</p>
- <p>You are encouraged to use these classes</p>
-
- <table class="table table-bordered">
- <thead>
- <tr>
- <th style="width:20%">Class</th>
- <th style="width:30%">Description</th>
- <th style="width:20%">Class</th>
- <th style="width:30%">Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><code>.size-11</code></td>
- <td>Force font size to 11px (text, icons)</td>
- <td><code>.weight-300</code></td>
- <td>Force font weight to 300 (text)</td>
- </tr>
- <tr>
- <td><code>.size-12</code></td>
- <td>Force font size to 12px (text, icons)</td>
- <td><code>.weight-400</code></td>
- <td>Force font weight to 400 (text)</td>
- </tr>
- <tr>
- <td><code>.size-13</code></td>
- <td>Force font size to 13px (text, icons)</td>
- <td><code>.weight-500</code></td>
- <td>Force font weight to 500 (text)</td>
- </tr>
- <tr>
- <td><code>.size-14</code></td>
- <td>Force font size to 14px (text, icons)</td>
- <td><code>.weight-600</code></td>
- <td>Force font weight to 600 (text)</td>
- </tr>
- <tr>
- <td><code>.size-15</code></td>
- <td>Force font size to 15px (text, icons)</td>
- <td><code>.weight-700</code></td>
- <td>Force font weight to 700 (text)</td>
- </tr>
- <tr>
- <td><code>.size-16</code></td>
- <td>Force font size to 16px (text, icons)</td>
- <td><code>.font-lato</code></td>
- <td>Force font family: 'Lato', Arial, sans-serif</td>
- </tr>
- <tr>
- <td><code>.size-17</code></td>
- <td>Force font size to 17px (text, icons)</td>
- <td><code>.padding-0</code></td>
- <td>Force padding to 0px</td>
- </tr>
- <tr>
- <td><code>.size-18</code></td>
- <td>Force font size to 18px (text, icons)</td>
- <td><code>.padding-3</code></td>
- <td>Force padding to 3px</td>
- </tr>
- <tr>
- <td><code>.size-19</code></td>
- <td>Force font size to 19px (text, icons)</td>
- <td><code>.padding-6</code></td>
- <td>Force padding to 6px</td>
- </tr>
- <tr>
- <td><code>.size-20</code></td>
- <td>Force font size to 20px (text, icons)</td>
- <td><code>.padding-8</code></td>
- <td>Force padding to 8px</td>
- </tr>
- <tr>
- <td><code>.size-26</code></td>
- <td>Force font size to 26px (text, icons)</td>
- <td><code>.padding-10</code></td>
- <td>Force padding to 10px</td>
- </tr>
- <tr>
- <td><code>.size-30</code></td>
- <td>Force font size to 30px (text, icons)</td>
- <td><code>.padding-0</code></td>
- <td>Force padding to 0px</td>
- </tr>
- <tr>
- <td><code>.size-40</code></td>
- <td>Force font size to 40px (text, icons)</td>
- <td><code>.padding-15</code></td>
- <td>Force padding to 15px</td>
- </tr>
- <tr>
- <td><code>.size-50</code></td>
- <td>Force font size to 50px (text, icons)</td>
- <td><code>.padding-20</code></td>
- <td>Force padding to 20px</td>
- </tr>
- <tr>
- <td><code>.size-60</code></td>
- <td>Force font size to 60px (text, icons)</td>
- <td><code>.padding-30</code></td>
- <td>Force padding to 30px</td>
- </tr>
- <tr>
- <td><code>.size-70</code></td>
- <td>Force font size to 70px (text, icons)</td>
- <td><code>.padding-40</code></td>
- <td>Force padding to 40px</td>
- </tr>
- <tr>
- <td><code>.size-80</code></td>
- <td>Force font size to 80px (text, icons)</td>
- <td><code>.padding-50</code></td>
- <td>Force padding to 50px</td>
- </tr>
- <tr>
- <td><code>.size-90</code></td>
- <td>Force font size to 90px (text, icons)</td>
- <td><code>.padding-60</code></td>
- <td>Force padding to 60px</td>
- </tr>
- <tr>
- <td><code>.size-100</code></td>
- <td>Force font size to 100px (text, icons)</td>
- <td><code>.padding-70</code></td>
- <td>Force padding to 70px</td>
- </tr>
- <tr>
- <td><code>.margin-top-0</code></td>
- <td>Force margin top to 0px</td>
- <td><code>.margin-bottom-0</code></td>
- <td>Force margin bottom to 0px</td>
- </tr>
- <tr>
- <td><code>.margin-top-3</code></td>
- <td>Force margin top to 3px</td>
- <td><code>.margin-bottom-3</code></td>
- <td>Force margin bottom to 3px</td>
- </tr>
- <tr>
- <td><code>.margin-top-6</code></td>
- <td>Force margin top to 6px</td>
- <td><code>.margin-bottom-6</code></td>
- <td>Force margin bottom to 6px</td>
- </tr>
- <tr>
- <td><code>.margin-top-8</code></td>
- <td>Force margin top to 8px</td>
- <td><code>.margin-bottom-8</code></td>
- <td>Force margin bottom to 8px</td>
- <td></td>
- </tr>
- <tr>
- <td><code>.margin-top-10</code></td>
- <td>Force margin top to 10px</td>
- <td><code>.margin-bottom-10</code></td>
- <td>Force margin bottom to 10px</td>
- </tr>
- <tr>
- <td><code>.margin-top-20</code></td>
- <td>Force margin top to 20px</td>
- <td><code>.margin-bottom-20</code></td>
- <td>Force margin bottom to 20px</td>
- </tr>
- <tr>
- <td><code>.margin-top-30</code></td>
- <td>Force margin top to 30px</td>
- <td><code>.margin-bottom-30</code></td>
- <td>Force margin bottom to 30px</td>
- </tr>
- <tr>
- <td><code>.margin-top-40</code></td>
- <td>Force margin top to 40px</td>
- <td><code>.margin-bottom-40</code></td>
- <td>Force margin bottom to 40px</td>
- </tr>
- <tr>
- <td><code>.margin-top-50</code></td>
- <td>Force margin top to 50px</td>
- <td><code>.margin-bottom-50</code></td>
- <td>Force margin bottom to 50px</td>
- </tr>
- <tr>
- <td><code>.margin-top-60</code></td>
- <td>Force margin top to 60px</td>
- <td><code>.margin-bottom-60</code></td>
- <td>Force margin bottom to 60px</td>
- </tr>
- <tr>
- <td><code>.margin-top-80</code></td>
- <td>Force margin top to 80px</td>
- <td><code>.margin-bottom-80</code></td>
- <td>Force margin bottom to 80px</td>
- </tr>
- <tr>
- <td><code>.margin-top-100</code></td>
- <td>Force margin top to 100px</td>
- <td><code>.margin-bottom-100</code></td>
- <td>Force margin bottom to 100px</td>
- </tr>
- <tr>
- <td><code>.margin-top-130</code></td>
- <td>Force margin top to 130px</td>
- <td><code>.margin-bottom-130</code></td>
- <td>Force margin bottom to 130px</td>
- </tr>
- <tr>
- <td><code>.margin-top-150</code></td>
- <td>Force margin top to 150px</td>
- <td><code>.margin-bottom-150</code></td>
- <td>Force margin bottom to 150px</td>
- </tr>
- <tr>
- <td><code>.margin-top-180</code></td>
- <td>Force margin top to 180px</td>
- <td><code>.margin-bottom-180</code></td>
- <td>Force margin bottom to 180px</td>
- </tr>
- <tr>
- <td><code>.margin-top-200</code></td>
- <td>Force margin top to 200px</td>
- <td><code>.margin-bottom-200</code></td>
- <td>Force margin bottom to 200px</td>
- </tr>
- <tr>
- <td><code>.margin-left-0</code></td>
- <td>Force margin left to 0px</td>
- <td><code>.margin-right-0</code></td>
- <td>Force margin right to 0px</td>
- </tr>
- <tr>
- <td><code>.margin-left-3</code></td>
- <td>Force margin left to 3px</td>
- <td><code>.margin-right-3</code></td>
- <td>Force margin right to 3px</td>
- </tr>
- <tr>
- <td><code>.margin-left-6</code></td>
- <td>Force margin left to 6px</td>
- <td><code>.margin-right-6</code></td>
- <td>Force margin right to 6px</td>
- </tr>
- <tr>
- <td><code>.margin-left-8</code></td>
- <td>Force margin left to 8px</td>
- <td><code>.margin-right-8</code></td>
- <td>Force margin right to 8px</td>
- <td></td>
- </tr>
- <tr>
- <td><code>.margin-left-10</code></td>
- <td>Force margin left to 10px</td>
- <td><code>.margin-right-10</code></td>
- <td>Force margin right to 10px</td>
- </tr>
- <tr>
- <td><code>.margin-left-20</code></td>
- <td>Force margin left to 20px</td>
- <td><code>.margin-right-20</code></td>
- <td>Force margin right to 20px</td>
- </tr>
- <tr>
- <td><code>.margin-left-30</code></td>
- <td>Force margin left to 30px</td>
- <td><code>.margin-right-30</code></td>
- <td>Force margin right to 30px</td>
- </tr>
- <tr>
- <td><code>.margin-left-40</code></td>
- <td>Force margin left to 40px</td>
- <td><code>.margin-right-40</code></td>
- <td>Force margin right to 40px</td>
- </tr>
- <tr>
- <td><code>.margin-left-50</code></td>
- <td>Force margin left to 50px</td>
- <td><code>.margin-right-50</code></td>
- <td>Force margin right to 50px</td>
- </tr>
- <tr>
- <td><code>.margin-left-60</code></td>
- <td>Force margin left to 60px</td>
- <td><code>.margin-right-60</code></td>
- <td>Force margin right to 60px</td>
- </tr>
- <tr>
- <td><code>.margin-left-80</code></td>
- <td>Force margin left to 80px</td>
- <td><code>.margin-right-80</code></td>
- <td>Force margin right to 80px</td>
- </tr>
- <tr>
- <td><code>.margin-left-100</code></td>
- <td>Force margin left to 100px</td>
- <td><code>.margin-right-100</code></td>
- <td>Force margin right to 100px</td>
- </tr>
- <tr>
- <td><code>.margin-left-130</code></td>
- <td>Force margin left to 130px</td>
- <td><code>.margin-right-130</code></td>
- <td>Force margin right to 130px</td>
- </tr>
- <tr>
- <td><code>.margin-left-150</code></td>
- <td>Force margin left to 150px</td>
- <td><code>.margin-right-150</code></td>
- <td>Force margin right to 150px</td>
- </tr>
- <tr>
- <td><code>.margin-left-180</code></td>
- <td>Force margin left to 180px</td>
- <td><code>.margin-right-180</code></td>
- <td>Force margin right to 180px</td>
- </tr>
- <tr>
- <td><code>.margin-left-200</code></td>
- <td>Force margin left to 200px</td>
- <td><code>.margin-right-200</code></td>
- <td>Force margin right to 200px</td>
- </tr>
- </tbody>
- </table>
-
- <table class="table table-bordered">
- <thead>
- <tr>
- <th style="width:20%">Class</th>
- <th style="width:30%">Description</th>
- <th style="width:20%">Class</th>
- <th style="width:30%">Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><code>.height-10</code></td>
- <td>Force height to 10px</td>
- <td><code>.width-10</code></td>
- <td>Force width to 10px</td>
- </tr>
- <tr>
- <td><code>.height-20</code></td>
- <td>Force height to 20px</td>
- <td><code>.width-20</code></td>
- <td>Force width to 20px</td>
- </tr>
- <tr>
- <td><code>.height-30</code></td>
- <td>Force height to 30px</td>
- <td><code>.width-30</code></td>
- <td>Force width to 30px</td>
- </tr>
- <tr>
- <td><code>.height-50</code></td>
- <td>Force height to 50px</td>
- <td><code>.width-50</code></td>
- <td>Force width to 50px</td>
- </tr>
- <tr>
- <td><code>.height-100</code></td>
- <td>Force height to 100px</td>
- <td><code>.width-100</code></td>
- <td>Force width to 100px</td>
- </tr>
- <tr>
- <td><code>.height-150</code></td>
- <td>Force height to 150px</td>
- <td><code>.width-150</code></td>
- <td>Force width to 150px</td>
- </tr>
- <tr>
- <td><code>.height-200</code></td>
- <td>Force height to 200px</td>
- <td><code>.width-200</code></td>
- <td>Force width to 200px</td>
- </tr>
- <tr>
- <td><code>.height-250</code></td>
- <td>Force height to 250px</td>
- <td><code>.width-250</code></td>
- <td>Force width to 250px</td>
- </tr>
- <tr>
- <td><code>.height-250</code></td>
- <td>Force height to 250px</td>
- <td><code>.width-250</code></td>
- <td>Force width to 250px</td>
- </tr>
- <tr>
- <td><code>.height-300</code></td>
- <td>Force height to 300px</td>
- <td><code>.width-300</code></td>
- <td>Force width to 300px</td>
- </tr>
- <tr>
- <td><code>.height-350</code></td>
- <td>Force height to 350px</td>
- <td><code>.width-350</code></td>
- <td>Force width to 350px</td>
- </tr>
- <tr>
- <td><code>.height-400</code></td>
- <td>Force height to 400px</td>
- <td><code>.width-400</code></td>
- <td>Force width to 400px</td>
- </tr>
- <tr>
- <td><code>.height-450</code></td>
- <td>Force height to 450px</td>
- <td><code>.width-450</code></td>
- <td>Force width to 450px</td>
- </tr>
- <tr>
- <td><code>.height-500</code></td>
- <td>Force height to 500px</td>
- <td><code>.width-500</code></td>
- <td>Force width to 500px</td>
- </tr>
- <tr>
- <td><code>.height-550</code></td>
- <td>Force height to 550px</td>
- <td><code>.width-550</code></td>
- <td>Force width to 550px</td>
- </tr>
- <tr>
- <td><code>.height-600</code></td>
- <td>Force height to 600px</td>
- <td><code>.width-600</code></td>
- <td>Force width to 600px</td>
- </tr>
- <tr>
- <td><code>.height-650</code></td>
- <td>Force height to 650px</td>
- <td><code>.width-650</code></td>
- <td>Force width to 650px</td>
- </tr>
- <tr>
- <td><code>.height-700</code></td>
- <td>Force height to 700px</td>
- <td><code>.width-700</code></td>
- <td>Force width to 700px</td>
- </tr>
- <tr>
- <td><code>.height-750</code></td>
- <td>Force height to 750px</td>
- <td><code>.width-750</code></td>
- <td>Force width to 750px</td>
- </tr>
- <tr>
- <td><code>.height-800</code></td>
- <td>Force height to 800px</td>
- <td><code>.width-800</code></td>
- <td>Force width to 800px</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td colspan="4">You might also need to use <code>.block</code> together with one of above classes.
- </td>
- </tr>
- </tfoot>
- </table>
-
- <table class="table table-bordered">
- <thead>
- <tr>
- <th style="width:20%">Class</th>
- <th style="width:30%">Description</th>
- <th style="width:20%">Class</th>
- <th style="width:30%">Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><code>.nopadding</code></td>
- <td>Force no paddings</td>
- <td><code>.nomargin</code></td>
- <td>Force no margins</td>
- </tr>
- <tr>
- <td><code>.nopadding-left</code></td>
- <td>Force no padding left</td>
- <td><code>.nomargin-left</code></td>
- <td>Force no nomargin left</td>
- </tr>
- <tr>
- <td><code>.nopadding-right</code></td>
- <td>Force no padding right</td>
- <td><code>.nomargin-left</code></td>
- <td>Force no nomargin left</td>
- </tr>
- <tr>
- <td><code>.nopadding-top</code></td>
- <td>Force no padding top</td>
- <td><code>.nomargin-left</code></td>
- <td>Force no nomargin left</td>
- </tr>
- <tr>
- <td><code>.nopadding-bottom</code></td>
- <td>Force no padding bottom</td>
- <td><code>.nomargin-left</code></td>
- <td>Force no nomargin left</td>
- </tr>
- <tr>
- <td><code>.noborder</code></td>
- <td>Force no border</td>
- <td><code>.lowercase</code></td>
- <td>Force text to lowercase</td>
- </tr>
- <tr>
- <td><code>.noradius</code></td>
- <td>Force to radius 0</td>
- <td><code>.uppercase</code></td>
- <td>Force text to uppercase</td>
- </tr>
- <tr>
- <td><code>.italic</code></td>
- <td>Force text to <i>italic</i></td>
- <td><code>.pointer</code></td>
- <td>Force cursor pointer (link)</td>
- </tr>
- <tr>
- <td><code>.block</code></td>
- <td>Force display to block</td>
- <td><code>.bold</code></td>
- <td>Force text bold</td>
- </tr>
- <tr>
- <td><code>.fullwidth</code></td>
- <td>Force width 100%</td>
- <td><code>.justify</code></td>
- <td>Force text to justify</td>
- </tr>
- <tr>
- <td><code>.halfwidth</code></td>
- <td>Force width 50%</td>
- <td><code>.nofloat</code></td>
- <td>Force float:none</td>
- </tr>
- <tr>
- <td><code>.softhide</code></td>
- <td>diplay:none , without !important</td>
- <td><code>.no-text-underline</code></td>
- <td>No underline (link)</td>
- </tr>
- <tr>
- <td><code>.border-bottom-dashed</code></td>
- <td>dotted bottom border</td>
- <td><code>.border-bottom-dotted</code></td>
-