Plone 6 Theming from Scratch
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Antonelli, Stefan
Plone Theming from scratch was never that easy! The talk is similar to the previous one (Plone 6 Theming based on Barceloneta) and should give an idea of how to use the work of PLIP #2967 without dependency to any Plone Theme
 to you, Stefan. So hello, everybody, or good morning or good afternoon or wherever you are. For me, it's good afternoon. So my name is Stefan Antonelli, I've introduced a work for Pwnsons ages and feel free to contact me in the face to face afterwards or via Twitter or email or whatever you prefer, if you have questions or follow ups. Exactly. So what is this talk about? I would try to explain PloNsix seeming from scratch. This is basically how to create a seam for PloN. And since everything is bootstrap now, that's pretty easy. Finally, the previous talk by Peter already showed some of the new stuff. So I will keep this part a little bit short and talk only about the differences or the the the good things I want to bring out somehow. We built a seam from scratch. So there is no dependency to Barcelona at all. It's there is no much dependency, because we most of the stuff is bootstrap anyway. But in my example, I leave Barcelona out so you can have at least a clean package with almost no dependency to any other CSS starting whatever is in there. We also dropped the also so in this example, there is still no they also needed. And that makes the site a little bit faster as well. Everything is based on bootstrap. We already have heard that this afternoon. I guess when you follow that talk, you have already seen the one before. So I will not repeat or I hope I will not repeat everything. We decided to use bootstrap. It was not kind of decision right? It's just one of the major frameworks out there. Everybody knows it. Everybody knows how to use it. And it's that's why we said we want to have it. It's one of the most popular. It brings typography, it brings forms, buttons, tables, everything you need for a framework like clone and everything you need for a website or for application or whatever you believe in. And you can use it as a version or whatever you build on top of clone or with clone. So let's create the stuff basically. Start work. I have to say Peter showed an example of doing all that. And I made that a little bit shorter. And after that, lovely talk about kittens I only can lose. So please don't expect too much from me. First step is creating an empty folder. There is also a clone CLI. Check out the docs for how to doing that. Basically one liner for creating an add on package. That's done like that in the console creates the package. You have to answer some questions. I filled that up here. I only showed it because we keep clone version five to one for that now. And we switch it later to the core of build out. So that's just there is as far as I know there is no bobtemplate for clone six so far. Correct me afterwards or give me a hint if there is already. So defaults are fine. Keep five two. And after that I made the first commit so you can follow up the changes. I also made a package. Again, it's not so pink. You can check it out on collective. Plonzy Munich is the name. I followed the I liked the idea of giving clones in different location names. So my first one or the first one was Tokyo. This one is Munich and Munich should be it's the same like Barcelona. It's not full featured but it supports all the features and it just makes the stuff a little simpler or does not support all features that you see in clone. That's way more easy to see. So bootstrap not the framework bootstrap singing. Creative VM install the requirements. It's done so far. After that you can run a build out but you don't have to. I recommend to clean up first a little bit the package or my idea or I like clean packages with with a few files I really need. That's why I remove what's not necessary. I remove all the test stuff the constraints for four and five. Bob template package brings a lot of stuff and I basically delete them. Check the disc between the it's only five commits in the repository. Check the difference is what I really deleted or what I changed for that. We have to extend this package a little bit. As I said before it's a core dev build out and we use the LTS branches from different packages. Peter brought up some conflicts. They are used in our core dev build out in the plug config. You can in your custom project you can check out or you can use that as a dependency extend your build out configuration and you get a core dev build out with what you need to test that classic theme stuff without having the core dev build out create a new package and use that so far. That's what we use for the LTS branches basically. Then run the build out. After that start the instance. I was too far a little bit. Run the build out. It's basically a core dev build out. There's just one thing more that I want to say. It will take a while especially when you're running the first time especially when you don't have all the packages on your system. Give it a while it will take some time. After that start the instance. You can start the instance. You don't have to. You get a plain vanilla clone 6 up and running with that structure. Start it and check it out if you can see clone with what we showed in the first talk then you are right so far. You can start. Beginning from here we add our theme structure. That means there is a pop template that does everything for you. You can use a theme pop template and it brings in everything. I prefer to add what I really need. That's why I add the structure manually and I only create or add the stuff that I really need. This is pretty much copy and paste because I have projects where I already have it in. For this use case I think this clone theme Munich is a good example. We can create a branch for this state of the theme that you see what you only need or what you really need for the theme structure. I guess we do a pop template for that but that's not something I went to promise. The first thing we have to do is add a package JSON. It's in the side root of the package. It's the same in the boss of the native theme. This is this npm JavaScript story. You don't want to talk about too much. Two things are interesting here. The dependencies to bootstrap alpha 3 in this example. We are on the beta now. We'll change that quickly. More interesting is the scripts section where you basically see what you can type in on your console. We just package JSON in the root. This dependency you see the scripts that we can run later. For example this creating the distribution CSS JavaScript and watch. That's what you see in Peter's talk as well. It's a watch demon that runs this machine when you change one single line in a SAS file or in a JavaScript file. We have to put some static files in. There is it's blown. It's a config.cml. I guess you know what's happening here. Interesting thing in the manifest file from the theme folder. It's almost empty. It's only six lines here. The interesting thing rules is empty. With having no rules defined, Diaso is just doing nothing. I love it because it's pretty fast. It's not modifying whatever comes from my main template. It ships the main template without processing basically. That's what happens when you leave the rules. Unluckily there is no switch to turn Diaso off. Something we can maybe discuss later. What we here see is the actual bundle. Yes, we use the resource registry and we have to register a bundle. What we do here is switch the compile flag to off. We register one CSS file. That is the result of our file system compiled from bootstrap and stuff. Here everything comes together and this registers the stuff in the code. We will compile the bundle in a minute. That's a few slides later. At least at a seam. That's also a no-brainer. Just copy and paste the stuff. Again, check the package for the details. I'm not showing everything but it's not much more than I discussed about that I show. Compile. Are there any expectations now? Yeah, sorry, wrong note. Compile is we compile a SAS to CSS. SAS is what comes with bootstrap. You can extend it by adding your own SAS files. Basically we import everything from bootstrap and that's the compile process. We use npm or in my case url to compile the stuff. Everything is tied together in the package. I already mentioned. For example, the bootstrap icons are listed there as dependency. We don't have to download or whatever. They just go to the node modules folder and are used there. Compiling means it resolves variables, packs the stuff, ugly files, minify the stuff, whatever is defined in your package. Again, check the scripts in the section for seeing what exactly is available and what's going on there. You can configure that file. You can extend it for your own checks for I don't know, pre-commit hooks or whatever you want to add there. I like the idea of how it's done. One thing I want to mention is the yarn dist command. This is basically to compile the stuff for distribution. This is mentioned in the package JSON. One last thing is the yarn watcher that we saw on Peter's talk. Next, first startup. Everything is just in place. Everything is done. We have compiled the bundle. I would say let's start blown. What could go wrong? The question I made when I started up is blown broken now. Are there any expectations? Can we do a poll here? Is there in this window? Can we use that somehow? Let's make a poll. What the audience is expecting if everything is broken or so. I don't know. Of course it's broken. It's blown. This is what it looks like after these steps. But there are still good news. It's not everything that is broken. Plone components just work. You saw the navigation for example or the breadcrumbs because they were standard markup. Everything from pattern flip toolbars, portal ads, forums, the stuff is already working. Before I show some screenshots, I want to tweak my changes a little bit. Yeah, let's tweak the main template a little bit. You cannot override it with Jbots. You have to register it in cml and add the templates to override the actual main template. Example for that is also in the package. After tweaking the main template a little bit, I got back my color structure and now I can say seeming is fun again. You showed or you saw that already on Peter Stark boosted variables for the basic behavior of the theme are there. You can define fonts, colors, shadows, whatever you like. In the node modules folder, there is a variables file where you can see all bootstrap or all of bootstrap's variables. You can touch. I linked the GitHub URL here because then you can access it on the browser quickly. Pretty much stuff and I only show a few of them rounded corners, primary color, fonts, link decoration. That's in the most projects, the main things you have to change first. When this is done, half of the theme has the appearance you want to have. Next is templates. Any expectations on that? Overrides by Jbots. That's pretty much simple. We already know that copied templates to customize is here in the story. For example, I copied my custom navigation. I copied in the template from the search gadget to change the markup a little bit. We had that in the Slack chat before. The first thing I always kick out is this button for search in section, which is only useful on big sites. Most of the sites don't need it and you have to handle that in the theme somehow. Whatever. You can of course add custom views for your story. Custom views for listings, for content types, whatever you know from before. With the big upside, it's much easier to use components or styling that is available there. I have to say a word about columns. I don't like them. For this example, I kept them in. I grabbed the main template and added column structure for it. Diaso is not working, so I have to fix that. Maybe we changed that before we released Plan 6. I guess this needs some discussion, but bringing in some column structure to keep it in order by default is not a big change, so maybe we can do that. Anyway, columns, I had to fix them at the current state of development. In most cases, I need one column or one column plus a site column with perlits or whatever custom stuff I put in. I moved the perlits into one column, for example. That's an example shown later on. Perlits is the next thing I don't want to talk about. They are in this theme. You can change them. You can add them. They are there whatever you want to have. Since they are cards and cards are already styled, they just work out of the box. I just had to add a little margin. That's what I said also before in the Slack chat. You don't need so much CSS to get blown to a state where it looks, in my opinion, better than blown 4 or 5 by default was. Let me show you some examples. Plan 6 Munich. That's the current state, or let me say the state, from yesterday evening. Yes, it looks like blown. It's not Barcelona. That's what I have to say. With the changes you saw before, and like five lines of SAS on the right place, it looks like that. Beginning from here, you can do whatever you want. The theme is basically the same. I don't like some details on Barcelona. This enables me to do something different, like the search gadget on the top right, the navigation with our drop downs, or whatever you want to change. It's a clean theme, and it supports most of the features with some restrictions. This is the screenshot after adding the basic theme. We have the listing here. It works all out of the box because the markup fits to bootstrap CSS. Then we have the folder listing the tabular view. Here you see the tiny bootstrap icons from the icon resolver as well. The breadcrumbs looks a little bit different because their bootstrap default with some CSS here, some template changes. No big deal to start starting from here. This is what I really, in the Tokyo scene, we did for proof of concept. The most ugly part was fiddling around for getting all the forms working somehow. With great effort that has been done, thanks for that. I have to cheer some beers or whatever in the next personal sprint. That's what you get with no single line of custom CSS. It's a form that works out of the box. Whatever style you put on top of that, the forms work and they look, in my opinion, clean and good. You can still improve them if you like. More paddings or colors or whatever. The back end or the control panel also some work in. Peter showed it already. Imagine that would all be pink or something like that. By the way, bringing in a little bit more color, it's not color, it's just a different concept. Ponsim Tokyo, that was basically the history of doing all of that. The idea was modernizing Plon's classic UI. I don't want the idea of having Plon 6 classic out. It looks and feels and acts the same like Plon 5. That's why I started that proof of concept. It was during the conference in 2018 in Tokyo. You can see it in the name. The initial intention was a clean scene based on Barcelona data. Somehow that escalated quickly. Again, everything is bootstrap. I dropped columns. We have only one main column, which is for a single application or a simple page or whatever you want to do. You don't want to have columns. You can add columns, of course, inside of your template or whatever you add. The basic theme is without columns. That means also no portlets. They're also gone. It's fully responsive. I mean really fully responsive. Here is a screenshot from the state from 5.2. I'm going to bring up a branch that shows that in or for Plon 6, which means just deleting a lot of stuff. We have already real-world examples that use that scene or that build on top of that. When they move to Plon 6, we only have to delete a lot of files. The front page, here we have a login example. The forms are styled with a little bit more padding. This is basically the pre-work or the ideas or testing with the CSS for a clean Plon 6 site. I like the topography from Bootstrap. Here I guess it's only open sounds font and it looks pretty clean. With the responsive stuff, I really want to prove that because I like the responsive things I did there. They're actually from my phone and with the sidebar story, that's the next thing, the tool boss thing, it really works. There will be an update for Plon 6. Wait for that when you try it for the quarterf I mentioned the toolbar, yes we dropped it. This is a little bit tricky because we need our toolbar, we need to edit something in Plon. We had the idea to bring the editing features and the navigation together somehow. That's why we created the package called sidebar, short commercial on sidebar that pops in. We can also pin it later. There is, it's only a few work in, but it worked quite well in that project. We have worked on that concept to bringing the editing features and the navigation together. And yeah, that's basically collective sidebar. Check it out. It's a drop-in replacement, and it's only one template to override. So you don't have to fiddle around with, I don't know what the edit bar is like. I like to change it. And it needs a little love for using all that icon story, but basically it worked. That's how it looks like. That's for anonymous users. It includes the navigation and static links and some stuff. And when you log in, you get all the editing features. All at Sli. We missed or we passed out the part for Portlets, but it's a small effort to make it like feature complete. The only thing that's not supported is register some stuff that appears in the toolbar, but I don't want to cover that. Okay. So yeah, that's the response of you again to show that works. I talked about that already. Here is the GitLab URL for when you want to check it out. It works for 5.2 at the moment, and I quickly bring it to plan six, I guess. Maybe I work on that on the weekend during this print. Okay. See the stuff a little bit in action. I see my timer and I have like four to five minutes. I made a little demo on how the stuff works together. And I try to explain a little bit what we see. That's the login form. And after logged in, the alerts are also bootstraps. So they will influence six look the same. Imagine the same works on the phone because the sidebar is from, is the idea is to not go wider than a normal phone screen is from space. You can only scroll up and down with your Sump and it just works. And also the forms are responsive. So they will also work. And the content of course will work anyway. So that's what we see here. Yeah, adding content, nothing new in that place. I mentioned already the real world project that we have. It's a big site or the customer has more sites using this package. And we improving sidebar and Tokyo theme with that project and lots of stuff came back, lots of ideas come back. And I'm really looking forward to the discussion and to the sprint. Give us feedback what we can bring in. Give us also feedback for the Munich theme because I can add what I need for my custom projects. And I try to make them in a way that it's reusable for others somehow. So yeah, I'm really looking forward. Okay. I guess five minutes. My host is getting sweaty now. So I have to stop here. Sorry. Are there any questions? I want to give the word back to the moderator. Are there questions from Slido? I cannot see them on the screen. Yes, there are questions. I will read them out and I'll also send them directly to you in the chat. In the chat. So you can start looking at them in the chat but I'll also read them out so that people who may not have the benefit of seeing them can hear them. So the first question, your demo was a file system theme. What about the through the web theme and approaches? Is there still a viable path for that? I like the idea of concentrating on one way of doing themes and this through the web seeming story is a little bit tricky. The bundled stuff or bundling stuff from less is not part of or not any more part of Plone 6. So this is not supported. You can still upload a zip file but through the web seeming, I really have to pass the questions to people who know more about that. I'm not an expert in that. I decided with Plone 3, they all said you have to do file system development and beginning from that point, I switched to file system and not try to do something through the web except really small changes in customizations or what you have in the project. Okay. I personally, there's some workflows that I use that are based on through the web. So I certainly would value that but I guess we'll explore it as we continue. I can recommend the talk after this one. Mike is showing the YASO examples and I guess he will also mention the options from the file system or from the through the web story because it's still possible to add a steam there and we have a custom CSS, which is inserted in the header. It acts like the custom CSS you know from the past and that enables you at the end through the web doing some small changes but it's not of course not so powerful like changing bootstrap variables and compile the whole stuff. But what to talk afterwards, maybe there are some ideas. Okay. So we'll leave that for the next talk. The next question, are the tabs on forms breaking to a second line which apparently is not good or are they more responsive using bootstrap five? Unluckily, I cannot answer that question. I had no example or I cannot remember if I saw them breaking somewhere. We are in development at the moment. So if they are break or if they break, we should fix them before we release Plonzyx. As far as I know, we use default bootstrap component for that and I can imagine there are responsive classes to add them to get them work. I cannot promise but I think they are somehow built in a way like that. Okay. I think those are our questions. Let me know. Sorry, it's something to look into. At this point, we're going to move over to face to face. So thank you once again for your presentation, Stefan.
 to you, Stefan.  So hello, everybody, or good morning or good afternoon or  wherever you are. For me, it's good afternoon. So my name is  Stefan Antonelli, I've introduced a work for  Pwnsons ages and feel free to contact me in the face to face  afterwards or via Twitter or email or whatever you prefer, if  you have questions or follow ups.  Exactly. So what is this talk about? I would try to explain  PloNsix seeming from scratch. This is basically how to create  a seam for PloN. And since everything is bootstrap now,  that's pretty easy. Finally, the previous talk by Peter already  showed some of the new stuff. So I will keep this part a little  bit short and talk only about the differences or the the the  good things I want to bring out somehow. We built a seam from  scratch. So there is no dependency to Barcelona at all.  It's there is no much dependency, because we most of the stuff  is bootstrap anyway. But in my example, I leave Barcelona out  so you can have at least a clean package with almost no  dependency to any other CSS starting whatever is in there.  We also dropped the also so in this example, there is still  no they also needed. And that makes the site a little bit  faster as well. Everything is based on bootstrap. We already  have heard that this afternoon. I guess when you follow that  talk, you have already seen the one before. So I will not  repeat or I hope I will not repeat everything. We decided to  use bootstrap. It was not kind of decision right? It's just one  of the major frameworks out there. Everybody knows it. Everybody  knows how to use it. And it's that's why we said we want to  have it. It's one of the most popular. It brings typography,  it brings forms, buttons, tables, everything you need for a  framework like clone and everything you need for a  website or for application or whatever you believe in. And  you can use it as a version or whatever you build on top of  clone or with clone. So let's create the stuff basically.  Start work. I have to say Peter showed an example of doing all  that. And I made that a little bit shorter. And after that,  lovely talk about kittens I only can lose. So please don't  expect too much from me. First step is creating an empty  folder. There is also a clone CLI. Check out the docs for how  to doing that. Basically one liner for creating an add on  package. That's done like that in the console creates the  package. You have to answer some questions. I filled that up  here. I only showed it because we keep clone version five to one  for that now. And we switch it later to the core of build out.  So that's just there is as far as I know there is no  bobtemplate for clone six so far. Correct me afterwards or  give me a hint if there is already. So defaults are fine.  Keep five two. And after that I made the first commit so you  can follow up the changes. I also made a package. Again, it's  not so pink. You can check it out on collective. Plonzy  Munich is the name. I followed the I liked the idea of  giving clones in different location names. So my first  one or the first one was Tokyo. This one is Munich and  Munich should be it's the same like Barcelona. It's not full  featured but it supports all the features and it just makes  the stuff a little simpler or does not support all features  that you see in clone. That's way more easy to see.  So bootstrap not the framework bootstrap singing.  Creative VM install the requirements. It's done so far.  After that you can run a build out but you don't have to.  I recommend to clean up first a little bit the package  or my idea or I like clean packages with  with a few files I really need. That's why I remove what's not  necessary. I remove all the test stuff the constraints for four  and five. Bob template package brings a lot of  stuff and I basically delete them. Check the disc between the  it's only five commits in the repository. Check the difference is what I really  deleted or what I changed for that.  We have to extend this package a little bit. As I said before  it's a core dev build out and we use the LTS branches from different packages.  Peter brought up some conflicts. They are used in our core dev build out  in the plug config. You can in your custom project you can check out  or you can use that as a dependency extend your build out configuration and  you get a core dev build out with what you need to test that classic  theme stuff without having the core dev build out  create a new package and use that so far. That's what we use for the LTS branches  basically. Then run the build out.  After that start the instance. I was too far a little bit.  Run the build out. It's basically a core dev build out. There's just one thing more  that I want to say. It will take a while especially when you're running the first  time especially when you don't have all the packages on your system. Give it a  while it will take some time.  After that start the instance. You can start the instance. You don't have to.  You get a plain vanilla clone 6 up and running with that structure.  Start it and check it out if you can see clone with  what we showed in the first talk then you are right so far.  You can start. Beginning from here we add our theme structure.  That means there is a pop template that does everything for you. You can use  a theme pop template and it brings in everything. I prefer to add what I really  need. That's why I add the structure manually  and I only create or add the stuff that I really need.  This is pretty much copy and paste because I have projects where I already  have it in. For this use case I think this  clone theme Munich is a good example. We can create a branch for this state of  the theme that you see what you only need or what you really need for the  theme structure. I guess we do a pop template for that but  that's not something I went to promise. The first thing  we have to do is add a package JSON. It's in the side root of the package.  It's the same in the boss of the native theme. This is this npm  JavaScript story. You don't want to talk about too much.  Two things are interesting here. The dependencies to bootstrap alpha 3 in  this example. We are on the beta now. We'll change that  quickly. More interesting is the scripts section  where you basically see what you can type in on your console.  We just package JSON in the root. This dependency you see the scripts  that we can run later. For example this creating the  distribution CSS JavaScript and watch. That's what you see in  Peter's talk as well. It's a watch demon that runs this  machine when you change one single line in a  SAS file or in a JavaScript file. We have to put some static files in.  There is it's blown. It's a config.cml. I guess you know what's happening here.  Interesting thing in the manifest file from the theme folder.  It's almost empty. It's only six lines here.  The interesting thing rules is empty. With having no rules defined,  Diaso is just doing nothing. I love it because it's pretty fast.  It's not modifying whatever comes from my main template.  It ships the main template without processing basically.  That's what happens when you leave the rules.  Unluckily there is no switch to turn Diaso off. Something we can  maybe discuss later. What we here see is the actual  bundle. Yes, we use the resource registry and we have to register a bundle.  What we do here is switch the compile flag to off.  We register one CSS file. That is the result of our  file system compiled from bootstrap and stuff.  Here everything comes together and this registers the stuff in  the code. We will compile the bundle in a minute. That's a few slides later.  At least at a seam. That's also a no-brainer. Just copy and paste the stuff.  Again, check the package for the details. I'm not showing everything but it's  not much more than I discussed about that I show.  Compile. Are there any expectations now?  Yeah, sorry, wrong note. Compile is we compile a SAS to CSS.  SAS is what comes with bootstrap. You can extend it by adding your own SAS  files. Basically we import everything from bootstrap and that's the  compile process. We use npm or in my case url to compile the stuff.  Everything is tied together in the package.  I already mentioned.  For example, the bootstrap icons are listed there as dependency.  We don't have to download or whatever. They just go to the  node modules folder and are used there.  Compiling means it resolves variables, packs the stuff,  ugly files, minify the stuff, whatever is defined in your package.  Again, check the scripts in the section for seeing what exactly is available and  what's going on there. You can configure that file.  You can extend it for your own checks for  I don't know, pre-commit hooks or whatever you want to add there.  I like the idea of how it's done. One thing I want to mention is  the yarn dist command. This is basically to compile the stuff for  distribution. This is mentioned in the package JSON.  One last thing is the yarn watcher that we saw on Peter's talk.  Next, first startup. Everything is just in place. Everything is done.  We have compiled the bundle. I would say let's start blown.  What could go wrong? The question I made when I started up is blown broken now.  Are there any expectations? Can we do a poll here?  Is there in this window? Can we use that somehow? Let's make a poll.  What the audience is expecting if everything is broken or so.  I don't know. Of course it's broken. It's blown.  This is what it looks like after these steps.  But there are still good news. It's not everything that is broken.  Plone components just work. You saw the navigation for example or the  breadcrumbs because they were standard markup.  Everything from pattern flip toolbars, portal ads, forums, the stuff is  already working. Before I show some screenshots, I want to tweak my changes  a little bit.  Yeah, let's tweak the main template a little bit.  You cannot override it with Jbots. You have to register it in cml and add  the templates to override the actual main template.  Example for that is also in the package. After tweaking the main template a  little bit, I got back my color structure and now I can say  seeming is fun again. You showed or you saw that already on  Peter Stark boosted variables for the basic behavior of the theme  are there. You can define fonts, colors, shadows,  whatever you like. In the  node modules folder, there is a variables file where you can see all  bootstrap or all of bootstrap's variables. You can touch.  I linked the GitHub URL here because then you can access it  on the browser quickly. Pretty much stuff and I only show a few of them  rounded corners, primary color, fonts, link decoration.  That's in the most projects, the main things you have to change first.  When this is done, half of the theme  has the appearance you want to have. Next is templates.  Any expectations on that?  Overrides by Jbots. That's pretty much simple.  We already know that copied templates to customize  is here in the story. For example, I copied  my custom navigation. I copied in the template from the search  gadget to change the markup a little bit.  We had that in the Slack chat before. The first thing I always kick out is this  button for search in section, which is only useful on big sites.  Most of the sites don't need it and you have to handle that in the theme  somehow. Whatever. You can of course add  custom views for your story. Custom views for listings, for content types,  whatever you know from before. With the big upside, it's much easier to  use components or styling that is available there.  I have to say a word about columns. I don't like them.  For this example, I kept them in. I grabbed the main template and added  column structure for it.  Diaso is not working, so I have to fix that. Maybe we changed that  before we released Plan 6. I guess this needs some discussion,  but bringing in some column structure to keep it in  order by default is not a big change, so maybe we can do that.  Anyway, columns, I had to fix them at the current state of development.  In most cases, I need one column or one column plus  a site column with perlits or whatever custom stuff I put in.  I moved the perlits into one column, for example.  That's an example shown later on. Perlits is the next thing I don't want to  talk about. They are in this theme. You can change  them. You can add them. They are there whatever you want to have.  Since they are cards and cards are already styled, they just work out of the  box. I just had to add a little margin. That's what I  said also before in the Slack chat. You don't need so much CSS to get  blown to a state where it looks, in my opinion, better than  blown 4 or 5 by default was. Let me show you some examples.  Plan 6 Munich. That's the current state, or let me say the state, from  yesterday evening.  Yes, it looks like blown. It's not Barcelona.  That's what I have to say. With the changes you saw before,  and like five lines of SAS on the right place, it looks like that.  Beginning from here, you can do whatever you want.  The theme is basically the same. I don't like  some details on Barcelona. This enables me to  do something different, like the search gadget on the top right,  the navigation with our drop downs, or whatever you want to change. It's a  clean theme, and it supports most of the features  with some restrictions.  This is the screenshot after adding  the basic theme. We have the listing here. It works all out of the box because the  markup fits to bootstrap CSS. Then we have the folder  listing the tabular view. Here you see the tiny bootstrap icons from the  icon resolver as well. The breadcrumbs  looks a little bit different because their bootstrap  default with some CSS here, some template changes.  No big deal to start starting from here.  This is what I really, in the Tokyo scene, we  did for proof of concept. The most ugly part was  fiddling around for getting all the forms working somehow.  With great effort that has been done, thanks for that.  I have to cheer some beers or whatever in the next personal sprint.  That's what you get with no single line of custom CSS. It's a form that works  out of the box. Whatever style you put on top of that,  the forms work and they look, in my opinion,  clean and good. You can still improve them if you like.  More paddings or colors or whatever. The back end or the control panel also  some work in. Peter showed it already. Imagine that would all be pink or  something like that.  By the way, bringing in a little bit more color,  it's not color, it's just a different concept. Ponsim Tokyo, that was  basically the history of doing all of that. The idea was modernizing  Plon's classic UI. I don't want the idea of having  Plon 6 classic out. It looks and feels and acts the same  like Plon 5. That's why I started that proof of concept.  It was during the conference in 2018 in Tokyo.  You can see it in the name. The initial intention was a clean scene  based on Barcelona data. Somehow that escalated quickly.  Again, everything is bootstrap. I dropped columns. We have only one main  column, which is for a single application or a  simple page or whatever you want to do. You don't  want to have columns. You can add columns, of course, inside of your template or  whatever you add. The basic theme is without columns. That means also no  portlets. They're also gone. It's fully responsive.  I mean really fully responsive. Here is a screenshot from the state from 5.2.  I'm going to bring up a branch that shows that in  or for Plon 6, which means just deleting a lot of stuff.  We have already real-world examples that use that scene  or that build on top of that. When they move to Plon 6, we only have to  delete a lot of files. The front page, here we have a login  example. The forms are styled with a little bit  more padding. This is basically the pre-work or the  ideas or testing with the CSS for a clean Plon 6 site.  I like the topography from Bootstrap. Here I guess it's only open  sounds font and it looks pretty clean. With the responsive stuff,  I really want to prove that because I like the responsive things I did there.  They're actually from my phone and with the sidebar story,  that's the next thing, the tool boss thing, it really works.  There will be an update for Plon 6. Wait for that when you try it for the  quarterf  I mentioned the toolbar, yes we dropped it.  This is a little bit tricky because we need our toolbar, we need to edit  something in Plon. We had the idea to bring the editing  features and the navigation together somehow.  That's why we created the package called sidebar, short commercial on  sidebar that pops in.  We can also pin it later.  There is, it's only a few work in,  but it worked quite well in that project.  We have worked on that concept to bringing the editing  features and the navigation together.  And yeah, that's basically collective sidebar.  Check it out.  It's a drop-in replacement,  and it's only one template to override.  So you don't have to fiddle around with,  I don't know what the edit bar is like.  I like to change it.  And it needs a little love for using all that icon story,  but basically it worked.  That's how it looks like.  That's for anonymous users.  It includes the navigation and static links and some stuff.  And when you log in, you get all the editing features.  All at Sli.  We missed or we passed out the part for Portlets,  but it's a small effort to make it like feature complete.  The only thing that's not supported is register some stuff  that appears in the toolbar,  but I don't want to cover that.  Okay.  So yeah, that's the response of you again  to show that works.  I talked about that already.  Here is the GitLab URL for when you want to check it out.  It works for 5.2 at the moment,  and I quickly bring it to plan six, I guess.  Maybe I work on that on the weekend during this print.  Okay.  See the stuff a little bit in action.  I see my timer and I have like four to five minutes.  I made a little demo  on how the stuff works together.  And I try to explain a little bit what we see.  That's the login form.  And after logged in,  the alerts are also bootstraps.  So they will influence six look the same.  Imagine the same works on the phone  because the sidebar is from,  is the idea is to not go wider than a normal phone screen  is from space.  You can only scroll up and down with your Sump  and it just works.  And also the forms are responsive.  So they will also work.  And the content of course will work anyway.  So that's what we see here.  Yeah, adding content, nothing new in that place.  I mentioned already the real world project that we have.  It's a big site or the customer has more sites  using this package.  And we improving sidebar and Tokyo theme  with that project and lots of stuff came back,  lots of ideas come back.  And I'm really looking forward to the discussion  and to the sprint.  Give us feedback what we can bring in.  Give us also feedback for the Munich theme  because I can add what I need for my custom projects.  And I try to make them in a way  that it's reusable for others somehow.  So yeah, I'm really looking forward.  Okay.  I guess five minutes.  My host is getting sweaty now.  So I have to stop here.  Sorry.  Are there any questions?  I want to give the word back to the moderator.  Are there questions from Slido?  I cannot see them on the screen.  Yes, there are questions.  I will read them out  and I'll also send them directly to you in the chat.  In the chat.  So you can start looking at them in the chat  but I'll also read them out  so that people who may not have the benefit  of seeing them can hear them.  So the first question, your demo was a file system theme.  What about the through the web theme and approaches?  Is there still a viable path for that?  I like the idea of concentrating on one way of doing themes  and this through the web seeming story  is a little bit tricky.  The bundled stuff or bundling stuff from less  is not part of or not any more part of Plone 6.  So this is not supported.  You can still upload a zip file  but through the web seeming,  I really have to pass the questions  to people who know more about that.  I'm not an expert in that.  I decided with Plone 3,  they all said you have to do file system development  and beginning from that point,  I switched to file system  and not try to do something through the web  except really small changes in customizations  or what you have in the project.  Okay.  I personally, there's some workflows that I use  that are based on through the web.  So I certainly would value that  but I guess we'll explore it as we continue.  I can recommend the talk after this one.  Mike is showing the YASO examples  and I guess he will also mention the options  from the file system or from the through the web story  because it's still possible to add a steam there  and we have a custom CSS,  which is inserted in the header.  It acts like the custom CSS you know from the past  and that enables you at the end  through the web doing some small changes  but it's not of course not so powerful  like changing bootstrap variables  and compile the whole stuff.  But what to talk afterwards,  maybe there are some ideas.  Okay.  So we'll leave that for the next talk.  The next question,  are the tabs on forms breaking to a second line  which apparently is not good  or are they more responsive using bootstrap five?  Unluckily, I cannot answer that question.  I had no example or I cannot remember  if I saw them breaking somewhere.  We are in development at the moment.  So if they are break or if they break,  we should fix them before we release Plonzyx.  As far as I know,  we use default bootstrap component for that  and I can imagine there are responsive classes  to add them to get them work.  I cannot promise but I think they are somehow built  in a way like that.  Okay.  I think those are our questions.  Let me know.  Sorry, it's something to look into.  At this point,  we're going to move over to face to face.  So thank you once again  for your presentation, Stefan.
Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_0_3599.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_3600_4439.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_4440_7355.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_7356_8471.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_8472_11999.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_12000_12179.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_12180_12347.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_12348_13175.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_13176_14027.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_14028_16979.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_16980_18215.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_18216_24383.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_24384_25907.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_25908_25979.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_25980_26039.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_26040_26279.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_26280_26339.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_26340_26387.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_26388_26435.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_26436_27479.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_27480_30335.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_30336_30491.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_30492_31571.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_31572_33263.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_33264_35399.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_35400_37091.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_37092_38243.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_38244_38615.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_38616_38699.png Plone_6_Theming_from_Scratch_-_Stefan_Antonelli_Qk780_kuz-Y_38700_43514.png