1. Start
  2. File structure
  3. HTML structure
  4. CSS structure
  5. Javascript structure
  6. How to install node and gulp
  7. Gulp tasks
  8. Credits
  9. Images information
  10. Changelog

Do - Clean and minimal portfolio HTML template


For start demo open app/index.html file in your browser

File structure


app The main folder consists of all the html pages and additional assets. Also you can find "index.html" file for start demo.
docs Documentation folder
licenses Licenses files
package.json config file for npm package manager
Gruntfile.js config file for Grunt

HTML structure


Structure of default HTML file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Do - Clean and minimal portfolio HTML template</title>
    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
	<link rel="apple-touch-icon" href="img/favicon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="img/favicon.png">
    <link rel="apple-touch-icon" sizes="114x114" href="img/favicon.png">
    <link rel="stylesheet" href="css/libs.min.css">
    <link rel="stylesheet" href="css/main.min.css">
</head>
<body>
    <div class="go-top">
        <div class="go-top__arrow"></div>
        <span class="go-top__text">To top</span>
    </div>
    <script src="js/libs.min.js"></script>
    <script src="js/common.min.js"></script>
</body>
</html>
             

Header structure


<div class="header">
        <div class="container">
            <div class="row">
                <div class="col-lg-3">
                    <div class="header-logo-wrap clearfix">
                        <div class="logo">
                            <a href="index.html">
                                <img src="img/logo.png" alt="Logo" class="logo__img">
                            </a>
                        </div>
                        <div class="burger main-menu-toogle">
                            <div class="burger-line"></div>
                            <div class="burger-line"></div>
                        </div>
                        <div class="sidebar-toogle">
                                <svg width="340px" height="338px" viewBox="0 0 340 338" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <defs></defs>
                                    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <g id="Rectangle-2" transform="translate(0.000000, -169.000000)" fill="#101217" fill-rule="nonzero">
                                            <polygon transform="translate(169.705627, 169.705627) rotate(-315.000000) translate(-169.705627, -169.705627) " points="169.705627 169.705627 289.705627 49.7056275 289.705627 289.705627 49.7056275 289.705627"></polygon>
                                            <polygon id="Rectangle" points="125 267 215 267 215 506.441406 125 416"></polygon>
                                        </g>
                                    </g>
                                </svg>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9">
                        <div class="navigation-bar">
                                <div class="nav">
                                    <ul class="sf-menu mobile-menu nav__parent">
                                        <li class="nav__item">
                                            <a href="index.html" class="nav__link">Home</a>
                                        </li>
                                        <li class="nav__item nav__item--has-children">
                                            <a href="" class="nav__link">Pages</a>
                                            <ul class="nav__sub">
                                                <li>
                                                    <a href="about.html" class="nav__sub-link">About</a>
                                                </li>
                                                <li>
                                                    <a href="style-guide.html" class="nav__sub-link">Style guide</a>
                                                </li>
                                                <li>
                                                    <a href="404.html" class="nav__sub-link">Page 404</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="nav__item nav__item--has-children">
                                            <a href="" class="nav__link">Portfolio</a>
                                            <ul class="nav__sub">
                                                <li>
                                                    <a href="portfolio-height.html" class="nav__sub-link">Height value</a>
                                                </li>
                                                <li>
                                                    <a href="index.html" class="nav__sub-link">Masonry</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="nav__item nav__item--has-children">
                                            <a href="blog.html" class="nav__link">Blog</a>
                                            <ul class="nav__sub">
                                                <li>
                                                    <a href="blog-list.html" class="nav__sub-link">Side blog</a>
                                                </li>
                                                <li>
                                                    <a href="blog.html" class="nav__sub-link">Grid blog</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="nav__item">
                                            <a href="contact.html" class="nav__link">Contact</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="social social_header">
                                    <a href="https://twitter.com/" class="social__link">
                                        <i class="fab fa-twitter social__icon"></i>
                                    </a>
                                    <a href="https://www.behance.net/" class="social__link">
                                        <i class="fab fa-behance social__icon"></i>
                                    </a>
                                    <a href="https://dribbble.com/" class="social__link">
                                        <i class="fab fa-dribbble social__icon"></i>
                                    </a>
                                    <a href="https://www.pinterest.com/" class="social__link">
                                        <i class="fab fa-pinterest social__icon"></i>
                                    </a>
                                </div>
                        </div>
                    
                </div>
            </div>
        </div>
    </div>

            

