Need info about Plone js/css

Hi!
I would like some help about the js/css that Plone outputs.
In a default site (not logged in) I have:

5 Scripts 436 KB
plone-compiled.min.js 231 KB
jquery.min.js 94 KB
require.js 82 KB
config.js 17 KB
plone-legacy-compiled.js 13 KB

3 Style Sheets 439 KB
plone-compiled.css 330 KB
barceloneta-compiled.css 105 KB
plone-legacy-compiled.css 4 KB

My project does not require any js (apart jquery) or css so I need to make the page size as small as possible, so:

  1. for a new project that will only use dexteruty, do I need plone-legacy-xxx ?
  2. what is the purpose of plone-compiled.min.js? and config.js ?
  3. do I need require.js? How can I get rid of it ?
  4. what is the diference between plone-compiled.css and barceloneta-compiled.css ?
  5. if I only want to change some colors in the default theme, where should I do it ?
  6. what is the absolute minimum js/css Plone needs to work, with the default theme?

Hope someone can help.

Hi Jota,

All those resources are needed for the Plone default theme:

  • plone-compiled.min.js contains all the js features needed for a visitor (for instance, the code to create a modal), similarly, there is plone-logged-in-compiled.min.js which is loaded when a user is logged in and which contains al the features for contributors (like the rich text editor for instance),
  • plone-legacy is supposed to manage the JS that haven't been migrated to mockup yet, I guess it it will be removed soon,
  • require.js is a library able to manage asynchronous JS loading and dependencies, see http://requirejs.org/, we need it because our JS features dependencies are managed that way,
  • config.js is our RequireJS configuration
  • plone-compiled.css is the theme for all the standard Plone elements, and barceloneta-compiled.css is the specific theme for Barceloneta (the default theme).

