1 # Multipurpose Twitter Bootstrap 3 template
3 **mPurpose** is a free multipurpose Twitter Bootstrap 3 template by [http://www.dragdropsite.com](http://www.dragdropsite.com)
5 **For More info** [click here](http://www.dragdropsite.com/freebies/mpurpose-free-multipurpose-twitter-bootstrap-3-template)
7 **For Demo** [click here](http://demo.dragdropsite.com/mpurpose)
9 ![alt tag](http://www.dragdropsite.com/wp-content/uploads/2014/03/mPurpose-template.jpg)
11 ## Main Template Features
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)
17 * Support for all modern browsers
20 ## About Documentation
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
30 ### General usage hints
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)
35 * Adjust HTML/JavaScript to your needs
36 * Make sure all dependencies are included (please check the documentation)
38 * Almost all template components are wrapped into `<div class="section">...</div>`. It’s advised to follow this pattern
40 ### Template Directory Structure
42 * **\css** - css style sheets
43 * **\img** and subfolders - template images
44 * **\js** - template JavaScript files
45 * **\less** - template LESS CSS files
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)
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
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
81 **mPurpose** template comes with five pre-made color themes (_Blue, Orange, Green, Red, Grey_). Choose a relevant CSS file from css folder:
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
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
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:
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
104 More info about LESS could be found here:
106 - [http://lesscss.org](http://lesscss.org/)
108 Here are some LESS compilers:
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)
115 # Template Components
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/))
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:
129 <div class="homepage-slider">
131 <ul class="sequence-canvas">
135 <h2 class="title">Slide Title</h2>
137 <h3 class="subtitle">Slide Subtitle</h3>
139 <img class="slide-img" src="img/homepage-slider/slide1.png" alt="Slide 1" />
145 <h2 class="title">Slide Title</h2>
147 <h3 class="subtitle">Slide Subtitle</h3>
149 <img class="slide-img" src="img/homepage-slider/slide2.png" alt="Slide 2" />
153 <div class="sequence-pagination-wrapper">
154 <ul class="sequence-pagination">
164 * Initialize slider by placing JavaScript code:
171 animateStartingFrameIn: true,
177 var mySequence = $("#sequence").sequence(options).data("sequence");
180 More information and configuration options could be found on sequencejs
181 website [http://www.sequencejs.com](http://www.sequencejs.com/)
183 **Other tips & hints**
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)
188 ## 'Featured In Press' Component
190 * HTML example could be found here: _“page-about-us.html”_
191 * CSS / LESS style: search for comment containing _“In Press Style”_
193 **Other tips & hints**
195 * CSS Sprites are used to display media logos (take a look at _“img/in-press.png”_).
196 * Logo dimensions: 120x32
200 Template comes with some custom buttons - here are CSS classes for them:
208 Note that standard Twitter Bootstrap buttons (CSS class .btn) will look a bit
209 differently - they will match the color scheme
211 ## Mega Dropdown Menu
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).
217 * Include **main-menu.js**: `<script src="js/main-menu.js"></script>`
218 * Put HTML code for your menu. Here is a code example:
221 <nav id="mainmenu" class="mainmenu">
223 <li class="logo-wrapper">
224 <a href="index.html"><img src="img/logo.png" alt="Alt Text"></a>
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">
236 <h4>Section Title 1</h4>
238 <li><a href="#">Submenu Item</a></li>
239 <li><a href="#">Submenu Item</a></li>
242 <h4>Section Title 2</h4>
244 <li><a href="#">Submenu Item</a></li>
245 <li><a href="#">Submenu Item</a></li>
251 <h4>Section Title 3</h4>
253 <li><a href="#">Submenu Item</a></li>
254 <li><a href="#">Submenu Item</a></li>
260 <h4>Section Title 4</h4>
262 <li><a href="#">Submenu Item</a></li>
263 <li><a href="#">Submenu Item</a></li>
266 <h4>Section Title 5</h4>
268 <li><a href="#">Submenu Item</a></li>
269 <li><a href="#">Submenu Item</a></li>
273 </div> class="comment"><!-- /mainmenu-submenu-inner -->
274 </div> class="comment"><!-- /mainmenu-submenu -->
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>`)
282 **Other tips & hints**
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:
291 <h4>Section Title 1</h4>
293 <li><a href="#">Submenu Item</a></li>
294 <li><a href="#">Submenu Item</a></li>
297 <h4>Section Title 2</h4>
299 <li><a href="#">Submenu Item</a></li>
300 <li><a href="#">Submenu Item</a></li>
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/))
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.:
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>
324 * Initialize responsive video by placing JavaScript code: `$(".video-wrapper").fitVids();`
326 **Other tips & hints**
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/)
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”_
337 ## Additional Icons - Flags
339 Template comes with 247 flag icons representing most countries in the world.
340 These icons could be found in _“img/flags”_ directory
342 ## Additional Icons - Social Icons
344 Template comes with icons for most popular social networks including:
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>`)
363 You can check them in action on “Features” page
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”_
376 * HTML example could be found here: _“page-pricing.html”_
377 * CSS / LESS style: search for comment containing _“Pricing Table Style”_
380 **Other tips & hints**
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_
384 ## Team & Open Vacancies
388 * HTML example could be found here: _“page-team.html”_
389 * CSS / LESS style: search for comment containing _“Our Team Style”_
394 * HTML example could be found here: _“page-vacancies.html”_
395 * CSS / LESS style: search for comment containing _“Jobs list Style”_
398 ## Our Work (Portfolio)
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”_
410 ### Portfolio Item (Project)
412 * HTML example could be found here: _“page-portfolio-item.html”_
413 * CSS / LESS style: search for comment containing _“Portfolio Style”_
420 * HTML example could be found here: _“page-about-us.html”_
421 * CSS / LESS style: search for comment containing _“Video Wrapper Style”_
424 Please also check the chapter **[Responsive Videos](#responsive-videos)**
428 * HTML example could be found here: _“page-contact-us.html”_
429 * CSS / LESS style: search for comment containing _“Contact Us Style”_
432 ### Frequently Asked Questions
434 * HTML example could be found here: _“page-faq.html”_
435 * CSS / LESS style: search for comment containing _“Frequently Asked Questions Style”_
438 ### Testimonials & Clients
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
444 **Usage (Testimonials)**
446 * Put HTML for your testimonials slider. Here is a code example:
449 <div class="section">
450 <div class="container">
451 <h2>Testimonials</h2>
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">
459 <div class="testimonial-bubble">
463 "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut."
466 <cite class="author-info">
467 - Name Surname,<br>Managing Director at <a href="#">Some Company</a>
470 <div class="sprite arrow-speech-bubble"></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">
478 <div class="testimonial-bubble">
481 "Ut enim ad minim veniam."
483 <cite class="author-info">
484 - Name Surname,<br>Managing Director at <a href="#">Some Company</a>
487 <div class="sprite arrow-speech-bubble"></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">
494 <div class="testimonial-bubble">
497 "Duis aute irure dolor."
499 <cite class="author-info">
500 - Name Surname,<br>Managing Director at <a href="#">Some Company</a>
503 <div class="sprite arrow-speech-bubble"></div>
511 * Initialize testimonials slider by placing JavaScript code (skip this step if you don’t want testimonials to slide):
515 * HTML example could be found here: _“page-events.html”_
516 * CSS / LESS style: search for comment containing _“Events List Style”_
521 * HTML example could be found here: _“page-404.html”_
522 * CSS / LESS style: search for comment containing _“404 Page Style”_
527 * HTML example could be found here: _“page-sitemap.html”_
528 * CSS / LESS style: search for comment containing _“Sitemap Style”_
533 * HTML example could be found here: _“page-login.html”_
534 * CSS / LESS style: search for comment containing _“Login/Register/Reset Password Forms Style”_
539 * HTML example could be found here: _“page-register.html”_
540 * CSS / LESS style: search for comment containing _“Login/Register/Reset Password Forms Style”_
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”_
551 * HTML example could be found here: _“page-terms-privacy.html”_
552 * CSS / LESS style: plain Twitter Bootstrap styles
557 * HTML example could be found here: _“page-coming-soon.html”_
558 * CSS / LESS style: search for comment containing _“Coming Soon Page Style”_
563 ### Products (Items) List
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”_
571 ### Product (Item) Description
573 * HTML example could be found here: _“page-product-details.html”_
574 * CSS / LESS style: search for comment containing _“Product Details Page Style”_
579 * HTML example could be found here: _“page-shopping-cart.html”_
580 * CSS / LESS style: search for comment containing _“E-commerce Style”_
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/))
591 * Include jquery.bxslider.js: `<script src="js/jquery.bxslider.js"></script>`
592 * Put HTML for your products slider. Here is a code example:
595 <div class="section">
596 <div class="container">
598 <div class="col-md-12">
599 <div class="products-slider">
600 <!-- Products Slider Item -->
601 <div class="shop-item">
602 <!-- Product Image -->
604 <a href="page-product-details.html"><img src="img/product1.jpg" alt="Item Name"></a>
606 <!-- Product Title -->
608 <h3><a href="page-product-details.html">Lorem ipsum dolor</a></h3>
610 <!-- Product Price -->
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>
619 <!-- End Products Slider Item -->
620 <div class="shop-item">
622 <a href="page-product-details.html"><img src="img/product2.jpg" alt="Item Name"></a>
625 <h3><a href="page-product-details.html">Lorem ipsum dolor</a></h3>
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>
642 * Initialize products slider by placing JavaScript code
645 slideWidth = $('.products-slider .shop-item').outerWidth()-20; //Gets slide width
646 $('.products-slider').bxSlider({
647 slideWidth: slideWidth,
660 More information and configuration options could be found on bxslider website
661 [http://bxslider.com](http://bxslider.com/)
667 * HTML example could be found here: _“page-blog-posts.html”_
668 * CSS / LESS style: search for comment containing _“Blog Style”_
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”_
679 ### Latest & Featured News
681 * HTML example could be found here: _“page-news.html”_
682 * CSS / LESS style: search for comment containing _“News Style”_
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