Bootstrap/FontAwesome Boilerplate Theme
This is not a theme, it's much more!
Bootstrap/FontAwesome Boilerplate theme is not a theme, it's a boilerplate to create some awesome themes with all the developper's tools included: Bootstrap, FontAwesome, Webpack, BrowserSync already configured to build with the OctoberCMS's directory structure, PostCSS with some the majors plugins, PurgeCSS, and all of this managed with NPM.
Bootstrap, FontAwesome, Webpack and PostCSS is already installed and pre-configured to work together. Each configuration file is pre-built but customizable directly from your theme directory.
This boilerplate comes with webpack and fully customised
PostCSS is the prepocessor of this boilerplate with the most used plugins. Feel free to add the plugins you want into the
PurgeCSS & Minification
To ensure the optimization of your final theme: the
npm run build process will remove all unused CSS with PurgeCSS, and all the JS and CSS files will be minified.
Be aware that to not slow down the watch process, the purge and minification happen only on the
npm run build process
Auto-clean of previous build
This boilerplate uses
clean-webpack-plugin to ensure you don't have any useless files in your theme folder. Your files is cleaned only on the build process not to slow down the hot reload module.
Be noticed for any update
This Boilerplate is evolving on each update to provide more convenient way to work and fix some webpack's issue. OctoberCMS doesn't support theme update and will probably never support it for many good reasons If you want to be noticed of any update, watch the repository or follow me on twitter @RBilloir: I'll provide a tutorial for any eventual breaking change or new tips available.
How to use
The theme is not prebuilt, when installed. You may see some errors: it's a normal behavior, I wanted from you to understand how to build before actually use and customize it. You have to build it before see it.
.env file needed
First of all: if it's not already the case, be sure to run
php artisan october:env, it will create an .env file at the root of your project folder.
Webpack will use
APP_URL inside of it to serve the local server with BrowserSync and to correctly sets the paths of the assets. Be sure that it's correctly defined:
Configure the new Blank theme
The Boilerplate comes with a blank theme in the
blank-src folder, and use the
boilerplate.yaml configuration file to create the final theme directory.
blank-src directory to the October's
blank-src: you can see a
theme.yaml: this it the one for the Source theme, and the
new-theme.yaml is the one for... the new theme, obviously.
It will be renamed on watch/build process, the two files are needed to differenciate them from the backend.
As long as you modify the theme name in the boilerplate.yaml, you are free to name the new theme as you want.
boilerplate.yaml you can put the
awesome-theme and create a
awesome-theme-src folder which will be the
src directory for your new theme.
The boilerplate will generate the
awesome-theme in the October's
Then, follow this quick steps:
- Launch a terminal from the
npm installto install the boilerplate dependencies.
- Then go to the
blank-srcdirectory and launch again
npm install, this will install your theme dependencies, for now just the ones required by October, PostCSS and Bootstrap.
- Go back to the
bootstrap-boilerplatedirectory and run npm run watch` to run the development server with hot reload.
- Since a new blank theme were created, go to the October backend settings and activate your new theme.
- The best and my favorite part: Have fun with coding!
Be aware of the fact that every time you create a new file, it can't be detected by the devServer, you need to reload
npm run watch command.
Found the theme useful on 19 Jun, 2020
Very nice and useful to quickly start creating a theme!
Fix FontAwesome dependency
Jun 18, 2020
May 25, 2020