Footer structure


<div class="row">
    <div class="col-lg-9 col-lg-offset-3">
        <div class="footer">
            <p>DO © 2018. Created by Themantiko</p>
        </div>
    </div>
</div>

Navigation menu desktop

<div class="navigation-bar">
    <div class="nav">
        <ul class="sf-menu mobile-menu nav__parent">
            <li class="nav__item">
                <a href="index.html" class="nav__link">Home</a>
            </li>
            <li class="nav__item nav__item--has-children">
                <a href="" class="nav__link">Pages</a>
                <ul class="nav__sub">
                    <li>
                        <a href="about.html" class="nav__sub-link">About</a>
                    </li>
                    <li>
                        <a href="style-guide.html" class="nav__sub-link">Style guide</a>
                    </li>
                    <li>
                        <a href="404.html" class="nav__sub-link">Page 404</a>
                    </li>
                </ul>
            </li>
            <li class="nav__item nav__item--has-children">
                <a href="" class="nav__link">Portfolio</a>
                <ul class="nav__sub">
                    <li>
                        <a href="portfolio-height.html" class="nav__sub-link">Height value</a>
                    </li>
                    <li>
                        <a href="index.html" class="nav__sub-link">Masonry</a>
                    </li>
                </ul>
            </li>
            <li class="nav__item nav__item--has-children">
                <a href="blog.html" class="nav__link">Blog</a>
                <ul class="nav__sub">
                    <li>
                        <a href="blog-list.html" class="nav__sub-link">Side blog</a>
                    </li>
                    <li>
                        <a href="blog.html" class="nav__sub-link">Grid blog</a>
                    </li>
                </ul>
            </li>
            <li class="nav__item">
                <a href="contact.html" class="nav__link">Contact</a>
            </li>
        </ul>
    </div>
    <div class="social social_header">
        <a href="https://twitter.com/" class="social__link">
            <i class="fab fa-twitter social__icon"></i>
        </a>
        <a href="https://www.behance.net/" class="social__link">
            <i class="fab fa-behance social__icon"></i>
        </a>
        <a href="https://dribbble.com/" class="social__link">
            <i class="fab fa-dribbble social__icon"></i>
        </a>
        <a href="https://www.pinterest.com/" class="social__link">
            <i class="fab fa-pinterest social__icon"></i>
        </a>
    </div>
</div>                    

CSS structure


 
    
       <link rel="stylesheet" href="css/libs.min.css">
    
       <link rel="stylesheet" href="css/main.min.css">
    
       <link rel="stylesheet" href="css/main.css">
   

Only one css file is included into an html page. It can be minified "css/main.min.css", as for non-minified for development file "css/main.css" it can be included in it as well. For speeding up you can use "saas".

File libs.min.css includes:

JavaScript structure


All HTML pages use next scripts

Only one js file is included into an html page. It can be minified "js/scripts.min.js", as for non-minified for development file "js/scripts.js" it can be included in it as well. All the scripts and libs are included into the file "js/scripts.js". Also there is a file "сommon.js". This file can't be used for your js scripts.

  
    
        <script src="js/common.min.js"> </script>
    
        <script src="js/common.js"> </script>

    
        'app/libs/isotope/isotope.pkgd.min.js',
        'app/libs/imagesloaded/imagesloaded.pkgd.js',
        'app/libs/mixitup/jquery.mixitup.min.js',
        'app/libs/hummer/hummer.min.js',
        'app/libs/lightcase/lightcase.js',
        'app/libs/swiper/swiper.js',
        'app/libs/transit/jquery.transit.min.js',
        'app/libs/hoverIntent/jquery.hoverIntent.min.js',
        'app/libs/superfish/superfish.min.js',

    

How to install node, npm and grunt


For working with sources you shold do next:

1. Install Node.js with npm

2. Install Grunt.js

3. Run "npm install" in console

After this you can use grunt tasks

Grunt tasks


1. Command "grunt" for minifying, concating and watching

2. Command "grunt build" for build all static pages to build folder. All files in build folder will be rewrited

Credits


Images information


All the images used in the template have got Unsplash license (https://unsplash.com/license) that implies their free usage for commercial and noncommercial purposes

Changelog