BUT you can get rid of all of them if you create your own theme: go to Site Setup / Theme and create a new theme (see http://docs.plone.org/external/plone.app.theming/docs/index.html about how to create a Diazo theme).
If your rules.xml does not conatin a rule copying the Plone JS/CSS into your theme, then those resources won't be loaded. Be careful, it will work fine for anonymous visitors, but they will be needed for contributors (unless you implement by yoursefl all the features needed for contributing, which might take a long time).

Regarding the colors: if you are happy with the default theme, and you just want to change few colors, you can go to Site Setup / Resource registries and then in the "Less variables" tab you can change the theme colors easily.

1 Like

Hi Eric, thanks for your reply.

Unfortunatly it did not work.
When I go to Site Setup/Theme and copy the barceloneta theme, all I get is a blank page, nothing to edit or change.
If I choose create a new theme, it is the same, blank page,
I have installed Plone 5.0.2, should I install P 5.0 instead?
Also, if I delete the plone-legacy-xxx stuff, then the Theming Control Panel just does not work anymore... there seems to be some kind of dependency.
I'm really puzzled here, because legacy usually is for old/deprecated things, but Diazo a new tecnology in Plone, right? I think this does not make sense?

I wonder why Plone needs all this Js/Css stuff ??
Why the default theme is not as simple as it can be (but responsive, for small screens), and then have as an option the Barcelonete theme with all the wistles and bells?
Also, it seems that Plone does not have responsive image capacity, that adapts to small screens.
BTW I noticed on Plone.org there are no add-on themes for Plone 5 wich is also a bit deceiving.

If these dificulties are addessed, we will come back to try Plone.
We need to build a community website for places where hardware is old and internet slow, and on paper Plone seems to be perfect for the job, but in real life it is a very different story, unfortunatly.

Yes, seems like there is a new bug in the theme editor introduced in 5.0.2. You can use a clone of https://github.com/plone/plone.app.theming to make it work.

Unfortunately, people want features OOTB, not less delivered OOTB and many user related features come in the form of JS. Currently, anonymous users of plone get JS for some widgets(for forms), table of contents, form schema tabs, cookies, form unload protection, auto focus, marking special links, modals, live search, some ajax support to dynamically load content, tooltips and some drop downs.

The web is moving to more and more JS. With the work on a plone rest api, it may be the case that the whole frontend will be all JS generated in major version of Plone years from now. There is virtually no demand for a site that has no JS. I know I'm definitely not interested in it and I don't know of any working on core to hit this requirement.

There is a new plone.org theme that is almost done from what I understand. I don't know the current status. The current plone.org is a mess. No one contributes to it. We need to launch the new site. We all know it's a problem. Go to https://pypi.python.org/pypi to search for add-ons...

Also, I just attempted deleting the legacy bundle and the theme editor is still working. Maybe the problem is related to the theme editor being broken with in 5.0.2, not the legacy bundle.

@vangheem, did you mean @JotaMG should use a clone of GitHub - plone/plonetheme.barceloneta: The default theme for Plone Classic UI (but with all names and metadata changed) to make it work? Or did you mean, @JotaMG should checkout newest plone.app.theming where the discussed bug is fixed?

By the way, I like the simple theme idea - some really simple, bare theme without any dependencies to Bootstrap - that would help to develop new themes.

If one doesn't want all the JS functionality, one can just disable it and see if the site is still usable for anonymous users (should be usable...).

@thet No. The error that he is seeing is caused by: https://github.com/plone/plone.app.theming

We do have a link to Plone 5-compatible packages on the plone.org/products page.

The new Plone.org is making significant progress and will be launched Real Soon Now. Everyone on the team needed a break after the massive P5 push and Bucharest.

1 Like

I do not know what is your use case exactly, but:

  • JS/CSS are mainly needed for contributors (bare HTML would not allow to build a modern interface for contributors, because they need a richtext editor, they need dynanic pickilist, modals, etc.)
  • JS/CSS which are not specifically for contributors (enabling tooltips, live search, etc.) are necessary if you use the default theme, but you can create very easily a custom theme which does not involve those features.

If you do that, your markup and your CSS can be as light as you want, you will have no JS anywhere, and your Plone site will be really fast, even on old hardware with slow connection.

Ok, with the new https://github.com/plone/plone.app.theming it works, thanks.
And yes the legacy bundle seems to not be necessary.

Now, if someone is wiling to help to make a "light" theme, I can work on that. I have not used Plone for a long time, since P4.1, so everything in P5 feels like new to me.

My sugestion is to have something like the plonetheme.sunburst, that in my opinion is not so ugly, it needs much less Css and Js, and works ok, just need to make it responsive.

(maybe if someone that knows better the current core can try to see if Sunburst runs in P5, it will be a welcome start)

What do you think?

Yes Eric, that is the sugestion I leave on the previous post.
(my use case and I think for many people also is to only have jquery - css, the less the better - it can be added later, if needed)
Anyone can help kickstart this?
I think it will be necessary to create a specific P5 Js/Css bundle for this ligth theme, right?

Diazo creates automatically the bundles for your theme, so you do need to worry about that.
Creating a Plone theme is very easy with Diazo compare to Plone 4 regular themes.
You just need to provide a static theme (you can download one here for instance: http://startbootstrap.com/template-categories/all/ or wherever, it is not Plone specific, any web theme can work).
And then you inject your Plone content into your theme using Diazo rules (in your rules.xml file).

See http://docs.plone.org/external/plone.app.theming/docs/index.html and also http://training.plone.org/5/theming/index.html

Creating a Python package for your theme is not even necessary, see http://rapidoplone.readthedocs.org/en/latest/easy-plone.html#theme-it

1 Like

I had already tried the last approach you sugest, it kind of worked but then I was unable to edit or create content, among other things.
Is there a simple way to just theme the front-end, and still have the barceloneta theme for the logged users??

Oh yes, that's very easy.
Just copy the barceloneta theme (you can do it from the theming editor interface directly), and then in your rules.xml, just add a rule for anonymous users to use your HTML template, and wrap all the Barceloneta rules into a rule for logged-in users.
It will like this:

<rules css:if-content=".userrole-anonymous:not(.template-login_form):not(.template-mail_password_form)">
    <theme href="your_own_template.html" />
    ... here your rules to insert title, description, main content, whatever...
</rules>
<rules css:if-content=".userrole-authenticated, .template-login_form, .template-mail_password_form">
    <theme href="index.html" />
... all the Barcelontea rules...
</rules>

That way all your pages served to anonymous visitor will use your_own_template.html (where you can put the JS or CSSS you want and forget about the ones produced by Plone), and if you are logged then you see the default Plone theme.
Note: there is one useful exception: generally you prefer anonymous visitors to see the login page themed with Barceloneta.

1 Like

There is a slightly better way to do this.

http://docs.plone.org/adapt-and-extend/theming/barceloneta.html#using-the-barceloneta-theme-only-for-the-backend

It will show the toolbar on both frontend and backend view but the backend views will use barceloneta and the frontend ones will use your own custom theme.
The downside is there is currently no very minimal bundle for just whats needed for the toolbar only.

1 Like

That's nice indeed.
But which kind of the use cases would need the toolbar in the frontend ?

so you can browse around the site, edit/cut/copy/paste etc on the themed site (with the toolbar) but when you switch to tinymce or sitesettings or any plone dialog, it switches back to Barceloneta. It means you don't switch between two tabs, one logged in and one not.

Ok, I see, that way the contributor can see the pages the way they are displayed to visitors. Good point.

Still trying to learn... stupid question:

with Plone 5 , are collective.dexteritytextindexer or collective.folderishtypes needed??
do they add some new feature/functionality to the P5 default content types?

Also, by the way, are there any recommended add-ons that extend or add important and/or relevant features to the P5 dexterity content types?

Thanks!

collective.folderishtypes is useful with Plone 5 if you want your non-folderish contents to be folderish.

I do not think collective.dexteritytextindexer is useful anymore.