They are exclusively designed to help out websites with professionally designed templates.

Documentation

1. OVERVIEW

Dream Pos provides a multiple on-demand serice based boostrap html template.

1. 1. Features

  • Creative Design: Dream Pos is a bold theme that organizing content to follow natural eyes, striking balance between beautiful and visual hierarchy.
  • Fully Responsive: The theme passed Mobile-Friendly Test – by Google. We also tested carefully the theme on almost devices: laptop, tablet, and phone. All elements are 100% responsive and ready for all devices.
  • Pixel Perfect Design
  • Product Carousel: Option to showcase products as carousel.
  • Color & Fonts is easily changed
  • Customer Reviews, Customer accounts, Compare Products, Grid & List layout, product fillter
  • Newsletter, Social Sharing
  • W3C Validated Code
  • Bootstrap 5.x used
  • Compatible Browsers: IE8+, Firefox, Safari, Opera, Edge, Chrome
  • Dream Pos offers you the best template created by the latest version of HTML and SASS with super responsive web design.

1. 2. Installation Guide

  • After unzipping Template Files, you will find our product Pos->HTML(Source code), Documentationin the following Main Files folder.
  • Open HTML folder, copy all files and paste in your localhost or server root folder. Now you can run this Template in any web browser from your PC or Laptop.

For example:

localhost/DreamPos/index.html or www.example.com/index.html

Sass, Scss

  • Step1: Install Node.js
  • Step2: Initialize NPM
  • Step3: Install Node-Sass
  • Step4: Write Node-sass Command (sass --watch main.scss:../css/custom.css)
  • Step5: Run the Script

Install Node.js

Node.js is a run-time environment which includes everything you need to execute a program written in JavaScript. It’s used for running scripts on the server to render content before it is delivered to a web browser. In a web browser, navigate to https://nodejs.org/en/download/..

Update Your NPM

Npm is the package for JavaScript and the world's largest software registry. Npm is a separate project from node.js, and tends to update more drequently. As a result, even if uou've just downloaded Node.js (and therefore npm), you'll probably need to update your npm.

npm install --global npm@latest

Install all dependencies

If you want to update or develop this theme, you need to install all dependencies by running:

npm install

Install Sass

If you use Node.js, you can also install Sass using npm by running

npm install -g sass

All .scss files are located in assets/scss/../ folder.

In "scss/base" folder you will find basic, global files with styles for the entire project, namely:

  • base.scss - includes styles for main template conponents such as "body", "a", "p", "table", "ol", "ul", "form", "input" etc;
  • colors.scss - includes all color variables for this template.
  • Grid.scss - includes grid system for this template.
  • reset.scss - includes reset values for this template.
  • typography.scss - includes all font variables for this template.

In "scss/components/..", "scss/layout/..", "scss/pages..", "scss/utils.." you will find styles for all blocks, layouts and widgets available in the project.

For your convenience all styles files are divided blockwise. There you can edit styles and responsive settings for the particular block.

1. 3. Requirements

Working with our Dream Pos product, before going to edit all the HTML, SASS and JS files you will need a text editor.

In this case, we recommended the Sublime Text 3 editor or Notepad++ as it allows you to edit the files efficiently and all the editable files are located in "Pos->HTML" folder.

2. STRUCTURE

2. 1. File Structure

Extract the zip file you received after purchase and you would find the exact below files and folders: 

dreams-pos/ 
│
└── html/ 
	│
	└── assets/           
		│
		└── css/               
		│
		└── fonts/        
		│
		└── img/                 
		│
		└── js/                
		│
		└── plugins/   
		│
		└── scss/   

		 /index.html  

		 /rest of the html pages
		   
│
└── documentation/

2. 2. HTML Structure


<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    	<title>Dreams Pos | Template</title>
    	<link rel="shortcut icon" href="assets/img/favicon.png">
    	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
    	<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
    	<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
    	<link rel="stylesheet" href="assets/css/style.css">
    </head>
    <body>
    	<div class="main-wrapper">
    	    <div class="header">
    	    </div>
    	    <div class="breadcrumb-bar">
    	    </div>
    	    <div class="content"> 
    	    	<div class="container-fluid">
    	    	</div>
    	    </div> 
    	</div> 
    	<script src="assets/js/jquery-3.6.0.min.js"></script>
    	<script src="assets/js/popper.min.js"></script>
	<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>  
	<script src="assets/plugins/select2/js/select2.min.js"></script>  
	<script src="assets/plugins/owlcarousel/owl.carousel.min.js"></script>  
    	<script src="assets/js/script.js"></script>
    </body>
</html>

2. 3. CSS Structure

How to change Logo ?

You can change the logo or replace it from img folder or you can edit it from HTML file.

<div class="navbar-header">
    <a href="index.html" div class="navbar-brand logo">
    	<img src="assets/img/logo.png class="img-fluid" alt="logo">
    <a>
</div>
Styles

We have used this Sass for this template. You can customize the scss files

<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
How to change Google Font ?

Go to scss folder and find base folder open typography.scss. Here we have the default font family 'Poppins', sans-serif

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap');

2. 4. Javascripts

We have used this javascript for this template. You can customize the scripts.js

<script src="assets/js/jquery-3.6.0.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>  
<script src="assets/plugins/select2/js/select2.min.js"></script>  
<script src="assets/plugins/owlcarousel/owl.carousel.min.js"></script>  
<script src="assets/js/script.js"></script>

3. CREDITS

We've used the following resources as listed. These are some awesome creation and we are thankful to the community.

4. SUPPORT

If you have any queries please contact us through email: support@dreamguystech.com

5. THANK YOU

Thank you so much for using this template

Dreamguy's Technologies Pvt Ltd,