git.roojs.org Git - bootswatch/blob - mPurpose/README.md

   1 # Multipurpose Twitter Bootstrap 3 template
   2
   3 **mPurpose** is a free multipurpose Twitter Bootstrap 3 template by [http://www.dragdropsite.com](http://www.dragdropsite.com)
   4
   5 **For More info** [click here](http://www.dragdropsite.com/freebies/mpurpose-free-multipurpose-twitter-bootstrap-3-template)
   6
   7 **For Demo** [click here](http://demo.dragdropsite.com/mpurpose)
   8
   9 ![alt tag](http://www.dragdropsite.com/wp-content/uploads/2014/03/mPurpose-template.jpg)
  10
  11 ## Main Template Features
  12
  13   * Responsive
  14   * 5 pre-made Color Schemes and it’s easy to create your own ones
  15   * Feature Rich (a huge amount of components, over 30 sample pages)
  16   * LESS
  17   * Support for all modern browsers
  18   * Much more...
  19
  20 ## About Documentation
  21
  22   * Documentation covers paths that might be tricky
  23   * Helps to find resources (HTML, CSS files) related to a particular component
  24   * Includes some code examples
  25   * You’ll find component dependencies listed (jQuery, bxSlider, sequencejs, etc.)
  26   * You’ll find some useful tip & hints
  27
  28 #  Short Intro
  29
  30 ###  General usage hints
  31
  32   * Probably, the best way to use this template and its components is copy-paste technique :)
  33     * Open HTML page containing a component you want to use (documentation will help you to find a necessary HTML file)
  34     * Copy HTML
  35     * Adjust HTML/JavaScript to your needs
  36     * Make sure all dependencies are included (please check the documentation)
  37     * Done
  38   * Almost all template components are wrapped into `<div class="section">...</div>`. It’s advised to follow this pattern
  39
  40 ###  Template Directory Structure
  41
  42   * **\css** - css style sheets
  43   * **\img** and subfolders - template images
  44   * **\js** - template JavaScript files
  45   * **\less** - template LESS CSS files
  46
  47 ###  CSS Files
  48
  49   * **bootstrap.css**, **bootstrap.min.css**, **bootstrap-theme.css**, **bootstrap-theme.min.css**  - Twitter Bootstrap styles
  50   * **coming-soon-social.css** - social icons sprite for coming soon page
  51   * **icomoon-social.css** - social icons sprite
  52   * **leaflet.css**, **leaflet.ie.css** - styles for leaflet maps
  53   * **main.css** - mPurpose template styles (Blue Color Scheme)
  54   * **main-orange.css** - mPurpose template styles (Orange Color Scheme)
  55   * **main-green.css** - mPurpose template styles (Green Color Scheme)
  56   * **main-red.css** - mPurpose template styles (Red Color Scheme)
  57   * **main-grey.css** - mPurpose template styles (Grey Color Scheme)
  58
  59 ###  LESS Files
  60
  61   * **components.less** - contains styles for all template components, overrides some Twitter Bootstrap styles
  62   * **general.less** - general & typography styles
  63   * **lesshat.less** - less mixins. More information could be found on website: [http://lesshat.com](http://lesshat.com/)
  64   * **main.less** - combines all less files. Use it for CSS compilation
  65   * **variables.less** - template variables. Use this file to create your own color schemes
  66
  67 ###  JavaScript Files
  68
  69   * **bootstrap.js, bootstrap.min.js** - Twitter Bootstrap components
  70   * **jquery.bxslider.js** - content slider used for products sliders. Plugin homepage: [http://bxslider.com](http://bxslider.com/)
  71   * **jquery.fitvids.js** - makes embedded videos responsive. Plugin homepage: [http://fitvidsjs.com](http://fitvidsjs.com/)
  72   * **jquery.sequence-min.js** - CSS3 slider used for homepage slider. Plugin homepage: [http://www.sequencejs.com](http://www.sequencejs.com/)
  73   * **main-menu.js** - JavaScript for Mega Dropdown Menu
  74   * **modernizr-2.6.2-respond-1.1.0.min.js** - HTML5 and CSS3 features detection in the user’s browser. Plugin homepage: [http://modernizr.com](http://modernizr.com/)
  75   * **template.js** - JavaScript for mPurpose template components
  76
  77 #  General Features
  78
  79 ##  Color Schemes
  80
  81 **mPurpose** template comes with five pre-made color themes (_Blue, Orange, Green, Red, Grey_). Choose a relevant CSS file from css folder:
  82
  83   * **main.css** - Blue color scheme (default)
  84   * **main-orange.css** - Orange color scheme
  85   * **main-green.css** - Green color scheme
  86   * **main-red.css** - Red color scheme
  87   * **main-grey.css** - Grey color scheme
  88
  89 **mPurpose** template is developed using LESS so it’s very easy to create your own color schemes matching your branding - all you need to do is to change one variable!
  90 Please check **[LESS](#less)** chapter for more
  91 information.
  92
  93 ##  LESS
  94
  95 This template is build taking an advantage of LESS CSS. All LESS files could
  96 be found in _less_ folder. Here is the list of LESS files:
  97
  98   * **components.less** - contains styles for all template components, overrides some Twitter Bootstrap styles
  99   * **general.less** - general & typography styles
 100   * **lesshat.less** - less mixins. More information could be found on website: [http://lesshat.com](http://lesshat.com/)
 101   * **main.less** - combines all less files. Use it for CSS compilation
 102   * **variables.less** - template variables. Use this file to create your own color schemes
 103
 104 More info about LESS could be found here:
 105
 106  - [http://lesscss.org](http://lesscss.org/)
 107
 108 Here are some LESS compilers:
 109
 110  - [less.app](http://incident57.com/less/) (Mac)
 111  - [http://wearekiss.com/simpless](http://wearekiss.com/simpless) (Mac, Linux, Windows)
 112  - [http://winless.org/](http://winless.org/) (Windows)
 113  - [http://crunchapp.net/](http://crunchapp.net/) (Mac, Windows)
 114
 115 #  Template Components
 116
 117 ##  Homepage Slider
 118
 119   * HTML example could be found here: _“index.html”_
 120   * CSS / LESS style: search for comment containing _“Homepage Slider Style”_
 121   * Dependencies: jQuery, sequencejs library ([http://www.sequencejs.com](http://www.sequencejs.com/))
 122
 123 **Usage**
 124
 125   * Include **jquery.sequence-min.js**: `<script src="js/jquery.sequence-min.js"></script>`
 126   * Put HTML code for your slider. Here is a code example:
 127
 128 ```html
 129 <div class="homepage-slider">
 130           <div id="sequence">
 131         <ul class="sequence-canvas">
 132           <!-- Slide 1 -->
 133           <li class="bg4">
 134             <!-- Slide Title -->
 135             <h2 class="title">Slide Title</h2>
 136             <!-- Slide Text -->
 137             <h3 class="subtitle">Slide Subtitle</h3>
 138             <!-- Slide Image -->
 139             <img class="slide-img" src="img/homepage-slider/slide1.png" alt="Slide 1" />
 140           </li>
 141           <!-- End Slide 1 -->
 142           <!-- Slide 2 -->
 143           <li class="bg3">
 144             <!-- Slide Title -->
 145             <h2 class="title">Slide Title</h2>
 146             <!-- Slide Text -->
 147             <h3 class="subtitle">Slide Subtitle</h3>
 148             <!-- Slide Image -->
 149             <img class="slide-img" src="img/homepage-slider/slide2.png" alt="Slide 2" />
 150           </li>
 151           <!-- End Slide 2 -->
 152         </ul>
 153         <div class="sequence-pagination-wrapper">
 154           <ul class="sequence-pagination">
 155             <li>1</li>
 156             <li>2</li>
 157             <li>3</li>
 158           </ul>
 159         </div>
 160       </div>
 161         </div>
 162 ```
 163
 164   * Initialize slider by placing JavaScript code:
 165
 166 ```
 167 var options = {
 168   nextButton: false,
 169   prevButton: false,
 170   pagination: true,
 171   animateStartingFrameIn: true,
 172   autoPlay: true,
 173   autoPlayDelay: 3000,
 174   preloader: true
 175 };
 176
 177 var mySequence = $("#sequence").sequence(options).data("sequence");
 178 ```
 179
 180 More information and configuration options could be found on sequencejs
 181 website [http://www.sequencejs.com](http://www.sequencejs.com/)
 182
 183 **Other tips & hints**
 184
 185   * Template comes with 14 slider backgrounds, they could be found in folder _“img\homepage-slider”_
 186   * Slide background could be changed by putting a relevant CSS class _bg1, bg2, … bg10_ (please check a code example above)
 187
 188 ##  'Featured In Press' Component
 189
 190   * HTML example could be found here: _“page-about-us.html”_
 191   * CSS / LESS style: search for comment containing _“In Press Style”_
 192
 193 **Other tips & hints**
 194
 195   * CSS Sprites are used to display media logos (take a look at _“img/in-press.png”_).
 196   * Logo dimensions: 120x32
 197
 198 ##  Custom Buttons
 199
 200 Template comes with some custom buttons - here are CSS classes for them:
 201
 202   * `.btn-grey`
 203   * `.btn-blue`
 204   * `.btn-orange`
 205   * `.btn-green`
 206   * `.btn-red`
 207
 208 Note that standard Twitter Bootstrap buttons (CSS class .btn) will look a bit
 209 differently - they will match the color scheme
 210
 211 ##  Mega Dropdown Menu
 212
 213 **mPurpose** template includes Mega Dropdown Menu component which is used for main menu (select “Pages” menu item to see Mega Dropdown Menu in action).
 214
 215 **Usage**
 216
 217   * Include **main-menu.js**: `<script src="js/main-menu.js"></script>`
 218   * Put HTML code for your menu. Here is a code example:
 219
 220 ```
 221 <nav id="mainmenu" class="mainmenu">
 222     <ul>
 223         <li class="logo-wrapper">
 224             <a href="index.html"><img src="img/logo.png" alt="Alt Text"></a>
 225         </li>
 226         <!--Active Menu Item -->
 227         <li class="active"><a href="index.html">Home</a></li>
 228         <!-- Menu Item containing submenu -->
 229         <li class="has-submenu">
 230             <a href="#">Menu with submenus</a>
 231             <!-- Dropdown Menu containing submenu items -->
 232             <div class="mainmenu-submenu">
 233                 <div class="mainmenu-submenu-inner">
 234                     <!-- Column 1 -->
 235                     <div>
 236                         <h4>Section Title 1</h4>
 237                         <ul>
 238                             <li><a href="#">Submenu Item</a></li>
 239                             <li><a href="#">Submenu Item</a></li>
 240                             ...
 241                         </ul>
 242                         <h4>Section Title 2</h4>
 243                         <ul>
 244                             <li><a href="#">Submenu Item</a></li>
 245                             <li><a href="#">Submenu Item</a></li>
 246                             ...
 247                         </ul>
 248                     </div>
 249                     <!-- Column 2 -->
 250                     <div>
 251                         <h4>Section Title 3</h4>
 252                         <ul>
 253                             <li><a href="#">Submenu Item</a></li>
 254                             <li><a href="#">Submenu Item</a></li>
 255                             ...
 256                         </ul>
 257                     </div>
 258                     <!-- Column 3 -->
 259                     <div>
 260                         <h4>Section Title 4</h4>
 261                         <ul>
 262                             <li><a href="#">Submenu Item</a></li>
 263                             <li><a href="#">Submenu Item</a></li>
 264                             ...
 265                         </ul>
 266                         <h4>Section Title 5</h4>
 267                         <ul>
 268                             <li><a href="#">Submenu Item</a></li>
 269                             <li><a href="#">Submenu Item</a></li>
 270                             ...
 271                         </ul>
 272                     </div>
 273                 </div> class="comment"><!-- /mainmenu-submenu-inner -->
 274             </div> class="comment"><!-- /mainmenu-submenu -->
 275         </li>
 276     </ul>
 277 </nav>
 278 ```
 279
 280   * Initialize Mega Dropdown Menu by placing JavaScript code: `mainMenu.init();`. Note that Mega Dropdown Menu ID should be `mainmenu` (`<nav id="mainmenu" class="mainmenu">...</nav>`)
 281
 282 **Other tips & hints**
 283
 284   * Use CSS class `.active` to indicate an active menu item
 285   * Make sure Menu Items containing submenu has CSS class `.has-submenu`. Otherwise submenu won't work
 286   * Use `<div>...</div>` inside submenu to create submenu columns (max 3 columns will be created)
 287   * Note that you can define as many submenu column sections as you need:
 288
 289 ```
 290 <div>
 291     <h4>Section Title 1</h4>
 292     <ul>
 293         <li><a href="#">Submenu Item</a></li>
 294         <li><a href="#">Submenu Item</a></li>
 295         ...
 296     </ul>
 297     <h4>Section Title 2</h4>
 298     <ul>
 299         <li><a href="#">Submenu Item</a></li>
 300         <li><a href="#">Submenu Item</a></li>
 301         ...
 302     </ul>
 303     ...
 304 </div>
 305 ```
 306
 307 ##  Responsive Videos
 308
 309   * HTML example could be found here: _“page-about-us.html”_
 310   * CSS / LESS style: search for comment containing _“Video Wrapper Style”_
 311   * Dependencies: jQuery, fitVids library ([http://fitvidsjs.com](http://fitvidsjs.com/))
 312
 313 **Usage**
 314
 315   * Include jquery.fitvids.js: `<script src="js/jquery.fitvids.js"></script>`
 316   * Put HTML code to embed a video and wrap it into `<div class="video-wrapper">...</div>` e.g.:
 317
 318 ```
 319 <div class="video-wrapper">
 320         <iframe src="http://player.vimeo.com/video/47000322?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
 321 </div>
 322 ```
 323
 324   * Initialize responsive video by placing JavaScript code: `$(".video-wrapper").fitVids();`
 325
 326 **Other tips & hints**
 327
 328   * Make sure to wrap video into `<div class="video-wrapper"> ... </div>` to make it responsive. Currently supported players: YouTube, Vimeo, Blip.tv, Viddler, Kickstarter
 329   * More information could be found on fitVids plugin website: [http://fitvidsjs.com](http://fitvidsjs.com/)
 330
 331 ##  Page Title
 332
 333   * HTML example could be found in most of demo files starting with _“page-“_
 334   * CSS / LESS style: search for comment containing _“Breadcrumbs Section Style”_
 335   * Dependencies: N/A
 336
 337 ##  Additional Icons - Flags
 338
 339 Template comes with 247 flag icons representing most countries in the world.
 340 These icons could be found in _“img/flags”_ directory
 341
 342 ##  Additional Icons - Social Icons
 343
 344 Template comes with icons for most popular social networks including:
 345
 346   * Google+ (`<i class="icon-google-plus"></i>`)
 347   * Facebook (`<i class="icon-facebook"></i>`)
 348   * Twitter (`<i class="icon-twitter"></i>`)
 349   * Vimeo (`<i class="icon-vimeo2"></i>`)
 350   * Flickr (`<i class="icon-flickr"></i>`)
 351   * Picasa (`<i class="icon-picassa"></i>`)
 352   * Dribbble (`<i class="icon-dribbble"></i>`)
 353   * Github (`<i class="icon-github"></i>`)
 354   * Wordpress (`<i class="icon-wordpress"></i>`)
 355   * Blogger (`<i class="icon-blogger"></i>`)
 356   * Tumblr (`<i class="icon-tumblr"></i>`)
 357   * Soundcloud (`<i class="icon-soundcloud"></i>`)
 358   * Linkedin (`<i class="icon-linkedin"></i>`)
 359   * Lastfm (`<i class="icon-lastfm"></i>`)
 360   * Stumbleupon (`<i class="icon-stumbleupon"></i>`)
 361   * Pinterest (`<i class="icon-pinterest"></i>`)
 362
 363 You can check them in action on “Features” page
 364
 365 ##  Services
 366
 367   * There are 3 different layouts:
 368     * **1 Column** - HTML example could be found here _“page-services-1-column.html”_
 369     * **3 Columns** - HTML example could be found here _“page-services-3-columns.html”_
 370     * **4 Columns** - HTML example could be found here _“page-services-4-columns.html”_
 371   * CSS / LESS style: search for comment containing _“Services Style”_
 372   * Dependencies: N/A
 373
 374 ##  Pricing Table
 375
 376   * HTML example could be found here: _“page-pricing.html”_
 377   * CSS / LESS style: search for comment containing _“Pricing Table Style”_
 378   * Dependencies: N/A
 379
 380 **Other tips & hints**
 381
 382   * You can use ribbons for pricing tables. Just place `<div class="ribbon-wrapper"><div class="price-ribbon ribbon-green"> ... </div></div>` before pricing plan title. There are 4 predefined colors for ribbons (_Green, Blue, Orange, Red_) - use a relevant css class for that: _ribbon-green, ribbon-blue, ribbon-orange, ribbon-red_
 383
 384 ##  Team & Open Vacancies
 385
 386 ###  Team
 387
 388   * HTML example could be found here: _“page-team.html”_
 389   * CSS / LESS style: search for comment containing _“Our Team Style”_
 390   * Dependencies: N/A
 391
 392 ###  Open Vacancies
 393
 394   * HTML example could be found here: _“page-vacancies.html”_
 395   * CSS / LESS style: search for comment containing _“Jobs list Style”_
 396   * Dependencies: N/A
 397
 398 ##  Our Work (Portfolio)
 399
 400 ###  Portfolio List
 401
 402   * There are 4 different layouts available:
 403     * **2 Columns, Option 1** - HTML example could be found here _“page-portfolio-2-columns-1.html”_
 404     * **2 Columns, Option 2** - HTML example could be found here _“page-portfolio-2-columns-2.html”_
 405     * **3 Columns, Option 1** - HTML example could be found here _“page-portfolio-3-columns-1.html”_
 406     * **3 Columns, Option 2** - HTML example could be found here _“page-portfolio-3-columns-2.html”_
 407   * CSS / LESS style: search for comment containing _“Portfolio Style”_
 408   * Dependencies: N/A
 409
 410 ###  Portfolio Item (Project)
 411
 412   * HTML example could be found here: _“page-portfolio-item.html”_
 413   * CSS / LESS style: search for comment containing _“Portfolio Style”_
 414   * Dependencies: N/A
 415
 416 ##  General Pages
 417
 418 ###  About Us
 419
 420   * HTML example could be found here: _“page-about-us.html”_
 421   * CSS / LESS style: search for comment containing _“Video Wrapper Style”_
 422   * Dependencies: N/A
 423
 424 Please also check the chapter **[Responsive Videos](#responsive-videos)**
 425
 426 ###  Contact Us
 427
 428   * HTML example could be found here: _“page-contact-us.html”_
 429   * CSS / LESS style: search for comment containing _“Contact Us Style”_
 430   * Dependencies: N/A
 431
 432 ###  Frequently Asked Questions
 433
 434   * HTML example could be found here: _“page-faq.html”_
 435   * CSS / LESS style: search for comment containing _“Frequently Asked Questions Style”_
 436   * Dependencies: N/A
 437
 438 ###  Testimonials & Clients
 439
 440   * HTML example could be found here: _“page-testimonials-clients.html”_
 441   * CSS / LESS style: search for comment containing _“Testimonials Style”, “Clients Logos Style”_
 442   * Dependencies (for Testimonials): N/A
 443
 444 **Usage (Testimonials)**
 445
 446   * Put HTML for your testimonials slider. Here is a code example:
 447
 448 ```
 449 <div class="section">
 450       <div class="container">
 451         <h2>Testimonials</h2>
 452         <div class="row">
 453           <!-- Testimonial -->
 454           <div class="testimonial col-md-4 col-sm-6">
 455             <!-- Author Photo -->
 456             <div class="author-photo">
 457               <img src="img/user1.jpg" alt="Author 1">
 458             </div>
 459             <div class="testimonial-bubble">
 460               <blockquote>
 461                 <!-- Quote -->
 462                 <p class="quote">
 463                                 "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut."
 464                             </p>
 465                             <!-- Author Info -->
 466                             <cite class="author-info">
 467                               - Name Surname,<br>Managing Director at <a href="#">Some Company</a>
 468                             </cite>
 469                           </blockquote>
 470                           <div class="sprite arrow-speech-bubble"></div>
 471                         </div>
 472                     </div>
 473                     <!-- End Testimonial -->
 474                     <div class="testimonial col-md-4 col-sm-6">
 475             <div class="author-photo">
 476               <img src="img/user5.jpg" alt="Author 2">
 477             </div>
 478             <div class="testimonial-bubble">
 479               <blockquote>
 480                 <p class="quote">
 481                                 "Ut enim ad minim veniam."
 482                             </p>
 483                             <cite class="author-info">
 484                               - Name Surname,<br>Managing Director at <a href="#">Some Company</a>
 485                             </cite>
 486                           </blockquote>
 487                           <div class="sprite arrow-speech-bubble"></div>
 488                         </div>
 489                     </div>
 490           <div class="testimonial col-md-4 col-sm-6">
 491             <div class="author-photo">
 492               <img src="img/user2.jpg" alt="Author 3">
 493             </div>
 494             <div class="testimonial-bubble">
 495               <blockquote>
 496                 <p class="quote">
 497                                 "Duis aute irure dolor."
 498                             </p>
 499                             <cite class="author-info">
 500                               - Name Surname,<br>Managing Director at <a href="#">Some Company</a>
 501                             </cite>
 502                           </blockquote>
 503                           <div class="sprite arrow-speech-bubble"></div>
 504                         </div>
 505                     </div>
 506         </div>
 507       </div>
 508       </div>
 509 ```
 510
 511   * Initialize testimonials slider by placing JavaScript code (skip this step if you don’t want testimonials to slide):
 512
 513 ###  Events
 514
 515   * HTML example could be found here: _“page-events.html”_
 516   * CSS / LESS style: search for comment containing _“Events List Style”_
 517   * Dependencies: N/A
 518
 519 ###  404 Page
 520
 521   * HTML example could be found here: _“page-404.html”_
 522   * CSS / LESS style: search for comment containing _“404 Page Style”_
 523   * Dependencies: N/A
 524
 525 ###  Sitemap
 526
 527   * HTML example could be found here: _“page-sitemap.html”_
 528   * CSS / LESS style: search for comment containing _“Sitemap Style”_
 529   * Dependencies: N/A
 530
 531 ###  Login
 532
 533   * HTML example could be found here: _“page-login.html”_
 534   * CSS / LESS style: search for comment containing _“Login/Register/Reset Password Forms Style”_
 535   * Dependencies: N/A
 536
 537 ###  Register
 538
 539   * HTML example could be found here: _“page-register.html”_
 540   * CSS / LESS style: search for comment containing _“Login/Register/Reset Password Forms Style”_
 541   * Dependencies: N/A
 542
 543 ###  Password Reset
 544
 545   * HTML example could be found here: _“page-password-reset.html”_
 546   * CSS / LESS style: search for comment containing _“Login/Register/Reset Password Forms Style”_
 547   * Dependencies: N/A
 548
 549 ###  Terms & Privacy
 550
 551   * HTML example could be found here: _“page-terms-privacy.html”_
 552   * CSS / LESS style: plain Twitter Bootstrap styles
 553   * Dependencies: N/A
 554
 555 ###  Coming Soon
 556
 557   * HTML example could be found here: _“page-coming-soon.html”_
 558   * CSS / LESS style: search for comment containing _“Coming Soon Page Style”_
 559   * Dependencies: N/A
 560
 561 ##  eCommerce
 562
 563 ###  Products (Items) List
 564
 565   * There are 2 different layouts available (_3 Columns, 4 Columns_). HTML example could be found in a relevant file:
 566     * _“page-products-3-columns.html”_
 567     * _“page-products-4-columns.html”_
 568   * CSS / LESS style: search for comment containing _“E-commerce Style”_
 569   * Dependencies: N/A
 570
 571 ###  Product (Item) Description
 572
 573   * HTML example could be found here: _“page-product-details.html”_
 574   * CSS / LESS style: search for comment containing _“Product Details Page Style”_
 575   * Dependencies: N/A
 576
 577 ###  Shopping Cart
 578
 579   * HTML example could be found here: _“page-shopping-cart.html”_
 580   * CSS / LESS style: search for comment containing _“E-commerce Style”_
 581   * Dependencies: N/A
 582
 583 ###  Products Slider
 584
 585   * HTML example could be found here: _“page-products-slider.html”_
 586   * CSS / LESS style: search for comment containing _“Content Slider Style”_
 587   * Dependencies: jQuery, bxSlider ([http://bxslider.com](http://bxslider.com/))
 588
 589 **Usage**
 590
 591   * Include jquery.bxslider.js: `<script src="js/jquery.bxslider.js"></script>`
 592   * Put HTML for your products slider. Here is a code example:
 593
 594 ```
 595 <div class="section">
 596         <div class="container">
 597         <div class="row">
 598           <div class="col-md-12">
 599             <div class="products-slider">
 600               <!-- Products Slider Item -->
 601               <div class="shop-item">
 602                 <!-- Product Image -->
 603                 <div class="image">
 604                   <a href="page-product-details.html"><img src="img/product1.jpg" alt="Item Name"></a>
 605                 </div>
 606                 <!-- Product Title -->
 607                 <div class="title">
 608                   <h3><a href="page-product-details.html">Lorem ipsum dolor</a></h3>
 609                 </div>
 610                 <!-- Product Price -->
 611                 <div class="price">
 612                   $999.99
 613                 </div>
 614                 <!-- Buy Button -->
 615                 <div class="actions">
 616                   <a href="page-product-details.html" class="btn btn-small"><i class="icon-shopping-cart icon-white"></i> Buy</a>
 617                 </div>
 618               </div>
 619               <!-- End Products Slider Item -->
 620               <div class="shop-item">
 621                 <div class="image">
 622                   <a href="page-product-details.html"><img src="img/product2.jpg" alt="Item Name"></a>
 623                 </div>
 624                 <div class="title">
 625                   <h3><a href="page-product-details.html">Lorem ipsum dolor</a></h3>
 626                 </div>
 627                 <div class="price">
 628                   $999.99
 629                 </div>
 630                 <div class="actions">
 631                   <a href="page-product-details.html" class="btn btn-small"><i class="icon-shopping-cart icon-white"></i> Buy</a>
 632                 </div>
 633               </div>
 634               ...
 635             </div>
 636           </div>
 637         </div>
 638       </div>
 639       </div>
 640 ```
 641
 642   * Initialize products slider by placing JavaScript code
 643
 644 ```
 645 slideWidth = $('.products-slider .shop-item').outerWidth()-20; //Gets slide width
 646 $('.products-slider').bxSlider({
 647     slideWidth: slideWidth,
 648     responsive: true,
 649     minSlides: 1,
 650     maxSlides: 4,
 651     slideMargin: 20,
 652     auto: true,
 653     autoHover: true,
 654     speed: 800,
 655     pager: true,
 656     controls: false
 657 });
 658 ```
 659
 660 More information and configuration options could be found on bxslider website
 661 [http://bxslider.com](http://bxslider.com/)
 662
 663 ##  Blog
 664
 665 ###  Blog Posts List
 666
 667   * HTML example could be found here: _“page-blog-posts.html”_
 668   * CSS / LESS style: search for comment containing _“Blog Style”_
 669   * Dependencies: N/A
 670
 671 ###  Blog Post
 672
 673   * There are 2 different layouts available (_Sidebar Left, Sidebar Right_). HTML example could be found in a relevant file:
 674     * _“page-blog-post-left-sidebar.html”_
 675     * _“page-blog-post-right-sidebar.html”_
 676   * CSS / LESS style: search for comment containing _“Blog Style”_
 677   * Dependencies: N/A
 678
 679 ###  Latest & Featured News
 680
 681   * HTML example could be found here: _“page-news.html”_
 682   * CSS / LESS style: search for comment containing _“News Style”_
 683   * Dependencies: N/A
 684
 685 #  Credits
 686
 687   * [morgueFile](http://www.morguefile.com/) - for photos
 688   * [Flickr Creative Common](http://www.flickr.com/creativecommons) - for photos
 689   * [fotogrph.com](http://fotogrph.com/) - for photos
 690   * [premiumpixels.com](http://www.premiumpixels.com/) - for free PSDs
 691   * [365psd.com](http://365psd.com/) - for free PSDs
 692   * [icomoon.io](http://icomoon.io/app) - for Icons
 693   * [Liam McKay](http://designmoo.com/members/liammckay) - for Browser & Magnify PSD
 694   * [pixeden.com](http://www.pixeden.com/) - for Responsive Showcase PSD
 695   * [jQuery](http://jquery.com/) - great JavaScript library
 696   * [bxSlider](http://bxslider.com/) - a nice content slider plugin
 697   * [sequencejs](http://www.sequencejs.com/) - an awesome slider with CSS3 transitions
 698   * [LESS](http://lesscss.org/) - dynamic stylesheet language
 699   * [lesshat](http://lesshat.com/) - universal LESS mixin library
 700   * [famfamfam.com](http://www.famfamfam.com/) - for flag icons
 701   * [codrops](http://tympanus.net/codrops) - for Mega Dropdown Menu
 702   * [Ahmedeabbas](http://dribbble.com/Ahmedeabbas) - for freebie Polygon Backgrounds