### Brushed - Responsive One Page Template

#### By Alessio Atzeni - www.alessioatzeni.com

### Welcome To Brushed Template Documentation.

Firstly, a huge thanks for purchasing this theme, your support is truly appreciated!

This document covers the installation and use of this theme and often reveals answers to common problems and issues - read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to pose them in the dedicated support section.

### Template Features

- Elegant & Minimal Flat Design
- HTML5 & CSS3
- Fully Responsive Design
- Retina Display Ready
- Filterable Portfolio
- Ajax/PHP Contact Form
- Twitter Widget
- Shortcodes (Columns, Buttons, Toggles, Tabs, Alert & much more...)
- 200+ Custom Icons and Font Icons (Character Map Included)
- All files are well commented
- Crossbrowser Compatible with IE9+, Firefox, Safari, Opera, Chrome
- Layered PSDs for Customisation
- Extensive Documentation

### Brushed - Responsive One Page Template

#### By Alessio Atzeni - www.alessioatzeni.com

### Installing Template.

After unzip the download pack, you'll found a Template Folder with all the files.

You can view this Template in any browser, you can display or edit the Template without an internet connection.

The only section that will not work is the Contact Section which contains PHP code and requires a server enviroment for send messages, and FancyBox Video not loaded in local enviroment.

Now open your FTP Client (like Filezilla) and upload the content of the Template on your server root.

Once the files are done uploading go to www.yourdomainname.com/index.html

### Brushed - Responsive One Page Template

#### By Alessio Atzeni - www.alessioatzeni.com

### HTML Structure

This Template has a Responsive layout and is based on the Bootstrap Framework. For more information about this visit Bootstrap Scaffolding.

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

### Basic Grid HTML

For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

                                                                    ...
                                                                    ...

### Nesting Columns

To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

                                                                        Level 1 column

                                                                            Level 2
                                                                            Level 2

### Brushed - Responsive One Page Template

#### By Alessio Atzeni - www.alessioatzeni.com

### HEAD/CSS Structure

These are the css files that are loaded into templates in Head Section.

### Google Web Fonts

By default, the template loads this font from Google Web Font Services, you can change the font with the one that suits you best.

Remember to change the font into style.css

                                                        /* style.css / Line 26 */

                                                        body{
                                                            background:#2F3238;
                                                            color:#7F8289;
                                                            font-weight:300;
                                                            font-size:16px;
                                                            font-family: 'Titillium Web', sans-serif;
                                                            line-height:28px;
                                                        }

### Google Analytics

You can place your analytics code to check your stats or replace the following code with your code to check the statistics.

    													<script type="text/javascript">

                                                          var _gaq = _gaq || [];
                                                          _gaq.push(['_setAccount', 'Insert Your Code']);
                                                          _gaq.push(['_trackPageview']);

                                                          (function() {
                                                            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                                                            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                                                            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
                                                          })();

                                                        </script>

### Brushed - Responsive One Page Template

#### By Alessio Atzeni - www.alessioatzeni.com

### JS Structure

These are the JS files that are loaded into templates in end of the Body Section.

Only Modernizr.js is loaded in Head Section.

    														<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
                                                            <script src="_include/js/bootstrap.min.js"></script>
                                                            <script src="_include/js/supersized.3.2.7.min.js"></script>
                                                            <script src="_include/js/waypoints.js"></script>
                                                            <script src="_include/js/waypoints-sticky.js"></script>
                                                            <script src="_include/js/jquery.isotope.js"></script>
                                                            <script src="_include/js/jquery.fancybox.pack.js"></script>
                                                            <script src="_include/js/jquery.fancybox-media.js"></script>
                                                            <script src="_include/js/jquery.tweet.js"></script>
                                                            <script src="_include/js/plugins.js"></script>
                                                            <script src="_include/js/main.js"></script>

This is the complete code for main.js, is responsible for all events in the Template. You can edit the following file according to your requirements.

