Starter development template for building UIkit v3 themed OctoberCMS sites.
Includes:
- latest UIkit ^3.21 source from official repository
- style guide layout with most UI components
- GulpJS-based build system for development and production
- NPM-based config system for development and production
Add the theme to existing project while logged into OctoberCMS account online, or interactively by searching it inside Settings/System/Updates/Themes in backend, or with the following command-line instructions inside project root:
php artisan theme:install castus.ui3kit ui3kit
php artisan theme:use ui3kit
Install NodeJS and Node Package Manager globally (LTS version preferred for Gulp ^3). Run the following command-line instructions inside theme root:
npm install --global gulp-cli
npm install
Integrating build process into OctoberCMS project is easy - copy (or merge into existing) files into project root:
gulpfile.js
package.json
Adjust paths.root configuration variable to themes/castus-ui3kit/ and start using command-line tasks from project root.
Check intro page for example HTML page structure and mandatory includes. Development changes can be automated with command-line instruction from configured Gulpfile (project or theme) build root:
gulp watch
Build versioned, optimized, minified, autoprefixed assets with command-line instruction:
gulp upbuild --production
Override global framework/theme styling parameters in the following SCSS files, just don't forget to remove !default from variables:
- assets/scss/uikit3 SCSS
- assets/scss/_components-variables SCSS
- assets/scss/uikit3themed SCSS
- assets/scss/_theme-variables SCSS
Comment out unwanted components/theming for leaner and faster UIkit custom build:
For in-depth customizations and optimizations follow the SASS docs.
Use Gulp-include plugin to require JavaScript source files from anywhere in paths.include.js hierarchy, example: