Thank You for using La Boutique!

For any questions that are beyond the scope of this help file, please contact our support team.

La Boutique is a responsive HTML5 template powered with Twitter Bootstrap Framework.

If you like La Boutique, please spare few seconds to rate it on ThemeForest.

Don’t forget to be awesome every day!

Table of Content

1. Template Structure

To top

Please see the main structure below. The structure is used on all pages of the template. It consists of many sections as you can see from the comments in the given example. 

<!DOCTYPE html>
<html dir="ltr" lang="en" class="no-js">
 
    <head>
         <!-- Meta tags, css links and favicon links -->
    </head>
    <body>
 
        <div class="wrapper">
 
            <!-- Header -->
            <div class="header">
            
                <!-- Top bar -->
                <div class="top">                    
                </div>
                <!-- End class="top" -->
 
                <!-- Logo & Search bar -->
                <div class="bottom">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-5 col-md-6">	
                            
                            	<!-- Logo -->						
                                <div class="logo">                                    
                                </div>                                
                                <!-- end class="logo" -->
                                
                            </div>
 
                            <div class="col-sm-5 col-sm-offset-1 col-md-3">
 
                                <!-- Search -->
                                <div class="search">                                            
                                </div>
                                <!-- End class="search"-->

                            </div>
 
                            <!-- Mini cart -->
                            <div class="mini-cart">
                            </div>
                            <!-- End class="mini-cart" -->
  
                        </div>
                    </div>
                </div>
                <!-- End class="bottom" -->
 
            </div>
            <!-- End class="header" -->           
             
            <!-- Navigation -->
            <nav class="navigation">                
            </nav>
            <!-- End class="navigation" -->
            
            <!-- Content section -->
            <section class="main">
            </section>
            <!-- End class="main" -->
 
            <!-- Twitter bar -->
            <div class="twitter-bar">
            </div>
            <!-- End class="twitter-bar" -->
            
            <!-- Footer -->
            <div class="footer">
            </div>
            <!-- End id="footer" -->
            
            <!-- Credits bar -->
            <div class="credits">
            </div>
            <!-- End class="credits" -->
            
            <!-- Newsletter modal window -->
            <div id="newsletter_subscribe" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
            </div>
            <!-- End id="newsletter_subscribe" -->
            
        </div>
        
    </body>
</html>

1.1. Page Head

Page head contains metadata, javascript and css files: 

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="La Boutique HTML v1.0" />
	
	<title>La Boutique</title>
	
	<link rel="stylesheet" href="./css/bootstrap.min.css" />
	<link rel="stylesheet" href="./css/font-awesome.min.css" />
	<link rel="stylesheet" href="./css/flexslider.css" />
	<link rel="stylesheet" href="./js/tfingi-megamenu/tfingi-megamenu-frontend.css" />
	<link rel="stylesheet" href="./css/color-schemes/turquoise.css" id="color_scheme" />
	<link rel="icon" href="favicon.ico" type="image/x-icon" />
	<link href="http://fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic|Shadows+Into+Light" rel="stylesheet">
</head>

1.2. Change Template Color

La Boutique comes with different colors. To change the color, just replace reference to default CSS file "css/color-schemes/turquoise.css" with appropriate one. For example "css/color-schemes/carrot.css".

Header contains a top bar, logo, search section and cart section. It's present on all pages. HTML code shown below: 

<!-- Header -->
<div class="header">

  <!-- Top bar -->
  <div class="top">
  </div>
  <!-- End class="top" -->
  
  <!-- Logo & Search bar -->
  <div class="bottom">
    <div class="container">
      <div class="row">
        <div class="col-sm-5 col-md-6">
        
          <!-- Logo -->
          <div class="logo">
          </div>
          <!-- End class="logo"-->
        
        </div>
        <div class="col-sm-5 col-sm-offset-1 col-md-3">
        
          <!-- Search -->
          <div class="search">
          </div>
          <!-- End class="search"-->
        
        </div>
        
        <!-- Mini cart -->
        <div class="mini-cart">
        </div>
        <!-- End class="mini-cart" -->
      
      </div>
    </div>
  </div>
  <!-- End class="bottom" -->

</div>
<!-- End class="header" -->

1.4. Content

Content section is usually wrapped with <section class="main">. Common category HTML code for content section shown below: 

<!-- Content section -->  
<section class="main">

  <!-- Category content -->
  <section class="category">
  
    <div class="container">
      <div class="row">
        <div class="col-sm-3">
        
          <!-- Sidebar -->
          <aside class="sidebar">
          </aside>
          <!-- End sidebar -->
        
        </div>
        <div class="col-sm-9">
        
          <!-- Products list -->
          <ul class="product-list isotope"></ul>
          <!-- End class="product-list isotope" -->
          
          <!-- "Load More" Button -->
          <button id="load_more" class="btn btn-block" data-category="16" data-rows="20" data-page="1" data-featured="true"></button>
          <!-- End "Load More" Button -->
        
        </div>
      </div>
    </div>
  
  </section>
  <!-- End class="category" -->

</section>
<!-- End class="main" -->

1.5. Widgets

Typical widget HTML code shown below: 

<!-- Widget -->
<div class="widget">
	<!-- Widget title -->
	    <h3 class="widget-title widget-title">This month only!</h3>
	<!-- End Widget title -->
	
    	<!-- Content -->
	Lorem ipsum dolor sit amet.
	<!-- End Content -->
</div>
<!-- End Widget -->
		
<!-- Footer -->
<div class="footer">
    <div class="container">
        <div class="row">	
                        
            <div class="col-sm-2">
            
                <!-- Support -->
                <div class="support">
                </div>
                <!-- End class="support" -->

                <hr />

                <!-- My account -->
                <div class="account">
                </div>
                <!-- End class="account"-->
                
            </div>

            <div class="col-sm-2">
                
                <!-- Categories -->
                <div class="categories">
                </div>
                <!-- End class="categories" -->

                <hr />

                <!-- Pay with confidence -->
                <div class="confidence">
                </div>
                <!-- End class="confidence" -->
                
            </div>

            <div class="col-sm-4">
                <h6>From the blog</h6>
                <ul class="list-chevron links">
                </ul>
            </div>

            <div class="col-sm-4">				

                <!-- Newsletter subscription -->
                <div class="newsletter">
                </div>
                <!-- End class="newsletter" -->

                <hr />
                
                <!-- Social icons -->
                <div class="social">
                </div>
                <!-- End class="social" -->

            </div>
        </div>
    </div>
</div>
<!-- End id="footer" -->

1.7. Credits bar

<!-- Credits bar -->
<div class="credits">
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <p><a href="#" title="La Boutique">La Boutique</a> © 2013 · Powered by <a href="http://www.twindots.com/" title="Twin Dots™">Twin Dots™</a> · All Rights Reserved</p>
            </div>
            <div class="col-sm-4 text-right hidden-xs">
                <p><a href="#" title="eCommerce theme by Twin Dots">eCommerce theme by Twin Dots</a></p>
            </div>
        </div>
    </div>
</div>
<!-- End class="credits" -->

Common modal window structure show below.

<div id="newsletter_subscribe" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modal-label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
    
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span>
        </button>
        <div class="hgroup title">
          <h3 id="modal-label">You are now subscribed to our newsletter</h3>
          <h5>Lorem ipsum dolor sit amet.</h5>
        </div>
      </div>
      
      <div class="modal-footer">  
        <button data-dismiss="modal" aria-hidden="true" class="btn btn-sm btn-block-xs">
          Close &nbsp; <i class="fa fa-check"></i>
        </button>
      </div>
    
    </div>
  </div>
</div>

1.9. HTML Code Comment Sample

All the html, css and javascript file contents have easy to refer and meaningful comments: 

<!-- Widget -->
<div class="widget">
	<!-- Widget title -->
	    <h3 class="widget-title widget-title">This month only!</h3>
	<!-- End Widget title -->
	
    	<!-- Content -->
	Lorem ipsum dolor sit amet.
	<!-- End Content -->
</div>
<!-- End Widget -->

1.10. CSS Code Comment Sample

/*---
| GENERAL ELEMENTS
---*/

p, ul, ol, h1, h2, h3, h4, h5, h6, pre, table, form, blockquote, canvas, caption, embed, fieldset, figure, video, progress, object, map, hr {
	margin: 0 0 20px;
}

/*---
| LISTS
---*/

.list {
	list-style-position: inside;
}

/*---
| GENERIC
---*/

.script {
	font-weight: 400;
	font-size: 150%;
}

1.12. Javascript Code Comment Sample

//TINT OVERRIDE SETTINGS
if(self.options.tint) {
    self.options.lensColour = "none", //colour of the lens background
    self.options.lensOpacity =  "1" //opacity of the lens
}
//INNER OVERRIDE SETTINGS
if(self.options.zoomType == "inner") {self.options.showLens = false;}

2. Font

To top

La Boutique uses the Lato font from Google Fonts, which is loaded in the <head> of every page. 

<link href="http://fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic|Shadows+Into+Light" rel="stylesheet" type="text/css">

Fonts can be changed easily using the Less files provided.

3. Template Configuration

To top

Colour Schemes

La Boutique comes with 16 color palettes, turquoise, alizarin, amethyst, belizehole, carrot, emerland, greensea, midnightblue, nephritis, peterriver, pomegranate, pumpkin, sunflower, wetasphalt, wisteria.

To change the default color scheme simply look in the <head> of your html file and replace 'turquoise.css' with the name of the colour you would like to use, e.g.

<link rel="stylesheet" type="text/css" href="css/color-schemes/midnightblue.css" id="color_scheme" />

To create your own color scheme use the Less files provided.

4. References

To top

Below is the list of all plugins and external resources used to power this template.

Name Description URL
jQuery v1.11.3 Core Javascript library http://www.jquery.com
Twitter Bootstrap v3.3.5 Sleek, intuitive, and powerful front-end framework for faster and easier web development http://twitter.github.com/bootstrap/
jQuery UI jQuery UI http://jqueryui.com/
imagesLoaded v3.1.8

Detect when images have been loaded.

 https://github.com/desandro/imagesloaded
jQuery elevateZoom v3.0.8 A Jquery Image Zoom Plugin http://www.elevateweb.co.uk/image-zoom
FlexSlider v2.5.0 Fully responsive jQuery slider toolkit http://www.woothemes.com/flexslider/
Isotope v2.2.0 An exquisite jQuery plugin for magical layouts. http://isotope.metafizzy.co
Sharrre v1.3.5 Sharrre is a jQuery plugin that allows you to create nice widgets sharing for Facebook,
Twitter, Google Plus (with PHP script) and more.		 http://sharrre.com/
Font Awesome v4.3.0 The iconic font designed for use with Twitter Bootstrap http://fortawesome.github.com/Font-Awesome/
Glyphicons Icons are designed primarily for toolbars and navigation bars in OS X Lion, the application for iPhone, iPhone 4, iPad and other Apple devices. http://glyphicons.com/
Lato La Boutique uses Lato web font from google fonts. http://www.google.com/fonts

5. End Of Documentation

To top

Once again, thanks for purchasing La Boutique. We hope you will enjoy using it for your next project.

If you like La Boutique, please spare few seconds to rate it on ThemeForest.

Oh and don’t forget to be awesome every day!