Plone 6 Classic theme, minimum 'requirement' / css

1

Lets say one wants to make a Plone 6 Classic theme 'without any bootstrap styling visible to the 'not logged in users' (in other words: use CSS from an existing 'static' site).

What would be the 'minimum' @imports in theme.scss ?

Which import should 'probably be included' (maybe pagination, breadcrumbs etc)

Alternatively: Is there a way to restrict some imports to (for example ) #main-container and some to NOT #main container ?

2

I am not sure this aim is easily met; Plone being a "full cycle" CMS means you really have to have a theme that caters to both editing/workflow and display.

There are probably ways to do this in Plone (e.g. a read-only theme for a specific virtual hostname); I remember back in the day using custom layers in portal_skins to do such things, but... I think this is a problem better solved by publishing from Plone, via integration of any sort to another publishing system (mint static pages from export, use an existing integration of some sort, or write something that integrates over plone.restapi). Trying to make Plone minimal feels like the wrong solution to this problem.

3

There's an open PR that might help, but it needs a final push to complete guidance to choose a Classic UI theming method before publication.

You might also get some guidance from joining the Classic-UI channel on Discord, especially during the Alpine Sprint.

4

Do a theme from scratch (*), and then import what you need. Do you need the toolbar too?

(*) there were a section about it in older 6 docs, you can find it in the github docs repo until some commit

5

Are you looking for this?

6

Yes, that was my original thought. What could be useful was if there was a way of 'changing the imports.

After some 'digging around', I think it might be possible to import the custom html based on if it is part of #content-core (or other ids/classes), maybe it is also possible to use 'not'. This way, it could be possible to have the default styling for some parts or 'not in edit mode etc. I will give this a try:

.formControls  {
    @import "bootstrap/scss/buttons";
}

#content-core {
    @import "bootstrap/scss/buttons";
}

// :not(#content-core) {
//         @at-root {
//           @import "bootstrap/scss/buttons";
//         }
// }
7

Not really, but it looks interesting: Is it still 'relevant' (it is quite old)

8

Not sure whether still relevant, I figured you could take some inspiration from it - but maybe misinterpreted your question. I thought you intended to present a static site with its own css to anonymous visitors.

FWIW, this training lists the different Bootstrap/Barceloneta SCSS files that you may or may not want to include:

My experience with a cafetaria-style approach to Bootstrap is still inconclusive. I needed to create a PDF print view of some Plone content types and ended up adding additional css classes and ids to the parts that I needed.

I gather you know that you can use Diazo to provide alternate styles to anonymous visitors:

 <notheme css:if-not-content="#visual-portal-wrapper" />
 <notheme css:if-content=".template-manage-viewlets" />
9

@espenmn I couldn't get the plone gatsby stuff working. I think it is too old.
But as part of doing hydra I have documented what it takes to get a modern frontend stack like next.js or nuxt.js up and going with Plone Headless.

And there are code examples for both next.js and nuxt.js.

It doesn't require this hydra layer and I've documented what you get if you use vanilla volto to edit instead of hydra.

Of course if JS is not your thing then you might not want to take this approach. In theory, there is nothing stopping using the restapi from a framework like flask to create a server side rendered frontend. or try unploning plone.