Custom template development using Patternlab

Custom template development using Patternlab

If you are not satisfied with the pre-made templates in Zoho Sites, I have done quite some work up to now to create a setup a web developer can use to offer you a custom template which you can upload to Zoho Sites.

For offline Zoho Sites Template Development, I eventually found https://patternlab.io. Patternlab provides all the support to develop your company design language, AKA your branding!

I created two starterkits:
* https://gitlab.com/ringods/starterkit-building-blocks: this one contains basic design elements like color scheme previews, font previews and previews for basic HTML building blocks.
* https://gitlab.com/ringods/starterkit-zoho-sites: this one contains patterns which render the exact HTML equivalent of the drag-and-drop elements in the Zoho Sites web editor. This allows for template development (styling/branding!) on your local laptop and with a setup a designer can put under source control

Using these two starterkits, you can get a headstart to create a custom template. To make a release of a custom template, Zoho Sites has documented on their site what the contents need to be. I have created an automated alternative in a reusable NPM package:

https://gitlab.com/ringods/neutrino-preset-zoho-sites-template

This project contains a reusable webpack configuration which compiles SASS files to CSS, adds the required face files and zips them up.

This is a lot of information to digest. If you want to see all of the above in action, here is a working setup:

https://gitlab.com/ringods/zoho-sites-elate-template

If you are a web developer, give it a try. Help me out by filing issues or submitting merge requests. The starterkit-zoho-sites still needs more of the custom sections to be implmented in here.

Ringo