Documentation

Introduction

Hello, I hope you find this template useful. AppStack has been crafted on top of Bootstrap 4. The included docs don't replace the official ones, but provide a clear view of all extended styles and new components that this template provides on top of Bootstrap 4.

The docs includes information to understand how the theme is organized, how to make changes to the source code, and how to compile and extend it to fit your needs.

Thanks, and good luck!

Quick start

The theme includes a custom Webpack file, which can be used to quickly recompile and minify theme assets while developing or for deployment. You'll need to install Node.js before using Webpack.

Once Node.js is installed, run npm install to install the rest of AppStack's dependencies. All dependencies will be downloaded to the node_modules directory.

npm install

Now you're ready to modify the source files and generate new dist/ files. AppStack is using webpack and webpack-serve to automatically detect file changes and start a local webserver at http://localhost:8080.

npm start
Build tools

Start a local webserver at http://localhost:8080 and detect file changes:

npm start

Automatically detect file changes without starting a local webserver:

npm run watch

Compile, optimize, minify and uglify all source files to dist/:

npm run build
Basic Template & Theming

This basic template can be used as a guideline for how to structure new pages while using AppStack. Some meta tags and our CSS & JS files are included inside the template.

The following themes are available:

  • classic
  • modern
  • corporate
<!DOCTYPE html>
<html 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">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>AppStack</title>

  <link href="{PATH}/dist/css/{THEME}.css" rel="stylesheet">
</head>
<body>
  <h1>Hello, world!</h1>

  <script src="{PATH}/dist/js/app.js"></script>
</body>
</html>
Changelog

v1.2.1

– 3 April, 2019
  • Fixed IE11 bugs
  • Replaced font-awesome svgs with fonts
  • Upgraded to latest webpack
  • Upgraded various dependencies to LTS version

v1.2.0

– 16 March, 2019
  • Added two new themes (corporate and modern)
  • Added settings sidebar
  • Added landing page (index.html)
  • Added clients page (pages-clients.html)
  • Moved all scripts to bottom
  • Restructured sass files
  • Upgraded to Bootstrap 4.3.1
  • Upgraded various dependencies to LTS version

v1.1.3

– 11 February, 2019
  • Added calendar page (calendar.html)
  • Added navbar language dropdown
  • Fixed issues with responsive DataTables
  • Fixed issues with collapsed sidebar
  • Moved multiple assets to subfolders
  • Upgraded to Bootstrap 4.3.0
  • Upgraded various dependencies to LTS version

v1.1.2

– 5 January, 2019
  • Added Analytics dashboard (dashboard-analytics.html)
  • Added E-Commerce dashboard (dashboard-e-commerce.html)
  • Added Social dashboard (dashboard-social.html)
  • Added Crypto dashboard (dashboard-crypto.html)
  • Added Kanban Board page (pages-kanban.html)
  • Upgraded various dependencies to LTS version

v1.1.1

– 22 December, 2018
  • Added Bootstrap spinners (ui-general.html)
  • Added Bootstrap switches (forms-basic-elements.html)
  • Upgraded to Bootstrap 4.2.1
  • Upgraded various dependencies to LTS version

v1.1.0

– 7 December, 2018
  • Added dashboard v2 page (dashboard-2.html)
  • Added profile page (pages-profile.html)
  • Added settings page (pages-settings.html)
  • Added pricing page (pages-pricing.html)
  • Added new timeline component
  • Fixed issues with jQuery events by moving to one JS bundle (app.js)
  • Fixed issues with simpleBar
  • Small visual improvements to various components
  • Moved from webpack-serve to webpack-dev-server
  • Upgraded various dependencies to LTS version

v1.0.2

– 26 November, 2018
  • Removed polyfill for ApexCharts
  • Upgraded various dependencies to LTS version
  • Fixed Safari bugs in sidebar

v1.0.1

– 5 October, 2018
  • Added ApexCharts demos (charts-apexcharts.html)
  • Added invoice page (page-invoice.html)
  • Added sticky sidebar (layouts-sidebar-sticky.html)
  • Added new Font Awesome icons to documentation
  • Updated various dependencies to LTS version
  • Fixed IE10 & IE11 sidebar transition bug
Contents

Inside the zip-file you'll find the following directories and files. Both compiled and minified distrubution files, as well as the source files are included in the package.

theme/
  ├── .babelrc
  ├── .gitignore
  ├── package.json
  ├── postcss.config.js
  ├── webpack.config.js
  ├── README.md
  ├── docs/
  ├── src/
  │   ├── css/
  │   │   ├── 1-variables/
  │   │   ├── 2-mixins/
  │   │   ├── 3-components/
  │   │   ├── 4-utilities/
  │   │   ├── 5-vendor/
  │   │   ├── _app.scss
  │   │   ├── classic.scss
  │   │   ├── corporate.scss
  │   │   └── modern.scss
  │   ├── js/
  │   │   ├── modules/
  │   │   ├── vendor/
  │   │   ├── app.js
  │   │   └── settings.js
  │   │── fonts/
  │   └── img/
  └── dist/
      ├── css/
      │   ├── classic.css
      │   ├── corporate.css
      │   └── modern.css
      ├── js/
      │   ├── app.js
      │   └── settings.js
      ├── img/
      └── fonts/