Getting started

Install, compile & customize

Introduction

Hello, I hope you find this template useful. AdminKit 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

Prerequisites

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.

Installation

Once Node.js is installed, clone our repo and run npm install to install the rest of AdminKit's dependencies. All dependencies will be downloaded to the node_modules directory.

# clone the repo
$ git clone https://github.com/adminkit/adminkit.git my-project
# navigate to app's directory
$ cd my-project
# install dependencies
$ npm install

Usage

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

# serve with hot reload at localhost:8080
$ npm start
# detect file changes without starting a local webserver
$ npm run watch
# compile, optimize, minify and uglify all source files to /dist
$ npm run build

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
├── .npmrc
├── package.json
├── postcss.config.js
├── webpack.config.json
├── README.md
├── src/
│ ├── css/
│ │ ├── 1-variables/
│ │ ├── 2-mixins/
│ │ ├── 3-components/
│ │ ├── 4-utilities/
│ │ ├── 5-vendor/
│ │ └── app.scss
│ ├── js/
│ │ ├── modules/
│ │ ├── vendor/
│ │ └── app.js
│ ├── fonts/
│ └── img/
└── dist/
├── css/
│ └── app.css
├── js/
│ └── app.js
├── fonts/
└── images/

Basic Template

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

<!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>AdminKit</title>
 
<!-- AdminKit CSS file -->
<link href="PATH/dist/css/app.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
 
<!-- AdminKit JS file -->
<script src="PATH/dist/js/app.js"></script>
</body>
</html>

Changelog

v1.0.2 – 2020-07-26
  • Fix issue with dropdown overflow on mobile
  • Upgrade FullCalendar to v5 Pro
  • Upgrade dependencies
v1.0.1 – 2020-05-25
  • Add crypto dashboard (/dashboard-crypto.html) Pro
  • Upgrade to latest Bootstrap (4.5.0)
  • Upgrade dependencies
v1.0.0 – 2020-03-21
  • Initial release

Join over 3,000 developers who are already working with our products

Get AdminKit PRO