Bouton Fashion Agency

Thank you for purchasing Bouton and the confidence you have placed in Dart Simple Solutions.
In this document, you will find an in-depth description of all Bouton features and functions. If you have any questions not attended to by our template documentation, please contact us so our team can assist you. If you like our template, please leave your feedback and join us on Facebook or your other favorite social network! We are looking forward to hearing back from you, and to improving further this and many other templates in our portfolio.

Online documentation is updated regularly and is available online for you free of charge on our website at http://doc.dartsimple.com

Developer website: http://dartsimple.com
Customer service: http://dartsimple.com/contact-us/

 

 

Features

  • 3 Unique Home Page Layouts
  • Flexible Customization Options
  • Clean Design and Optimised Code
  • Full Cross-Browser Support
  • 100% Responsive & Mobile Friendly
  • All pages and folders are well-organized
  • Clean and professional design
  • Cross-browser compatible
  • Free font-based icon (FontAwesome)
  • Free support and updates
  • Free vector icons used
  • Fully functional and customization-friendly code
  • Fully responsive with Bootstrap 3.
  • Google Fonts
  • Google Map integrated.
  • HTML5 / CSS3.
  • Isotope
  • Over 580 icons with Font Awesome 4.
  • Parallax supports
  • Power shortcodes.
  • PSD files included
  • SEO-friendly
  • Smooth transition
  • Sticky menu
  • Theme colors via theme settings
  • Valid markup with modular design for remixing further
  • Video background.
  • W3C valid code
  • Well-documented
  • 14 unique pages
  • + many more

Html Files

  • 14 HTML Files
  • 3 Homepage Layouts
  • 3 About Page Layouts
  • 1 Blog Layout
  • 1 Blank Page
  • 1 Contact Page Layouts
  • 2 Navigation Types
  • 1 Shortcode Page
  • 1 Show Page
  • 1 Work With Us Page
  • 404 Error Page

File Structure

Project structure was carefully thought all throughout early on in the planning stage to ensure  logical flow of all parts. Complete list of all project-related folders, files and documents can be found below.

├── Bouton
│── Documentation
│   ├── assets
│   │   ├── fonts
│   │   │   ├── Raleway-Regular.ttf
│   │   │   ├── SegoeUIBlack.ttf
│   │   │   ├── SegoeUIBold.eot
│   │   │   ├── SegoeUIBold.ttf
│   │   │   ├── SegoeUIBold.woff
│   │   │   ├── SegoeUILight.eot
│   │   │   ├── SegoeUILight.ttf
│   │   │   ├── SegoeUILight.woff
│   │   │   ├── SegoeUIRegular.eot
│   │   │   ├── SegoeUIRegular.ttf
│   │   │   ├── SegoeUIRegular.woff
│   │   │   ├── SegoeUISemiBold.eot
│   │   │   ├── SegoeUISemiBold.ttf
│   │   │   ├── SegoeUISemiBold.woff
│   │   │   ├── font-awesome
│   │   │   │   ├── css
│   │   │   │   │   └── font-awesome.min.css
│   │   │   │   └── fonts
│   │   │   │       ├── FontAwesome.otf
│   │   │   │       ├── fontawesome-webfont.eot
│   │   │   │       ├── fontawesome-webfont.svg
│   │   │   │       ├── fontawesome-webfont.ttf
│   │   │   │       ├── fontawesome-webfont.woff
│   │   │   │       └── fontawesome-webfont.woff2
│   │   │   └── yugothil.ttf
│   │   └── plugins
│   │       ├── base-sizing.css
│   │       ├── bootstrap
│   │       │   ├── css
│   │       │   │   ├── bootstrap-theme.css
│   │       │   │   ├── bootstrap-theme.css.map
│   │       │   │   ├── bootstrap-theme.min.css
│   │       │   │   ├── bootstrap-theme.min.css.map
│   │       │   │   ├── bootstrap.css
│   │       │   │   ├── bootstrap.css.map
│   │       │   │   ├── bootstrap.min.css
│   │       │   │   └── bootstrap.min.css.map
│   │       │   ├── fonts
│   │       │   │   ├── glyphicons-halflings-regular.eot
│   │       │   │   ├── glyphicons-halflings-regular.svg
│   │       │   │   ├── glyphicons-halflings-regular.ttf
│   │       │   │   ├── glyphicons-halflings-regular.woff
│   │       │   │   └── glyphicons-halflings-regular.woff2
│   │       │   └── js
│   │       │       ├── bootstrap.js
│   │       │       ├── bootstrap.min.js
│   │       │       └── npm.js
│   │       ├── dropzone
│   │       │   ├── dropzone.css
│   │       │   └── dropzone.js
│   │       ├── froogaloop2.min.js
│   │       ├── HTML5shiv.js
│   │       ├── isotope.pkgd.min.js
│   │       ├── jquery.mCusomScrollbar
│   │       │   ├── jquery.mCustomScrollbar.concat.min.js
│   │       │   └── jquery.mCustomScrollbar.css
│   │       ├── jquery.min.js
│   │       ├── owl-carousel
│   │       │   ├── AjaxLoader.gif
│   │       │   ├── grabbing.png
│   │       │   ├── owl.carousel.css
│   │       │   ├── owl.carousel.js
│   │       │   ├── owl.carousel.min.js
│   │       │   ├── owl.theme.css
│   │       │   └── owl.transitions.css
│   │       ├── photoswipe
│   │       │   ├── default-skin
│   │       │   │   ├── default-skin.css
│   │       │   │   ├── default-skin.png
│   │       │   │   ├── default-skin.svg
│   │       │   │   └── preloader.gif
│   │       │   ├── photoswipe-ui-default.js
│   │       │   ├── photoswipe-ui-default.min.js
│   │       │   ├── photoswipe.css
│   │       │   ├── photoswipe.js
│   │       │   └── photoswipe.min.js
│   │       └── respond.min.js
│   ├── css
│   │   ├── fonts.css
│   │   ├── old-ie.css
│   │   ├── screen.css
│   │   └── template.css
│   ├── images
│   │   └── *.png, *.jpg, *.ico
│   ├── js
│   │   └── main.js
│   ├── sass
│   │   ├── fonts.sass
│   │   ├── old-ie.sass
│   │   ├── screen.sass
│   │   └── template.sass
│   ├── video
│   │   └── video.mp4
│   ├── about1.HTML
│   ├── about2.HTML
│   ├── about3.HTML
│   ├── blank-page.HTML
│   ├── blog-details.HTML
│   ├── blog.HTML
│   ├── contact-us.HTML
│   ├── home-page1.HTML
│   ├── home-page2.HTML
│   ├── home-page3.HTML
│   ├── shortcode.HTML
│   ├── show1.HTML
│   └── work-with-us.HTML
└   ├── 404.HTML

 

