Flatness - personal blog template

Template Structure

All template files have fixed structure consisting of preloader, navbar, content, social block, Instagram block and footer as shown below:

Page Head

Page head contains metadata, javascript and css files:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="assets/images/icon.png">

    <title>Flatness</title>
    <meta name="description" content="">

    <!-- START: styles -->
    <link href='https://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="assets/flatness/bootstrap/css/bootstrap.min.css" id="css-flatness-bootstrap" />
    <link rel="stylesheet" type="text/css" href="bower_components/fontawesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="bower_components/ionicons/css/ionicons.min.css" />
    <link rel="stylesheet" type="text/css" href="bower_components/slick.js/slick/slick.css" />
    <link rel="stylesheet" type="text/css" href="bower_components/slick.js/slick/slick-theme.css" />
    <link rel="stylesheet" type="text/css" href="bower_components/photoswipe/dist/photoswipe.css" />
    <link rel="stylesheet" type="text/css" href="bower_components/photoswipe/dist/default-skin/default-skin.css" />
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap-sweetalert/lib/sweet-alert.css" />
    <link rel="stylesheet" type="text/css" href="bower_components/ladda-bootstrap/dist/ladda-themeless.min.css" />
    <link rel="stylesheet" type="text/css" href="assets/flatness/css/flatness.min.css" id="css-flatness" />
    <!-- END: styles -->

    <!--[if lt IE 9]>
      <script src="bower_components/html5shiv/dist/html5shiv.min.js"></script>
    <![endif]-->
</head>

Top Navbar

Top navbar have bootstrap navbar structure with some modifications (submenus). You can use logo as text and also image:

<!-- START: navbar -->
<nav class="navbar navbar-flatness">
    <div id="navbar" class="navbar-collapse collapse navbar-table">
        <ul class="nav navbar-nav navbar-cell-left">
            <li class="dropdown dropdown-hover ">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Home <span class="caret"></span></a>
                <div class="dropdown-menu">
                    <ul>
                        <li><a href="index.html">Landing</a>
                        </li>
                        <li class="dropdown-submenu ">
                            <a href="posts-classic.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Classic Posts</a>
                            <div class="dropdown-menu">
                                <ul>
                                    <li><a href="posts-classic.html">Right Sidebar</a>
                                    </li>
                                    <li><a href="posts-classic-sidebar-left.html">Left Sidebar</a>
                                    </li>
                                    <li><a href="posts-classic-full-width.html">Full Width</a>
                                    </li>
                                    <li><a href="posts-classic-boxed.html">Boxed</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="dropdown-submenu ">
                            <a href="posts-grid-full-width.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Grid Posts</a>
                            <div class="dropdown-menu">
                                <ul>
                                    <li><a href="posts-grid.html">Right Sidebar</a>
                                    </li>
                                    <li><a href="posts-grid-sidebar-left.html">Left Sidebar</a>
                                    </li>
                                    <li><a href="posts-grid-full-width.html">Full Width</a>
                                    </li>
                                    <li><a href="posts-grid-boxed.html">Boxed</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="posts-list.html">List Posts</a>
                        </li>
                        <li><a href="posts-parallax.html">Parallax Posts</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="dropdown dropdown-hover ">
                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Posts <span class="caret"></span></a>
                <div class="dropdown-menu">
                    <ul>
                        <li class="dropdown-submenu ">
                            <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Layouts</a>
                            <div class="dropdown-menu">
                                <ul>
                                    <li><a href="single-post-default.html">Right Sidebar</a>
                                    </li>
                                    <li><a href="single-post-slider.html">Left Sidebar</a>
                                    </li>
                                    <li><a href="single-post-video.html">Full Width</a>
                                    </li>
                                    <li><a href="single-post-gallery.html">Boxed</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="single-post-default.html">Default Post</a>
                        </li>
                        <li><a href="single-post-quote.html">Quote Post</a>
                        </li>
                        <li><a href="single-post-link.html">Link Post</a>
                        </li>
                        <li><a href="single-post-music.html">Music Post</a>
                        </li>
                        <li><a href="single-post-slider.html">Slider Post</a>
                        </li>
                        <li><a href="single-post-gallery.html">Gallery Post</a>
                        </li>
                        <li><a href="single-post-video.html">Video Post</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-cell">
            <li>
                <a class="navbar-brand" href="index.html">
                    <span class="text-primary">Flat</span>ness
                    <!-- <img src="assets/images/logo.png" width="210"> -->
                </a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-cell-right">
            <li class="dropdown dropdown-hover ">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Gallery <span class="caret"></span></a>
                <div class="dropdown-menu">
                    <ul>
                        <li class="">
                            <a href="gallery.html">With Spaces</a>
                        </li>
                        <li class="">
                            <a href="gallery-no-spaces.html">No Spaces</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="dropdown dropdown-hover ">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Features <span class="caret"></span></a>
                <div class="dropdown-menu">
                    <ul>
                        <li>
                            <a href="bootstrap.html">Bootstrap</a>
                        </li>
                        <li class="">
                            <a href="about.html">About Me</a>
                        </li>
                        <li class="">
                            <a href="contact.html">Contact</a>
                        </li>
                        <li>
                            <a href="documentation">Documentation</a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="off-canvas" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
