:: Sweep :: Documentation

Getting Started:

This guide will help you get started with Sweep!

All the important stuff – compiling the source, file structure, build tools, file includes – is documented here, but should you have any questions, always feel free to reach out to pixelwibes@gmail.com

If you really like our work, design, performance and support then please don't forgot to rate us on Templatemonster,
it really motivate us to provide something better.

Development Setup

Installing Grunt: Run npm install grunt --save-dev command from your teminal to install grunt within your project.
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/filename.scss` and output a plain-css file to `dist/assets/css/filename.css`.
Grunt JSHint: Run grunt jshint command from your project directory. It will checks all *.js files under `assetsjs/filename` for common syntax or coding errors using the JSHint utility.
Grunt Sprite: Run grunt sprite command from your project directory.
Further help: To get more help on the grunt checkout Grunt
Note: However, any SASS code you write must be able compile via Grunt as well.It will generate pre-compiled javascript templates. Reads all the *.html files from `assets/js/filename` and outputs `assets/js/filename.templates.js`. Template.js will contains code of UI design and will be change each time you build solution through above command.

Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file.

This template is built in ReactJS and requires Node 12.3.1 and NPM 6.9.0 to be Installed
This template is built on react 17+
Node.js and NPM: You can download Node.js from NodeJS. NPM comes bundled with Node.js
Project setup: After installing Node, NPM and Angular CLI run npm install command from the root of your project directory into terminal. It will install all the necessary dependencies for the application using package.json file.
Development server: Run ng serve command from project directory and navigate to http://localhost:4200/ into your browser.
Build: Run ng build command from project directory to build the project. The build artifacts will be stored in the dist/ directory.
Further help: To get more help on the project setup, go and check out https://reactjs.org/.

This template is built in Vue.js and requires Node 12.3.1 and NPM 6.9.0 to be installed.
Vue.js version 2+ is used to build vue application.
Node.js and NPM: You can download Node.js from NodeJS. NPM comes bundled with Node.js
Project setup: After installing Node, NPM and Angular CLI run npm install command from the root of your project directory into terminal. It will install all the necessary dependencies for the application using package.json file.
Development server: Run npm run serve command from project directory and navigate to http://localhost:8080/ into your browser.
Build: Run npm run build command from project directory to build the project. The build artifacts will be stored in the dist/ directory.
Further help To get more help on the Vue.js check out Vue.js documentation.

This template is also built in Angular and requires Node 12.3.1 and NPM 6.9.0 to be installed.
Angular version 10+ is used to build angular application.
Node.js and NPM: You can download Node.js from NodeJS. NPM comes bundled with Node.js
Angular-CLI: You can install angular-cli by executing following command from your terminal install -g @angular/cli/. More details can be found here Angular-CLI
Project setup: After installing Node, NPM and Angular CLI run npm install command from the root of your project directory into terminal. It will install all the necessary dependencies for the application using package.json file.
Development server: Run ng serve command from project directory and navigate to http://localhost:4200/ into your browser.
Build: Run ng build command from project directory to build the project. The build artifacts will be stored in the dist/ directory.
Further help: To get more help on the angular-cli use ng --help or go check out Angular-CLI.

This template is built in Laravel and requires PHP 7.3+, Node 12.3.1 and NPM 6.9.0 to be installed
This template is built on Laravel Boilerplate 5
Node.js and NPM: You can download Node.js from NodeJS. NPM comes bundled with Node.js
Project Setup: After Installing Node and NPM, run 'num install' command to install npm related dependencies
Environment setup: This package ships with a .env.example file in the root of the project. You must rename this file to just .env (Make sure you have hidden files shown on your system).
Composer: Install composer from https://getcomposer.org/ and run 'composer install' command
Create Database: You must create your database on your server and on your .env file update the following lines:
- DB_CONNECTION=mysql
- DB_HOST=127.0.0.1
- DB_PORT=3306
- DB_DATABASE=homestead
- DB_USERNAME=homestead
- DB_PASSWORD=secret
Change these lines to reflect your new database settings.
Artisan Commands: The first thing we are going to do is set the key that Laravel will use when doing encryption.
run 'php artisan key:generate'
You should see a green message stating your key was successfully generated. As well as you should see the APP_KEY variable in your .env file reflected.
It's time to see if your database credentials are correct.
Migration: We are going to run the built in migrations to create the database tables:
run 'php artisan migrate'
You should see a message for each table migrated, if you don't and see errors, than your credentials are most likely not correct.
We are now going to set the administrator account information. To do this you need to navigate to seed file and change the name/email/password of the Administrator account.
You can delete the other dummy users, but do not delete the administrator account or you will not be able to access the backend.
Now seed the database with: run 'php artisan db:seed'
NPM Run '*': Now that you have the database tables and default rows, you need to build the styles and scripts.
run 'npm run ' (generally 'npm run dev' in local)
PHPUnit: After your project is installed, make sure you run the test suite to make sure all of the parts are working correctly. From the root of your project run 'phpunit'
Storage: After your project is installed you must run this command to link your public storage folder for user avatar uploads, run 'php artisan storage:link'
Login: After your project is installed and you can access it in a browser, click the login button on the right of the navigation bar.

The administrator credentials are:

Username: admin@admin.com

Password: secret

You will be automatically redirected to the backend. If you changed these values in the seeder prior, then obviously use the ones you updated to.

File Structure

HTML
- dist
  - Assets
    - bundles - Bundling plugins JS file
    - css - Compiled CSS
    - fonts - Google Font and Fontawesome
    - images - Image assets
    - js - Javascript source
    - plugin - Third party plugins
  - index.html
  - More HTML pages
- node_modules ( npm installs dependencies. )
- scss - SCSS source for theme
  - bootstrap -- Custom bootstrap components
  - generic -- Animation, Helpers class
  - global -- variables, mixins
  - plugin -- all plugin scss file
  - skeleton
  - theme -- core, high-contrast, themes-dark
  - widgets -- All widgets
  - main.scss
- .gitignore
- Gruntfile.js
- package.json
Documentation
- default
- index -- Project All Information

Helper Class

Enable Light/Dark & High Contrast Mode!	`<html class="no-js " lang="en" data-theme="light">` Change class in HTML tage `.light`, `.dark`, `.theme-dark`, & `.high-contrast`
Font Settings	`<body class="layout font-fira">` `.font-opensans`, `.font-quicksand`, `.font-fira`, `.font-raleway`
Theme Color Settings	`<body class="layout" data-sweep="theme-blue">` `theme-blue`, `theme-indigo`, `theme-cyan`, `theme-green`, `theme-orange`, `theme-blush`, `theme-red`, `theme-dynamic`
Enable Sidebar dark	`<div class="sidebar dark">` Toggle class in sidebar `.dark`
Mini Sidebar	`<div class="sidebar sidebar-mini">` Toggle class in sidebar `.sidebar-mini`
Enable RTL Mode!	`<body class="layout rtl_mode">` Toggle class in Body tage `.rtl_mode`
Horizontal Menu	`<body class="h-menu">` Just one click change (Vertical menu) to Horizontal Menubar. `.h-menu`
Page Header Dark Mode	`<header class="page-header dark">` Toggle class in Page Header. `.dark`

Background Color

.bg-primary

.bg-secondary

.bg-primary-gradient

.bg-dark

.bg-light

.bg-body

.bg-card

Light Background Color

.bg-light-primary

.bg-light-success

.bg-light-danger

.bg-light-warning

.bg-light-info

Chart Background & Font Color

All chart Background & Text Color will be change based on theme color

.chart-text-color1

.chart-color1

.chart-text-color2

.chart-color2

.chart-text-color3

.chart-color3

.chart-text-color4

.chart-color4

.chart-text-color5

.chart-color5

Font Text Color

.text-primary

.text-secondary

.text-gradient

.color-fff

.color-100

.color-200

.color-300

.color-400

.color-500

.color-600

.color-700

.color-800

.color-900

Stater page

<!doctype html>
    <html class="no-js " lang="en">
    <head>
        <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">
        <title>:: Sweep :: Dashboard</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- Favicon-->
        <link rel="stylesheet" href="assets/css/sweep.style.min.css"> <!-- project css file  -->
    </head>
    <body class="layout" data-sweep="theme-blue">
    
        <!-- start: sidebar -->
        <div class="sidebar p-2 py-md-3"></div>
    
        <!-- start: body area -->
        <div class="wrapper">
    
            <!-- start: page header -->
            <header class="page-header sticky-top px-xl-4 px-sm-2 px-0 py-lg-2 py-1">
                <div class="container">
                    ......
                </div>
            </header>
    
            <!-- start: page toolbar -->
            <div class="page-toolbar px-xl-4 px-sm-2 px-0 py-3">
                <div class="container">
                    .......
                </div>
            </div>
    
            <!-- start: page body -->
            <div class="page-body px-xl-4 px-sm-2 px-0 py-lg-2 py-1 mt-3">
                <div class="container">
                    .......
                </div>
            </div>
    
            <!-- start: page footer -->
            <footer class="page-footer px-xl-4 px-sm-2 px-0 py-3">
                <div class="container-fluid d-flex flex-wrap justify-content-between align-items-center">
                    ........
                </div>
            </footer>
    
        </div>
    
        <!-- Rightbar Area -->
        <div class="rightbar card ">
            .......
        </div>
        <!-- Modal: Create NFT -->
        <div class="modal fade full-width" id="nftcreate" tabindex="-1">
            .......
        </div>
        <!-- Modal: Setting -->
        <div class="modal fade" id="SettingsModal" tabindex="-1">
            .......
        </div>
    
    <!-- Jquery Core Js -->
    <script src="assets/bundles/libscripts.bundle.js"></script>
    </body>
    </html>

References

Google font	https://fonts.google.com/
Bootstrap	https://getbootstrap.com/
Jquery	https://jquery.com/
SASS	https://sass-lang.com/
Grunt	https://gruntjs.com/
NPM	https://www.npmjs.com/
Fontawesome	https://fontawesome.com/v4.7.0/
Weather Icons	http://erikflowers.github.io/weather-icons/
Apex Charts	https://apexcharts.com/
Datatables	https://www.datatables.net/
Pexels	https://www.pexels.com/
Freepik	https://www.freepik.com/
Owl Carousel	https://owlcarousel2.github.io/OwlCarousel2/

Changelog

v1.0.0

-- 04 SEP 2023

Initial release of Sweep! Lots more coming soon though
Sweep Version
- Bootstrap v5.3.1