####

    jQuery(function($){

    var BRUSHED = window.BRUSHED || {};

    /* ==================================================
       Mobile Navigation
    ================================================== */
    /* Clone Menu for use later */
    var mobileMenuClone = $('#menu').clone().attr('id', 'navigation-mobile');

    BRUSHED.mobileNav = function(){
    	var windowWidth = $(window).width();

    	// Show Menu or Hide the Menu
    	if( windowWidth <= 979 ) {
    		if( $('#mobile-nav').length > 0 ) {
    			mobileMenuClone.insertAfter('#menu');
    			$('#navigation-mobile #menu-nav').attr('id', 'menu-nav-mobile');
    		}
    	} else {
    		$('#navigation-mobile').css('display', 'none');
    		if ($('#mobile-nav').hasClass('open')) {
    			$('#mobile-nav').removeClass('open');
    		}
    	}
    }

    // Call the Event for Menu
    BRUSHED.listenerMenu = function(){
    	$('#mobile-nav').on('click', function(e){
    		$(this).toggleClass('open');

    		if ($('#mobile-nav').hasClass('open')) {
    			$('#navigation-mobile').slideDown(500, 'easeOutExpo');
    		} else {
    			$('#navigation-mobile').slideUp(500, 'easeOutExpo');
    		}
    		e.preventDefault();
    	});

    	$('#menu-nav-mobile a').on('click', function(){
    		$('#mobile-nav').removeClass('open');
    		$('#navigation-mobile').slideUp(350, 'easeOutExpo');
    	});
    }

    /* ==================================================
       Slider Options
    ================================================== */

    BRUSHED.slider = function(){
    	$.supersized({
    		// Functionality
    		slideshow               :   1,			// Slideshow on/off
    		autoplay				:	1,			// Slideshow starts playing automatically
    		start_slide             :   1,			// Start slide (0 is random)
    		stop_loop				:	0,			// Pauses slideshow on last slide
    		random					: 	0,			// Randomize slide order (Ignores start slide)
    		slide_interval          :   12000,		// Length between transitions
    		transition              :   1, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
    		transition_speed		:	300,		// Speed of transition
    		new_window				:	1,			// Image links open in new window/tab
    		pause_hover             :   0,			// Pause slideshow on hover
    		keyboard_nav            :   1,			// Keyboard navigation on/off
    		performance				:	1,			// 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
    		image_protect			:	1,			// Disables image dragging and right click with Javascript

    		// Size & Position
    		min_width		        :   0,			// Min width allowed (in pixels)
    		min_height		        :   0,			// Min height allowed (in pixels)
    		vertical_center         :   1,			// Vertically center background
    		horizontal_center       :   1,			// Horizontally center background
    		fit_always				:	0,			// Image will never exceed browser width or height (Ignores min. dimensions)
    		fit_portrait         	:   1,			// Portrait images will not exceed browser height
    		fit_landscape			:   0,			// Landscape images will not exceed browser width

    		// Components
    		slide_links				:	'blank',	// Individual links for each slide (Options: false, 'num', 'name', 'blank')
    		thumb_links				:	0,			// Individual thumb links for each slide
    		thumbnail_navigation    :   0,			// Thumbnail navigation
    		slides 					:  	[			// Slideshow Images
    											{image : '_include/img/slider-images/image01.jpg', title : 'Brushed', thumb : '', url : ''},
    											{image : '_include/img/slider-images/image02.jpg', title : 'Brushed', thumb : '', url : ''},
    											{image : '_include/img/slider-images/image03.jpg', title : 'Brushed', thumb : '', url : ''},
    											{image : '_include/img/slider-images/image04.jpg', title : 'Brushed', thumb : '', url : ''}
    									],

    		// Theme Options
    		progress_bar			:	0,			// Timer for each slide
    		mouse_scrub				:	0

    	});

    }

    /* ==================================================
       Navigation Fix
    ================================================== */

    BRUSHED.nav = function(){
    	$('.sticky-nav').waypoint('sticky');
    }

    /* ==================================================
       Filter Works
    ================================================== */

    BRUSHED.filter = function (){
    	if($('#projects').length > 0){
    		var $container = $('#projects');

    		$container.isotope({
    		  // options
    		  animationEngine: 'best-available',
    		  itemSelector : '.item-thumbs',
    		  layoutMode : 'fitRows'
    		});

    		// filter items when filter link is clicked
    		var $optionSets = $('#options .option-set'),
    			$optionLinks = $optionSets.find('a');

    		  $optionLinks.click(function(){
    			var $this = $(this);
    			// don't proceed if already selected
    			if ( $this.hasClass('selected') ) {
    			  return false;
    			}
    			var $optionSet = $this.parents('.option-set');
    			$optionSet.find('.selected').removeClass('selected');
    			$this.addClass('selected');

    			// make option object dynamically, i.e. { filter: '.my-filter-class' }
    			var options = {},
    				key = $optionSet.attr('data-option-key'),
    				value = $this.attr('data-option-value');
    			// parse 'false' as false boolean
    			value = value === 'false' ? false : value;
    			options[ key ] = value;
    			if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
    			  // changes in layout modes need extra logic
    			  changeLayoutMode( $this, options )
    			} else {
    			  // otherwise, apply new options
    			  $container.isotope( options );
    			}

    			return false;
    		});
    	}
    }

    /* ==================================================
       FancyBox
    ================================================== */

    BRUSHED.fancyBox = function(){
    	if($('.fancybox').length > 0 || $('.fancybox-media').length > 0 || $('.fancybox-various').length > 0){

    		$(".fancybox").fancybox({
    				padding : 0,
    				beforeShow: function () {
    					this.title = $(this.element).attr('title');
    					this.title = '' + this.title + '' + '' + $(this.element).parent().find('img').attr('alt') + '';
    				},
    				helpers : {
    					title : { type: 'inside' },
    				}
    			});

    		$('.fancybox-media').fancybox({
    			openEffect  : 'none',
    			closeEffect : 'none',
    			helpers : {
    				media : {}
    			}
    		});
    	}
    }

    /* ==================================================
       Contact Form
    ================================================== */

    BRUSHED.contactForm = function(){
    	$("#contact-submit").on('click',function() {
    		$contact_form = $('#contact-form');

    		var fields = $contact_form.serialize();

    		$.ajax({
    			type: "POST",
    			url: "_include/php/contact.php",
    			data: fields,
    			dataType: 'json',
    			success: function(response) {

    				if(response.status){
    					$('#contact-form input').val('');
    					$('#contact-form textarea').val('');
    				}

    				$('#response').empty().html(response.html);
    			}
    		});
    		return false;
    	});
    }

    /* ==================================================
       Twitter Feed
    ================================================== */

    BRUSHED.tweetFeed = function(){
    	var valueTop = -64; // Margin Top Value

        $("#ticker").tweet({
              username: "Bluxart", // Change this with YOUR ID
              page: 1,
              avatar_size: 0,
              count: 10,
    		  template: "{text}{time}",
    		  filter: function(t){ return ! /^@\w+/.test(t.tweet_raw_text); },
              loading_text: "loading ..."
    	}).bind("loaded", function() {
    	  var ul = $(this).find(".tweet_list");
    	  var ticker = function() {
    		setTimeout(function() {
    			ul.find('li:first').animate( {marginTop: valueTop + 'px'}, 500, 'linear', function() {
    				$(this).detach().appendTo(ul).removeAttr('style');
    			});
    		  ticker();
    		}, 5000);
    	  };
    	  ticker();
    	});

    }

    /* ==================================================
       Menu Highlight
    ================================================== */

    BRUSHED.menu = function(){
    	$('#menu-nav, #menu-nav-mobile').onePageNav({
    		currentClass: 'current',
        	changeHash: false,
        	scrollSpeed: 750,
        	scrollOffset: 30,
        	scrollThreshold: 0.5,
    		easing: 'easeOutExpo',
    		filter: ':not(.external)'
    	});
    }

    /* ==================================================
       Next Section
    ================================================== */

    BRUSHED.goSection = function(){
    	$('#nextsection').on('click', function(){
    		$target = $($(this).attr('href')).offset().top-30;

    		$('body, html').animate({scrollTop : $target}, 750, 'easeOutExpo');
    		return false;
    	});
    }

    /* ==================================================
       GoUp
    ================================================== */

    BRUSHED.goUp = function(){
    	$('#goUp').on('click', function(){
    		$target = $($(this).attr('href')).offset().top-30;

    		$('body, html').animate({scrollTop : $target}, 750, 'easeOutExpo');
    		return false;
    	});
    }

    /* ==================================================
    	Scroll to Top
    ================================================== */

    BRUSHED.scrollToTop = function(){
    	var windowWidth = $(window).width(),
    		didScroll = false;

    	var $arrow = $('#back-to-top');

    	$arrow.click(function(e) {
    		$('body,html').animate({ scrollTop: "0" }, 750, 'easeOutExpo' );
    		e.preventDefault();
    	})

    	$(window).scroll(function() {
    		didScroll = true;
    	});

    	setInterval(function() {
    		if( didScroll ) {
    			didScroll = false;

    			if( $(window).scrollTop() > 1000 ) {
    				$arrow.css('display', 'block');
    			} else {
    				$arrow.css('display', 'none');
    			}
    		}
    	}, 250);
    }

    /* ==================================================
       Thumbs / Social Effects
    ================================================== */

    // Fix Hover on Touch Devices
    BRUSHED.utils = function(){

    	$('.item-thumbs').bind('touchstart', function(){
    		$(".active").removeClass("active");
          	$(this).addClass('active');
        });

    	$('.image-wrap').bind('touchstart', function(){
    		$(".active").removeClass("active");
          	$(this).addClass('active');
        });

    	$('#social ul li').bind('touchstart', function(){
    		$(".active").removeClass("active");
          	$(this).addClass('active');
        });

    }

    /* ==================================================
       Accordion
    ================================================== */

    BRUSHED.accordion = function(){
    	var accordion_trigger = $('.accordion-heading.accordionize');

    	accordion_trigger.delegate('.accordion-toggle','click', function(event){
    		if($(this).hasClass('active')){
    			$(this).removeClass('active');
    		   	$(this).addClass('inactive');
    		}
    		else{
    		  	accordion_trigger.find('.active').addClass('inactive');
    		  	accordion_trigger.find('.active').removeClass('active');
    		  	$(this).removeClass('inactive');
    		  	$(this).addClass('active');
    	 	}
    		event.preventDefault();
    	});
    }

    /* ==================================================
       Toggle
    ================================================== */

    BRUSHED.toggle = function(){
    	var accordion_trigger_toggle = $('.accordion-heading.togglize');

    	accordion_trigger_toggle.delegate('.accordion-toggle','click', function(event){
    		if($(this).hasClass('active')){
    			$(this).removeClass('active');
    		   	$(this).addClass('inactive');
    		}
    		else{
    		  	$(this).removeClass('inactive');
    		  	$(this).addClass('active');
    	 	}
    		event.preventDefault();
    	});
    }

    /* ==================================================
       Tooltip
    ================================================== */

    BRUSHED.toolTip = function(){
        $('a[data-toggle=tooltip]').tooltip();
    }

    /* ==================================================
    	Init
    ================================================== */

    BRUSHED.slider();

    $(document).ready(function(){
    	// Call placeholder.js to enable Placeholder Property for IE9
    	Modernizr.load([
    	{
    		test: Modernizr.placeholder,
    		nope: '_include/js/placeholder.js',
    		complete : function() {
    				if (!Modernizr.placeholder) {
    						Placeholders.init({
    						live: true,
    						hideOnFocus: false,
    						className: "yourClass",
    						textColor: "#999"
    						});
    				}
    		}
    	}
    	]);

    	// Preload the page with jPreLoader
    	$('body').jpreLoader({
    		splashID: "#jSplash",
    		showSplash: true,
    		showPercentage: true,
    		autoClose: true,
    		splashFunction: function() {
    			$('#circle').delay(250).animate({'opacity' : 1}, 500, 'linear');
    		}
    	});

    	BRUSHED.nav();
    	BRUSHED.mobileNav();
    	BRUSHED.listenerMenu();
    	BRUSHED.menu();
    	BRUSHED.goSection();
    	BRUSHED.goUp();
    	BRUSHED.filter();
    	BRUSHED.fancyBox();
    	BRUSHED.contactForm();
    	BRUSHED.tweetFeed();
    	BRUSHED.scrollToTop();
    	BRUSHED.utils();
    	BRUSHED.accordion();
    	BRUSHED.toggle();
    	BRUSHED.toolTip();
    });

    $(window).resize(function(){
    	BRUSHED.mobileNav();
    });

    });

