Smaze HTML Documentation by Themes Awesome v1.0

Smaze - Multipurpose Material Design

Created: 1 March 2015
By: Themes Awesome
Support: Ask support access HERE

Thank you for purchasing Smaze HTML. If you have any questions that aren't covered in the documentation, then please send me a PM and I'll be happy to help. Thanks again!

Table of Contents




Smaze HTML - top

Smaze

Smaze is



Tips

Use Firebug or Chrome Developer Tools.

Do not start from scratch, use an existing page from the demo and modify it to learn how it works.

Getting an error message? Someone might have seen it too, try a google search for a quick fix.

Explore the live demo for pages ideas and sample code.

Files Structure

			- css (Template CSS)
			    
			- img (All Images)

			- js (Template JS)
			    - views (JS to run in specific pages. I.E: Home or Contact Us)

Html Structure

The template is based on Bootstrap Framework - http://twitter.github.com/bootstrap/

The default Bootstrap grid system utilizes 12 columns, making for a 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

Create a .row and add the appropriate number of .span* columns.
 

HTML Markup
			<div class="row">
			    <div class="span12">
			        Level 1 column
			        <div class="row">
			            <div class="span6">Level 2</div>
			            <div class="span6">Level 2</div>
			        </div>
			    </div>
			</div>

 

If you need more information, please visit this site: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

Head Markup (Default)
		<head>
			<meta http-equiv="content-type" content="text/html; charset=utf-8" />
			<!-- stylesheets
			=============================================== -->
			<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
			<link rel="stylesheet" href="css/plugin.css" type="text/css" />
			<link rel="stylesheet" href="css/font.css" type="text/css" />
			<link rel="stylesheet" href="style.css" type="text/css" />
			<link rel="stylesheet" href="css/responsive.css" type="text/css" />

			<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
			
			<!-- External JavaScripts
			=============================================== -->
			<script type="text/javascript" src="js/jquery.js"></script>
			<script type="text/javascript" src="js/plugin.js"></script>

			<!-- Document Title
			=============================================== -->
			<title>Smaze | Multipurpose HTML Template</title>
		</head>
Head Markup With Revolution Slider
		<head>
			<meta http-equiv="content-type" content="text/html; charset=utf-8" />
			<!-- stylesheets
			=============================================== -->
			<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
			<link rel="stylesheet" href="css/plugin.css" type="text/css" />
			<link rel="stylesheet" href="css/font.css" type="text/css" />
			<link rel="stylesheet" href="style.css" type="text/css" />
			<link rel="stylesheet" href="css/responsive.css" type="text/css" />
			<!-- revolution slider -->
			<link rel="stylesheet" href="css/extralayers.css" type="text/css" />
			<link rel="stylesheet" href="css/navstylechange.css" type="text/css" />

			<!-- External Stylesheets
			============================================= -->
			<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
			<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

			<!-- External JavaScripts
			=============================================== -->
			<script type="text/javascript" src="js/jquery.js"></script>
			<script type="text/javascript" src="js/plugin.js"></script>

			<!-- Document Title
    		=============================================== -->
			<title>Smaze | Multipurpose HTML Template</title>
		</head>
Template

Smaze have 8 template

Footer Script Markup
<footer class="site-footer">
            <div class="container">

                <!-- Footer Top
                ============================================= -->
                <div class="footer-top">
                    <div class="logo-footer wow fadeIn">
                        <img src="img/logo.png" alt="Smaze Logo">
                    </div>
                    <p class="subtitle-footer wow fadeIn">
                        Smaze is the one of the leading creative digital agency in Melobourne, We think our work speaks for itself.
                         We craft be spoke websites, digital tools, info-graphics and logos to 
                         bring your message to colorful design We think our work speaks for itself. 
                         We craft bespoke websites, digital tools, info-graphics and logos to bring websites, digital tools, info-graphics
                    </p>
                    <a class="btn wow fadeIn">Contact
                    <div class="footer-social">
                        <ul class="social-profile">
                            <li class="twitter"><a href="#"><i class="icon icon-social-twitter"</i></a></li>
                            <li class="facebook"><a href="#"><i class="icon icon-social-facebook"></i></a></li>
                            <li class="youtube"><a href="#"><i class="icon icon-social-youtube"></i></a></li>
                            <li class="dribble"><a href="#"><i class="icon icon-social-dribbble"></i></a></li>
                        </ul>
                    </div>
                </div>
                <!-- footer-top end -->
            </div>
            <!-- container -->
        
            <!-- Footer Bottom
            ============================================= -->
            <div class="footer-bottom clearfix">
                <div class="copyright-footer">
                    <p>Copyright © 2015, All Rights Reserved <a href="http://www.themesawesome.com/">Themes Awesome</a>
                    </p>
                </div>
            </div>
            <!-- footer-bottom end -->

        </footer>

