CSS Grid Works Great With Sitecake

CSS grid layouts are definately the right way to create Sitecake themes. Here are all different possible layouts and resources:

https://gridbyexample.com/patterns/

and some reference

2 Likes

I struggle to see how Sitecake can work with a grid layout. A grid consists of nested divs – and nested divs are exactly what keeps Sitecake from working properly. In my grid-based sites I have not been able to drag and drop content, add text, images or video, all I can do is edit text and headlines in selected divs. I thought this was probably due to the “no nesting” rule. Before I look for an alternative to Sitecake – is there something I’m missing?

It really works. CSS grid is really concise and poweful at the same time.
Here are two examples.

A responsive photo gallery, Sitecake editable and created with CSS grid.
https://codepen.io/Sitecake/pen/eYpooxR

See the video here

Masonry style photo galler, Sitecake editable and created with CSS grid.
https://codepen.io/Sitecake/pen/QWbNRjM

You can find photo gallery code on Github too.

Thank you, good to know!

Still, while I can edit existing text inside non-nested divs in my grids, I can’t change pictures or add new content. I guess you can’t switch out images that have classes assigned to them?

When I bought the white label version, I thought that sitecake would treat every div like the demo site and my clients would be able to freely add content via drag and drop inside every div of a grid layout. I guess there’s no way to archive that?

SItecake can edit any kind of content (text, images, videos) like in demo site. Maybe you have some issues with the integration. Please create a ticket and I will help you to fix your template.

https://support.sitecake.com/hc/en-us/requests/new