### Brushed - Responsive One Page Template

#### By Alessio Atzeni - www.alessioatzeni.com

### Slider Settings

We see the main settings of the slider and how it works.

For more information I advise you to view the documentation on Supersized Plugin.

### HTML Syntax

This is the html syntax of the slide.

- The class "overlay" is a simple mask in css you can delete it if you want.
- The class "slider-text" is used to enter text, the text will be inserted later in the file main.js.
- The class "control-nav" is used for the control navigation arrow.
- The ID "slide-list" is used for the bullet navigation.
- The ID "next-section" is used to achieve the favorite section with a scroll effect.

### CSS

These are the CSS properties of the slider.

                                                        /* ==================================================
                                                           Home Slider
                                                        ================================================== */

                                                        #home-slider {
                                                            position: relative;
                                                            overflow: hidden;
                                                            height: 100%;
                                                        }

                                                        #home-slider .overlay {
                                                            position: absolute;
                                                            width: 100%;
                                                            height: 100%;
                                                            background: #26292E;
                                                            opacity: 0.7;
                                                            filter: alpha(opacity=70);
                                                            z-index: 0;
                                                        }

                                                        #home-slider .slider-text {
                                                            position: absolute;
                                                            left: 50%;
                                                            top: 50%;
                                                            margin: -150px 0 0 -585px;
                                                            width: 1170px;
                                                            height: 250px;
                                                            text-align: center;
                                                            z-index: 2;
                                                        }

                                                        #home-slider #slidecaption {
                                                            width: 100%;
                                                            line-height: 250px;
                                                            margin: 0;
                                                            text-align: center;
                                                            text-shadow: none;
                                                        }

                                                        #home-slider .slide-content {
                                                            font-size: 60px;
                                                            color: #FFFFFF;
                                                            letter-spacing: -3px;
                                                            text-transform: uppercase;
                                                        }

                                                        #home-slider .control-nav {
                                                            position: absolute;
                                                            width: 100%;
                                                            background: #2F3238;
                                                            height: 50px;
                                                            bottom: 0;
                                                            z-index: 2;
                                                        }

                                                        #home-slider #nextslide,
                                                        #home-slider #prevslide {
                                                            background-image: none;
                                                            background-color: #26292E;
                                                            display: inline-block;
                                                            margin: 0;
                                                            position: relative;
                                                            top: 0;
                                                            left: 0;
                                                            right: 0;
                                                            width: 50px;
                                                            height: 50px;
                                                            opacity: 1;
                                                            filter: alpha(opacity=100);

                                                            -webkit-transition: background 0.1s linear 0s;
                                                               -moz-transition: background 0.1s linear 0s;
                                                                 -o-transition: background 0.1s linear 0s;
                                                                    transition: background 0.1s linear 0s;
                                                        }

                                                        #home-slider #nextslide {
                                                            margin-left: -3px;
                                                        }

                                                        #home-slider #nextsection {
                                                            float:right;
                                                        }

                                                        #home-slider #nextslide:hover,
                                                        #home-slider #prevslide:hover {
                                                            background-color:#DE5E60;
                                                        }

                                                        #home-slider #nextslide i,
                                                        #home-slider #prevslide i {
                                                            font-size: 16px;
                                                            color: #FFFFFF;
                                                            position: absolute;
                                                            left: 50%;
                                                            top: 50%;
                                                            margin-top: -7px;
                                                            line-height: 1em;
                                                        }

                                                        #home-slider #nextslide i {
                                                            margin-left: -8px;
                                                        }

                                                        #home-slider #prevslide i {
                                                            margin-left: -9px;
                                                        }

                                                        #home-slider ul#slide-list {
                                                            top: 50%;
                                                            padding: 0;
                                                            margin:-6px 0 0 0;
                                                        }

                                                        #home-slider ul#slide-list li {
                                                            margin-right: 12px;
                                                        }

                                                        #home-slider ul#slide-list li:last-child {
                                                            margin-right: 0;
                                                        }

                                                        #home-slider ul#slide-list li a {
                                                            background-color: #6E7074;
                                                            background-image: none;
                                                            width: 12px;
                                                            height: 12px;

                                                            -webkit-border-radius: 999px;
                                                            -moz-border-radius: 999px;
                                                            border-radius: 999px;

                                                            -webkit-transition: background 0.1s linear 0s;
                                                               -moz-transition: background 0.1s linear 0s;
                                                                 -o-transition: background 0.1s linear 0s;
                                                                    transition: background 0.1s linear 0s;
                                                        }

                                                        #home-slider ul#slide-list li a:hover {
                                                            background-color: #FFFFFF;
                                                        }

                                                        #home-slider ul#slide-list li.current-slide a,
                                                        #home-slider ul#slide-list li.current-slide a:hover {
                                                            background-color:#DE5E60;
                                                        }

                                                        #home-slider #nextsection {
                                                            background-color: #26292E;
                                                            margin: 0;
                                                            position: relative;
                                                            float:right;
                                                            width: 50px;
                                                            height: 50px;

                                                            -webkit-transition: background 0.1s linear 0s;
                                                               -moz-transition: background 0.1s linear 0s;
                                                                 -o-transition: background 0.1s linear 0s;
                                                                    transition: background 0.1s linear 0s;
                                                        }

                                                        #home-slider #nextsection:hover {
                                                            background-color:#DE5E60;
                                                        }

                                                        #home-slider #nextsection i {
                                                            font-size: 16px;
                                                            color: #FFFFFF;
                                                            position: absolute;
                                                            left: 50%;
                                                            top: 50%;
                                                            margin-top: -7px;
                                                            line-height: 1em;
                                                        }

                                                        #home-slider #nextsection i {
                                                            margin-left: -7px;
                                                        }

