Documentation

LearnPlus Bootstrap v4.1.0

Released on 24 November, 2018

Demos

Preview LearnPlus Bootstrap demos online or you can find the static files from our online demos in the dist/ directory of the download package. You can open the precompiled demo from the download package:

open dist/index.html

Or, start a web server:

npm run serve

Installation

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

The download package does not include any vendor libraries. To install all the dependencies, run:

npm install

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

require('theme-mix')

Update package.json with the workflow:

"scripts": {

                                          "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

                                          "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

                                          "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

                                        },

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:

                                          - jquery/dist/jquery.min.js

                                          - bootstrap/dist/js/bootstrap.min.*

                                          - popper.js/dist/umd/popper.min.*

                                          - dom-factory/dist/*

                                          - material-design-kit/dist/material-design-kit.*

                                          - material-design-icons-iconfont/dist/fonts/*.{eot,ttf,woff,woff2}: dist/assets/fonts/material-icons

                                          - '@fortawesome/fontawesome-free/webfonts/*': dist/assets/fonts/fontawesome-free

                                        clean:

                                          - dist/**/*.html

                                          - dist/assets/{css,fonts,js,vendor}

                                        sassSrc: src/sass/**/*.scss

                                        cssDest: dist/assets/css

                                        jsSrc: src/js/**/**.js

                                        jsDest: dist/assets/js

                                        htmlDest: dist/[path][name].html

                                        htmllint: false

                                        laravelMixOptions:

                                          processCssUrls: false

                                        browserSync:

                                          port: 3000

                                          files:

                                            - ./dist/**/*.{html,css,js}

                                          server:

                                            baseDir: ./dist

                                            index: student-dashboard.html

                                          injectChanges: true

                                          notify: false

                                          ghostMode: false

                                          logLevel: silent

                                          proxy: null

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]