CSS Structure

The organization of the CSS is one of our priorities.
These are the CSS file we're using in the template:

		- style.css - (Generic styles, resets & normalization)

		- bootstrap.min.css - (Responsive grid styles)

		- font.css - (The font & icon used on the site)

		- plugin.css - (This stylesheet contains any js plug-in.)

		- extralayers.css, navstylechange.css (External stylesheet from Revolution Slider)

		- responsive.css ( for media query)

		- ripple.css.map

Javascript

jQuery - is a Javascript library that greatly reduces the amount of code that you must write.
For more information, please visit http://www.jquery.com/

The initialization of the elements, libs and features is made by the file theme.js, in the JS folder.
Take a look at the "build" function to see what it does.

Customization & Styles

Fonts

To change the embedded font, please take a look in the head part of the website and you will find this tag:

We use montserratregular, montserratbold, open_sansregular font family in Smaze. You can check the font at root > fonts > font.css

To change the font, first go to http://www.google.com/webfonts choose a font and use the generated code. Or install it manually with convert the download zipped font to fontsquirel.com

Slider

Flexslider is the slider you'll find in the content.
Flexslider is a simple slideshow script but with lots of options. You can find more documentation here http://www.woothemes.com/flexslider/

We included in the template CSS/JS a few customizations in order to show it's variations.

The variations of the slider is defined by the CSS Class and in the "data-plugin-options" attribute, which extends the default plugin options.

You can add the following classes:


- flexslider-simple

- flexslider-top-title

- flexslider.unstyled


HTML Markup: Testimonial Slider
<section class="testimonial-builder">
					
	<div class="testimonial-wrap">

            <div class="testimonial-item flexslider">
                <ul class="slides">
                    <li>
                        <div class="testimoni-author">
                            <img src="img/ava/ava4.jpg" alt="ava1">
                            <h4 class="author">Kane Lee <cite>CEO of DH Agency</cite></h4>
                        </div>
                        <p class="testimonial-text">
                        Aenean adipiscing non urna at viverra. Ut lobortis mattis massa. Fusce faucibus dignissim ligula, 
                        eu vestibulum enim feugiat ut. Pellentesque fringilla non sem sed interdum. Integer gravida aliquam condimentum.
                        </p>
                        <i class="smaze icon-quote-right testi-quote"></i>
                    </li>
                    <li>
                        <div class="testimoni-author">
                            <img src="img/ava/ava2.jpg" alt="ava2">
                            <h4 class="author">Yon Ohi <cite>CEO</cite></h4>
                        </div>
                        <p class="testimonial-text">
                        Aenean adipiscing non urna at viverra. Ut lobortis mattis massa. Fusce faucibus dignissim ligula, 
                        eu vestibulum enim feugiat ut. Pellentesque fringilla non sem sed interdum. Integer gravida aliquam condimentum. </p>
                        <i class="smaze icon-quote-right testi-quote"></i>
                    </li>
                    <li>
                        <div class="testimoni-author">
                            <img src="img/ava/ava3.jpg" alt="ava3">
                            <h4 class="author">Yon Ohi <cite>MARKETING MANAGER</cite></h4>
                        </div>
                        <p class="testimonial-text">
                        Aenean adipiscing non urna at viverra. Ut lobortis mattis massa. Fusce faucibus dignissim ligula, 
                        eu vestibulum enim feugiat ut. Pellentesque fringilla non sem sed interdum. Integer gravida aliquam condimentum.</p> 
                        <i class="smaze icon-quote-right testi-quote"></i>
                    </li>
                </ul>
            </div>
            <!-- Testimonial Item end -->
        </div>

</section>

JS: Testimonial Slider
			$(window).load(function () {
            		$(".testimonial-wrap .flexslider").flexslider({
                		animation: "slide",
                		controlNav: false,
                		prevText: "",
                		nextText: "",
                		directionNav: true,
                		smoothHeight: false,
                		slideshowSpeed: 5000
            		});
        		});