### JS

This is the portion of the js script that affects the slider, as you can see you can change the default parameters of the slider. Enter the path for images, insert text, a thumb (assuming you want a slider with the thumb clickable) and a URL for a possible link. This does not include any slider thumb or link, then you should see the plugin documentation in the case and act on the CSS.

                                                        /* ==================================================
                                                           Slider Options
                                                        ================================================== */

                                                        BRUSHED.slider = function(){
                                                            $.supersized({
                                                                // Functionality
                                                                slideshow               :   1,			// Slideshow on/off
                                                                autoplay				:	1,			// Slideshow starts playing automatically
                                                                start_slide             :   1,			// Start slide (0 is random)
                                                                stop_loop				:	0,			// Pauses slideshow on last slide
                                                                random					: 	0,			// Randomize slide order (Ignores start slide)
                                                                slide_interval          :   12000,		// Length between transitions
                                                                transition              :   1, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                                                                transition_speed		:	300,		// Speed of transition
                                                                new_window				:	1,			// Image links open in new window/tab
                                                                pause_hover             :   0,			// Pause slideshow on hover
                                                                keyboard_nav            :   1,			// Keyboard navigation on/off
                                                                performance				:	1,			// 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                                                                image_protect			:	1,			// Disables image dragging and right click with Javascript

                                                                // Size & Position
                                                                min_width		        :   0,			// Min width allowed (in pixels)
                                                                min_height		        :   0,			// Min height allowed (in pixels)
                                                                vertical_center         :   1,			// Vertically center background
                                                                horizontal_center       :   1,			// Horizontally center background
                                                                fit_always				:	0,			// Image will never exceed browser width or height (Ignores min. dimensions)
                                                                fit_portrait         	:   1,			// Portrait images will not exceed browser height
                                                                fit_landscape			:   0,			// Landscape images will not exceed browser width

                                                                // Components
                                                                slide_links				:	'blank',	// Individual links for each slide (Options: false, 'num', 'name', 'blank')
                                                                thumb_links				:	0,			// Individual thumb links for each slide
                                                                thumbnail_navigation    :   0,			// Thumbnail navigation
                                                                slides 					:  	[			// Slideshow Images
                                                                                                    {image : '_include/img/slider-images/image01.jpg', title : 'Brushed', thumb : '', url : ''},
                                                                                                    {image : '_include/img/slider-images/image02.jpg', title : 'Brushed', thumb : '', url : ''},
                                                                                                    {image : '_include/img/slider-images/image03.jpg', title : 'Brushed', thumb : '', url : ''},
                                                                                                    {image : '_include/img/slider-images/image04.jpg', title : 'Brushed', thumb : '', url : ''}
                                                                                            ],

                                                                // Theme Options
                                                                progress_bar			:	0,			// Timer for each slide
                                                                mouse_scrub				:	0

                                                            });

                                                        }

