https://github.com/frontted/hero-base
https://github.com/frontted/hero-base
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/frontted/hero-base
- Owner: frontted
- Created: 2018-03-28T17:03:07.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-24T18:34:18.000Z (about 8 years ago)
- Last Synced: 2025-02-22T09:45:49.280Z (over 1 year ago)
- Language: HTML
- Size: 842 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](http://demo.frontted.com/hero-base/161220171643/index.html) 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:
```bash
open dist/index.html
```
Or, start a web server:
```bash
npm run serve
```
# Development
[](https://badge.fury.io/js/theme-mix)
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
```bash
npm install
```
> Create a `webpack.mix.js` file at the root of your project:
```js
require('theme-mix')
// Enable sourcemaps
const { mix } = require('laravel-mix')
const sourceMapsInProduction = false
mix.sourceMaps(sourceMapsInProduction)
```
> Update `package.json` with the workflow:
```json
"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:
```bash
npm run development
```
> Production build (includes extra minification, optimizations and cleanup):
```bash
npm run production
```
### Watch
> Start a web server and automatically rebuild your changes as you make them:
```bash
npm run watch
```
### Tasks
> Run specific tasks
```bash
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.
```yaml
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](https://getbootstrap.com/)
### 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](https://github.com/FrontendMatter/material-design-kit)