This is a template theme for Oqtane. The idea is that you...
- Download it and build it to verify it works
- Then replace all the names / IDs etc. so it matches what you want to publish
- And then you can start customizing as you want to
This is a standard Visual Studio Solution with 3 Projects
- Theme containing only the Theme itself + js/css in a
dist
folder - Src contains Typescript and SASS sources for the
dist
folder - Build containing build-automation and package maker (for installation)
- Readme files guide you through the structure
- checklists help you get started
- Parts
- 1 Theme with Code-Behind
- 2 Layouts: Single-Pane and Multi-Pane
- 2 Containers: Default and No-Title
- Prepared for easy on-boarding to your company and theme-name
- The Theme is named
Template
from companyExample
making it easy to replace text fragments - Minimal code/namespaces, so renaming the folder will automatically rename the namespace of your theme
- The Theme is named
- Build Optimizations
- It builds into a DLL and has various automations to auto-push to your Dev-Oqtane environment incl. assets in a
dist
folder - It also generates a nuget package for distribution (but not tested yet)
- It builds into a DLL and has various automations to auto-push to your Dev-Oqtane environment incl. assets in a
- Checklists for all modifications you need
- Contains standard
package.json
for loading Typescript, Node-Sass etc. - On build, compiles the
theme.ts
to the correctdist
folder - On build, compiles Bootstrap, Bootswatch Flatly and custom css into one
theme.css
in the correctdist
folder - TypeScript and SASS generate and include SourceMaps for debugging
- Automation to copy the build to your dev Oqtane installation
- Stuff to generate a nuget package from your build
- This depends on the other two projects, so running this will do everything
We've tried to make this as productive as possible. As of now, this is how it works:
- If you hit F5 (Run) in Debug mode, then the project Theme is compiled in debug mode, and everything incl. the
dist
resources are copied to your target.
You'll see a command-window pop up showing you what happens. - If you Run in Production mode, an nuget-package will also be generated in the Develop and Install project in the
packages
folder
- Oqtane still loads it's own copy of bootstrap - which is really not good. This is an ongoing discussion as of 2020-06
- This template contains very simple Typescript, for real-world use you probably need Webpack. I'll create a more advanced example soon.
- Dito for SASS / Bootstrap - this is still a bit too simple, more advanced setup will follow
- For real-world work, you typically invest most time into css/js development, as the theme itself doesn't change much. For that, it would be better to have a code-watcher which pushes changes continously. I'll work on that