Project Folders

 

Folder Name

Description

assets

Contains various assets used by the template

fonts

The icon font is a custom pack of icons used in the template

fonts

These are javascript plugins which are used only in various pages of the template

css

Stylesheet css files

images

Images

js

JavaScript files

sass

Stylesheet sass files

 

HTML Structure 

Markup Customization

The HTML structure of all our projects is split in logically organized sections that are easy to navigate. Below you will find listed each HTML section, starting from Header and ending with Footer, referencing the list of customizable settings available for each of them. In cases where additional options or settings are not provided by any given section's customization concept - HTML code and its structure is somewhat simplified. Given intuitive and logical flow of our code, you will be able to further adjust and customize it further with basic knowledge of HTML, CSS, JS.

Header Style 1

<header class="bg-white pos-fixed">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 pos-init">
        <div class="navbar-header">
          {Your Code} <!-- /.navbar-header -->
        </div>
      </div><!-- /.row -->
    </div><!-- /.container -->
  </div>
</header><!-- /header -->

 

Header Style 2

<div class="navbar-header">
  <a class="navbar-brand" href="#"></a>
  <div class="pull-right">
    <button aria-expanded="false" class="navbar-toggle-always collapsed menu-default" data-target="#menu" data-toggle="collapse" id="menu-button" type="button"><span class="icon-bar-always"></span>
    <span class="icon-bar-always"></span> <span class="icon-bar-always"></span> <span class="icon-bar-always"></span></button>
  </div>
  <div class="collapse menu-default" id="menu">
    <ul class="nav navbar-nav navbar-right">
      <li>
        <a href="home-page1.HTML">Home page</a>
      </li>
      <li>
        <a href="blog.HTML">Blog</a>
      </li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">About <i aria-hidden="true" class="fa fa-plus"></i></a>
        <ul class="child dropdown-menu">
          <li>
            <a href="about1.HTML">About style 1</a>
          </li>
          <li>
            <a href="about2.HTML">About style 2</a>
          </li>
          <li>
            <a href="about3.HTML">About style 3</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="contact-us.HTML">Contact Us</a>
      </li>
      <li>
        <a href="work-with-us.HTML">Work With Us</a>
      </li>
    </ul>
  </div>
  <div id="black-background"></div>
</div><!-- /.navbar-header —>-->

 

Header Style 3

<div class="navbar-header">
  <a class="navbar-brand" href="#"></a><button class="navbar-toggle" data-target=".open-menu" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class=
  "icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
  <div class="collapse navbar-collapse open-menu">
    <ul class="nav navbar-nav navbar-right">
      <li>
        <a href="home-page1.HTML">Home page</a>
      </li>
      <li>
        <a href="blog.HTML">Blog</a>
      </li>
      <li>
        <a href="about2.HTML">About</a>
      </li>
      <li>
        <a href="contact-us.HTML">Contact Us</a>
      </li>
      <li>
        <a href="work-with-us.HTML">Work With Us</a>
      </li>
    </ul>
  </div>
</div><!-- /.navbar-header —>-->

 

The hamburger menu opening is implemented using bootstrap framework.

<button aria-expanded="false" class="navbar-toggle-always collapsed menu-default" data-target="#menu" data-toggle="collapse" id="menu-button" type="button">
	<span class="icon-bar-always"></span>
	<span class="icon-bar-always"></span>
	<span class="icon-bar-always"></span>
	<span class="icon-bar-always"></span>
</button>

 

Attribute data-toggle="collapse" is collapsing a menu list and data-target="#menu" shows exactly which menu collapsed. These attributes are working on menu icon click.

Relevant code in main.js file is as follows:

$('#menu-button').click(function() {
  $(this).toggleClass('open');
});

 

Menu list can be adjust here:

<ul class="nav navbar-nav navbar-right">
  <li>
    <a href="home-page1.HTML">Home page</a>
  </li>
  <li>
    <a href="blog.HTML">Blog</a>
  </li>
  <li>
    <a href="about2.HTML">About</a>
  </li>
  <li>
    <a href="contact-us.HTML">Contact Us</a>
  </li>
  <li>
    <a href="work-with-us.HTML">Work With Us</a>
  </li>
</ul>

 

The .pos-fixed class is fixing the header at the top of the page while scrolling. If you remove this class, your header stays at the top and becomes hidden when you scroll down

 The .bg-white class has a white background. To change your color, simply add a css rule with your color choice, eg:

.bg-orange { background-color: #FFA500}

or

.bg-green {background-color: #00C300}

 

You can also use class .bg-default to make your header color transparent

Similarly to the default colored page header, you will need to change background image in template.css in .navbar-brand.

For example:

.navbar-brand { background-image: url('../images/bouton-black.png'); }

 

Classes

Available Settings

Description

class="bg-orange pos-fixed"

bg-default, bg-orange, bg-green

bg-default  – Change color on default

bg-orange  – Change color on orange

bg-green – Change color on green

pos-fixed – Make header fixed

 

CSS Structure

Files

Our projects maintain extended file structure with intuitive hierarchy of CSS documents and Bouton is no exception to this rule. Full list of stylesheet files is available below for your review.

You are often able to further customize the template by enabling or disabling many of Bouton's stylesheets as necessary. You can do so by commenting out the code or deleting relevant lines altogether. List of stylesheets available in Bouton follows below:

<link href="./images/favicon.ico" rel="shortcut icon" type="image/ico">
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Customizing styles -->
<link href="assets/plugins/base-sizing.css" rel="stylesheet">
<!-- Owl carousel -->
<link href="assets/plugins/owl-carousel/owl.carousel.css" rel="stylesheet">
<!-- Owl theme -->
<link href="assets/plugins/owl-carousel/owl.theme.css" rel="stylesheet">
<!-- Custom Scrollbar -->
<link href="assets/plugins/jquery.mCusomScrollbar/jquery.mCustomScrollbar.css" rel="stylesheet">
<link href="assets/plugins/photoswipe/photoswipe.css" rel="stylesheet">
<link href="assets/plugins/photoswipe/default-skin/default-skin.css" rel="stylesheet">
<link href="assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/plugins/dropzone/dropzone.css" rel="stylesheet">
<link href="css/template.css" rel="stylesheet">

 

Stylesheet Listing

File Name

Description

bootstrap.min.css

Default bootstrap style

base-sizing.css

This stylesheet holds preset classes that are duplicated for each main media resolution breakpoint (xs , sm , md , lg). This offers immensecustomization power with just a few classes added to a certain block or element

owl.carousel.css

Owl carousel plugin default stylesheet

owl.theme.css

Owl carousel plugin theme stylesheet

jquery.mCustomScrollbar.css

Custom scrollbar plugin

photoswipe.css

Gallery that opens on clicked photo

default-skin.css

Gallery that opens on clicked photo default additional style

font-awesome.css

Font awesome icons

dropzone.css

Dropzone plugin stylesheet based on drag&drop

template.css

The main stylesheet which contains almost everything that the template is styled upon

screen.css

In this file you will find the @media queries and responsive design styles, thats that are importeding in template.css

old-ie.css

This is the file that is included only on IE browsers and fixes bugs

fonts.css

All font which have been used in such projects are included in this file. You can add your own font here

 

Base-sizing.css

This stylesheet holds preset classes that are duplicated for each main media resolution breakpoint (xs , sm , md , lg). This offers immense customization power with just a few classes added to a certain block or element.

 

Margin classes

Example: mt-20 (margin-top:20px), ml-40 (margin-left:40px), mr-60 (margin-right:60px), mb-80 (margin-bottom:80px)

Example on small screens: mt-sm-20 (margin-top:20px), ml-sm-40 (margin-left:40px), mr-sm-60 (margin-right:60px), mb-sm-80 (margin-bottom:80px)

 

Negative Margin classes

(left, right, top, bottom)

They are named “mnl-10” or “mnl-md-10” (margin negative left or margin negative top etc.)

 

Padding Classes

(left, right, top, bottom)

Named “pb-10” or “pb-xs-10” (padding bottom)

 

Font-sizes-presets

(fs-small, fs-xxl etc.)

For smaller screens: fs-sm-small, fs-sm-xxl.

 

Height Sizing Presets

These are height values from 10 to 10 to set responsive height to a block.

Example: hsize-110 or hsize-160 etc.

Example for smaller screens: hsize-md-110 or hsize-sm-110 or hsize-xs-110

  • Float & Float Clearing Presets
  • Width presets
  • Button Padding classes
  • Column list reset class
  • Text align class

We highly recommend you taking a thorough look overall in the stylesheet while keeping in mind what’s inside and what you can use from it.

 

Use of these presets is demonstrated below for your convenience.

<div class="mt-100 mt-sm-50">
  This block will have a 100px margin-top (on any resolution)
  Also because mt-sm-50 is added, the top margin becomes 50px on resolutions smaller than 992px
</div>

or

<h3 class="fs-xxl fs-xs-small">
  This heading has 36px by default (because of the fs-xxl class) but on mobile devices (767px and smaller) the font-size will become 16px. We solved both mobile layout problems and also reduced several lines of code.
</h3>

 

Template.css

This is the main stylesheet which contains almost everything that the template is styled upon. Please keep in mind that Ii will surely update the template so, so we highly recommend that you don't edit this file. instead, please add your own CSS code into custom.css stylesheet. It’s very important not to overwrite your work. The template itself serves as a database of examples of HTML markup and CSS styles applied. In the styles menu pages you can see there is a number of examples of the classes and styles added to the page elements. Please review the file extensively to gain a thorough understanding of its contents before making changes. If you don’t time for such review, you may opt in favor of a simpler copy/paste of the code from existing HTML files and then debugging styles using the Chrome Developer Tools.

 

Screen.css

In this file you will find the @media queries and responsive design styles that are imported into template.css. Please keep in mind that these styles are desktop first and not mobile first. To debug responsive CSS styles, please open the Chrome Developer Tools in a new window and resize your browser. On the right side CSS styles pane, you will notice that the media queries appear and you can easily figure out which of styles are being applied.

 

Old-ie.css

This is the file that is included only for IE browsers with bug fixes where applicable.

 

Fonts.css

All font which have been used in the project are included in this file. You can add your own font here.

 

For large CSS documents we use a library with specific titles and subtitles designed for each specific section and subsection to simplify your searches throughout the code. To find any specific part of the code, please do a search for any of the titles and subtitles, which are listed below in-full for your convenience.

 

JS Structure

When creating the project, we rely both on our own code, as well as on open-source plugins developed by third-parties. In this section, you will find detailed information on relevant plugins and their functions.

…
├── js/
   └── main.js
…

 

Color Schemes

When customizing the template, you will be able to utilize a number of predefined color and buttons schemes. To activate them, please insert the <body> tag with a relevant color or button theme class.

<body class="theme-orange buttons-orange"></div>

 

Colors

Classes

Color

theme-light-pink, buttons-light-pink

 

theme-violet, buttons-violet

 

theme-lilac, buttons-lilac

 

theme-mint, buttons-mint

 

theme-orange, buttons-orange

 

theme-blue, buttons-blue

 

theme-light-blue, buttons-light-blue (default)

 

theme-pink, buttons-pink

 

theme-turquoise, buttons-turquoise

 

theme-coral, buttons-coral

 

theme-grey, buttons-grey

 

theme-green, buttons-green

 

JS Plugins

Plugins are initialized and can be edited in the lower part of the code for each HTML file.

<!-- Javascript -->
<script type="text/javascript" src="assets/plugins/jquery.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/plugins/owl-carousel/owl.carousel.min.js"></script>
<script type="text/javascript" src="assets/plugins/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery.mCusomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript" src="assets/plugins/photoswipe/photoswipe.min.js"></script>
<script type="text/javascript" src="assets/plugins/photoswipe/photoswipe-ui-default.min.js"></script>
<script type="text/javascript" src="assets/plugins/dropzone/dropzone.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if gte IE 6]>
<script src="assets/plugins/HTML5shiv.js"></script>
<script src="assets/plugins/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="js/main.js"></script>

 

IE Compatibility

Our projects are designed to accommodate large audiences with varied preferences, so we adapt every template to ensure correct display even in older browser versions, such as IE8 and others. To ensure proper display of your website in older browsers, please check that the below snippet of code to facilitate compatibility with older browsers:

<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->

<!-- Used to fix visual bugs in older IE browsers to help them make their life easier. -->

<!--[if gte IE 6]>
<link href="css/old-ie.css" rel="stylesheet" />
<![endif]-->

<!-- This is making bootstrap working on IE browsers that doesn’t support it. -->

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if gte IE 6]>
<script src="assets/plugins/HTML5shiv.js"></script>
<script src="assets/plugins/respond.min.js"></script>
<![endif]-->

 

Metatags

In each page’s head section you will see a comprehensive list of meta tags that may come in handy down the road in helping Google crawlers make sense of your web-pages, thus improving your pages' relevance and consequently helping your website rank better in search results. Please uncomment those meta tags that you deem relevant and applicable to your website.

<meta charset="UTF-8">
<meta content="" name="title">

<!-- To control layout on mobile browsers -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1">

<!-- Meta Description -->
<meta content="premium template, ds template, dart simple" name="keywords">
<meta content="Dart Simple Solutions - Premium template" name="description">

<!-- Restrict google from scanning info from Dmoz or YahooDir -->
<meta content="noodp,noydir" name="robots">

<!-- Author markup -->
<meta content="Dart Simple Solutions - Premium Wordpress template" name="author">
<meta content="Dart Simple Solutions" name="copyright">
<!-- /Personal meta tags -->

 

Customization

Our templates provide you with a highly diverse set of customization options that range from predefined color schemes, alternative layouts and UI kits designed to give you as much flexibility as possible

To apply any of the available and fully tested colors, please refer to the "Color Schemes" section of template documentation that offers a detailed description of color customization process.

To customize UI Kits, header and other on-page layouts, please refer to additional snippets of code, which we saved in the "Components" folder, which is available in the zip file along with all other project documents.

 

The folder and its contents appear as follows:

Please use these snippets of code to apply more complex customization options available in the template. All snippets are accompanied by images with a convenient preview of their appearance and structure.

To apply customization availed by any given snippet of code, please open relevant HTML file in notepad or any HTML editor of your choice, and replace a relevant section in HTML files that you wish to customize.

 

As you may have already learned from our documentation, we mark up our HTML files with a convenient structure of tags and comments, which will help you navigate the code and find any section that you may wish to customize. For example, to apply a different header, you are able to overwrite a Header section, which is clearly marked/tagged in our HTML code as follows:

 

SASS with Compass

In our project we used compass to compile sass into css.

 

Getting started

Compass is an open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy. If you're not familiar with Sass, Go to sass-lang.com to learn all about how it works.

 

Installing Compass

Open your preferred terminal; Git Bash and Windows Command Prompt both work fine and run the following steps:

 

Installing Ruby

Compass runs on any computer that has ruby installed.

For more advanced users you may want to install rvm.

 

Setting up the ruby environment:

$ gem update —system

$ gem install compass

 

Now run the following steps in your terminal:

$ gem install compass

 

This will install Compass and Sass too. If you want to verify that compass is installed, run:

$ compass version

 

Compiling your Project

When doing development on your project, you can run the compass command to compile your SASS files.

$ cd /path/to/project
$ compass compile

 

Read more: Compass's Sass-based configuration options.

More command line options

 

Full documentation of all compass commands can be found by running:

$ compass help

 

To see the options available and description for a compass command run:

$ compass help
$ compass help <command>

 

Where <command> is one of the compass commands (E.g. compile)

 

Search selectors

Stylesheets and all variables used in this template

/* Table of Contents
* ==================================================
*
*   #Base(SASS)
*     - Mixins
*     - Main font color
*     - Default colors
*     - Custom colors
*
*   #Template
*     - Header
*     - Footer
*     - Menu
*     - Article - Show 1
*     - Banner - Show 1
*     - Blog
*     - Blog - Bottom Navigation
*     - Blog - Gallery
*     - Blog - Similar News
*     - Blog Details - Comments Show
*     - Blog Details - Comments Slider
*     - Blog Details - Promo
*     - Clothes Grid - Show 1
*     - Contact us
*     - Contacts info - Work with us
*     - Content - About 2
*     - Description - Show 1
*     - Dropbox - Work with us
*     - Gallery
*     - Gallery Grid
*     - Intro
*     - Promo
*     - Promo - About 1
*     - Promo - About 2
*     - Promo - About 3
*     - Promo - Home page 1
*     - Promo - Home page 2
*     - Promo - Home page 3
*     - Promo - Show
*     - Promo - Work with us
*     - Stars rating
*
*   #Customization
*     - Customizer
*     - Theme colors
*     - Buttons colors 
*/

 

Grid Markup

To ensure our templates are 100% responsive, we use Bootstrap grid and framework (http://getbootstrap.com/css/).

 

Miscellaneous Classes

Style Modifications

We regularly update and expand our templates with additional useful CSS classes. Bouton includes base-sizing.css file, which contains many useful features to help you customize your website and even create additional HTML blocks.

Height class presets

These height classes are all in pixels and they can be adjusted in increments of 10, beginning with 0 and ending with 700px. These heights are generally added to the page-header block, which will use your predefined height.

The classes are:

.hsize-reset {height:0 !important;} /* height zero */
.hsize-10 {height:10px;}
.hsize-20 {height:20px;}
 ... 
.hsize-100 {height:100px;}
.hsize-110 {height:110px;}
.hsize-120 {height:120px;}
 ... 
.hsize-200 {height:200px;}
.hsize-210 {height:210px;}
.hsize-220 {height:220px;}
 ... 
.hsize-300 {height:300px;}
.hsize-310 {height:310px;}
.hsize-320 {height:320px;}
 ... 
.hsize-400 {height:400px;}
.hsize-410 {height:410px;}
.hsize-420 {height:420px;}
 ... 
.hsize-500 {height:500px;}
.hsize-510 {height:510px;}
.hsize-520 {height:520px;}
 ... 
.hsize-600 {height:600px;}
.hsize-610 {height:610px;}
.hsize-620 {height:620px;}
... 
.hsize-700 {height:700px;}

 

Breakpoint classes listed below are being used to facilitate valid responsive layout on smaller devices:

.hsize-md-10 or hsize-md-190 or hsize-md-380 for medium screens (1200px) and below, (covering both small and extra small.)

.hsize-sm-10 or hsize-sm-90 or hsize-sm-380 for small screens (991px) and below,  (covering extra small too.)

.hsize-xs-10 or hsize-xs-90 or hsize-xs-380 for extra small screens (767px) and below.

You can thus enjoy different heights for each breakpoint (and for each different device), like class=”hize-290 hsize-md-150″, meaning it’s 290px in height on large desktops and 150px on medium and smaller screens.

 

Width classes presets

Width classes presets are only added as percentages and range from 10 to 100% until full width. The classes are:

The classes are:

.w-10 {width:10% !important;}
.w-20 {width:20% !important;}
.w-30 {width:30% !important;}
.w-40 {width:40% !important;}
.w-50 {width:50% !important;}
.w-60 {width:60% !important;}
.w-70 {width:70% !important;}
.w-80 {width:80% !important;}
.w-90 {width:90% !important;}
.w-100 {width:100% !important;} /* full width */

 

Additional breakpoint classes are available for smaller devices. For example:

.w-md-10 or w-md-90 for medium screens (1200px) and below, covering both small and extra small.

.w-sm-10 or w-sm-90 for small screens (991px) and below, covering extra small too.

.w-xs-10 or w-xs-90 for extra small screens (767px) and below

Please recall that you can have different widths for each breakpoint, such as,class=”w-90 w-md-50″ which means it’s 90% in width on large desktops and 50% (half) on medium and smaller screens.

 

Text align presets

Text align presets are left, right and center

The classes are:

.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}

 

Further breakpoint classes are available for small and extra-small devices. For example:

.text-xs-center {text-align: center;}
.text-xs-right {text-align: right;}
.text-xs-left {text-align: left;}

 

Positions presets

Positions presets can be used to set element’s position.

The classes are:

.pos-init {position: initial !important;}
.pos-fixed {position: fixed !important;}
.pos-abs {position: absolute !important;}
.pos-rel {position: relative !important;}

 

You can also set positions even on responsive breakpoints as you’ll see below.

.pos-xs-fixed {position: fixed !important;}
.pos-sm-abs {position: absolute !important;}
.pos-md-rel {position: relative !important;}

 

Lists with columns

A list can be divided into multiple columns by simply adding the attribute data-columns=”#”. For example a list with 3 columns looks like this:

<ul data-columns="3">
<li>...</li>
....
</ul>

 

Now, if you want to reset the list on smaller screens in a responsive solution, the list can be reset with the classes .list-col-reset-md .list-col-reset-sm .list-col-reset-xs

For example:

<ul class="list-col-reset-sm" data-columns="3">
<li>...</li>
  ....
</ul>

 

In the example above, the list will reset itself (no columns) when the screen width reaches the sm breakpoint which is 991px.

 

Float & Float clearing classes

The following codes are from Bootstrap library but they are very useful to know.

.pull-left {float:left}
.pull-right {float:right}
.pull-none {float:none !important;} /* not in bootstrap, added in this template */

 

Example for small device breakpoint:

.pull-none-sm {float:none !important;}

 

You can also clear the floats even on responsive breakpoints:

.cleft-sm {clear:left;}
.cright-sm {clear:right;}
.cboth-sm {clear:both;}

 

And, for example, on medium breakpoint see below.

.cleft-md {clear:left;}
.cright-md {clear:right;}
.cboth-md {clear:both;}

 

Button paddings

There are 3 padding classes for buttons: .mid-padding .big-padding and .long-padding. They’re commonly used whenever a button should break the pattern of standard button.

.btn.mid-padding-md {padding: 10px 20px; line-height:1;}
.btn.big-padding-md {padding: 15px 30px; line-height:1;}
.btn.long-padding-md {padding-left: 30px; padding-right:30px;}

 

Zooming images

This class makes image zooming on hover. To enable image zooming on hover event, please add .zoom-image to your code.

For example:

<img class="zoom-image" src="./images/show-1/image1.png" alt="image 1">

 

Alternative solution is implemented on JS as follows:

$('.zoom-image').parent().css({
'overflow': 'hidden',
  'display': 'block'
});

 

Text header

.text-heading class is formatting text titles with default style as shown below:

For example:

<p class="text-heading">My Cool Title</p>

 

Which is displayed as follows:

Text preset

.text class is formatting any text in accordance with default style as follows:

For example:

<p class="text">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>

 

Which is displayed as follows:

Button preset

.pust-btn class makes buttons appear with rounded corners as follows:

<a class="push-btn" href=«#">Details</a>

 

Which is displayed as follows:

Custom text color

The .light-blue class has a light-blue color. Of course, if you want to change your color, simply add a css rule with your preferred color eg:

.orange {color: #FFA500}

or

.green {color: #00C300}

 

Margins and paddings

Inside css/base-sizing.css you will find a number of predefined classes. Below we describe margins and paddings.

Predefined classes for margins and paddings are necessary to ensure consistency in spacing while providing customers with sufficient flexibility.

 

Settings for left/right margins, paddings and negative margins are available in the following increments:

5px, 10px, 15px, 20px, 25px, 30px, 35px, 40px, 45px, 50px

60px, 70px, 80px, 90px, 100px, 110px, 120px, 130px, 140px, 150px

 

In addition to the above values, top and bottom margins and paddings can be also set to 200px and 250px.

 

Sample code for margins:

Top: mt-##, example classes: mt-20, mt-40, mt-100 etc.

Bottom: mb-##, eg: mb-20, mb-40, mb-100 etc.

Left: ml-##, eg: ml-20, ml-40, ml-100 etc.

Right: mr-##, eg: mr-20, mr-40, mr-100 etc.

 

Sample code for paddings:

Top: pt-##, example classes: pt-20 , pt-40, pt-100 etc.

Bottom: pb-##, eg: pb-20, pb-40, pb-100 etc.

Left: ml-##, eg: pl-20, pl-40, pl-100 etc.

Right: pr-##, eg: pr-20, pr-40, pr-100 etc.

 

Negative margins can be used for extra complex structures and layouts. As follows from their name, these negative margins will add spaces reversely.

 

Sample code for negative margins:

Top: mnt-##, example classes: mnt-20 , mnt-40, mnt-100 etc.

Bottom: mnb-##, eg: mnb-20, mnb-40, mnb-100 etc.

Left: mnl-##, eg: mnl-20, mnl-40, mnl-100 etc.

Right: mnr-##, eg: mnr-20, mnr-40, mnr-100 etc.

 

Responsive Layout

To facilitate fully adaptive layout, we've introduced extra breakpoint classes that will take over when pages are viewed in certain resolutions.

For example, with large screens just leave the default class, eg: class="mt-100", which will add a top margin of 100px automatically.

For other screens, add the screen’s breakpoint classes, which are: md (medium devices), sm (small devices), xs (extra small devices), which can be combined for greater flexibility:

For medium screens and below: use mt-md-100, for example, class="mt-100 mt-md-60", which means that a 60px top margin will take over the default 100px margin whenever browser width is set to 1200px.

For small screens and below: use mt-sm-100, for example class="mt-100 mt-md-60 mt-sm-40", which means that a 40px top margin will take over the default 100px margin whenever browser width is set to 991px.

For extra small screens and below (eg smartphones): use mt-xs-100, for example class="mt-100 mt-md-60 mt-sm-40 mt-xs-20", which means that a 20px top margin will take over the default 100px margin whenever browser width is set to 767px.

In a nutshell, you are able to control each margin for each browser resolution in a very flexible manner to achieve responsive layout.

The list of all preset classes follows below for your convenience:

 

Classes

Description

hsize-(number)

Change height custom code

w-(number)

Change with custom code

pos-(init/fixed/abs/rel)

Change position custom code

pull-(left/none/right)

Pull element to side

Cleft

Clear everything left sided from element

Cright

Clear everything right sided from element

Cboth

Clear everything both sided from element

zoom-image

Make image zooming on hover

 

Typography Classes

We pay special attention to typography. In our opinion, it is one of the key qualities of an effective template. Bouton comes with a truly impressive package of typography elements, which we cover below.

A number of predefined classes can be found inside the CSS/base-sizing.css stylesheet.

 

Font sizing:

Because there’s a wide variety of popular headings and custom font sizes, we've added predefined sizing classes as follows.

.fs-micro {font-size:9px;}
.fs-xsmall {font-size:11px;}
.fs-normal {font-size:13px;}
.fs-smaller {font-size:15px;}
.fs-small {font-size:16px;}
.fs-m {font-size:18px;}
.fs-l {font-size:20px;}
.fs-xl {font-size:24px;}
.fs-xxl {font-size:32px;}
.fs-larger {font-size:42px;}
.fs-xxxl {font-size:56px;}
.fs-xxxxl {font-size:75px;}
.fs-jumbo {font-size:80px;}
.fs-huge {font-size:120px;}
.fs-crazy {font-size:200px;}

 

These classes can be used as follows:

<h4 class="fs-xxl"> I'm a heading and I'm 32px sized </h4>

 

To facilitate responsive layout and eliminate display errors between various screen sizes, we also introduced breakpoint naming as follows:

.fs-smaller {font-size:15px;}
.fs-md-smaller --//--
.fs-sm-smaller --//--
.fs-xs-smaller --//--

.fs-m {font-size:18px;}
.fs-md-m --//--
.fs-sm-m --//--
.fs-xs-m --//--

.fs-xxl {font-size:32px;}
.fs-md-xxl --//--
.fs-sm-xxl --//--
.fs-xs-xxl --//--

.fs-jumbo {font-size:80px;}
.fs-md-jumbo --//--
.fs-sm-jumbo --//--
.fs-xs-jumbo --//--

 

This ensures consistency of font sizes relative to screen sizes, while maintaining responsive typography.

For example:

<h4 class="fs-xxl fs-md-l fs-sm-small fs-xs-micro">

In'm a heading, Ii normally have 32px on desktops, 20px on medium screens like big tablets, then 16px on small screens like small tablets, and 9px on tiny screens like smartphones. I'm so flexible!! </h4>

 

Classes

Description

text-heading

Apply default heading style

Text

Apply default standard text style

text-(left/center/right)

Align text

push-btn

Apply default button style

orange/green

Change text color

fs-(size)

Change text size

 

Framework used

Twitter Bootstrap v3

http://getbootstrap.com/

jQuery

http://jquery.com/

 

JavaScript-Enabled Menu

Menu events are driven with the code from main.js file listed above. Several recommendations on initializing menu on key events are listed below for your convenience.

Change dropdown menu icon (plus/minus) on menu icon click

$('#menu .dropdown').click(function() {
  iconImage.toggleClass('fa-plus').toggleClass('fa-minus');
});

 

Hide black background on background click when menu is open

blackBackground.click(function() {
  $('#black-background').fadeOut();
  menuButton.toggleClass('open');
  $('#menu ').removeClass('collapse').removeClass('in').addClass('collapsed');
});

 

Close dropdown menu if you click on menu icon and dropdown menu is opened

menuButton.click(function() {
  blackBackground.fadeToggle();
  $(document).mouseup(function(e) {
var container = $("#menu .dropdown-toggle");
    if (!container.is(e.target) &&
      container.has(e.target).length === 0) {
      iconImage.addClass('fa-plus').removeClass('fa-minus');
}
  });
});

 

 

Owl Carousel

This popular touch-enabled jQuery plugin lets you create a beautiful and responsive carousel slider.

https://github.com/OwlCarousel2/OwlCarousel2

 

Template is making use of several sliders with similar settings as follows:

$("#partners-slider").owlCarousel({
    navigation: false, // disable the navigation arrows
    slideSpeed: 300, // set slides speed
    items: 5, // how many items to show
    paginationSpeed: 400, // set slides speed on pagination click
    autoWidth: true, // auto width slide
    responsive: {
      480: {
        items: 1 // show 1 slide if > 480
      },
      768: {
        items: 3 // show 3 slides if > 768
      },
      991: {
        items: 4// show 4 slide if >991
      },
      1920: {
        items: 5// show 5 slides if > 1920
      }
    }
  });
  $("#comment-slider").owlCarousel({
    navigation: true,// enable the navigation arrows
    navigationText: [ // custom navigation arrows
"<i class='fa fa-chevron-left' aria-hidden='true'></i>",
"<i class='fa fa-chevron-right' aria-hidden='true'></i>"
    ],
    pagination: false, // disable pagination
    slideSpeed: 300,
    paginationSpeed: 400,
    singleItem: true // show only one slide
});

 

All Plugins

jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

https://jquery.com/

Bootstrap

Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

http://getbootstrap.com/

Owl Carousel

Touch enabled jQuery plugin that lets you create a beautiful, responsive carousel slider.

https://github.com/OwlCarousel2/OwlCarousel2

Isotope

This is a layout and sorting plugin for various usages, for example, the portfolio items or a simple gallery.

http://isotope.metafizzy.co/

mCustom Scrollbar

This is a highly customizable custom scrollbar jQuery plugin.

https://github.com/malihu/malihu-custom-scrollbar-plugin

PhotoSwipe

This is a JavaScript image gallery for mobile and desktop.

http://photoswipe.com/

Dropzone

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.

http://dropzonejs.com/

HTML5shiv

This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer

https://github.com/aFarkas/HTML5shiv

Respond

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

https://github.com/scottjehl/Respond

 

Functions

For your convenience, we have provided below a list of functions used in the template and of their settings. If you need to extend current functionality of a particular plugin, you may look up additional settings on the developer’s website. Scripts that were written from scratch by our team are listed and described in full in this document.

 

Document ready functions:

  • IE10Compatible - checking your useragent and write result in HTML tag
  • animateImage - animating promo images when you open page
  • promoSlider, clientsSlider, partnersSlider, commentsSlider, showSlider - initialization of sliders with different options
  • parallaxBox - moving blocks with different speed with women that depends on your mouse
  • parallaxWoman - setting parallax effect for the block, for example:

    <div class="woman" data-type="background" data-speed="10">;

    Data-type attribute identifies JS element, while data-speed attribute sets speed for parallax animation.
  • minifiedHeader - minifying header when scrolled 5 or more pixels
  • initSwipeGallery - initializes of PhotoSwipe gallery
  • initDropzone - initializes of Dropzone plugin

 

Window load functions:

  • $("#comments-show aside").mCustomScrollbar({ theme: "minimal" }) - set custom scrollbar for commentsblock
  • initIsotope1 - initialization of isotope gallery with filter
  • initIsotope2 - initialization of isotope with filter only

 

Window scroll functions:

  • animateImage - animating promo images when you open page;

 

On click functions:

  • leaveComment - animates comments block on open event
  • closeComments - animates comments block on close event
  • showModal - opens modal window
  • hideModal - hides modal window
  • nextButtonFilter - changes active class to clicked element on posts filter
  • nextButtonPage - changes active class to clicked element on pagination
  • var iconImage = $('#menu .dropdown-toggle i');
  • var menuButton = $('#menu-button');
  • var blackBackground = $(‘#black-background');

PSD

The Bouton template will suit any creative agency or a photo studio with its customizable theme and layout. Below, you will find a detailed outline of our new template.

  • 01_Home Page.psd
  • 02_Home Page.psd
  • 03_Home Page.psd
  • 04_Blog.psd
  • 05_Blog Details.psd
  • 06_Show.psd
  • 07_About.psd
  • 08_About.psd
  • 09_About.psd
  • 10_Contact Us.psd
  • 11_Work with us.psd
  • 12_404.psd
  • 13_Shortcode.psd 
  • 14_Settings-template.psd
  • 15_Home Page with Settings.psd
  • 16_Blank Page.psd

Overview:

  1. Each PSD mockup is built using a 12-column Bootstrap layout grid which implements adaptive website design.
  2. The layouts are set up with
    1. 1800 points × adaptive height
    2. Resolution: 72 Pixel / Inch

To display the layout better, we recommend to use Adobe Photoshop with typographic units of measurements, specifically, points instead of pixels. Points are a more universal unit of measurement that works for any document.

The layout has an intuitive structure that makes it easy to use. All elements are located in dedicated groups and subgroups:

  1. Grid – Bootstrap layout
  2. Header – Website headers, including logos, navbars, Contact us section, etc.
  3. Content – The main body of the website, including the content elements: sidebars, posts, blog, etc.
  4. Footer – includes the website navigation, logo and copyright notice.
  5. Background – includes all patterns used throughout the website.

Elements in groups are highly nested. This will help you work with the template efficiently. You won't be desperately searching for an element or layer you need ever again.

  1. The template uses graphic elements licensed under CC0 public license, which allows their use for demo purposes. We meticulously numbered every image used in the template, and included a neat Excel file with references to sources so you can download all content at your own convenience. . You can also customize the template with your own images.
  2. The template uses graphic elements from these free stock photo sites:
    1. https://www.pexels.com/
    2. https://pixabay.com/
    3. http://librestock.com/
  3. The template uses Segoe UI font family.
    https://www.azfonts.net/families/segoe-ui.html
  4. All the typographic elements, from fonts to headers, are located in a separate document, 13_Shortcode.psd. This file includes every typographic element used in the website design.
  5. You are able to edit PSD documents with Adobe Photoshop and with Adobe Illustrator for SVG, EPS and Smart Object documents with Adobe Illustrator. Most layers are editable and customizable.
  6. The template uses icons from flaticon.com and http://fontawesome.io/. You can change default icons to your own icons with the help of these online resources.
  7. All the shapes, layers and groups can be edited in Full Edit mode.
  8. The template is not layer locked.

 

Functionality

Eye-catching presentation of your ideas, your projects and your company always comes first with Bouton. Layers and groups of elements are logically nested, allowing you to modify styles and graphics easily. With Bouton, you can prototype a webpage and have a tangible result in seconds.

Template's diverse functionality allows you to use the template for your blog, personal webpage, or creative company website. Design the feel and style you need with built-in web pages.

PSD mockup is using a standard 12-column Bootstrap grid, to help facilitate conversion to HTML down the road. The Bootstrap framework is at the core of the layout. You will be able to easily extend the website functionality by using Bootstrap methods and codebase as well as by editing the underlying code once you start integrating your new website.

 

Customization PSD

You can customize the website concept by modifying all elements listed in the customizer of our demo. Pick a predefined color scheme or choose from a variety of preconfigured layouts. If you want to change the menu structure or other building blocks of your website, we suggest that you first make changes to the PSD layouts before implementing them in your website with our code or Boostrap framework code. Bouton is also available in HTML where all the coding work has already been done for you, helping you breeze through customization with comfort.

 

Credits

JavaScript

CSS

Images

 

Demo Content

To comply with licensing rules applicable to images used in our demos, they are replaced with placeholders. However, to assist you in re-populating your website with demo content, we carefully number every placeholder and provide URL for every image in the Credits section of product documentation. Links to all images used in the demo are available for your reference in the Graphics Content Excel file attached to the Credits section of template documentation.

Download List