Free multipurpose Twitter Bootstrap 3 template. A huge variety of components and more that 30 sample pages!
HTML CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css modify menus color value Oct 13, 2014
fonts Initial commit Apr 13, 2014
img Initial commit Apr 13, 2014
js Update main-menu.js Jan 22, 2016
less modify menus color value Oct 13, 2014
.gitignore Initial commit Apr 13, 2014
LICENSE Initial commit Apr 13, 2014
README.md Update README.md Jan 13, 2015
credits.html Initial commit Apr 13, 2014
favicon.ico Initial commit Apr 13, 2014
features.html Initial commit Apr 13, 2014
index.html Initial commit Apr 13, 2014
page-404.html Initial commit Apr 13, 2014
page-about-us.html Initial commit Apr 13, 2014
page-blog-post-left-sidebar.html Initial commit Apr 13, 2014
page-blog-post-right-sidebar.html Initial commit Apr 13, 2014
page-blog-posts.html Initial commit Apr 13, 2014
page-coming-soon.html Initial commit Apr 13, 2014
page-contact-us.html Initial commit Apr 13, 2014
page-events.html Initial commit Apr 13, 2014
page-faq.html Initial commit Apr 13, 2014
page-homepage-sample.html Initial commit Apr 13, 2014
page-job-details.html Initial commit Apr 13, 2014
page-login.html Initial commit Apr 13, 2014
page-news.html Initial commit Apr 13, 2014
page-password-reset.html Initial commit Apr 13, 2014
page-portfolio-2-columns-1.html Initial commit Apr 13, 2014
page-portfolio-2-columns-2.html Initial commit Apr 13, 2014
page-portfolio-3-columns-1.html Initial commit Apr 13, 2014
page-portfolio-3-columns-2.html Initial commit Apr 13, 2014
page-portfolio-item.html Initial commit Apr 13, 2014
page-pricing.html Initial commit Apr 13, 2014
page-product-details.html Initial commit Apr 13, 2014
page-products-3-columns.html Initial commit Apr 13, 2014
page-products-4-columns.html Initial commit Apr 13, 2014
page-products-slider.html Initial commit Apr 13, 2014
page-register.html Initial commit Apr 13, 2014
page-services-1-column.html Initial commit Apr 13, 2014
page-services-3-columns.html Initial commit Apr 13, 2014
page-services-4-columns.html Initial commit Apr 13, 2014
page-shopping-cart.html Initial commit Apr 13, 2014
page-sitemap.html Initial commit Apr 13, 2014
page-team.html Initial commit Apr 13, 2014
page-terms-privacy.html Initial commit Apr 13, 2014
page-testimonials-clients.html Initial commit Apr 13, 2014
page-vacancies.html Initial commit Apr 13, 2014

README.md

Multipurpose Twitter Bootstrap 3 template

mPurpose is a free multipurpose Twitter Bootstrap 3 template by http://www.dragdropsite.com

For More info click here

For Demo click here

alt tag

Main Template Features

  • Responsive
  • 5 pre-made Color Schemes and it’s easy to create your own ones
  • Feature Rich (a huge amount of components, over 30 sample pages)
  • LESS
  • Support for all modern browsers
  • Much more...

About Documentation

  • Documentation covers paths that might be tricky
  • Helps to find resources (HTML, CSS files) related to a particular component
  • Includes some code examples
  • You’ll find component dependencies listed (jQuery, bxSlider, sequencejs, etc.)
  • You’ll find some useful tip & hints

Short Intro

General usage hints

  • Probably, the best way to use this template and its components is copy-paste technique :)
    • Open HTML page containing a component you want to use (documentation will help you to find a necessary HTML file)
    • Copy HTML
    • Adjust HTML/JavaScript to your needs
    • Make sure all dependencies are included (please check the documentation)
    • Done
  • Almost all template components are wrapped into <div class="section">...</div>. It’s advised to follow this pattern

Template Directory Structure

  • \css - css style sheets
  • \img and subfolders - template images
  • \js - template JavaScript files
  • \less - template LESS CSS files

