Skip to content

Starter development template for building UIkit v3 themed OctoberCMS sites.

License

Notifications You must be signed in to change notification settings

Eoler/oc-ui3kit-theme

Repository files navigation

UI3kit

Starter development template for building UIkit v3 themed OctoberCMS sites.

Includes:

Installation

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

One-time Development Environment Setup

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.

Using and Editing

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

Customizing UIkit Styles

Override global framework/theme styling parameters in the following SCSS files, just don't forget to remove !default from variables:

Comment out unwanted components/theming for leaner and faster UIkit custom build:

For in-depth customizations and optimizations follow the SASS docs.

Including Custom JavaScript

Use Gulp-include plugin to require JavaScript source files from anywhere in paths.include.js hierarchy, example: