<!doctype html>
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<html lang="en-us"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Shutter - Documentation</title>
<meta name="description" content="Documentation for Straight site template." />
<meta name="author" content="spyropress" />
<meta name="copyright" content="spyropress" />
<meta name="generator" content="Documenter v1.3 http://rxa.li/documenter" />
<meta name="date" content="2011-05-31T00:00:00+02:00" />
<link rel="stylesheet" href="css/documenter_style.css" media="all" />
<script src="js/jquery.1.5.1.js"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js"></script>
<script src="js/jquery.easing.js"></script>
<link rel="stylesheet" href="css/shDocumenter.css" media="screen" />
<script src="js/shCore.js"></script>
<script src="js/shBrushCss.js"></script>
<script src="js/shBrushXml.js"></script>
<script src="js/shBrushJScript.js"></script>
<script>SyntaxHighlighter.defaults['toolbar'] = false;SyntaxHighlighter.all();</script>
<script>document.createElement('section');var duration=500,easing='swing';</script>
<script src="js/script.js"></script>
<style>
html{background-color:#f9f7f5;color:#383838;}
::-moz-selection{background:#fcd355;}
::selection{background:#fcd355;}
#documenter_sidebar #documenter_logo{color: #fff; font-size: 26px; text-align: center;margin-top: 50px; margin-bottom: -50px;}
a{color:#ED4D24;}
hr{border-top:1px solid #e3e3e3;border-bottom:1px solid #FFFFFF;}
#documenter_sidebar, #documenter_sidebar ol a{background:#25292D;color:#888;}
#documenter_sidebar ol a{-webkit-text-shadow:1px 1px 0px #B9F2EF;-moz-text-shadow:0px 1px 0px #C8E9EC;text-shadow:0px 1px 0px #C8E9EC;}
#documenter_sidebar ol a{background:#9DC6C9; border-bottom:1px solid #81a9ac;border-top:1px solid #b6dcdf;color:#122b31;}
#documenter_sidebar ol a:hover{background:#F3594F;color:#FBFFE4;border-top:1px solid #e65248;border-bottom:1px solid #ec544a;}
#documenter_sidebar ol a.current{background:#F3594F;color:#FBFFE4;border-top:1px solid #e65248;border-bottom:1px solid #ec544a;}
#documenter_copyright{display:block !important;visibility:visible !important;}
</style>
</head>
<body>
<div id="documenter_sidebar">
<a href="http://themeforest.net/user/nunforest" id="documenter_logo">Shutter</a>
<ol id="documenter_nav">
<li><a class="current" href="#documenter_cover">Start</a></li>
<li><a href="#folder_structure">Folder Structure</a></li>
<li><a href="#html_structure">HTML Structure</a></li>
<li><a href="#css_files_and_structure">CSS Files and Structure</a></li>
<li><a href="#javascript">JavaScript</a></li>
<li><a href="#elements">Elements</a></li>
<li><a href="#sources_and_credits">Sources and Credits</a></li>
</ol>
<div id="documenter_copyright">Copyright Nunforest 2017<br>
made with the <a href="http://rxa.li/documenter">Documenter v1.0</a>
</div>
</div>
<div id="documenter_content">
<section id="documenter_cover">
<h1>Shutter</h1>
<h2>Photography HTML5 Template</h2><hr>
<ul>
<li>Created: April 2019.</li>
<li>By: Nunforest - Envato author</li><li><a href=""></a></li>
</ul>
<p>Thank you for purchasing our Template. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form <a href="http://themeforest.net/user/Nunforest">here</a>. Thank you very much!
<br /><br />
<strong>Shutter</strong> is Photography HTML5 template and works fine in all major browsers. It's powered by jQuery and you'll find nice and discreet interactivity. The code is clearly written and you will find comments for each section parts.
<br /><br />
Lets take a closer look at the structure of Html, Css, JavaScript...</p>
</section>
<section id="folder_structure">
<h3>Folder Structure</h3><hr class="notop">
<p>When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders.</p>
<p>Here they are:</p>
<ol>
<li><strong>HTML</strong> - Main folder for template</li>
<li><strong>Documentation</strong> - Documentation for Shutter site template</li>
</ol>
</section>
<section id="html_structure">
<h3>HTML Structure</h3><hr class="notop">
<p>This template contains 41 html pages. These pages are</p>
<ol>
<li><code>index.html</code></li>
<li><code>index-dark.html</code></li>
<li><code>about-me.html</code></li>
<li><code>about-me2.html</code></li>
<li><code>about-us.html</code></li>
<li><code>blog.html</code></li>
<li><code>blog-standard.html</code></li>
<li><code>comming-soon.html</code></li>
<li><code>contact.html</code></li>
<li><code>error-404.html</code></li>
<li><code>gallery-col2.html</code></li>
<li><code>gallery-col3.html</code></li>
<li><code>gallery-col4.html</code></li>
<li><code>gallery-flowing.html</code></li>
<li><code>gallery-fullgrid.html</code></li>
<li><code>gallery-fullscreen.html</code></li>
<li><code>gallery-parallax.html</code></li>
<li><code>gallery-pinterest-full.html</code></li>
<li><code>gallery-pinterest.html</code></li>
<li><code>gallery-split.html</code></li>
<li><code>gallery-video.html</code></li>
<li><code>home-album.html</code></li>
<li><code>home-album-dark.html</code></li>
<li><code>home-full-border.html</code></li>
<li><code>home-full-border-dark.html</code></li>
<li><code>home-fullscreen.html</code></li>
<li><code>home-gallery.html</code></li>
<li><code>home-gallery-dark.html</code></li>
<li><code>home-grid-fullmenu.html</code></li>
<li><code>home-grid-fullmenu-dark.html</code></li>
<li><code>home-masonry-leftmenu.html</code></li>
<li><code>home-masonry-leftmenu-dark.html</code></li>
<li><code>home-onepage.html</code></li>
<li><code>home-onepag-dark.html</code></li>
<li><code>home-portrait.html</code></li>
<li><code>home-portrait-dark.html</code></li>
<li><code>home-showcase.html</code></li>
<li><code>home-showcase-dark.html</code></li>
<li><code>home-video.html</code></li>
<li><code>services.html</code></li>
<li><code>single-post.html</code></li>
</ol> <br>
<p>
Body part of the Html file contains a main div tag container, and this is divided in other main sections and each of these sections is further divided into smaller parts:
</p>
<ol>
<li>CONTAINER
<p>Main building blocks of Container looks like in the photo<br>
<img alt="" src="assets/images/image1.png"><br><br>
</li>
<li>Header
<p>Shutter template provide different headers layout including Bootstrap header layout and custom header layouts. Here are tags of default header in index.html</p><br>
<img alt="" src="assets/images/header.png"><br><br>
</li>
<li>CONTENT Sections
<p>portfolio section, photo section, contact section, blog section etc.</p>
<img alt="" src="assets/images/content.png"><br><br>
</li>
</ol>
<br /><br />
<h5>Grid:</h5><hr />
<p>Based on Bootstrap 3, a sleek, intuitive, and powerful front-end framework.</p>
<p>Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.</p>
<p>The default Bootstrap grid system utilizes 12 columns, the grid adapts to be 724px and 1170px wide depending on your viewport.</p>
<p>For a simple two column layout, create a <code>.row</code> and add the appropriate number of <code>.col-lg-*</code> columns. As this is a 12-column grid, each <code>.col-lg-*</code> 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).</p><br>
<img alt="" src="assets/images/bootstrap.png"><br><br>
<p>Given this example, we have two <code>div</code> tags with class <code>.col-lg-6</code>, making for 12 total columns and a complete row.</p>
<p>Move columns to the right using <code>.col-lg-offset-*</code> classes. Each class increases the left margin of a column by a whole column. For example, <code>.col-lg-offset-4</code> moves <code>.col-lg-4</code> over four columns.</p>
</section>
<section id="css_files_and_structure">
<h3>CSS Files and Structure</h3><hr class="notop">
<p>In folder "css" you will find 2 CSS files</p>
<p>
<ol>
<li>shutter-assets.min.css</li>
<li>style.css</li>
</ol>
</p>
<p>Description:</p>
<ol>
<li>
<p><span>shutter-assets.min.css</span> - style of all plugins we used in Shutter including also bootstrap style.</p>
</li>
<li>
In <strong>style.css</strong> which is main style sheet for "Shutter" site template. This file contains all of the specific stylings for the page.
<p>To edit a specific part of the page, simply scroll down, every section is well commented and you can find easy the appropriate style that needs to be edited. In example:</p>
<br>
<img alt="" src="assets/images/style.png"><br><br>
</li>
</ol> <br> <br>
<h3>Sass files</h3>
<p>we have included also scss files in scss folder. If you are familiar with sass you can use them.</p>
<br>
</section>
<section id="javascript">
<h3>JavaScript</h3><hr class="notop">
<p>
In folder <strong>js</strong> you will find 8 javascript files, but all adjustments are in just one file: <strong>"script.js"</strong>.</p>
<p>
All JavaScript files:</p>
<ul>
<li><strong>Shutter assets</strong> - Shutter-assets.min.js</li>
<li><strong>Bootstrap & popper</strong> - bootstrap.min.js & popper.js</li>
<li><strong>modernizr file</strong> - modernizr.custom.js</li>
<li><strong>cbpScroller & classie</strong> - cbpScroller.js & classie.js</li>
<li><strong>jquery multiscroll</strong> - jquery.multiscroll.min.js</li>
<li><strong>Jquery code added here</strong> - script.js</li>
</ul>
<p>Description:</p>
<ul>
<li>"Shutter-assets.min.js" is file js file of all plugins minified and commpressed for fast loading. in this file is included revolution slider, flexslider, owlcarousel, magnific popup file and all other javascript plugins we used in Shutter template </li>
<li>"bootstrap.min.js" & "popper.js" are used for bootstrap plugin.</li>
<li>"modernizr.custom.js", "cbpScroller.js" & "classie.js" are used in home-gallery page. These files are not included in other pages. These files enable animate effect during scroll.</li>
<li>"jquery.multiscroll.min.js" is used in gallery split for multiscroll.</li>
<li>
Most of the settings you can adjust in "script.js". Every part is commented so you can have a clue for what is used.
<br><br>
<img alt="" src="assets/images/script.png"><br><br>
</li>
</ul>
</section>
<section id="elements">
<h3>Elements</h3><hr class="notop">
<p>I have used many elements, i will show the some of these elements, it's very easy to implement in which part of your template you want. every section is well comented, just grab that section and plase where ever you want in your page</p>
<ul>
<li>working Contact form</li>
<li>Font Awesome</li>
<li>Revolution slider</li>
<li>Multiscroll</li>
<li>cbpScroller</li>
<li>Others</li>
</ul>
<p>Description</p>
<ul>
<li>And also we own a contact form working, here in contact.php is the place for updating your mail, same is also for reservation form <br>
<img alt="" src="assets/images/contact.jpg"><br><br>
<span>note:</span> the contact form does not work localy, it works only online.
</li>
</ul>
</section>
<section id="sources_and_credits">
<h3>Sources and Credits</h3><hr class="notop">
<p>I've used the following images, icons or other files as listed.</p>
<ul>
<li><a href="http://jquery.com/">jQuery</a> - JavaScript Library</li>
<li><a href="http://pixeden.com/psd-web-elements/responsive-showcase-psd">PixEden.com</a> - Responsive showcase presentation</li>
<li><a href="http://themeforest.revaxarts.com/documenter/">Documenter</a> - Last but not least. Used for writing documentation. Thanks a lot revaxarts.</li>
<li>Others.</li>
</ul>
<hr/>
<p>Once again, thank you for purchasing this Template. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Template. Here is to be honest a simple documentation because we think there is no problem to implement your elements in this template because the code is clean and well commented. For more general question related to this Template on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.</p>
<p>If you are satisfied with "Shutter - site template" please go to your downloads section on ThemeForest.net and rate Shutter with 5 stars. Otherwise, <a href="http://themeforest.net/user/Nunforest">send an Email</a> and I will try to find nice and easy solution for you :)</p>
<p>Hope that you will enjoy Shutter as much as I've enjoyed designing this template.</p>
<p>Kind Regards,<br /><strong>Nunforest Team</strong></p>
</section>
</div>
</body>
</html>