CSS Files

  • bootstrap.css, bootstrap.min.css, bootstrap-theme.css, bootstrap-theme.min.css - Twitter Bootstrap styles
  • coming-soon-social.css - social icons sprite for coming soon page
  • icomoon-social.css - social icons sprite
  • leaflet.css, leaflet.ie.css - styles for leaflet maps
  • main.css - mPurpose template styles (Blue Color Scheme)
  • main-orange.css - mPurpose template styles (Orange Color Scheme)
  • main-green.css - mPurpose template styles (Green Color Scheme)
  • main-red.css - mPurpose template styles (Red Color Scheme)
  • main-grey.css - mPurpose template styles (Grey Color Scheme)

LESS Files

  • components.less - contains styles for all template components, overrides some Twitter Bootstrap styles
  • general.less - general & typography styles
  • lesshat.less - less mixins. More information could be found on website: http://lesshat.com
  • main.less - combines all less files. Use it for CSS compilation
  • variables.less - template variables. Use this file to create your own color schemes

JavaScript Files

  • bootstrap.js, bootstrap.min.js - Twitter Bootstrap components
  • jquery.bxslider.js - content slider used for products sliders. Plugin homepage: http://bxslider.com
  • jquery.fitvids.js - makes embedded videos responsive. Plugin homepage: http://fitvidsjs.com
  • jquery.sequence-min.js - CSS3 slider used for homepage slider. Plugin homepage: http://www.sequencejs.com
  • main-menu.js - JavaScript for Mega Dropdown Menu
  • 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
  • template.js - JavaScript for mPurpose template components

General Features

Color Schemes

mPurpose template comes with five pre-made color themes (Blue, Orange, Green, Red, Grey). Choose a relevant CSS file from css folder:

  • main.css - Blue color scheme (default)
  • main-orange.css - Orange color scheme
  • main-green.css - Green color scheme
  • main-red.css - Red color scheme
  • main-grey.css - Grey color scheme

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.

LESS

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:

  • components.less - contains styles for all template components, overrides some Twitter Bootstrap styles
  • general.less - general & typography styles
  • lesshat.less - less mixins. More information could be found on website: http://lesshat.com
  • main.less - combines all less files. Use it for CSS compilation
  • variables.less - template variables. Use this file to create your own color schemes

More info about LESS could be found here:

Here are some LESS compilers:

Template Components

Homepage Slider

  • HTML example could be found here: “index.html”
  • CSS / LESS style: search for comment containing “Homepage Slider Style”
  • Dependencies: jQuery, sequencejs library (http://www.sequencejs.com)

Usage

  • Include jquery.sequence-min.js: <script src="js/jquery.sequence-min.js"></script>
  • Put HTML code for your slider. Here is a code example:
<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="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="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>
  • Initialize slider by placing JavaScript code:
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

  • Template comes with 14 slider backgrounds, they could be found in folder “img\homepage-slider”
  • Slide background could be changed by putting a relevant CSS class bg1, bg2, … bg10 (please check a code example above)

'Featured In Press' Component

  • HTML example could be found here: “page-about-us.html”
  • CSS / LESS style: search for comment containing “In Press Style”

Other tips & hints

  • CSS Sprites are used to display media logos (take a look at “img/in-press.png”).
  • Logo dimensions: 120x32

Custom Buttons

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

Mega Dropdown Menu

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

  • Include main-menu.js: <script src="js/main-menu.js"></script>
  • Put HTML code for your menu. Here is a code example:
<nav id="mainmenu" class="mainmenu">
    <ul>
        <li class="logo-wrapper">
            <a href="index.html"><img src="img/logo.png" alt="Alt Text"></a>
        </li>
        <!--Active Menu Item -->
        <li class="active"><a href="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>
  • 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>)

Other tips & hints

  • Use CSS class .active to indicate an active menu item
  • Make sure Menu Items containing submenu has CSS class .has-submenu. Otherwise submenu won't work
  • Use <div>...</div> inside submenu to create submenu columns (max 3 columns will be created)
  • Note that you can define as many submenu column sections as you need:
<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>