### Brushed - Responsive One Page Template

#### By Alessio Atzeni - www.alessioatzeni.com

### Portfolio Settings

The portfolio section is composed of a Isotope Plugin for the filer and FancyBox Plugin for the Image and Media.

For complete documentation about this plugins I recommend you take a look at their official documentation.

Isotope Documentation and FancyBox Documentation.

### Filter Options

This is the general syntax, you can add or remove options. Always remember to give a unique value for each option available.

### Work Thumbs

This is the syntax for the proper functioning of the portfolio.

This is the basic structure of the portfolio.

- First you need to assign "item-thumbs" the class that will be used for the filter in this case I assigned "design".
- Assign to a tag the class fancybox for image or fancybox-media for your media (video, iframe, etc.).
- You can add data-fancybox-group="your_name" to a tag if you want a gallery of images or videos.
- You can add a Title and Description to your media.

                                                                [...]

### Brushed - Responsive One Page Template

#### By Alessio Atzeni - www.alessioatzeni.com

### Contact Form

This is a PHP Script for sending messages to your email, you should edit email default to your email to start receive messages.

                                                        // Go To File ( _include/php/contact.php ) in main folder and change email :
                                                        // Customize this parameters

                                                        $admin_email = 'youremail@yourdomain.com'; 	// Your Email
    													$message_min_length = 5; 					// Min Message Length

