Hero Base

Hero Base is a FREE business Admin theme crafted with care by the Frontted senior designers & developers. Hero is built using the latest frameworks and best practices on the internet with uniquely designed and coded pages and UI elements.

This Bootstrap 4 Admin Template can be used for any SASS projects such as Schools/Universities, Shop/Retail, Financial/Reporting, Social Media, Real Estate, Project Management or Ticketing System.

You can purchase HERO PRO for extra UI Components and Premium Support.

Browser support

Hero works on the last two versions of every major browser. Specifically, we test on Chrome, Firefox, Safari on Mac, Safari on iOS, IE10, IE11, Edge.

Running the demos

Preview Hero online.

Precompiled files

You can find the precompiled HTML, CSS and JavaScript files from our online demo in the dist/ directory of the downloaded package.

You can open the precompiled demo from the download package:

open dist/index.html

Or, start a web server:

npm run serve

Development

Flow includes a modern development workflow based on Webpack and laravel-mix which compiles Sass, ES6 JavaScript, handles production builds, watchers, multiple CSS themes and more. This entire workflow is contained into an installable package named theme-mix.

Installation

npm install

Create a webpack.mix.js file at the root of your project:

require('theme-mix')

// Enable sourcemaps
const { mix } = require('laravel-mix')
const sourceMapsInProduction = false
mix.sourceMaps(sourceMapsInProduction)

Update package.json with the workflow:

"scripts": {
  "development": "cross-env NODE_ENV=development webpack --progress
--hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "production": "cross-env NODE_ENV=production webpack --progress
--hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
  "watch": "cross-env NODE_ENV=development webpack --watch --progress
--hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},

Workflow

Build

Development build:

npm run development

Production build (includes extra minification, optimizations and cleanup):

npm run production

Watch

Start a web server and automatically rebuild your changes as you make them:

npm run watch

Tasks

Run specific tasks

npm run development -- --env.run [html|js|sass|copy|clean]

Options

Create a theme-mix.yaml file at the root of your project. These are the default configuration options, except copy which by default is an empty list.

runTasks:
  clean: true
  js: true
  copy: true
  sass: true
  html: true
enableCssThemes: false
enableCssRTL: false
copyCwd: node_modules
copyDest: dist/assets/vendor
copy:
  - bootstrap/dist/js/bootstrap.min.js
  - jquery/dist/jquery.min.js
  - popper.js/dist/umd/popper.js
  - material-design-icons-iconfont/dist/fonts/*.{eot,ttf,woff,woff2}: dist/assets/fonts/material-icons
  - dom-factory/dist/*
  - material-design-kit/dist/material-design-kit.js
clean:
  - dist/**/*.html
  - dist/assets/{css,fonts,js,vendor}
sassSrc: src/sass/*.scss
cssDest: dist/assets/css
jsSrc: src/js/**/**.{js,vue}
jsDest: dist/assets/js
htmlDest: dist/[path][name].html
laravelMixOptions:
  processCssUrls: false

Resources

Flow Base is built on top of the following libraries, so make sure you follow through their own documentation when necessary.

Bootstrap 4

Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web. See Bootstrap 4 website

Material Design Kit

Interactive web components inspired from Material Design, using vanilla CSS, JavaScript and HTML. Provides layouts, drawers and other advanced features. See MDK on Github