OctoberCMS is a flexible and robust Content Management System that allows users to create and manage websites with ease. With the use of themes, website owners can customize the look and feel of their website to suit their branding and aesthetic preferences. TailwindCSS, on the other hand, is a highly popular CSS framework that allows users to easily create custom and responsive user interfaces. Franken UI is an open-source library of the UI ready-to-use components that works on top of the Tailwind CSS as a plugin. Under the hood, Franken UI uses UIkit 3 and extended with LitElement. The design is based on shadcn/ui.
oc-franken-ui is an OctoberCMS theme skeleton used as a quick start for your own theme development.
Requirements: installed and running October CMS (see homepage).
Copy the oc-franken-ui content under the October /themes directory. Switch to the root of your October
installation and install the required development components:
npm install -D tailwindcss postcss autoprefixer franken-ui@internal laravel-mix mix-tailwindcss browser-sync@2.0 --save-dev
NOTE: node module browser-sync must be version 2.x, do not install the latest 3.x. There is a compatibility issue with the module
browser-sync-webpack-plugin.
Now you can start the theme development. To compile your CSS and JS, use the Laravel Mix command mix
in a terminal from your theme root directory:
mixormix buildcompiles the sources from the directoryassets/resourcesintoassets/public.mix watchcompiles likemix build, but additionally watches for file changes and keeps the public resources up to date. Thanksbrowser-syncpackage the changes are propagated to the browser.mix --productioncompiles and minifies the sources for production.