Calendar
Update your profile details
My Notes
Update your profile details
  • It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  • Contrary to popular belief, Lorem Ipsum is not simply random text.
My Task List
Update your profile details
My Github Activity
puffintheme
  1. comments Lorem Ipsum is simply dummy text of the printing and typesetting industry.

  2. comments Lorem Ipsum is simply dummy text of the printing and typesetting industry.

  3. BOOM!

Documentation
Last update: 17 March 2021
Introduction

Hey !! This is a document for our template POSTMAN:THE CHAT APP. We appreciate your interest in our template and Thank you !! for purchase. We have designed and built an Awesome UI:UX chat app which will make your customer chat even more with simplicity. Lets me share in more details.:

We have built on bootstrap so it will be easy to use if you are familiar with it. And if not then also our document will make it simple for you. We have incorporated an easy to use built in tool and document with all required details included.

Since this theme is based on Bootstrap, and includes nearly everything Bootstrap itself does, you’ll want to give the official project documentation a once over before continuing. There’s also the kitchen sink—a one-page view of all Bootstrap’s components restyled by this theme.

For everything else, including compiling and using this Bootstrap theme, read through the docs below.

Thanks, and enjoy!

What’s included

Below you will find all the file and required documentation of our Postman Chat Theme. We have included all directories and files, common resources and compiled and minified files as some raw file which will be required for your future use.

  • PostMan /
    • dist /
      • assets /
        • css /
        • images /
        • vendor /
      • index.html
    • doc /
      • index.html
    • fonts /
    • js /
      • calendar.js
      • index.js
      • template.js
    • scss /
      • base /
      • bootstrap /
      • font /
      • mixins /
      • plugin /
      • style.scss
    • Gruntfile.js
    • .gitignore
    • package.json
    • package-lock.json
    • README.md
File Reference
doc/index.html Online documentation
index.html Landing page
_variables.scss All variables
_core.scss Create scss variables color code
Gruntfile.js Compile scss to css and create js bundles
Getting started

At the top level of your bootstrap theme you’ll find a directory for each major Bootstrap version that’s supported (currently both v3 and v4). Within each directory you have all the relevant files for that version.

To view your Bootstrap Theme documentation, simply find the docs directory and open index.html in your favorite browser.

$ open index.html

Gulpfiles.js

If you’re after more customization we’ve also included a custom Gulp file, which can be used to quickly re-compile a theme’s CSS and JS. You’ll need to install both Node and Gulp before using our included “gulpfile.js”.

Once node is installed, run the following npm command to install Gulp.

  • $ npm install gulp -g or
  • To install Glup into your project devDependencies.
  • $ npm install --save-dev gulp
  • When you’re done, make sure you’ve installed the rest of the theme’s dependencies:
  • $ npm install

Gulp Sass: Run Gulp sass command from your project directory. It will compile SASS to CSS for the project. This will read the file `scss/style.scss` and output a plain-css file to `/assets/css/filename.css`.

Now, modify your source files and run “gulp” to generate new local “dist/” files automatically. Be aware that this replaces existing “dist/” files, so proceed with caution.

Gruntfile.js

If you’re after more customization we’ve also included a custom Grunt file, which can be used to quickly re-compile a theme’s CSS and JS. You’ll need to install both Node and Grunt before using our included “gruntfile.js”.

Once node is installed, run the following npm command to install Grunt.

  • $ npm install -g grunt-cli or
  • To install Grunt into your project devDependencies.
  • $ npm install grunt --save-dev
  • When you’re done, make sure you’ve installed the rest of the theme’s dependencies:
  • $ npm install

Grunt Sass: Run grunt sass command from your project directory. It will compile SASS to CSS for the project. This will read the file `scss/style.scss` and output a plain-css file to `/assets/css/filename.css`.

Now, modify your source files and run “gulp” to generate new local “dist/” files automatically. Be aware that this replaces existing “dist/” files, so proceed with caution.

Theme source code

The “scss/”, “js/”, and “fonts/” directories contain the source code for our CSS, JS, and icon fonts (respectively). Within the “scss/” and “js/” directories you’ll find two subdirectories:

  • bootstrap/”, which contains the most recently released version of Bootstrap (v4.0.0).
  • “dist/” folder includes everything above, built into single CSS and JS files that can easily be integrated into your project.

The “docs/” folder includes the source code for our documentation, as well as a handful of live examples.

The remaining files not specifically mentioned above provide support for packages, license information, and development.

Gulp/Grunt Files

Leverage the included source files and “gulpfile.js” or “gruntfile.js” to customize your Bootstrap Theme for your exact needs. Change variables, exclude components, and more.

  • “scss/base/” folder has custom files, Edit it to build your own custom build, simply modify your local custom files or edit the includes listed here. Note: some themes also rely on a shared style.scss file, which you can find imported.
  • “variables.scss” is home to your theme’s variables. Note that your theme’s variables file depends on and overrides an existing Bootstrap variable file (found in /scss/base/_variables.scss).
Main Content

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Responsive Bootstrap 4 and web Application ui kit.">

<title>:: PostMan :: Chat Application</title>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<!-- Material Design Iconic Font -->
<link rel="stylesheet" href="../fonts/material-icon/css/material-design-iconic-font.min.css">
<link rel="stylesheet" href="assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css">

<!-- MAIN CSS -->
<link rel="stylesheet" href="assets/css/style.min.css">

<body>

<div id="layout" class="theme-cyan">

    <!-- Navbar -->
    <div class="navigation navbar justify-content-center py-xl-4 py-md-3 py-0 px-3">
    </div>
    <!-- End Navbar -->

    <!-- Sidebar -->
    <div class="sidebar border-end py-xl-4 py-3 px-xl-4 px-3">        
    </div>
    <!-- End Sidebar -->

    <!-- Rightbar icon menu -->
    <div class="rightbar d-none d-md-block">
    </div>
    <!-- End Rightbar icon menu -->

    <!-- Main Body: Content -->
    <div class="main px-xl-5 px-lg-4 px-3">

        <!-- Chat: Body -->
        <div class="chat-body">

            <!-- Chat: Header -->
            <div class="chat-header border-bottom py-xl-4 py-md-3 py-2">
            </div>

            <!-- Chat: Search -->
            <div class="collapse" id="chat-search-div">
            </div>

            <!-- Chat: Content-->
            <div class="chat-content">
            </div>

            <!-- Chat: Footer -->
            <div class="chat-footer border-top py-xl-4 py-lg-2 py-2">
            </div>

        </div>
        <!-- End chat body -->

        <!-- Chat: user details -->
        <div class="user-detail-sidebar py-xl-4 py-3 px-xl-4 px-3">
        </div>

        <!-- Chat: add new user to create a group chat -->
        <div class="addnew-user-sidebar py-xl-4 py-3 px-xl-4 px-3">
        </div>
        
    </div>
    <!-- Main Body: Content -->

</div>

<!-- Main jQuery js Bootstrap core js file -->
<script src="assets/vendor/jquery/jquery-3.5.1.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Plugin js file -->
<script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

<!-- Project core file -->
<script src="../js/template.js"></script>
</body>
</html>
Project Components

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.


<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button class="btn btn-dark" type="button">Dark</button>

<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
Social Button

<button type="button" class="btn btn-outline-google">Signup with Google</button>
<button type="button" class="btn btn-outline-facebook">Signup with Facebook</button>

Widgets

Calendar

<!-- calendar Plugin css file -->
<link rel="stylesheet" href="assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css">

<div class="body mt-4">
<div id="mini-calendar"></div>
</div>

<!-- calendar Plugin js file -->
<script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

<!-- calendar page js file -->
<script>
// mini calendar js 
$('#mini-calendar').datepicker({
    todayHighlight: true,
    beforeShowDay: function(date){
        if (date.getMonth() == (new Date()).getMonth())
            switch (date.getDate()){
            case 4:
                return {
                tooltip: 'Example tooltip',
                classes: 'active'
                };
            case 8:
                return false;
            case 12:
                return "green";
        }
    }
});
</script>
My Notes
  • It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
My Notes
User Card
avatar
Michelle Green
[email protected]

+14 123 456 789 - New york (USA)

Sign in

Sign in

Make it simple, but significant

Reset password

Don't have an account yet Sign up.

Chat Body
  • avatar
    Jason, 7:19 PM
    Hello,
    How are you?
  • avatar
    Jason, 7:19 PM
    Hello, please find attachment, let me know if any changes.
    Design file.pdf
    2.7 mb
  • Sunday
  • 7:19 PM
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  • avatar
    Jason, 7:19 PM
    Okay, All the Lorem Ipsum generators on the Internet
  • 7:19 PM
    Hello, David
    We have send some project shot, please review
  • avatar
    Jason, 7:19 PM
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
    Design file.psd
    22.5 mb
    Project detail.doc
    2.8 mb
  • Today
  • 7:19 PM
    If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
    Animation logo.aep
    47.2 mb
  • avatar
Customer Support

You can request for support via email or GetBootstrap item comments.

We will assist you any problem you encounter while building your Chat App via this template

We use request help form in comments and email to manage customer support. Soon, as we grow, we will invest and find the best customer support system we can use to serve you better. For the meantime, submit a help request to the link given for any issues and concerns that you have. Don't worry, we will respond to you as quickly as we can. Thank you.

© 2020. POSTMAN : Chat App Documentation v1.0.0. All Rights Reserved.

Created by: PuffinTheme

Change Log
Version 1.4.0 23 March 2021 -- Add new Codeigniter Full version
Version 1.3.0 21 March 2021 -- Main HTML version only
-- Add New login Page version (signin-2.html)
-- Add new 1 theme color
Version 1.2.1 17 March 2021 -- Add new 2 theme color (Main version HTML version only)
Version 1.2.0 13 March 2021 -- Technology Update:
-- 1. .Net Done Version ( Separate Folder )
-- 2. Laravel Version ( Separate Folder )

-- Big Update:
-- 1. B4 PostMan Admin HTML ( Separate Folder )
-- 2. B5 PostMan Admin HTML ( Separate Folder )
-- 3. B4 PostMan Chat Application HTML ( Separate Folder )
-- 4. B5 PostMan Chat Application HTML ( Separate Folder )
-- 5. B4 PostMan Event Management HTML ( Separate Folder )
-- 6. B5 PostMan Event Management HTML ( Separate Folder )
Version 1.1.0 22 Feb 2021 -- Update bootstrap 4x separate zip file
-- Project management with chat applications
Version 1.0.1 12 Feb 2021 -- Update Bootstrap v 5.0.0.beta2
Version 1.0.0 07 Sept 2020 -- Initial Release