Hi All,
I’m sharing a template that I started quite some time ago as a starting point for my client sites. It uses Eleventy with liquid and Bookshop components.
It wasn’t intended for others to dig into, as it’s always felt a bit like that room that you stuff all the unfolded laundry into before the visitors arrive. However, I figure there’s no better incentive to tidy and improve it than open it up for others to pick apart 
Demo site: https://awake-teacher.cloudvent.net/
GitHub repo: GitHub - viv-b/veezer-template: Eleventy Template configured for CloudCannon.
The demo site uses the production branch of the repo. For anyone that wants to look into it within the CloudCannon admin, I figure it’s much easier to see the moving parts with some sample content for each type of section and component. The body content is just AI-generated fantasy text - no doubt you can tell by all the em-dashes. It seemed a bit less boring than using Lorem Ipsum.
DOCUMENTATION:
The documentation pages are within a site collection: Documentation Overview - Veezer Template | Veezer Static Site Template
There is also an ‘info’ icon on the bottom left of all pages of the demo site to go straight to the docs. There’s plenty to improve on here.
DEVELOPMENT vs PRODUCTION BRANCHES
There is a difference in the way images are handled in the liquid templates between the site you would edit in CloudCannon (development) and the final production site. It’s to do with the image optimisation and you can see that here:
OVERALL AIMS
Keep editing simple
Automate as much as possible and avoid editors having to consider too many layout or styling options.
Keep components simple
I’ve avoided the temptation to build 101 different configuration options for every component. I find that it benefits me with less complexity of code and also my content editing clients by giving them fewer choices to make. It helps keep the site theme more consistent as well.
I figure I’ll modify the components for the next site when I work on the next site, rather than anticipate what I ‘might’ need now
Keep page load times respectable
I try to work on this without making it the primary focus (e.g. I’m not going to increase the complexity of things by inlining ‘above the fold’ CSS).
JAVASCRIPT
I’ve used vanilla JavaScript throughout. There are a few JavaScript libraries:
- GSAP (JavaScript Animation Library)
- Fullscreen Lightbox
- Air Datepicker
Partial Page Refresh
Fetch API pulls content into the <main> element during page navigation, leaving the primary navigation, footer and a few other fixed items untouched. Things like the active navigation link are updated during the refresh. I found it a great way to learn how to use asynchronous JavaScript (and I’ve always just liked the idea of partial refreshes).
More info: Fetch API | Veezer Static Site Template
Carousels, Sliders, etc.
There are some great third-party libraries that offer slick image slideshows and carousels, many that I’ve used in the past, but I opted to create my own simpler versions. Less whiz-bang, but they are much easier for me to adapt and maintain. Who else has spent far too long delving through the CSS of a third-party carousel to get it to fit the site layout? I reuse similar HTML, CSS and JavaScript across the site, so it makes tweaks pretty straightforward.
All of the components, like sliders and carousels, are self-contained and work independently so there can be multiple components of the same type on any component-based page.
GSAP Animations
I’m a big fan of GSAP. If you haven’t tried out his JavaScript animation library yet, I’d highly recommend giving it a go. Their whole library is now free to use too!
The template uses:
- GSAP ScrollTrigger (the core of animating elements at the right time)
- GSAP ScrollSmoother (mostly there to provide a simple parallax implementation for non-mobile devices. I tried a multitude of parallax code from lots of sources and I just can’t avoid random bugginess on some phones.)
My code iterates over DOM sections (mostly Bookshop components) in each page and applies GSAP animations after the images in that section are loaded. ScrollTrigger is used to determine the animation timing. In this case that’s as the top of the section comes into the viewport.
More info: GSAP Animations | Veezer Static Site Template
I’ve tried to make relevant comments (hopefully helpful) throughout my code as well.
CSS/SASS
I use Bulma, a flexbox-based, CSS-only framework. It’s concise and easy to use.
TO DOs:
Where do I start!?
I know there are LOTS of improvements to be made just within the CloudCannon-related configuration alone (especially with the recent upgrades to editable regions for Bookshop sites - that looks really interesting!).
I’ve probably concentrated on things and gone on tangents that are a little unconventional (I do like to tinker a lot with JavaScript), but hopefully there will be something that proves useful or interesting to a few of you. Learning by looking at others’ work has been invaluable to me, so I’m glad to give back.
Finding CloudCannon and SSGs (Jekyll and now Eleventy) was a game-changer for me. I’m very keen to make sure the community of users keeps growing.
All feedback or help is really appreciated, and I’ll try to answer any questions as best I can.
Thanks,
and happy new year!
PS: Gio, if you see this, I’ve just realised how close ‘Veezer’ is to the name of your documentation template, ‘Vellum’. That was totally by chance. Sometimes people can’t quite remember my name, so I get something similar beginning with ‘V’ - Vic, Vince, Vinny, etc.
Hence ‘Veezer’.