Grida Documentation

Hello! Thank you for purchasing!

Created: 26/1/2021 By: design grid Email: info@dsngrid.com

Getting Started

Unzip the archive and find out the folder Template There are all the template files in this folder. You can open the following files for viewing in browser.

assets/css — folder with css files.
assets/fonts — folder with icon fonts.
assets/img — folder with image files.
assets/js — folder with javascript files.

Upload the template files (inside the folder www) to server with the help of one of the FTP-clients.

HTML structure

In my template I use Bootstrap grid, if you don't know how to use it, here is a detailed information on its use.

The standard section has the following HTML structure:

<body class="v-dark dsn-effect-scroll dsn-cursor-effect dsn-ajax">
	<main class="main-root">
		<div id="dsn-scrollbar">
			<div class="main-content">
				<div class="wrapper">
					<header class="main-slider  has-horizontal p-relative w-100 h-100-v dsn-header-animation">
						...
					</header>
				</div>

				<footer class="footer p-relative background-section">
					...
				</footer>
			</div>
		</div>
	</main>
</body>

Logotype

To change white logotype, find image assets/img/logo.png and replace it with your logo.

To change dark logotype, find image assets/img/logo-dark.png and replace it with your logo.

Navbar

navbar item

<div class="site-header dsn-load-animate dsn-container">
  <div class="extend-container d-flex w-100 align-items-baseline justify-content-between align-items-end">
	<div class="inner-header p-relative">
		<div class="main-logo">
			<a href="index.html" data-dsn="parallax">
				<img class="light-logo"
				src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
				data-dsn-src="assets/img/logo.png" alt="" />
				<img class="dark-logo"
				src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
				data-dsn-src="assets/img/logo-dark.png" alt=""/>
			</a>
		</div>
	</div>
	<nav class="accent-menu dsn-container main-navigation p-absolute  w-100  d-flex align-items-baseline ">
		<ul class="extend-container p-relative d-flex flex-column justify-content-center h-100">
			<li class="dsn-active dsn-drop-down">	
				<a href="#" class="user-no-selection">	
					<span class="dsn-title-menu">	
						drop down
					</span>

					<ul>	
						<li class="dsn-back-menu">	
							<li>	
								<a href="index.html">	
									<span class="dsn-title-menu">	
										Link
									</span>
								</a>
							</li>
						</li>
					</ul>	
				</a>	
			</li>		
		</ul>
	</nav>
  </div>
</div>

overlay

To change the background image, open HTML file and replace the value of data-overlay attribute of this construction:

<section id="header" class="cover-bg" data-overlay='8'>
  <div class="container">
    ...
  </div>
</section>

helper class

Custom Margin
Custom Padding

For example the helper class with "padding & margin section " style:

<section id="about" class="about section-padding section-margin">
	<div class="container">
		...
	</div>
</section>

For example the helper class with "Custom Margin" style:

pb-50 mb-50 – Section without a lower indentation

<section class="section pb-50 mb-50">
<div class="container">
...
</div>
</section>

pt-10 mt-10 – section without an upper indent

<section class="section pt-10 mt-10">
<div class="container">
...
</div>
</section>

Sections Grid

The frog is divided by grid column:

d-grid – Divided into 3 column

<div class="d-grid grid-lg-3 grid-sm-2">
  <div class="item">
    ...
  </div>

  <div class="item">
    ...
  </div>

  <div class="item">
    ...
  </div>
</div>

d-grid – Divided into 2 column

<div class="d-grid grid-lg-2 grid-md-1">
	<div class="item">
	...
	</div>

	<div class="item">
	...
	</div>

	<div class="item">
	...
	</div>

	<div class="item">
	...
	</div>
</div>

dsn-col – Determine the distances between each element from below

<section class="section  dsn-col">
  <div class="dsn-col-lg-3 dsn-col-md-2 dsn-col-sm-1">
    ...
  </div>
</section>

If the row 3 elements will add a distance at the top after element 4 in the lg screen , And in the md screen, it's going to add a distance at the top before element 3, and in the sm screen it will add a distance at the top after element 2

pop up

Open the Images in the popup window: add class has-popup

<div class="section-margin has-popup over-hidden p-relative">
  <a href="assets/img/project/project1/3.jpg" >
  	<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
	  data-dsn-src="assets/img/project/project1/3-sm.jpg"
	  data-dsn-srcset="assets/img/project/project1/3.jpg 1800w,assets/img/project/project1/3-sm.jpg 768w"
	  alt="" class="cover-bg-img">
  </a>
</div>

Color Scheme

To change color scheme, open HTML file and replace the value of href attribute

<link rel="stylesheet" href="assets/css/style.css">

on any available (bg-color = backgroud Color, assistant-color = assistant Backrgound, theme-color = Main Color, font-color = Color body font, heading-color = Color Heading, border-color = Border Color ).

Animation

If you want to use appear inimation for some element, you need to add class data-dsn-animate="section" to this element and set data attribute like this:

<div class="container section-p section-margin p-relative" data-dsn-animate="section">
  <h4 class="dsn-up">
	...
  </h4>
</div>

<div class="section-margin p-relative" data-dsn-animate="section">
  <h4 class="dsn-text">
	...
  </h4>
</div>

section with parallax image

<section class="section" data-dsn-grid="move-up">
   <img class="cover-bg-img " src="assets/img/about-intro.jpg">
</section>

parallax image Scale

<div class="img-box-parallax" data-dsn-grid="move-up">
   <img class="has-bigger-scale" src="assets/img/about-intro.jpg">
</div>

parallax image speed

<div class="img-container h-100" data-dsn-grid="move-up">
   <img class="cover-bg-img " data-dsn-speed="10%" src="assets/img/about-intro.jpg">
</div>

Credits

Support

If you have any questions, feel free to contact me at info@dsngrid.com.