</nav>
<!-- END: navbar -->

Body Section

Body section contains scripts, preloader, navbar, social block, instagram block, footer menu, footer:

<!--
    Available classes:
    navbar-fixed     - fixed navbar on top screen
    navbar-small     - small navbar height
    navbar-collapsed - collapsed navbar to burger
-->
<body data-offset="100">

    <!-- DEMO SETTINGS: remove it on production -->
    <script type="text/javascript" src="assets/flatness/js/flatness-demo.js"></script>
    <!-- DEMO SETTINGS: remove it on production -->

    <!-- START: facebook API -->
    <div id="fb-root"></div>
    <script>
        (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
    <!-- END: facebook API -->

    <!-- START: preloader -->
    <div class="page-preloader">
        <div class="wrap">
            <div class="shadow"></div>
            <div class="box"></div>
        </div>
    </div>
    <!-- END: preloader -->

    <!-- START: navbar -->
    <nav class="navbar navbar-flatness">
        ...
    </nav>
    <!-- END: navbar -->

    <!-- START: content -->
    Your content here...

    <section>
        Content inside section
    </section>
    <!-- END: content -->

    <!-- START: footer social -->
    <section class="footer-social inverted">
        <div class="container">
            <ul class="social-icons">
                <li>
                    <a href="http://themeforest.net/user/_nk?ref=_nK" target="_blank"><i class="fa fa-instagram"></i> Instagram</a>
                </li>
                <li>
                    <a href="http://themeforest.net/user/_nk?ref=_nK" target="_blank"><i class="fa fa-youtube"></i> Youtube</a>
                </li>
                <li>
                    <a href="http://themeforest.net/user/_nk?ref=_nK" target="_blank"><i class="fa fa-twitter"></i> Twitter</a>
                </li>
                <li>
                    <a href="http://themeforest.net/user/_nk?ref=_nK" target="_blank"><i class="fa fa-pinterest"></i> Pinterest</a>
                </li>
            </ul>
        </div>
    </section>
    <!-- END: footer social -->

    <!-- START: footer instagram -->
    <section class="view footer-instagram">
        <div class="overlay">
            <h3 class="footer-instagram-name">@flowers.inspiration</h3>
            <a class="btn btn-primary btn-lg btn-rounded" target="_blank" href="https://instagram.com/flowers.inspiration/">Follow Me</a>
        </div>
        <div class="row no-gutter">
            <div class="col-md-2 col-xs-3">
                <a href="https://instagram.com/p/8oGfUeo2EE/">
                    <img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e35/12105088_793752460737354_320708202_n.jpg" alt="Instagram Image">
                </a>
            </div>
            <div class="col-md-2 col-xs-3">
                <a href="https://instagram.com/p/8i5wuEo2MH/">
                    <img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e35/11364004_1496169094009944_1955035207_n.jpg" alt="Instagram Image">
                </a>
            </div>
            <div class="col-md-2 col-xs-3">
                <a href="https://instagram.com/p/8h8i7VI2MZ/">
                    <img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e35/12070896_873755139386647_364172857_n.jpg" alt="Instagram Image">
                </a>
            </div>
            <div class="col-md-2 col-xs-3">
                <a href="https://instagram.com/p/8fUw_SI2B6/">
                    <img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/e35/12081140_1486253981702730_137831107_n.jpg" alt="Instagram Image">
                </a>
            </div>
            <div class="col-md-2 col-xs-3">
                <a href="https://instagram.com/p/8bKv7wI2Hg/">
                    <img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e35/12105213_421093001411498_405526409_n.jpg" alt="Instagram Image">
                </a>
            </div>
            <div class="col-md-2 col-xs-3">
                <a href="https://instagram.com/p/8YkyGDI2GT/">
                    <img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e35/12145014_1634342356855422_1538879706_n.jpg" alt="Instagram Image">
                </a>
            </div>
            <div class="col-md-2 col-xs-3">
                <a href="https://instagram.com/p/8V_JO8I2IQ/">
                    <img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e35/12093663_460410584131714_1089191464_n.jpg" alt="Instagram Image">
                </a>
            </div>
            <div class="col-md-2 col-xs-3">
                <a href="https://instagram.com/p/8TeQIaI2Lf/">
                    <img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e35/11950677_104836633205682_1581948831_n.jpg" alt="Instagram Image">
                </a>
            </div>
            <div class="col-md-2 col-xs-3">
                <a href="https://instagram.com/p/8P_AekI2CT/">
                    <img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xaf1/t51.2885-15/e35/11934852_1702569796643218_1929912567_n.jpg" alt="Instagram Image">
                </a>
            </div>
            <div class="col-md-2 col-xs-3">
                <a href="https://instagram.com/p/8LjFS1o2M0/">
                    <img src="https://igcdn-photos-d-a.akamaihd.net/hphotos-ak-xfa1/t51.2885-15/e35/11887145_537265263098307_2004073800_n.jpg" alt="Instagram Image">
                </a>
            </div>
            <div class="col-md-2 col-xs-3">
                <a href="https://instagram.com/p/8JBtf2o2F-/">
                    <img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/e35/11848895_102939710061650_329719733_n.jpg" alt="Instagram Image">
                </a>
            </div>
            <div class="col-md-2 col-xs-3">
                <a href="https://instagram.com/p/8GVC7So2Mq/">
                    <img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e35/11899612_1500055036986773_531979992_n.jpg" alt="Instagram Image">
                </a>
            </div>
        </div>
    </section>
    <!-- END: footer instagram -->

    <!-- START: footer menu -->
    <section class="inverted footer-menu">
        <div class="container">
            <a class="footer-brand" href="index.html">
                <span class="text-primary">Flat</span>ness
                <!-- <img src="assets/images/logo.png" width="181"> -->
            </a>
            <ul class="nav">
                <li><a href="about.html">About Me</a>
                </li>
                <li class="separator">/</li>
                <li><a href="contact.html">Contact</a>
                </li>
            </ul>
        </div>

        <div class="scroll-top">
            <i class="fa fa-angle-up"></i>
        </div>
    </section>
    <!-- END: footer menu -->

    <!-- START: footer -->
    <footer class="footer">
        <div class="container">
            <div class="col-sm-12 text-center">
                <em>All Rights Reserved © <a href="http://themeforest.net/user/_nk?ref=_nK">nK</a></em>
            </div>
        </div>
    </footer>
    <!-- END: footer -->

    <!-- START: scripts -->
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="bower_components/modernizr/modernizr.js"></script>
    <script type="text/javascript" src="assets/flatness/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="bower_components/jarallax/jarallax/jarallax.js"></script>
    <script type="text/javascript" src="bower_components/slick.js/slick/slick.min.js"></script>
    <script type="text/javascript" src="bower_components/masonry/dist/masonry.pkgd.min.js"></script>
    <script type="text/javascript" src="bower_components/photoswipe/dist/photoswipe.min.js"></script>
    <script type="text/javascript" src="bower_components/photoswipe/dist/photoswipe-ui-default.min.js"></script>
    <script type="text/javascript" src="bower_components/bootstrap-sweetalert/lib/sweet-alert.min.js"></script>
    <script type="text/javascript" src="bower_components/ladda-bootstrap/dist/spin.min.js"></script>
    <script type="text/javascript" src="bower_components/ladda-bootstrap/dist/ladda.min.js"></script>
    <script type="text/javascript" src="bower_components/bootstrap-validator/dist/validator.min.js"></script>
    <script type="text/javascript" src="bower_components/theia-sticky-sidebar/js/theia-sticky-sidebar.js"></script>
    <script type="text/javascript" src="bower_components/smoothscroll-for-websites/SmoothScroll.js"></script>
    <script type="text/javascript" src="assets/flatness/js/flatness.min.js"></script>
    <!-- END: scripts -->

    <!-- START: init flatness -->
    <script>
        if(typeof flatness !== 'undefined') {
            flatness.init({
                stickySidebar:    true,  // enable sticky sidebar
                navbarMax:        200,   // max height of navbar
                navbarMin:        100     // min height of navbar
            });
        }
    </script>
    <!-- END: init flatness -->

</body>

Layouts

Fixed navbar

By default Flatness have fixed navbar. You can see navbar-fixed classname on <body> tag:

<body class="navbar-fixed">

If you want static navbar, just remove this classname from body tag.

Small navbar

By default Flatness have large navbar. If you want small navbar, just add navbar-small classname to body tag:

<body class="navbar-small">

Collapsed navbar

If you want collapsed navbar (like on mobile), just add navbar-collapsed classname to body tag:

<body class="navbar-collapsed">

Sticky sidebar

By default Flatness have sticky navbar. To make it static you can remove flatness-sticky-sidebar classname from sidebar. This is sidebar:

<div class="flatness-sticky-sidebar">...</div>

Contact Form

Flatness have working AJAX contact form. You can check demo on this page contact.html. This is form HTML code:

<form action="contact.php" type="POST" role="form" class="flatness-form flatness-ajax" data-toggle="validator">
    <h2 class="form-title">Drop me a line</h2>

    <div class="form-group row">
        <div class="form-group col-sm-6">
            <input type="text" name="name" class="form-control" id="formName" placeholder="Name" required>
        </div>
        <div class="form-group col-sm-6">
            <input type="email" name="email" class="form-control" id="formEmail" placeholder="Email" required>
        </div>
    </div>
    <div class="form-group">
        <textarea class="form-control" name="message" id="formMessage" placeholder="Message" rows="5" required></textarea>
    </div>
    <button type="submit" class="btn btn-default btn-block">Submit</button>
</form>

Before start, you need to configure contact.php file. First of all you need to add your email:

$to = '<your email here>';

Next step - remove demo cap:

// remove it if yor php fincally configured
die('This is demo message from PHP');

Thats all. Your form now ready to use.

Fonts

Flatness uses Google fonts. For default text used Merriweather font, for display headings used Courgette font. Loaded in header.

<link href='https://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>

Themes

Flatness comes with 2 color themes: Dark and Light. To change theme, you need to use specified styles file.

Dark:

<link rel="stylesheet" type="text/css" href="assets/flatness/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/flatness/css/flatness.min.css" />

Light:

<link rel="stylesheet" type="text/css" href="assets/flatness/bootstrap/css/bootstrap-light.min.css" />
<link rel="stylesheet" type="text/css" href="assets/flatness/css/flatness-light.min.css" />

New Page

To create a new page, you can use blank.html which provides basic page layout.

LESS

Flatness uses Less for development. You can change predefined colors in files: src/flatness/less/_variables.less or for light version src/flatness/less/_variables-light.less.

Main file for compile Less:

Dark: src/flatness/less/flatness.less
Light: src/flatness/less/flatness-light.less

All references see in folder src/flatness/less/parts/

Bootstrap file for compile Less:

Dark: src/bootstrap/less/flatness.less
Light: src/bootstrap/less/flatness-light.less

Plugins Usage

Choose plugin:

FontAwesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Plugin Page: http://fortawesome.github.io/Font-Awesome/

CSS Files:

<link rel="stylesheet" type="text/css" href="bower_components/fontawesome/css/font-awesome.min.css" />

JavaScript Files:

No JavaScript

Usage Example:

<i class="fa fa-html5"></i>

Ionicons

The premium icon font for Ionic Framework. 100% free and open source. MIT Licensed.

Plugin Page: http://ionicons.com/

CSS Files:

<link rel="stylesheet" type="text/css" href="bower_components/ionicons/css/ionicons.min.css" />

JavaScript Files:

No JavaScript

Usage Example:

<span class="ion-fireball"></span>

Slick

The last carousel you'll ever need

Plugin Page: http://kenwheeler.github.io/slick/

CSS Files:

<link rel="stylesheet" type="text/css" href="bower_components/slick.js/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="bower_components/slick.js/slick/slick-theme.css" />

JavaScript Files:

<script type="text/javascript" src="bower_components/slick.js/slick/slick.min.js"></script>

Usage Example:

<div class="flatness-carousel" data-size="5">
    <div class="item pl-20 pr-20">
        <a href="#"><img src="assets/images/partner-logo-1-light.png"></a>
    </div>
    <div class="item pl-20 pr-20">
        <a href="#"><img src="assets/images/partner-logo-2-light.png"></a>
    </div>
    <div class="item pl-20 pr-20">
        <a href="#"><img src="assets/images/partner-logo-3-light.png"></a>
    </div>
    <div class="item pl-20 pr-20">
        <a href="#"><img src="assets/images/partner-logo-4-light.png"></a>
    </div>
    <div class="item pl-20 pr-20">
        <a href="#"><img src="assets/images/partner-logo-5-light.png"></a>
    </div>
    <div class="item pl-20 pr-20">
        <a href="#"><img src="assets/images/partner-logo-6-light.png"></a>
    </div>
    <div class="item pl-20 pr-20">
        <a href="#"><img src="assets/images/partner-logo-7-light.png"></a>
    </div>
    <div class="item pl-20 pr-20">
        <a href="#"><img src="assets/images/partner-logo-8-light.png"></a>
    </div>
</div>


<div class="flatness-slider" data-slick='{"autoplay": true, "autoplaySpeed": 8000}'>
    <div class="item" style="background-image: url(assets/images/image1.jpg);">
        <div>
            <div class="post">
                <h2 class="post-title display-1 mt-0"><a href="single-post-slider.html">Spring came</a></h2>
                <div class="post-meta">
                    <a href="#" class="post-category">Lifestyle</a>
                    <span class="separator">-</span>
                    <span class="post-author">Amanda Ray</span>
                    <span class="separator">-</span>
                    <span class="post-date">1st March 2015</span>
                </div>
            </div>
        </div>
    </div>
    <div class="item" style="background-image: url(assets/images/image4.jpg);">
        <div>
            <div class="post">
                <h2 class="post-title display-1 mt-0"><a href="single-post-default.html">It's a good day</a></h2>
                <div class="post-meta">
                    <a href="#" class="post-category">News</a>
                    <span class="separator">-</span>
                    <span class="post-author">Amanda Ray</span>
                    <span class="separator">-</span>
                    <span class="post-date">1st May 2015</span>
                </div>
            </div>
        </div>
    </div>
</div>

PhotoSwipe

JavaScript gallery, no dependencies.

Plugin Page: http://photoswipe.com/

CSS Files:

<link rel="stylesheet" type="text/css" href="bower_components/photoswipe/dist/photoswipe.css" />
<link rel="stylesheet" type="text/css" href="bower_components/photoswipe/dist/default-skin/default-skin.css" />

JavaScript Files:

<script type="text/javascript" src="bower_components/photoswipe/dist/photoswipe.min.js"></script>
<script type="text/javascript" src="bower_components/photoswipe/dist/photoswipe-ui-default.min.js"></script>

Usage Example:

<div class="post-gallery photoswipe-gallery row small-gutter vertical-gutter">
    <div class="item col-md-4 col-xs-6">
        <a class="hover-effect-1 img-rounded" href="assets/images/image2.jpg" data-size="1920x1280">
            <img src="assets/images/image2_720x480.jpg" alt="">
            <span class="overlay"><i class="ion-ios-search"></i></span>
        </a>
    </div>
    <div class="item col-md-4 col-xs-6">
        <a class="hover-effect-1 img-rounded" href="assets/images/image6.jpg" data-size="1440x2010">
            <img src="assets/images/image6_720x1005.jpg" alt="">
            <span class="overlay"><i class="ion-ios-search"></i></span>
        </a>
    </div>
    <div class="item col-md-4 col-xs-6">
        <a class="hover-effect-1 img-rounded" href="assets/images/image3.jpg" data-size="1920x1280">
            <img src="assets/images/image3_720x480.jpg" alt="">
            <span class="overlay"><i class="ion-ios-search"></i></span>
        </a>
    </div>
</div>

Masonry

Cascading grid layout library

Plugin Page: http://masonry.desandro.com/

CSS Files:

No CSS

JavaScript Files:

<script type="text/javascript" src="bower_components/masonry/dist/masonry.pkgd.min.js"></script>

Usage Example:

<div class="masonry row small-gutter vertical-gutter">
    <div class="item col-md-4 col-xs-6">
        <a class="hover-effect-1 img-rounded" href="assets/images/image2.jpg" data-size="1920x1280">
            <img src="assets/images/image2_720x480.jpg" alt="">
            <span class="overlay"><i class="ion-ios-search"></i></span>
        </a>
    </div>
    <div class="item col-md-4 col-xs-6">
        <a class="hover-effect-1 img-rounded" href="assets/images/image6.jpg" data-size="1440x2010">
            <img src="assets/images/image6_720x1005.jpg" alt="">
            <span class="overlay"><i class="ion-ios-search"></i></span>
        </a>
    </div>
    <div class="item col-md-4 col-xs-6">
        <a class="hover-effect-1 img-rounded" href="assets/images/image3.jpg" data-size="1920x1280">
            <img src="assets/images/image3_720x480.jpg" alt="">
            <span class="overlay"><i class="ion-ios-search"></i></span>
        </a>
    </div>
    <div class="item col-md-4 col-xs-6">
        <a class="hover-effect-1 img-rounded" href="assets/images/image4.jpg" data-size="1920x1280">
            <img src="assets/images/image4_720x480.jpg" alt="">
            <span class="overlay"><i class="ion-ios-search"></i></span>
        </a>
    </div>
</div>

Jarallax

jQuery background parallax plugin used for adding a smooth parallax scrolling effect to background images using CSS3 transforms (translate3d). With a background-position fallback when CSS transforms are not supported.

Plugin Page: https://github.com/nk-o/jarallax

CSS Files:

No CSS

JavaScript Files:

<script type="text/javascript" src="bower_components/jarallax/jarallax/jarallax.js"></script>

Usage Example:

<section class="view-parallax" style="background-image: url(assets/images/image4.jpg);">
    <div>
        <div class="post">
            <h2 class="post-title display-1 mt-0"><a href="single-post-default.html">It's a good day</a></h2>
            <div class="post-meta">
                <a href="#" class="post-category">News</a>
                <span class="separator">-</span>
                <span class="post-author">Amanda Ray</span>
                <span class="separator">-</span>
                <span class="post-date">1st May 2015</span>
            </div>
        </div>
    </div>
</section>

Credits

Plugins

Bootstrap – http://getbootstrap.com/
jQuery – http://jquery.com/
FontAwesome – http://fontawesome.io/
IonIcons – http://ionicons.com/
Slick – http://kenwheeler.github.io/slick/
PhotoSwipe – http://photoswipe.com/
Bootstrap SweetAlert – https://lipis.github.io/bootstrap-sweetalert/
Bootstrap Ladda – http://msurguy.github.io/ladda-bootstrap/
Modernizr – https://modernizr.com/
Masonry – http://masonry.desandro.com/
Bootstrap Validator – http://formvalidation.io/
Theia Sticky Sidebar – https://github.com/WeCodePixels/theia-sticky-sidebar
Smooth Scroll for Websites – https://github.com/galambalazs/smoothscroll-for-websites
html5shiv – https://github.com/aFarkas/html5shiv

Images

All images from https://pexels.com.

THIS IMAGES NOT INCLUDED IN THEME PACKAGE! Used only in demo pages.

End of Documentation

Thanks for purchasing Flatness. I hope you will enjoy using it for your next project.