HTML Markup: Portfolio
<!-- Portfolio Section
============================================= -->
<section class="portfolio">
    
    <div class="container">
        <h3 class="title-with-bord wow fadeIn">Portfolio</h3>
        <h2 class="thetitle wow fadeIn">
             Case Studio Gallery of Our Works
         </h2>
        <p class="subtitle wow fadeIn">
            We think our work speaks for itself. We craft bespoke websites, digital tools, 
            info-graphics and logos to bring your message to colorful design
        </p>

    </div>
    
        <!-- Portfolio Filter
        ============================================= -->
        <ul id="portfolio-filter" class="wow fadeIn clearfix">

            <li class="activeFilter"><a href="#" data-filter="*">All</a></li>
            <li><a href="#" data-filter=".web-design">Web Design</a></li>
            <li><a href="#" data-filter=".illustrations">Branding</a></li>
            <li><a href="#" data-filter=".ui-elements">UI Elements</a></li>
            <li><a href="#" data-filter=".graphics">Graphics</a></li>

        </ul><!-- #portfolio-filter end -->

        <!-- Portfolio Items
        ============================================= -->
        <div id="portfolio" class="wow fadeIn clearfix">
            
            <article class="portfolio-item illustrations">
            <div class="wow fadeIn">
            <a href="portfolio-single.html">
                <div class="portfolio-image">
                    <img src="img/portfolio1.jpg" alt="Portfolio 1">
                    <div class="portfolio-overlay">
                        <div class="portfolio-desc">
                            <h3 class="title-with-bord">Ladder Case</h3>
                            <span>Branding</span>
                        </div>
                    </div>
                </div>
            </a>
            </div>
            </article>

        </div><!-- #portfolio end -->

        <!-- infinite load button start -->
        <div id="load-more-portfolio"><a href="index-infinite-2.html"></a></div>
        <button id="load-infinite">Load More</button>
        <!-- infinite load button end -->


                        
            </section>

JS: Portfolio
jQuery(window).load(function(){
                var $container = $('#portfolio');
                $container.isotope({ transitionDuration: '0.65s', layoutMode: 'packery', });
                $('#portfolio-filter a').click(function(){
                    $('#portfolio-filter li').removeClass('activeFilter');
                    $(this).parent('li').addClass('activeFilter');
                    var selector = $(this).attr('data-filter');
                    $container.isotope({ filter: selector });
                    return false;
                });

                $(window).resize(function() {
                    $container.isotope('layout');
                });

                    // Infinite Scroll
                    $container.infinitescroll({
                        loading: {
                    finishedMsg: 'There is no more',
                    msgText: 'loading',
                    speed: 'normal'
                        },

                    state: {
                    isDone: false
                    },
                        navSelector  : '#load-more-portfolio', 
                        nextSelector : '#load-more-portfolio a', 
                        itemSelector : 'article.portfolio-item',

                    },
                    // Infinite Scroll Callback
                    function( newElements ) {
                $container.isotope( 'appended', $( newElements ) );
                var t = setTimeout( function(){ $container.isotope('layout'); }, 2000 );

                    });

                $(window).unbind();
                  $("#load-infinite").click(function(){
                        $container.infinitescroll('retrieve');
                         return false;

                    });
            });

HTML Markup: Blog

<!-- Blog Items
============================================= -->
<div id="blog-block">

<article class="blog-item wide-blog has-post-thumbnail ">
<div class="blog-wrap wow fadeInUp">
    <img src="img/blog1.png" alt="Portfolio 1" />
    <div class="blog-overlay">
       <div class="blog-desc">
           <div class="blog-date">20 MAR, 2015</div>
           <h3 class="blog-title">DIGITAL DESIGN FOR THE PHYSICAL WORLD</h3>
           <p class="blog-excerpt">We think our work speaks for itself. We craft bespoke websites, digital tools,
            info-graphics and logos to bring websites, digital tools, info-graphics</p>
           <a href="single-post.html" class="read-more btn">Full Story</a>
       </div>
   </div>
</div>
</article>

</div>
<!-- blog-block end -->

JS: Blog
			jQuery(window).load(function(){
                        var $containerBlog = $('#blog-block');
                        $containerBlog.isotope({ 
                            transitionDuration: '0.65s',
                                layoutMode: 'packery',
                        });
                        $(window).resize(function() {
                            $containerBlog.isotope('layout');
                        });

                    });

Responsive

The template supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions.


Here's what's included: 

Label: Large display
Layout width: 1200px and up
Column width: 70px
Gutter width: 30px

Label: Default
Layout width: 980px and up
Column width: 60px
Gutter width: 20px

Label: Portrait tablets
Layout width: 768px and above
Column width: 42px
Gutter width: 20px

Label: Phones to tablets
Layout width: 767px and below
Column width: Fluid columns, no fixed widths

Label: Phones
Layout width: 480px and below
Column width: Fluid columns, no fixed widths


If you need more information, please visit this site: http://twitter.github.com/bootstrap/scaffolding.html#responsive

Source & Credits

The images included in preview are for demonstration purposes and should always be replaced with your own work.


Once again, thank you for purchasing this theme. Customer satisfaction is our #1 priority, which is why we always endeavour to provide the best service we can. We’re only an email away if you ever need us!

Themes Awesome Team

Go To Table of Contents