 Sorry getting all set up here. Okay, so today we are going to be talking about a civic theme for Drupal 9. Many thanks to Akil because he helped set up a lot of this presentation. And then I just sort of added to it. So I wanna make sure that I'm giving credit where credit is due. He's been doing a lot of demos and slides for us. So I'm just very helpful to have the assistance and wanted to call him on that. So in terms of what I'll talk about today, so really quickly I will touch on products that we have called Launchpad in like 30 seconds. And then I'll talk about civic themes. I'll go through an overview which talks about benefits of civic theme, also of course what it is. We'll briefly touch on the architecture. So this is the part where it comes in where I say I am not a dev or ATL. I can speak very high level, but just wanted to at least put that information in. I'll give a very quick demo. And then of course, if there are questions, I am more than happy to answer those as well. And apologies if you hear my dog in the backgrounds. So we'll go on. So for the civic theme overview, sorry, there you go. Let me just move apologies. So there's always something when you go give a demo. Okay, so a civic theme overview. So what is civic theme? So it is our open source design system. Solve to digital, we've initiated it. We're currently maintaining it as well. We are in, I'd say in between alpha and beta if that terminology actually exists. And so it's not 100% public right now. So we will definitely have more contributions in the future, but that's sort of where we stand. It does have like many design systems where there's a library of already existing feature components that you can use out of the box already there. And it does include a D9 theme that works with the design system. It's also built so that we really wanted to make sure that content authors, editors, others within government agencies especially, and of course nonprofits and others could go ahead and build a site without needing to know any development or knowing how to code. And so with that, the reason why, at least right now we're focused on GoCMS is because unlike with D7 and D8 where you might have gotten a design theme or you got a design system with UI kit, there isn't anything that comes with D9. And so we knew that a lot of people, especially right again, if you don't have a large development team might feel like they were a little bit stuck and we wanted to help solve that problem. So if we go into benefits, right? We already talked about the fact that we want content authors to be able to go in and really build their own sites. But that doesn't mean that you're not going to need potentially some project management or some UX. It doesn't depending on the complexity of the site you wanna build. It doesn't mean that that all goes away but it does mean that you can still build a really high quality site and make sure that you're saving a lot of time and money while you do that because it's not like where you have to take a theme and maybe make a whole bunch of customizations for every single site that you're doing. It's really designed to make sure that you can use something out of the box. Doesn't mean that you can't do customizations or add new components. I'll touch on that a little bit later but it is meant to get you running quicker and faster. We've also done a lot of testing against WCAG 2.1AA. We certainly haven't gotten it perfect before we even release. We've talked a lot about doing another pass at that. It's really, really important to us to make this accessible as well as inclusive. And so it's something that we're still working on. The other thing that was really important to us as well is that there was the Australian government design system. We say former because it just is not being used as much anymore and it has kind of turned into AU Gold right now but it's not really government run by DT anymore. But those principles are still really, really important. There's still a lot there in terms of user research that was done, in terms of accessibility, the types of components that were used. And so we wanted to make sure that we were using all of that knowledge and not just kind of starting from scratch. And then as I've touched on already a few times, there is that simple page layout management with component sign. So in terms of what content authors could do, site authors could use the same terminology as well, is that you can either build new layouts. We do out of the box have a lot of default content. I'll show that in a little bit. So they can make tweaks if they're not sure. They need a like simple, simple site really quickly. They can just make those edits. They can add new features. So something that's really unique about Civic Theme, and we'll talk about that in a little bit, is that there are a lot of different variations based off of the component that you're using for the banner. And I don't think I'm exaggerating with this, Akil, you can correct me if I'm wrong, but I think there are about 40 different variations just for the banner. And it's not really complicated. It's just based off of the choices that you use through radio buttons, if you want an image, if you wanted to use the default. So it does allow for consistency across your site, or if you have multiple sites, but it also allows you to make enough changes where it's not like every single page, it's gonna look like a boilerplate template where you're doing the same thing over and over again. And again, we've said no coding needed to add some of those variations. It's just based off of the choices that we have at the moment. But of course, we can talk about customizations in a little bit and how that comes in. So in terms of architecture, right? This is where I show a diagram and I talk to it very briefly. And if you want me to go into it, I will be able to talk to our technical lead and solution architect and make sure that they get in touch with you. But really the way that civic theme is set up is there's a generic implementation, but then of course, you want the project implementation as well because it's, we don't expect you to take civic theme and all of the colors and all of the topography and everything and use it exactly as is. Now the components, right? We would expect, you know, for those to get used, you know, pretty much as is and use those features. But right, there's all of the branding and the other pieces that need to be used. And so one inherits the other. But in general, in terms of the architecture, it's built using HTML5, SAS and Twig and that's the code foundation. So it also uses the principle of atomic design. I think a lot of assisting this before, right? Where you have atoms, the molecules built on the atoms, the organisms built on the molecules and then the templates built on the organisms themselves. Something else that's unique. And this goes into, you know, where I was talking about how there are several different, you know, variations that you can use is that you can see that there's a light theme and a dark theme. And in certain cases, right? You might have instances where maybe you don't want to list out topics. You know, maybe you don't need to add in, you know, the suburban state. Maybe you don't want to have the date. You know, maybe you want to make some changes and all of that is possible. In addition, we also do have a storybook. And so I'm not sure if everybody has seen storybook before, but it really is a way for developers mostly to go in and see all the different components and, you know, to be able to see all of the different variations. Again, it is useful for content authors as well as designers, but it is something that, you know, for example, also if you've seen Ripple with SDP, they use storybook. There are many other design systems that use it as well. It is just a very useful tool to be able to see all of the different components and to be able to play around and see what the variations are without having to go into, you know, your actual site and make all of the changes on the fly. So in terms of the different component customization, so again, this is where I say I am representing technical leadership. I am not the technical leadership and so they will be able to answer some of these questions but it is possible to update the color palette via color system or component variables. So one of the things that I actually found fascinating with our dev team is that what they did in our architecture team is there are, let's say primary, secondary and accent colors and you choose those three colors. And then what they did was they actually created derivatives of all of those. And so there are all of these different color combinations that you can use for your components and that can be, you know, your foreground background colors that can be with your, you know, outlines and links like just the fact that it's done in a way where you don't have to say, okay, let me figure out, you know, this hex code and this hex code and this hex code that it's done programmatically is very helpful. That being said, it is something that we are looking at from accessibility because we still want to make sure despite the fact that we're doing that from a programmatic perspective that it is still accessible as well. But we are also putting out material for educational purposes on how, if you change the colors again, you know, we expect that people use their own branding, how to check accessibility as well using that model. So again, adopting components by adding or removing through slots. So we saw a little bit of that with Storybook. Then you can extend your components by replacing certain twig blocks, sorry, fully overriding components if you want to with your own custom component. That might, you know, in the end, require a little bit more maintenance on your end because it depends on, you know, what say the civic theme, you know, base foundation is like in terms of what is being maintained as right like the civic theme, product versus what people customize, but at the same time it is possible. And you can also add new components. And that is something where we would certainly expect people to do that. And, you know, it could definitely, and this is the same thing for four as well of, you know, is it something where maybe that, you know, custom component, is that actually maybe even a better version than what we had in the product. And these all get contributed back into the product as well so that everybody can use them. So this is what I was talking about in terms of the color. So you can see, you know, we have this neutral and it goes from 70 and 80 and 60. So there are all these different variations based off of, you know, what type of color and, you know, in terms of, excuse me, what you're using that color for. There's just under 1400 variations. Thank you. Yes, thank you. I was like, I know it's a lot. I just couldn't remember. Okay, awesome. And so when I was talking about slots, this is really, you know, what we were referring to in terms of where you can make those replacements. All right, so additional things is that the components are paragraphs. The good thing is, right? It's all part of Drupal architecture. So it's not like we've, you know, created something new that people aren't aware of. And, you know, the good thing again is that most people who have used Drupal, again, even if they don't have that technical knowledge, but, you know, they're used to adding content, et cetera. It's not something that will be a new idea or a new concept for them. That being said, we do, you know, this one's a little bit of a basic one, right? Because it's content, it's whizzing. We do obviously have a lot more and I'll show that to everybody. But you have the option to, you know, choose lighter, dark theme, depending on, you know, what you've chosen if you want a background, you know, do you want space around your component? So we do also allow for, I would say, some of those things that you might expect to be more CSS and front-end dev-esque. I don't think that's a word, but I just made it up. It's that it does allow the content author, whoever is building the site, to have a little bit more of that freedom as opposed to having to go, you know, to a developer to do that. So other things to note is that although components are paragraphs, components are not just paragraphs. I know that probably comes across a little bit confusing, but basically it provides all of the HTML structures. So, you know, templates, layouts, views, blocks, form elements, they're all built on top of form elements, which is a little bit confusing. I'll have to ask about some of that terminology there too, but just in general, you know, the architecture does allow for a lot of flexibility. So a demo, that always helps, right? Cause I've been talking a lot about what civic theme is, but it's even better when we get to see it. So I'm not ready for questions yet. Sorry, I'm just trying to use my computer. So, all right, so in terms of what we have with civic theme, so this is really what I was talking about in terms of, you know, we have this default content somewhat that comes out of the box, I'll say. And this is at least the choice that we've made now. Doesn't mean that it will be the choice that we make in the future, but we wanted to make sure that, you know, because we're giving people a design system, right? It's something that they might not have seen other than, you know, on our site that describes civic theme or, you know, where we gave a sample content site, that at least it's good to kind of give them, you know, key will probably correct my language, but I'd say like a starter pack almost to help people feel comfortable and, you know, where they can not just create new pages, but if they just wanted to edit something, they could do that too. And so we give people, you know, typical utility nav, we give them, you know, their header navigation banner, cards that they can make updates to, you know, other cards that they can make updates to. I think we have at least, at least six or seven different types of cards for people just because we know that there's a lot of different options that they'll want to use. You know, we have next steps areas. We know a lot of times, right? People want to do promos and then we also have social media and footer as well. So if we go into make some edits to the page, I promise I will not go through like every component. We would be here all night, just to show what some of the options are. So, you know, typical in terms of what you might expect from, you know, what we say a general tab, it's pretty much the page title. And then if you have any, you know, taxonomy terms that you would want to add in here. And then when we go to the banner, this is where I said that there are about like 40 different options because, you know, the large banner is what we had seen, you know, on that homepage, if you go to default, it's a little bit of a separate shape, I would say, but it's still the exact same background. You can change if you want that, you know, dark blue, there's a little bit of a gray for the light. You can, you know, obviously we see a lot of times on sites that they want a background with an image. You can have that, you can even have a featured image where, you know, you have a main image and then your featured image is like, you know, here in the corner. So there's a lot of different options. And then you might remember when, and we'll go back and look at the page in a minute, but we have these call to action buttons and, you know, just a simple statement, but we wanted to have like an area right under the banner where people could put content that, you know, I hate to say above the fold, but it's mostly above the fold. It makes me cringe whenever people say that because, you know, web is not print, but at least right in people's eye line, I'll say that in terms of when they first come to the page, but we wanted to also, you know, do a little bit of restriction so it wasn't that you could put, you know, absolutely anything in there because, right, we all know that you do still have to think about, you know, is something based off of CSS or how it's, you know, going to show up or the size of the component or whatever else, you know, it could drastically change, you know, the size of the page or whatever else. And so what we did was we restricted to content, a promotion, the ability to put in some of those cards and we will go into card container in a minute, or if they wanted a slider, because we know that we see that a lot in government sites right on the top are the sliders. So that is in terms of the banner. In terms of content, there is a lot there. So if I just do a dropdown, you can see, sorry, let me go again. You can see all of the different options that are in here. So content with a WYSIWYG, you have slider, you know, things that we would expect right in terms of accordions, maps, iframes, web forms, the ability to create listing pages. You know, when it comes to the card container, if I go and just add that, that's really the, you know, top level to everything. And then you have all of these different types of cards that you can add as well. That, you know, if you go to our storybook or we do have Figma as well, that's what we're using for design. You can see all of the different variations as well. So we tried to make sure that we were doing components that people wanted the most, I should say. But at the same time, you know, we're also trying to not provide the world, right? Because we know that this is evolving, you know, and that we did want to, you know, keep it kind of within some boundaries. But that is why we talk about contributing back when we get to that point just to keep adding what we have. So with all that, it did realize I forgot one very important thing, I feel like that was a rookie mistake, which is talking about content types. So the other thing that makes Civic Theme very interesting is that we only have three specific content types, two of which are generally used the most. So we have one just for, you know, the alert banner, which we know can be used as a block, et cetera. So that's the content type, the event content type. At this point in time, in all honesty, that's mostly used for a reference for cards. So, you know, we do have some landing pages, but we really did want to make this as lean as possible since we're using paragraphs. So most of the pages are built using the page content type. I feel like that sounds a little weird, but basically it really eliminates the need to, you know, be having five, six, seven, eight content types where you have to get that, you know, content structure exactly right. And then when you build your paragraph, like making sure that doesn't have the exact right thing where either it can be shared across all the content types or do you have to make like that tweak just for that one particular content type, et cetera. It really helps with that content structure and keep it lean. But still gives you all the information that you need. So definitely something I think from an educational standpoint as people start building sites that we're going to be focusing on, but just wanted to mention that and realized I should have said that from the beginning as I was going through, but I circled back so all good. So the other things that I wanted to point to, and there is a slide on this as well, but just in general, something that I wanted to mention and I'll probably do this instead of going to the slide, but we do actually have this like corporate.civic theme. It's really meant to represent a corporate GovCMS site. It's a department that we made up, but it's really meant to show what things look like without having default content, right? You know, even the admitted, like if you don't have your images the exact right size, you know, what can happen, et cetera. But it looks like a real site and it's meant to represent exactly what a user might see if they go into different pages as well. So the other thing that I wanted to mention as well is our civic theme.io site. So this is actually where I guess the magic of about civic theme happens. So, you know, you are able to see our, you know, example GovCMS site, which I just showed the roadmap. We are updating it soon. I promise that we even admit in there that it's been a little bit since we have updated it. And then community support, something that's not in here is that we do actually on the Drupal Slack channel. If you're on there, we do actually have a new channel. It's called Civic Theme Dash Design System. So feel free to come check us out there. But we do also have additional pieces in here, you know, not just about compliance and storybook. We have all of the components. So if you are not somebody that generally goes to storybook and you just wanna see, you know, about each of the components, where one of the things that we did do is not just say, you know, what the component was, but once it starts loading on my page, here we go. So you can see that you can actually like interact with the different knobs as well here in order to see, you know, all of the different changes you can make shows you how to change to dark theme. We talk about the compliance and the work that we did to be compliant to the former Australian design system. And then also how we did our accessibility testing as well. So we have all of that. If you want to, you know, learn more about development or design and, you know, some of the specifics around that. And then we also do point back to our developer documentation. So it is actually all on GitHub. And so some of our pieces are public. Some of them are not yet, you know, we're still in development and we're deciding how much of this will be open, but wanted to make sure that everybody had access to the documentation that we have here. And then we do also have an area where once we do release to the community where we talk about contributing back. So that could be through Figma, it could be through code, you know, if you're an accessibility analyst, you know, it could be through, you know, accessibility work or testing, et cetera. But that is, I think everything that I have for Civic Theme, I don't know, Akil, if there's anything else that you wanted to add at all, feel free obviously to sit back and relax too, but I just wanted to give you the opportunity if there's anything you wanted to chime in with. That's all good, I think that's very good. I guess the only thing I think you went past was on the Civic Theme.io site, there's a design, so Figma, Daniel mentioned Figma. The way that Civic Theme is set up, you can contribute both in the design system itself. So we use Figma, an open Figma library to show all the components, but also how it's set up. So if there's improvements or changes or additional functionality or modules or designs, you can suggest those even from the very beginning from the design system part, from the designs. And the intention is that they will flow onto the code eventually, if it's accepted as part of the community contribution, then that would flow onto the design and the build itself. So the potential future release would have those updates in there. Sorry, my computer's deciding if it likes Figma or not today. Keep talking if you need to. I know, right? Hopefully people will just pick up stakes. Yeah, so I know, and so beyond Figma, you can also make code contributions as well. So it is fully open source at the moment with the code here, sorry, designs here as well as the code in GitHub. Thank you. Okay, there we go. Decided it wanted to play nice. So yeah, so we have this area of how to contribute. And so there's this nice step-by-step of everything that you would need to know on how to contribute as a designer. So, right, are there any questions at all? Daniel, can you please put in the link to pavikteam.io on the chat, so that, thank you. Yeah, I could have known that, but... That's okay, it's all right. You can ask me, it's all good. But yes, I will take care of that. And just, so I think most of us here know about that, but for example, if Vizad wants to go ahead and explore that a bit, it would be good. Yes, I agree. And of course, that doesn't come up as a link. That's fine, thank you. Yes, Akil took care of it for me. He knows I need help. All right, totally okay, no question. Thanks, Akil, so any questions, guys? All righty, I think, okay. That was either a very great demo or it was all right. It's okay, I'm going to tell myself that it was so fantastic that nobody had any questions and just make my field data today on this Wednesday. What about, so maybe there's no questions, but has anyone got any sort of like feedback or comments or anything like almost anything to do with civic theme that they've seen? And I think any, anything's worthwhile to say. Go on, Gopin. So yeah, so as you mentioned, this is particularly for Drupal 9 team and we are focusing on mostly on the Drupal 9 new projects and all, I just want to confirm any roadmap or anything in terms of a migration of Drupal 7 to Drupal 9, Drupal 8 to Drupal 9, how exactly it would be easy or any existing project can be migrated into civic theme. It's possible it's a theme only, but yeah. Is there any way or any automation that we can do? It's kind of a more suggestion as well that we can have something, some custom module or some automation system that automatically migrate existing system to our civic theme-based system. Because it's all about the paragraphs and most of the sites are nowadays using the paragraphs only. So we could add in a civic theme, something like that that easily anyone can migrate all the data into the paragraph that is provided by a civic theme. Because I did a migration project and the challenge was I and Josh was doing that about the field collection to paragraph migration and that was kind of a very handy tool than when we migrate all the paragraph then. So it's doable, technically or theoretically, I would say it's easy. And if we can provide a scenario, if we can provide a tool that will ease any developer or anyone to directly migrate whole site data into the new civic theme system. So you can maybe something like that, you know. Yeah, maybe. Yeah, I mean, so Grumman, we definitely are talking about it. I mean, obviously, you know about Merlin. Yeah, I was a part of a development team. Yeah, exactly, I was like, you know it very well. So based on, we also have another open source tool just so you're aware. I'm not sure if you've heard of it or not, but it's called Merlin and it does, it's a migration tool, so you can do all that. So there isn't that part, but I also know that it's not like that's not necessarily one-to-one like just because you've migrated your content, right? That automatically, you know, everything looks great with the architecture. So it is something that we're definitely in the planning process of right now as well. But yeah, Akil, I wasn't sure if you had any other thoughts of what you were going to say at all. Yeah, so it's a good idea and it is definitely something working on. So part of what we're doing is we've got a few different tools to help migrate sites. So whether that's from, or specifically in this case, D7, especially for the End of Life campaign, there's first part of it is obviously civic theme. We need the target system for sites to go into. Merlin is an open source tool which helps with migration, scripting in large, in certain cases, so large sites and high volume content would be mapped into Merlin and Merlin would then move that across. Now part of what we're trying to work out and obviously is this end-to-end process of using Merlin to be able to migrate into civic theme sites. So there's a UI we're working on, I'm not sure which we can give away, but there is something that we're working on and that will help allow some of the mapping, some of that pre-work once you have that planned out as far as the content types and mapping goes. And then you can plug that in and then it would actually get provisioned and we have another tool called Launchpad. I think Daniel mentioned very early on, but that's a provisioning tool. So the gap between what we have now is a Merlin UI to plug in all the content, content types, et cetera. Then we have a provisioning tool called Launchpad which would then go and grab all these structures and then provision into civic theme. Now Launchpad at the moment does help with provisioning. So you can go into a wizard, eight step process and takes 20 minutes to provision a GovCMS at the moment a GovCMS specific theme based site. I mean, that's a default site that we showed earlier. It will build out one of those straight away. Yeah, but I do- I can understand Merlin is a one tool that we did couple of migration using that. That's perfectly okay. But in terms of a generic scenario that no one like, I'm not sure, maybe 1% of the developer aware about the Merlin framework and all and not everyone knows that. And let's suppose the situation is like that I'm working on a project and I just want to switch the theme to do new design. And if I have the design system in a way that I can easily migrate data by clicking on maybe by some settings, like I just want to migrate these paragraph into these civic compatible paragraph and that is all automatically written. So maybe we can provide some kind of system. Like we can also add a civic theme also provided demo data. But yeah, it can be possible that we should add kind of a system where user can choose like they need to add data or anytime they can create or add data as part of a demo content. So yeah, that's possible. In WordPress, I saw in many teams that kind of functionality where you can install the theme and then you can go back and anytime you can switch, like I want to like add the demo data right now to see how exactly it will look like. And so something like that we can be think about. No, I think that's really great. Because yes, I mean, and obviously we know too that if we're just doing a page content type for the most part right with civic theme and then coming where we have all of these other content structures like that comes into play but also just how it translates from one UI or theme to the next with a different architecture definitely needs to be considered. Josh. One thing I noticed like it's having its own content type. So when we make it open source like Drupal comes with its own content type. So what will happen like that? So already we have data. So for that, what is the... Like, so let me answer that question. Like civic theme or the bundle is already like prefixed by the civic underscore everything. So if you check all the content type, all the paragraph type, even the field type everything is prefixed by civic. So those are kind of a new content type would be added as part of the civic theme installation. No, what I meant is like I have content in Drupal which is there, like I have pages why have my content? So it's like... That's the part of migration. That's what we were talking about how exactly we can migrate those data to the civic compatibility. That's part of a migration only because civic theme comes into the new content type new paragraph types, everything between you. If you are going to use on existing site you do need a migration stuff like either it's a Merlin or either it's a custom solution or either you can develop your own migration script to migrate all the data from one paragraph to another from content type to another content type. And Merlin as a tool can do that. I mean, it can be mapped and you can programmatically build up the paragraphs or the pages themselves. So that's just the amount of time. So it's just how much time do you need because obviously the patterns for the different page types or page layouts they can either be done manually if there's only half a dozen to a dozen landing pages but if it is something across the entire site you could map out Merlin to build out programmatically each of the paragraphs and then inject all the content that you need in there. It's based of the configurations we've done that a couple of times as well for some of the migration projects. All righty. Comments. Any of the comments, any of the issues, things, questions, anything, a lot. No, I just wanted to say thanks for the feedback too and Paul, thank you for that suggestion as well. It's really helpful to hear even where there might be gaps or additional areas of work that we have moving forward and definitely helps make sure that we're in good shape as we release it to the world in the next few weeks. So.