mPurpose is a free multipurpose Twitter Bootstrap 3 template by http://www.dragdropsite.com
For More info click here
For Demo click here
<div class="section">...</div>
. It’s advised to follow this pattern mPurpose template comes with five pre-made color themes (Blue, Orange, Green, Red, Grey). Choose a relevant CSS file from css folder:
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! Please check LESS chapter for more information.
This template is build taking an advantage of LESS CSS. All LESS files could be found in less folder. Here is the list of LESS files:
More info about LESS could be found here:
Here are some LESS compilers:
Usage
<script src="https://github.com/dragdropsite/mPurpose/raw/master/js/jquery.sequence-min.js"></script>
<div class="homepage-slider">
<div id="sequence">
<ul class="sequence-canvas">
<!-- Slide 1 -->
<li class="bg4">
<!-- Slide Title -->
<h2 class="title">Slide Title</h2>
<!-- Slide Text -->
<h3 class="subtitle">Slide Subtitle</h3>
<!-- Slide Image -->
<img class="slide-img" src="https://github.com/dragdropsite/mPurpose/raw/master/img/homepage-slider/slide1.png" alt="Slide 1" />
</li>
<!-- End Slide 1 -->
<!-- Slide 2 -->
<li class="bg3">
<!-- Slide Title -->
<h2 class="title">Slide Title</h2>
<!-- Slide Text -->
<h3 class="subtitle">Slide Subtitle</h3>
<!-- Slide Image -->
<img class="slide-img" src="https://github.com/dragdropsite/mPurpose/raw/master/img/homepage-slider/slide2.png" alt="Slide 2" />
</li>
<!-- End Slide 2 -->
</ul>
<div class="sequence-pagination-wrapper">
<ul class="sequence-pagination">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</div>
var options = {
nextButton: false,
prevButton: false,
pagination: true,
animateStartingFrameIn: true,
autoPlay: true,
autoPlayDelay: 3000,
preloader: true
};
var mySequence = $("#sequence").sequence(options).data("sequence");
More information and configuration options could be found on sequencejs website http://www.sequencejs.com
Other tips & hints
Other tips & hints
Template comes with some custom buttons - here are CSS classes for them:
.btn-grey
.btn-blue
.btn-orange
.btn-green
.btn-red
Note that standard Twitter Bootstrap buttons (CSS class .btn) will look a bit differently - they will match the color scheme
mPurpose template includes Mega Dropdown Menu component which is used for main menu (select “Pages” menu item to see Mega Dropdown Menu in action).
Usage
<script src="https://github.com/dragdropsite/mPurpose/raw/master/js/main-menu.js"></script>
<nav id="mainmenu" class="mainmenu">
<ul>
<li class="logo-wrapper">
<a href="https://github.com/dragdropsite/mPurpose/blob/master/index.html"><img src="https://github.com/dragdropsite/mPurpose/raw/master/img/logo.png" alt="Alt Text"></a>
</li>
<!--Active Menu Item -->
<li class="active"><a href="https://github.com/dragdropsite/mPurpose/blob/master/index.html">Home</a></li>
<!-- Menu Item containing submenu -->
<li class="has-submenu">
<a href="#">Menu with submenus</a>
<!-- Dropdown Menu containing submenu items -->
<div class="mainmenu-submenu">
<div class="mainmenu-submenu-inner">
<!-- Column 1 -->
<div>
<h4>Section Title 1</h4>
<ul>
<li><a href="#">Submenu Item</a></li>
<li><a href="#">Submenu Item</a></li>
...
</ul>
<h4>Section Title 2</h4>
<ul>
<li><a href="#">Submenu Item</a></li>
<li><a href="#">Submenu Item</a></li>
...
</ul>
</div>
<!-- Column 2 -->
<div>
<h4>Section Title 3</h4>
<ul>
<li><a href="#">Submenu Item</a></li>
<li><a href="#">Submenu Item</a></li>
...
</ul>
</div>
<!-- Column 3 -->
<div>
<h4>Section Title 4</h4>
<ul>
<li><a href="#">Submenu Item</a></li>
<li><a href="#">Submenu Item</a></li>
...
</ul>
<h4>Section Title 5</h4>
<ul>
<li><a href="#">Submenu Item</a></li>
<li><a href="#">Submenu Item</a></li>
...
</ul>
</div>
</div> class="comment"><!-- /mainmenu-submenu-inner -->
</div> class="comment"><!-- /mainmenu-submenu -->
</li>
</ul>
</nav>
mainMenu.init();
. Note that Mega Dropdown Menu ID should be mainmenu
(<nav id="mainmenu" class="mainmenu">...</nav>
) Other tips & hints
.active
to indicate an active menu item .has-submenu
. Otherwise submenu won't work <div>...</div>
inside submenu to create submenu columns (max 3 columns will be created) <div>
<h4>Section Title 1</h4>
<ul>
<li><a href="#">Submenu Item</a></li>
<li><a href="#">Submenu Item</a></li>
...
</ul>
<h4>Section Title 2</h4>
<ul>
<li><a href="#">Submenu Item</a></li>
<li><a href="#">Submenu Item</a></li>
...
</ul>
...
</div>
Usage
<script src="https://github.com/dragdropsite/mPurpose/raw/master/js/jquery.fitvids.js"></script>
<div class="video-wrapper">...</div>
e.g.: <div class="video-wrapper">
<iframe src="http://player.vimeo.com/video/47000322?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
$(".video-wrapper").fitVids();
Other tips & hints
<div class="video-wrapper"> ... </div>
to make it responsive. Currently supported players: YouTube, Vimeo, Blip.tv, Viddler, Kickstarter Template comes with 247 flag icons representing most countries in the world. These icons could be found in “img/flags” directory
Template comes with icons for most popular social networks including:
<i class="icon-google-plus"></i>
) <i class="icon-facebook"></i>
) <i class="icon-twitter"></i>
) <i class="icon-vimeo2"></i>
) <i class="icon-flickr"></i>
) <i class="icon-picassa"></i>
) <i class="icon-dribbble"></i>
) <i class="icon-github"></i>
) <i class="icon-wordpress"></i>
) <i class="icon-blogger"></i>
) <i class="icon-tumblr"></i>
) <i class="icon-soundcloud"></i>
) <i class="icon-linkedin"></i>
) <i class="icon-lastfm"></i>
) <i class="icon-stumbleupon"></i>
) <i class="icon-pinterest"></i>
) You can check them in action on “Features” page
Other tips & hints
<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-redPlease also check the chapter Responsive Videos
Usage (Testimonials)
<div class="section">
<div class="container">
<h2>Testimonials</h2>
<div class="row">
<!-- Testimonial -->
<div class="testimonial col-md-4 col-sm-6">
<!-- Author Photo -->
<div class="author-photo">
<img src="https://github.com/dragdropsite/mPurpose/raw/master/img/user1.jpg" alt="Author 1">
</div>
<div class="testimonial-bubble">
<blockquote>
<!-- Quote -->
<p class="quote">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut."
</p>
<!-- Author Info -->
<cite class="author-info">
- Name Surname,<br>Managing Director at <a href="#">Some Company</a>
</cite>
</blockquote>
<div class="sprite arrow-speech-bubble"></div>
</div>
</div>
<!-- End Testimonial -->
<div class="testimonial col-md-4 col-sm-6">
<div class="author-photo">
<img src="https://github.com/dragdropsite/mPurpose/raw/master/img/user5.jpg" alt="Author 2">
</div>
<div class="testimonial-bubble">
<blockquote>
<p class="quote">
"Ut enim ad minim veniam."
</p>
<cite class="author-info">
- Name Surname,<br>Managing Director at <a href="#">Some Company</a>
</cite>
</blockquote>
<div class="sprite arrow-speech-bubble"></div>
</div>
</div>
<div class="testimonial col-md-4 col-sm-6">
<div class="author-photo">
<img src="https://github.com/dragdropsite/mPurpose/raw/master/img/user2.jpg" alt="Author 3">
</div>
<div class="testimonial-bubble">
<blockquote>
<p class="quote">
"Duis aute irure dolor."
</p>
<cite class="author-info">
- Name Surname,<br>Managing Director at <a href="#">Some Company</a>
</cite>
</blockquote>
<div class="sprite arrow-speech-bubble"></div>
</div>
</div>
</div>
</div>
</div>
Usage
<script src="https://github.com/dragdropsite/mPurpose/raw/master/js/jquery.bxslider.js"></script>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="products-slider">
<!-- Products Slider Item -->
<div class="shop-item">
<!-- Product Image -->
<div class="image">
<a href="https://github.com/dragdropsite/mPurpose/blob/master/page-product-details.html"><img src="https://github.com/dragdropsite/mPurpose/raw/master/img/product1.jpg" alt="Item Name"></a>
</div>
<!-- Product Title -->
<div class="title">
<h3><a href="https://github.com/dragdropsite/mPurpose/blob/master/page-product-details.html">Lorem ipsum dolor</a></h3>
</div>
<!-- Product Price -->
<div class="price">
$999.99
</div>
<!-- Buy Button -->
<div class="actions">
<a href="https://github.com/dragdropsite/mPurpose/blob/master/page-product-details.html" class="btn btn-small"><i class="icon-shopping-cart icon-white"></i> Buy</a>
</div>
</div>
<!-- End Products Slider Item -->
<div class="shop-item">
<div class="image">
<a href="https://github.com/dragdropsite/mPurpose/blob/master/page-product-details.html"><img src="https://github.com/dragdropsite/mPurpose/raw/master/img/product2.jpg" alt="Item Name"></a>
</div>
<div class="title">
<h3><a href="https://github.com/dragdropsite/mPurpose/blob/master/page-product-details.html">Lorem ipsum dolor</a></h3>
</div>
<div class="price">
$999.99
</div>
<div class="actions">
<a href="https://github.com/dragdropsite/mPurpose/blob/master/page-product-details.html" class="btn btn-small"><i class="icon-shopping-cart icon-white"></i> Buy</a>
</div>
</div>
...
</div>
</div>
</div>
</div>
</div>
slideWidth = $('.products-slider .shop-item').outerWidth()-20; //Gets slide width
$('.products-slider').bxSlider({
slideWidth: slideWidth,
responsive: true,
minSlides: 1,
maxSlides: 4,
slideMargin: 20,
auto: true,
autoHover: true,
speed: 800,
pager: true,
controls: false
});
More information and configuration options could be found on bxslider website http://bxslider.com