Getting started

Install, compile & customize

Introduction

Hello, I hope you find this template useful. AdminKit has been crafted on top of Bootstrap 5. 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 5.

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 (or download AdminKit PRO) 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

CDN Support

All files included in the @adminkit/core npm package are available over a CDN.

CSS:

<link rel="stylesheet" href="https://unpkg.com/@adminkit/core@latest/dist/css/app.css">

JS:

<script src="https://unpkg.com/@adminkit/core@latest/dist/js/app.js"></script>

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>

Customization

Themes

AdminKit includes two stylesheets, one for dark mode & one for light mode.

Light mode:

<link href="{PATH}/dist/css/light.css" rel="stylesheet">

Dark mode:

<link href="{PATH}/dist/css/dark.css" rel="stylesheet">

Color scheme, sidebar, layout

You are able to customize the layout of the page by adjusting the data attributes on the body element in your HTML files.

The following options are available:

NameOptionsDescription
data-themedefault, dark, light, coloredColor scheme
data-layoutfluid, boxedContainer layout system
data-sidebar-positionleft, rightPosition of the sidebar
data-sidebar-layoutdefault, compactLayout of the sidebar

<body data-theme="default" data-layout="fluid" data-sidebar-position="left" data-sidebar-layout="default">

Changelog

v3.0.0 – 2021-05-12
  • Add dark theme Pro
  • Add colored theme Pro
  • Add compact sidebar variant Pro
  • Add offcanvas component (/ui-offcanvas.html) Pro
  • Add datatables fixed header (/tables-datatables-fixed-header.html) Pro
  • Add datatables multi select (/tables-datatables-multi.html) Pro
  • Add mega menu Pro
  • Set Chart.js font family
  • Remove Moment.js dependency
  • Refactor sidebar JavaScript module
  • Various visual changes
  • Upgrade to bootstrap@5.0.0
  • Upgrade dependencies
v2.3.0 – 2021-04-05
  • Upgrade to bootstrap@5.0.0-beta3
  • Upgrade dependencies
v2.2.0 – 2021-02-25
  • Replace Inter font with CDN
  • Optimize bundle size
  • Bind `bootstrap` to window object
  • Update .nvmrc file
  • Upgrade to bootstrap@5.0.0-beta2
  • Upgrade dependencies
v2.1.0 – 2020-11-07
  • Replace `.close` with `.btn-close`
  • Upgrade to bootstrap@5.0.0-alpha2
  • Upgrade dependencies
v2.0.1 – 2020-09-14
  • Fix console error on auth pages
  • Upgrade dependencies
v2.0.0 – 2020-09-04
  • Upgrade to Bootstrap 5
  • Drop jQuery as dependency*
  • Replace jvectormap-next with jsvectormap
  • Replace tempusdominus with flatpickr
  • Replace select2 with Choices.js Pro
  • Replace Toastr with Notyf Pro
  • Replace jQuery Mask Plugin with Inputmask Pro
  • Remove bootstrap-markdown Pro
  • Upgrade dependencies
*with the exception of DataTables Pro
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

Rapidly decrease your development time by using AdminKit PRO

Get AdminKit PRO