Modernize Plone’s Classic UI
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
Holzer, Peter
The story behind Barceloneta LTS
 So hello everybody. Servus from my side. It's close to Munich. My name is Stefan Antonely and I'm happy to introduce Peter. Hi, I'm Peter. I'm based in Zurich, part of the Blue Dynamics Alliance. And I think I've been doing Plon since 2004. So, little mess with my slides notes. So what's new in Plon 5? We had this beautiful new theme. We had the other teaming as a default. We switched to CES compilation with less. And we had a brand new Plon team, Barcelona. So, Stefan. Yeah, let's talk a little bit about the history, basically the story behind Barcelona LTS. Everything started, or the whole story started in Tokyo a couple of years ago now. I had the idea of a clean, simple theme for Plon 5. It was during the conference and that's why I called the package Plon Seam Tokyo. You can check that out as well. The theme was based on bootstrap with the idea of reusing stuff. I want to use components. I want to use the stuff without writing tons of CSS all the time. The package is basically proof of concept and had tons of overrides to identify what we need to touch when we want to switch the template story to any CSS framework in this moment and the decision was then bootstrap. So, the issue with navigation and editing on mobile and that's what we solved with collective sidebar, which is a small package that gets a solution for navigation and editing on a mobile screen. This is how Tokyo looks like. In the moment, the screen chart is from 5.2 and we are going to update that in a branch with version 2 for Plon 6. The good thing is basically we just have to delete a lot of stuff. All the overrides are gone and then we have a clean theme like that with almost no CSS and almost no templates. That's a lie. Let's say 5 to 6 templates to get exactly that what we see here. So, we get there. We had some community discussions about the stuff. There was a Plon target in Berlin, there was a Plon conference brand, there was also the Alpine city sprint. And of course some bottles of wine help during that discussions to find out solutions and everybody tried to use bootstrap somehow, mostly without success or real problems, have fun with that work. So our first idea is was to map variables from Barcelona to variables from bootstrap. The result was there is a lot of stuff defined in Plon, which is also defined in bootstrap. So, we came up with duplicated stuff and thought about what's the solution for that because we didn't want to reinvent the wheel. So, it was a possible solution, touching all the templates and changing the markup in the templates to bootstrap. The Plon conference in Ferrara came up. There was the first clip basically for modernizing the markup to bootstrap, bootstrap 4. Now we are on bootstrap 5. A few weeks later we made a clip for modernizing the default theme as well so everything should fit together somehow. So, we started with a new task, which is to update all templates. We know it's a lie, we never touch all templates, but the important ones. And a big major task and a little bit tricky was to tackle the form lip. C3c form. I'm not very experienced with that, but we have luckily some people helping us for touching the form lip, which means forms are on bootstrap 5 after that work. So, the story or all the work is for enable us to write templates and reuse components without writing CSS when you want to create a template. They said I have to go to Ferrara they said I have great discussions there and that's how it ended somehow so, but go to Ferrara it's a nice lovely place. So, make things easier is the headline. We think I mean development I mean developing templates templating. Things is creating a clean and and see a clean seem for clone without the mess without touching a lot of files without editing a lot of CSS or overriding a lot of CSS. That is basically what we mean with make things easier somehow. That's the reason why creating a modern website or web app is a complex task front and stuff is complex since there are thousands of devices and resolutions. A lot of things out there that needs to be handled somehow you can watch or you can look at on a website with your VR headset or with your PlayStation, you cannot support each device separately there is a solution or a friend that needed for that. It should be easy to to use components that are that just work and you don't have to care about them. So, user expect things to work. And that's the idea for bootstrap there are widely known UI patterns for features like buttons forms hover effects whatever they just work out of the box and you can now use that UI patterns. So from a developer's perspective. There should be one way to do things. We. The idea is we use a framework we use somehow standards for that and plonk or the ecosystem all the add ons can rely on CSS on some stuff that is there, and can write nice and shiny templates without touching CSS or have a lot of work to get that up and running. And when you are working with blown you're a fan of Python you are a fan of systems. You should not consider with designing stuff in the first step of course design is important but the first step is do the templates and get the stuff to work and the second step is make it nice and shiny. By the way, Peter is later on showing something that is nice and shiny. So developer you don't want to think about the markup. That's what we split strap comes you can you can just use components there is for almost everything there is a component, especially forms buttons, and a lot of custom stuff is still possible. The good news or the very good news is, there is documentation. We don't need to reinvent the stuff we don't need to rewrite documentation. The bootstrap documentation is now our documentation, where you can see their works in blown you can fully rely on that framework so far. I will hand over to Peter now. Yeah, so we already heard what new implant six. We have this water as the new default UI. And we have Stefan to try to Then, we still have the classic UI UI but we updated the mockup with pushup five. It still has the same basal and look and feel. But we updated it. So this is the five to two. And the next slide. This will be slightly updated version of Barcelona, which is fully based on both wrap. We know that we don't have any through web seeming anymore. But we haven't. So just add your quick and dirty CSS styles. And in the future or near future, you also can override CSS variables or custom properties. And follow the path of bootstrap five there. There are already a few CSS variables that you can change, but not fully yet. And it will be modernized. I already talked about is that we have a new JavaScript story or not so new. We will get rid of old stuff. And one point that maybe wasn't mentioned is that we updated or were able to update jQuery finally to version three, which is the latest version. Then let's go over to bootstrap. Bootstrap is still the most popular front of framework. It's well documented. It has tons of examples. It's tested and maintained. And honestly, we were missing out a lot of fun. While doing bootstrap, it was so easy to change stuff, create stuff. I enjoyed it a lot. So what is also new in bootstrap? They improved the overall look and feel. They simplified a lot of the classes that you can use or able to use. They updated and extended the color system. You have color palettes where you can choose all wide range of colors. They added custom CSS properties that I mentioned. They also have their own SVG icon library, which looks really nice. And they ditched or kind of came to the conclusion they don't need jQuery anymore. And it's now pure JavaScript that they use. What it also means is that they are dropping finally support for IE 10 and IE 11. Bootstrap 5, this is not correctly anymore. Just this week they switched to beta 5. We don't have to go to version 5. We started with bootstrap 4 in the process of upgrading the classic UI. But just two or three weeks ago we switched to the alpha 3 and we will switch to beta 1 this week or on the sprint. Yeah, Stefan. Luckily that's just a small change in one line as far as I remember. So let's talk a little bit about features. I don't know why we didn't do this earlier, but what is in the package now when we switch? The most important thing is Plon Core templates use bootstrap 5 markup. As I said in Barcelona, the Plon 6 branch of the Barcelona team, we started with tons of overrides. They have been moved to their own packages now. So we have lots of LTS branches. Check out the Core Dev build out for the current state. There is also blip config. I don't know if I have the links in my talk. We can provide the links afterwards. But if you want to check out the package, you can test it easily out with a newly created package. We will talk about this later this afternoon. What I want to say is all major templates have been touched already. This means editing firms is working out of the box without custom CSS, without custom stuff. The links for default content types are already in. Listings work, like the tabular listing as works is responsive now, is one that I really like now. The control panel has been updated with lots of effort by Peter. This is in right now. There is a screenshot from Peter showed already. We, we, the idea was not to redesign Barcelona. The idea was to give almost the same look and feel, but just update all the markup in the templates. So the markup works together with bootstrap default CSS that comes from your own compiling or that comes when you download it basically. So this is a small site classic clone classic dot clone dot de for the current state. It's not updated right now we will update it, I guess after the talk, where you can see the current state. This is work in progress so expect some issues expect stuff changes. Almost each week we do small changes on different things. So this is not an official demo. Bootstrap components as documented. That's what I said before works like a charm. So this is a little bit of a bit of a bit of a demonstration as the bootstrap documentation now. I really enjoy what you see there, you can copy and paste, they provide code examples and a little copy button you can copy that code snippet pasted into somewhere in blown and it really just works. We have tried that we have I guess we have a screenshot later on. That's basically for all the components. We really enjoyed it I really liked it to copy stuff and paste it and I mean no plan documentation prior to that just did exactly that. Some of the core components are already updated we changed the breadcrumbs a little bit we used more. We used cards for the portlets and the tabular listing. That's what you see here. The portlet on the right side is now no custom CSS no custom markup it's just copied and filled in with the variables from blown. You literally can copy and paste what we mean with that accordion example. I guess we had to turn off the HTML filtering a little bit for the example, but basically no custom tweaks and that's not fake somehow. I will pass over to Peter. So what is the new Barcelona? It's basically an opinionated set of pushup variables that makes bootstrap look like Barcelona and since we use all we updated our markup to that it works through the whole theme CMS whatever you want to call it. We try to use as little as of our own CSS on top because we just wanted to use the full feature set of bootstrap and I think we kind of did a pretty good job making it look like Barcelona before. You can really change every aspect of the same by variables. Doesn't matter if it's colors font sizes, spacings, grid gutters, whatsoever. What's also nice with bootstrap, they have some overall properties that will go along through the whole theme. So if you want to have shadows just turn it on. If you want to have rounded corners, turn it on or gradients within your components. Yes, just turn it on and let it go. Stefan. So this is what our variables look now is still working progress. You will remember or recognize some of these things. We'll quickly show you how the variables work. So this is next string. So this is what it looks out of the box. Change the primary color. Everything throughout the whole theme turns orange. Next we turn on the shadows. Components get shadows where needed. We're turning on rounded corners. And what you see in the next screen is also all the edit forms have already the same look that you defined in the variables. And then the next slide again. The example from before component just takes up the colors from variables and works. So yes, we just added a little bit for CSS or CSS for our own components that will be the navigation because it's a little bit more complex than all the examples that are out there on the web. Also stuff like control panels and some smaller things. We added CSS for that. So we're coming to the theme, theme in workflow. So the net will be an MPM package. You can base your own theme on that just by including the MPM package in your package Jason and run the compiler. We will build a Bob templates clone template for the new seeming workflow. I will show you later what did this somehow will look like. And you still will be able to do your quick and dirty customizations even on top of that. Questions came up. If there will be any the other. Yes, it's still there. It will work as before. I think did some optimizations in the rules XML that will allow you to make more easy modifications within the content area, which was pretty hard before. I think, Stefan. It was the other. Your turn with the icon resolver. Yeah. I come up with the idea of supporting more than just the default icons. I was in the past a little difficult or a little tricky to change icons that are used by the clone UI. So I don't mean adding icons and using an approach or stuff that is not a problem. But what if you want to change the clone appearance or content type icons for example for itself and that why we came up with an icon resolver. This is more than the first idea I had basically. So let's start first. We have bootstrap icons now. When bootstrap alpha I guess came out there were also new icons. They are more line or icons. Big difference to the glyph icons and we decided to just use them because they are bootstrap they are there. Why not using them. So if you want to do something like that, check out icons dot get bootstrap dot com for the for the icons and the good news again is all the icon names you can find in the documentation are are also available in blown with our icon resolver. We have stored in via generic setup. So there is basically an XML it's part of blown not static resources. There we define a name for an icon, a copy or paste that's the clone name and assign the past to the SVG to it. That's basically stored in the registry. That's that's the straightforward way of making it possible to change it later. We have all the clone icons are registered that way, all the bootstrap icons are there. And on top of that we registered a couple of mine type icons for the file content type. So when you insert a file with the PDF it shows something that looks like a PDF icon, and you can change it and you can touch it so that's all on the customization story. So how to deal with custom stuff override the XML. The idea is to provide a best practice packet for front awesome. After in a while, you have the option to touch each icon to override the past to your own SVG or whatever you want to go in there. The icon resolver itself is work similar to the imaging story. It's the icons method is available via main template. It has a tag method and you're all method. You pass in the name of the icon. You can modify class and alt tag and you get back in line SVG from bootstrap as long as it is an SVG. When you have a BNG registered you get back an image tag with that image reference so this is also work in progress. We used it for a couple of weeks now and for clone defaults we need for the templates for listings for example, they already work. So this is that's what's the idea of icon resolver. It's so it's 2020 we should really insert icons as SVG that gives you the option to style them or to manipulate them and the icon resolver is the idea of handing that. We updated the templates to make use of this already so check out the test rendering page from the court have built out for an example how the coach would look like and how the icons are. How the icons are done basically. Next is the showcase with Peter there you can see some bits of that already. So this is the updated overall look and feel. We also updated a little bit of the structure of the content types. We put the lead image on top, because we thought it's the most common use case nowadays. We scroll down on a typical page. We added a view let for contributors and rights. We also restart the tags down there. And we read it various listings. This is what the tabular listing looks at the moment. There's more work to be done on the listings but think this is the new fresh way to do listings as we use it. Next up is the event. We changed this event summary to be more prominent. Also in mind that most of people now use websites on a mobile phone. And we also read it related content on the bottom here. These are already styled because we updated the CC3 forms. Once I notice if you're ever looking for a CC3 form widget, you're now all in blown up CC3 form and not scattered all over those packages. This is what the control panel will look like or is looking. Yeah, complete overhaul. We skip the kind of portlets on the side and use the navigation, the stroke downs. We also updated a lot of all of the control panels. They all followed the bootstrap markup now and theming them was really easy. This is the using groups panel. And on the last one, it's a mobile view. Next, I'm giving a talk on how to theme blown based on Barcelona Neta. Then Stefan will give a talk how to do that from scratch. And Mike will show you how to bring in a custom theme that you got from somewhere else and make it work with the other and then you wait to do it. So we weren't the only ones that were working on that. So a big shout out for all those lovely people that helped with on various sprints. And one side note besides blown a lot of work was also done in Mosaic. There is also a branch for bootstrap there and it already works quite well. So questions in the face to face afterwards. What I want to mention is that we besides the sprint on the weekend, which will primarily be on Saturday for us at least. We will starting to continue our weekly, yeah, classic UIs prints every Wednesday. And that will continue on the January 13th. Thank you all so much. Thank you all. Thank you for listening. I'm pop over to the gypsy now for questions, I guess. Back to the moderator.
 So hello everybody.  Servus from my side.  It's close to Munich. My name is Stefan Antonely and I'm happy to introduce Peter.  Hi, I'm Peter. I'm based in Zurich, part of the Blue Dynamics Alliance.  And I think I've been doing Plon since 2004.  So, little mess with my slides notes.  So what's new in Plon 5?  We had this beautiful new theme.  We had the other teaming as a default.  We switched to CES compilation with less.  And we had a brand new Plon team, Barcelona.  So, Stefan.  Yeah, let's talk a little bit about the history, basically the story behind Barcelona LTS.  Everything started, or the whole story started in Tokyo a couple of years ago now.  I had the idea of a clean, simple theme for Plon 5.  It was during the conference and that's why I called the package Plon Seam Tokyo. You can check that out as well.  The theme was based on bootstrap with the idea of reusing stuff.  I want to use components. I want to use the stuff without writing tons of CSS all the time.  The package is basically proof of concept and had tons of overrides to identify what we need to touch when we want to switch the template story to any CSS framework in this moment and the decision was then bootstrap.  So, the issue with navigation and editing on mobile and that's what we solved with collective sidebar, which is a small package that gets a solution for navigation and editing on a mobile screen.  This is how Tokyo looks like.  In the moment, the screen chart is from 5.2 and we are going to update that in a branch with version 2 for Plon 6. The good thing is basically we just have to delete a lot of stuff.  All the overrides are gone and then we have a clean theme like that with almost no CSS and almost no templates. That's a lie. Let's say 5 to 6 templates to get exactly that what we see here.  So, we get there. We had some community discussions about the stuff.  There was a Plon target in Berlin, there was a Plon conference brand, there was also the Alpine city sprint. And of course some bottles of wine help during that discussions to find out solutions and everybody tried to use bootstrap somehow, mostly without success or real  problems, have fun with that work. So our first idea is was to map variables from Barcelona to variables from bootstrap.  The result was there is a lot of stuff defined in Plon, which is also defined in bootstrap. So, we came up with duplicated stuff and thought about what's the solution for that because we didn't want to reinvent the wheel.  So, it was a possible solution, touching all the templates and changing the markup in the templates to bootstrap.  The Plon conference in Ferrara came up.  There was the first clip basically for modernizing the markup to bootstrap, bootstrap 4.  Now we are on bootstrap 5.  A few weeks later we made a clip for modernizing the default theme as well so everything should fit together somehow.  So, we started with a new task, which is to update all templates. We know it's a lie, we never touch all templates, but the important ones.  And a big major task and a little bit tricky was to tackle the form lip. C3c form.  I'm not very experienced with that, but we have luckily some people helping us for touching the form lip, which means forms are on bootstrap 5 after that work.  So, the story or all the work is for enable us to write templates and reuse components without writing CSS when you want to create a template.  They said I have to go to Ferrara they said I have great discussions there and that's how it ended somehow so, but go to Ferrara it's a nice lovely place.  So, make things easier is the headline. We think I mean development I mean developing templates templating.  Things is creating a clean and and see a clean seem for clone without the mess without touching a lot of files without editing a lot of CSS or overriding a lot of CSS.  That is basically what we mean with make things easier somehow.  That's the reason why creating a modern website or web app is a complex task front and stuff is complex since there are thousands of devices and resolutions.  A lot of things out there that needs to be handled somehow you can watch or you can look at on a website with your VR headset or with your PlayStation, you cannot support each device separately there is a solution or a friend that needed for that.  It should be easy to to use components that are that just work and you don't have to care about them.  So, user expect things to work.  And that's the idea for bootstrap there are widely known UI patterns for features like buttons forms hover effects whatever they just work out of the box and you can now use that UI patterns.  So from a developer's perspective.  There should be one way to do things.  We.  The idea is we use a framework we use somehow standards for that and plonk or the ecosystem all the add ons can rely on CSS on some stuff that is there, and can write nice and shiny templates without touching CSS or have a lot of work to get that up and running.  And when you are working with blown you're a fan of Python you are a fan of systems.  You should not consider with designing stuff in the first step of course design is important but the first step is do the templates and get the stuff to work and the second step is make it nice and shiny.  By the way, Peter is later on showing something that is nice and shiny.  So developer you don't want to think about the markup. That's what we split strap comes you can you can just use components there is for almost everything there is a component, especially forms buttons, and a lot of custom stuff is still possible.  The good news or the very good news is, there is documentation.  We don't need to reinvent the stuff we don't need to rewrite documentation. The bootstrap documentation is now our documentation, where you can see their works in blown you can fully rely on that framework so far.  I will hand over to Peter now.  Yeah, so we already heard what new implant six.  We have this water as the new default UI. And we have Stefan to try to  Then, we still have the classic UI UI but we updated the mockup with pushup five.  It still has the same basal and look and feel.  But we updated it.  So this is the five to two.  And the next slide. This will be slightly updated version of Barcelona, which is fully based on both wrap.  We know that we don't have any through web seeming anymore. But we haven't.  So just add your quick and dirty CSS styles. And in the future or near future, you also can override CSS variables or custom properties.  And follow the path of bootstrap five there. There are already a few CSS variables that you can change, but not fully yet.  And it will be modernized. I already talked about is that we have a new JavaScript story or not so new. We will get rid of old stuff.  And one point that maybe wasn't mentioned is that we updated or were able to update jQuery finally to version three, which is the latest version.  Then let's go over to bootstrap.  Bootstrap is still the most popular front of framework. It's well documented. It has tons of examples. It's tested and maintained.  And honestly, we were missing out a lot of fun.  While doing bootstrap, it was so easy to change stuff, create stuff.  I enjoyed it a lot. So what is also new in bootstrap?  They improved the overall look and feel. They simplified a lot of the classes that you can use or able to use.  They updated and extended the color system. You have color palettes where you can choose all wide range of colors.  They added custom CSS properties that I mentioned. They also have their own SVG icon library, which looks really nice.  And they ditched or kind of came to the conclusion they don't need jQuery anymore. And it's now pure JavaScript that they use.  What it also means is that they are dropping finally support for IE 10 and IE 11.  Bootstrap 5, this is not correctly anymore. Just this week they switched to beta 5.  We don't have to go to version 5. We started with bootstrap 4 in the process of upgrading the classic UI.  But just two or three weeks ago we switched to the alpha 3 and we will switch to beta 1 this week or on the sprint.  Yeah, Stefan. Luckily that's just a small change in one line as far as I remember. So let's talk a little bit about features.  I don't know why we didn't do this earlier, but what is in the package now when we switch? The most important thing is Plon Core templates use bootstrap 5 markup.  As I said in Barcelona, the Plon 6 branch of the Barcelona team, we started with tons of overrides. They have been moved to their own packages now. So we have lots of LTS branches.  Check out the Core Dev build out for the current state. There is also blip config. I don't know if I have the links in my talk. We can provide the links afterwards.  But if you want to check out the package, you can test it easily out with a newly created package. We will talk about this later this afternoon.  What I want to say is all major templates have been touched already. This means editing firms is working out of the box without custom CSS, without custom stuff.  The links for default content types are already in. Listings work, like the tabular listing as works is responsive now, is one that I really like now.  The control panel has been updated with lots of effort by Peter. This is in right now.  There is a screenshot from Peter showed already. We, we, the idea was not to redesign Barcelona. The idea was to give almost the same look and feel, but just update all the markup in the templates.  So the markup works together with bootstrap default CSS that comes from your own compiling or that comes when you download it basically.  So this is a small site classic clone classic dot clone dot de for the current state. It's not updated right now we will update it, I guess after the talk, where you can see the current state.  This is work in progress so expect some issues expect stuff changes.  Almost each week we do small changes on different things. So this is not an official demo.  Bootstrap components as documented. That's what I said before works like a charm.  So this is a little bit of a  bit of a  bit of a demonstration as the bootstrap documentation now. I really enjoy what you see there, you can copy and paste, they provide code examples and a little copy button you can copy that code snippet pasted into somewhere in blown and it really just works.  We have tried that we have I guess we have a screenshot later on.  That's basically for all the components.  We really enjoyed it I really liked it to copy stuff and paste it and I mean no plan documentation prior to that just did exactly that.  Some of the core components are already updated we changed the breadcrumbs a little bit we used more.  We used cards for the portlets and the tabular listing.  That's what you  see here. The portlet on the right side is now no custom CSS no custom markup it's just copied and filled in with the variables from blown.  You literally can copy and paste what we mean with that accordion example. I guess we had to turn off the HTML filtering a little bit for the example, but basically no custom tweaks and that's not fake somehow.  I will pass over to Peter.  So what is the new Barcelona?  It's basically an opinionated set of pushup variables that makes bootstrap look like Barcelona and since we use all we updated our markup to that it works through the whole  theme CMS whatever you want to call it.  We try to use as little as  of our own CSS on top  because we just wanted to  use the full feature set of bootstrap and I think we kind of did a pretty good job making it look like Barcelona before.  You can really change every aspect of the same by variables. Doesn't matter if it's colors font sizes, spacings, grid gutters, whatsoever.  What's also nice with bootstrap, they have some overall properties that will go along through the whole theme.  So if you want to have shadows just turn it on. If you want to have rounded corners, turn it on or gradients within your components.  Yes, just turn it on and let it go.  Stefan.  So this is what our variables look now is still working progress.  You will remember or recognize some of these things.  We'll quickly show you how the variables work.  So this is next string.  So this is what it looks out of the box.  Change the primary color.  Everything throughout the whole theme turns orange.  Next we turn on the shadows.  Components get shadows where needed.  We're turning on rounded corners.  And what you see in the next screen is also all the edit forms have already the same look that you defined in the variables.  And then the next slide again.  The example from before component just takes up the colors from variables and works.  So yes, we just added a little bit for CSS or CSS for our own components that will be the navigation because it's a little bit more complex than all the examples that are out there on the web.  Also stuff like control panels and some smaller things.  We added CSS for that.  So we're coming to the theme, theme in workflow.  So the net will be an MPM package. You can base your own theme on that just by including the MPM package in your package Jason and run the compiler.  We will build a Bob templates clone template for the new seeming workflow.  I will show you later what did this somehow will look like.  And you still will be able to do your quick and dirty customizations even on top of that.  Questions came up.  If there will be any the other. Yes, it's still there.  It will work as before.  I think did some optimizations in the rules XML that will allow you to make more easy modifications within the content area, which was pretty hard before.  I think, Stefan.  It was the other.  Your turn with the icon resolver.  Yeah.  I come up with the idea of supporting more than just the default icons.  I was in the past a little difficult or a little tricky to change icons that are used by the clone UI.  So I don't mean adding icons and using an approach or stuff that is not a problem. But what if you want to change the clone appearance or content type icons for example for itself and that why we came up with an icon resolver.  This is more than the first idea I had basically. So let's start first. We have bootstrap icons now.  When bootstrap alpha I guess came out there were also new icons. They are more line or icons.  Big difference to the glyph icons and we decided to just use them because they are bootstrap they are there. Why not using them.  So if you want to do something like that, check out icons dot get bootstrap dot com for the for the icons and the good news again is all the icon names you can find in the documentation are are also available in blown with our icon resolver.  We have stored in via generic setup. So there is basically an XML it's part of blown not static resources. There we define a name for an icon, a copy or paste that's the clone name and assign the past to the SVG to it.  That's basically stored in the registry. That's that's the straightforward way of making it possible to change it later. We have all the clone icons are registered that way, all the bootstrap icons are there.  And on top of that we registered a couple of mine type icons for the file content type. So when you insert a file with the PDF it shows something that looks like a PDF icon, and you can change it and you can touch it so that's all on the customization story.  So how to deal with custom stuff override the XML. The idea is to provide a best practice packet for front awesome. After in a while, you have the option to touch each icon to override the past to your own SVG or whatever you want to go in there.  The icon resolver itself is work similar to the imaging story. It's the icons method is available via main template. It has a tag method and you're all method. You pass in the name of the icon.  You can modify class and alt tag and you get back in line SVG from bootstrap as long as it is an SVG. When you have a BNG registered you get back an image tag with that image reference so this is also work in progress.  We used it for a couple of weeks now and for clone defaults we need for the templates for listings for example, they already work.  So this is that's what's the idea of icon resolver. It's so it's 2020 we should really insert icons as SVG that gives you the option to style them or to manipulate them and the icon resolver is the idea of handing that.  We updated the templates to make use of this already so check out the test rendering page from the court have built out for an example how the coach would look like and how the icons are.  How the icons are done basically. Next is the showcase with Peter there you can see some bits of that already.  So this is the updated overall look and feel. We also updated a little bit of the structure of the content types.  We put the lead image on top, because we thought it's the most common use case nowadays.  We scroll down on a typical page. We added a view let for contributors and rights.  We also restart the tags down there.  And we read it various listings. This is what the tabular listing looks at the moment. There's more work to be done on the listings but think this is the new fresh way to do listings as we use it.  Next up is the event. We changed this event summary to be more prominent.  Also in mind that most of people now use websites on a mobile phone.  And we also read it related content on the bottom here.  These are already styled because we updated the CC3 forms. Once I notice if you're ever looking for a CC3 form widget, you're now all in blown up CC3 form and not scattered all over those packages.  This is what the control panel will look like or is looking.  Yeah, complete overhaul. We skip the kind of portlets on the side and use the navigation, the stroke downs.  We also updated a lot of all of the control panels. They all followed the bootstrap markup now and theming them was really easy.  This is the using groups panel.  And on the last one, it's a mobile view.  Next, I'm giving a talk on how to theme blown based on Barcelona Neta.  Then Stefan will give a talk how to do that from scratch.  And Mike will show you how to bring in a custom theme that you got from somewhere else and make it work with the other and then you wait to do it.  So we weren't the only ones that were working on that. So a big shout out for all those lovely people that helped with on various sprints.  And one side note besides blown a lot of work was also done in Mosaic. There is also a branch for bootstrap there and it already works quite well.  So questions in the face to face afterwards. What I want to mention is that we besides the sprint on the weekend, which will primarily be on Saturday for us at least.  We will starting to continue our weekly, yeah, classic UIs prints every Wednesday. And that will continue on the January 13th.  Thank you all so much.  Thank you all. Thank you for listening. I'm pop over to the gypsy now for questions, I guess.  Back to the moderator.
Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_0_743.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_744_1427.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_1428_2207.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_2208_3803.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_3804_4523.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_4524_6083.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_6084_8507.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_8508_12227.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_12228_12599.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_12600_12707.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_12708_12887.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_12888_13655.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_13656_13835.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_13836_15347.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_15348_19775.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_19776_21947.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_21948_23219.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_23220_24563.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_24564_24671.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_24672_28271.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_28272_29315.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_29316_30527.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_30528_32519.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_32520_32591.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_32592_33467.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_33468_34583.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_34584_36359.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_36360_36431.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_36432_37799.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_37800_38375.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_38376_38579.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_38580_39275.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_39276_40727.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_40728_42311.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_42312_43235.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_43236_44363.png Modernize_Plone_s_Classic_UI_-_Stefan_Antonelli____gzwHGsIhxrs_44364_45231.png