### Brushed - Responsive One Page Template

#### By Alessio Atzeni - www.alessioatzeni.com

### Shortcodes

This is a list of the shortcodes on this template. All these shortcodes are based on Bootstrap Framework.

You can modify these elements in the shortcodes.css file.

### Accordion

                                                                Design

                                                                Content...

                                                            Development

                                                                Content...

                                                            UX/UI

                                                                Content...

### Toggle

                                                                Responsive

                                                                Content...

                                                            Logo Design

                                                                Content...

                                                            Branding

                                                                Content...

### Alerts

####

                                                    ×
                                                    Oh snap! Change a few things up and try submitting again.

                                                    ×
                                                    Warning! Best check yo self, you're not looking too good.

                                                    ×
                                                    Oh snap! Change a few things up and try submitting again.

                                                    ×
                                                    Heads up! This alert needs your attention, but it's not super important.

                                                    ×
                                                    Well done! You successfully read this important alert message.

                                                    ×
                                                    Warning!
                                                    Best check yo self, you're not...

### Tabs

                                                           Content...

                                                           Content...

                                                            Content...

### BlockQuote

                                                    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

                                                        John Bostic

### Tooltip

                                                Maecenas neque diam, auctor ut tellus. Etiam enim lacus sem.

### Information Block

###

                                                        NEW Brushed- Responsive One Page Template
                                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam.
                                                        Purchase

### Responsive Video

### Buttons

                                                Mini
                                                Small
                                                Medium
                                                Large

### Icons

You can see the complete list of all the icons (242 Icons) and their specific class inside the "Source Files" folder.

### Brushed - Responsive One Page Template

#### By Alessio Atzeni - www.alessioatzeni.com

### Scripts

These are the scripts used in the template with their related link for documentation.

- jQuery
- Modernizr
- Bootstrap Framework
- SuperSized
- jPreloader
- jQuery Easing
- jQuery Scroll To
- jQuery One Page Navi
- FancyBox
- Tweet
- Isotope Filter

### Brushed - Responsive One Page Template

#### By Alessio Atzeni - www.alessioatzeni.com

### Scripts

Again, thank you for purchasing this Template!

If you have any questions that are beyond the scope of this document, feel free to pose them in the dedicated support section.

If you are interested you can follow me on:

- Twitter
- Dribbble
- Forrst
- Behance
- Facebook
- Google Plus
- Linked In
- ThemeForest
- Zerply