In Kadence theme it is as easy as 1-2-3 to have a fixed header and sidebar and most likely also footer - I think it belongs to the PRO version which I have not tried.
But what is the best practice for having fixed header, fixed sidebar and fixed footer and then content to left or right in Cwicly ? Like the good old HTML Frameset.
Hopefully Cwicly can do the job in a clever way. What would the community advice here ?
Just set the header, sidebar and footer as fixed ? What about the content part then? What would be the best practice here regarding margin and so on ?
Or make fragments/template-parts and then include them on desktop only ?
The good news is, any CSS layout can be achieved using Cwicly, so the question is more about what CSS layout is best practice.
It really depends on exactly what you want to achieve at different resolutions.
For example, on desktop, setting the body height to 100vh and width to 100vw, making the header, sidebar and footer absolute positioned and scaled accordingly. and then setting your main content area to absolute positioned and overflow: auto may achieve what you want. Alternatively, if you prefer you could use hand crafted CSS Grid in a global stylesheet to lay out the different parts. These are just one of the many possible ways to do it. There is no right or wrong way and there are 100s of good CSS websites that have 1000s of examples (such as: CSS Tricks), so feel free to choose the one that works best for you.
Obviously, there are responsive considerations when doing this that you are already aware of.
Personally I would put responsive styling / css in the templates classes themselves, rather than in visibility conditions.
I set up a Holy Grail Layout by simply using columns. Fixed header and footer. Left and right column is set to sticky - main content column is just normal. Two questions:
What are the pros and cons of doing it this way ?
How do I best control overflow (x- and y-axis) of the left and right column ? I want them to scroll if the content does not fit vertically and then hide if they overflow horizontally - which should not happen at all Is using vh and vw a good fit here ?
The main pro is, it’s a fairly simple layout. The cons are that depending on the content and how you have designed your header and footer, it may not work well in some cases, because the main content will be scrolling underneath the header and footer. So, if your header and footer are fully or partially transparent and reveal some of the background, this would also show the portion of the main contents that overflows those areas.
You can use the overflow-x: hidden; and overflow-y: auto; to control these axes independently, the real consideration is ensuring the height of the containers fits within your design.
If your header and footer are also using vh to size themselves proportionally to the viewport, then using vh for the content is feasible, although doing your above approach for the main content may not work so well.
If your header and footer are dynamically sized according to their content, and the content columns are not meant to overlap them, then I recommend using a different approach (such as the grid approach I mentioned), that will allow you to have the content columns size and fit in relation to the header and footer. This will save you having to do any calculations or synchronise values and therefore will be easier to maintain.
As always it really depends on the nuances of your design which method of layout is the best fit for you.
If you are using template parts for the header and footer, then they are not directly in your template and therefore you can’t style their layout using the Cwicly in the “normal” way. This is why I was recommending:
It is entirely your choice which approach you use and it has to work for you. As you mentioned the “Holy Grail” layout, here are a few examples using CSS Grid:
This one has 100vh as per your requirements (although the demo link doesn’t work):
Hopefully this gives you enough inspiration to be able to achieve exactly what you are aiming for.