Responsive Videos

  • HTML example could be found here: “page-about-us.html”
  • CSS / LESS style: search for comment containing “Video Wrapper Style”
  • Dependencies: jQuery, fitVids library (http://fitvidsjs.com)

Usage

  • Include jquery.fitvids.js: <script src="js/jquery.fitvids.js"></script>
  • Put HTML code to embed a video and wrap it into <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>
  • Initialize responsive video by placing JavaScript code: $(".video-wrapper").fitVids();

Other tips & hints

  • Make sure to wrap video into <div class="video-wrapper"> ... </div> to make it responsive. Currently supported players: YouTube, Vimeo, Blip.tv, Viddler, Kickstarter
  • More information could be found on fitVids plugin website: http://fitvidsjs.com

Page Title

  • HTML example could be found in most of demo files starting with “page-“
  • CSS / LESS style: search for comment containing “Breadcrumbs Section Style”
  • Dependencies: N/A

Additional Icons - Flags

Template comes with 247 flag icons representing most countries in the world. These icons could be found in “img/flags” directory

Additional Icons - Social Icons

Template comes with icons for most popular social networks including:

  • Google+ (<i class="icon-google-plus"></i>)
  • Facebook (<i class="icon-facebook"></i>)
  • Twitter (<i class="icon-twitter"></i>)
  • Vimeo (<i class="icon-vimeo2"></i>)
  • Flickr (<i class="icon-flickr"></i>)
  • Picasa (<i class="icon-picassa"></i>)
  • Dribbble (<i class="icon-dribbble"></i>)
  • Github (<i class="icon-github"></i>)
  • Wordpress (<i class="icon-wordpress"></i>)
  • Blogger (<i class="icon-blogger"></i>)
  • Tumblr (<i class="icon-tumblr"></i>)
  • Soundcloud (<i class="icon-soundcloud"></i>)
  • Linkedin (<i class="icon-linkedin"></i>)
  • Lastfm (<i class="icon-lastfm"></i>)
  • Stumbleupon (<i class="icon-stumbleupon"></i>)
  • Pinterest (<i class="icon-pinterest"></i>)

You can check them in action on “Features” page

Services

  • There are 3 different layouts:
    • 1 Column - HTML example could be found here “page-services-1-column.html”
    • 3 Columns - HTML example could be found here “page-services-3-columns.html”
    • 4 Columns - HTML example could be found here “page-services-4-columns.html”
  • CSS / LESS style: search for comment containing “Services Style”
  • Dependencies: N/A

Pricing Table

  • HTML example could be found here: “page-pricing.html”
  • CSS / LESS style: search for comment containing “Pricing Table Style”
  • Dependencies: N/A

Other tips & hints

  • 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

Team & Open Vacancies

Team

  • HTML example could be found here: “page-team.html”
  • CSS / LESS style: search for comment containing “Our Team Style”
  • Dependencies: N/A

Open Vacancies

  • HTML example could be found here: “page-vacancies.html”
  • CSS / LESS style: search for comment containing “Jobs list Style”
  • Dependencies: N/A

Our Work (Portfolio)

Portfolio List

  • There are 4 different layouts available:
    • 2 Columns, Option 1 - HTML example could be found here “page-portfolio-2-columns-1.html”
    • 2 Columns, Option 2 - HTML example could be found here “page-portfolio-2-columns-2.html”
    • 3 Columns, Option 1 - HTML example could be found here “page-portfolio-3-columns-1.html”
    • 3 Columns, Option 2 - HTML example could be found here “page-portfolio-3-columns-2.html”
  • CSS / LESS style: search for comment containing “Portfolio Style”
  • Dependencies: N/A

Portfolio Item (Project)

  • HTML example could be found here: “page-portfolio-item.html”
  • CSS / LESS style: search for comment containing “Portfolio Style”
  • Dependencies: N/A

General Pages

About Us

  • HTML example could be found here: “page-about-us.html”
  • CSS / LESS style: search for comment containing “Video Wrapper Style”
  • Dependencies: N/A

Please also check the chapter Responsive Videos

Contact Us

  • HTML example could be found here: “page-contact-us.html”
  • CSS / LESS style: search for comment containing “Contact Us Style”
  • Dependencies: N/A

Frequently Asked Questions

  • HTML example could be found here: “page-faq.html”
  • CSS / LESS style: search for comment containing “Frequently Asked Questions Style”
  • Dependencies: N/A

Testimonials & Clients

  • HTML example could be found here: “page-testimonials-clients.html”
  • CSS / LESS style: search for comment containing “Testimonials Style”, “Clients Logos Style”
  • Dependencies (for Testimonials): N/A

Usage (Testimonials)

  • Put HTML for your testimonials slider. Here is a code example:
<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="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="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="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>
  • Initialize testimonials slider by placing JavaScript code (skip this step if you don’t want testimonials to slide):

Events

  • HTML example could be found here: “page-events.html”
  • CSS / LESS style: search for comment containing “Events List Style”
  • Dependencies: N/A

404 Page

  • HTML example could be found here: “page-404.html”
  • CSS / LESS style: search for comment containing “404 Page Style”
  • Dependencies: N/A

Sitemap

  • HTML example could be found here: “page-sitemap.html”
  • CSS / LESS style: search for comment containing “Sitemap Style”
  • Dependencies: N/A

Login

  • HTML example could be found here: “page-login.html”
  • CSS / LESS style: search for comment containing “Login/Register/Reset Password Forms Style”
  • Dependencies: N/A

Register

  • HTML example could be found here: “page-register.html”
  • CSS / LESS style: search for comment containing “Login/Register/Reset Password Forms Style”
  • Dependencies: N/A

Password Reset

  • HTML example could be found here: “page-password-reset.html”
  • CSS / LESS style: search for comment containing “Login/Register/Reset Password Forms Style”
  • Dependencies: N/A

Terms & Privacy

  • HTML example could be found here: “page-terms-privacy.html”
  • CSS / LESS style: plain Twitter Bootstrap styles
  • Dependencies: N/A

Coming Soon

  • HTML example could be found here: “page-coming-soon.html”
  • CSS / LESS style: search for comment containing “Coming Soon Page Style”
  • Dependencies: N/A

eCommerce

Products (Items) List

  • There are 2 different layouts available (3 Columns, 4 Columns). HTML example could be found in a relevant file:
    • “page-products-3-columns.html”
    • “page-products-4-columns.html”
  • CSS / LESS style: search for comment containing “E-commerce Style”
  • Dependencies: N/A

Product (Item) Description

  • HTML example could be found here: “page-product-details.html”
  • CSS / LESS style: search for comment containing “Product Details Page Style”
  • Dependencies: N/A

Shopping Cart

  • HTML example could be found here: “page-shopping-cart.html”
  • CSS / LESS style: search for comment containing “E-commerce Style”
  • Dependencies: N/A

Products Slider

  • HTML example could be found here: “page-products-slider.html”
  • CSS / LESS style: search for comment containing “Content Slider Style”
  • Dependencies: jQuery, bxSlider (http://bxslider.com)

Usage

  • Include jquery.bxslider.js: <script src="js/jquery.bxslider.js"></script>
  • Put HTML for your products slider. Here is a code example:
<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="page-product-details.html"><img src="img/product1.jpg" alt="Item Name"></a>
                </div>
                <!-- Product Title -->
                <div class="title">
                  <h3><a href="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="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="page-product-details.html"><img src="img/product2.jpg" alt="Item Name"></a>
                </div>
                <div class="title">
                  <h3><a href="page-product-details.html">Lorem ipsum dolor</a></h3>
                </div>
                <div class="price">
                  $999.99
                </div>
                <div class="actions">
                  <a href="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>
  • Initialize products slider by placing JavaScript code
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

Blog

Blog Posts List

  • HTML example could be found here: “page-blog-posts.html”
  • CSS / LESS style: search for comment containing “Blog Style”
  • Dependencies: N/A

Blog Post

  • There are 2 different layouts available (Sidebar Left, Sidebar Right). HTML example could be found in a relevant file:
    • “page-blog-post-left-sidebar.html”
    • “page-blog-post-right-sidebar.html”
  • CSS / LESS style: search for comment containing “Blog Style”
  • Dependencies: N/A

Latest & Featured News

  • HTML example could be found here: “page-news.html”
  • CSS / LESS style: search for comment containing “News Style”
  • Dependencies: N/A

Credits