 Okay, so hi, my name is Pedro, I'm a designer. During my free time I enjoy to travel to meet folks like you, but also regarding design, art. I also, when I do have a little time, I conduct some kind of workshops regarding UX design, but as well, graphic design at beautiful city of Prague, Czech Republic. I'm also a happy camper at Collabra, and today I intend to show you how easy it can be to customize Collabra online, you know, without tricks and without coding and this type of thing. Any designer should be able to do it, or even any business owner, right? So talking about customization, there is great advantages regarding customization, not only because it allows you to customize it according to your needs, or even your personal taste, it can be just that, and that's fine. So for that we will be probably working with XML, CSS and SVG, nothing too complex. So we can divide the theme in two pieces, if you will. The widgets that includes dialogue, sidebar, et cetera, and all the controls, and the overall theme, so basically the rest, right? Tall bars, icons, drop-down menus. Going through widgets. So widgets are customizable, that's why I'm talking and starting with them. They actually use this new extended instance of native widget framework, and I really recommend you to either after or when you have time to watch the talk from Tomasz, where he talks a little bit about these intricacies of how this was implemented. But for now, let's just say that it draws the interface depending on a definition, or to be honest, a set of definitions that are included in one file, and we'll see that later on. It allows multiple customizations, right? So multiple definitions, which in turn means multiple themes. This is really cool. We can now have a theme depending on an environment. And big thanks for this, yes. Now it's really cool that we open Collabra on an iPad, and without doing nothing, it just knows that it's an iOS device, and it just serves you with the right theme with the iOS-like components. And we'll see this later on, sorry for the bullets. I also don't like it that much, but we'll see more pictures. Let's let him take a picture. Perfect. And this, in return, gives you the opportunity to forest. Going from forest to... No, yes. Going from a purplish theme, where you see not only colors, but even components are from this theme to something, for instance, more bright, where the accent color is actually blue, and even the controls per se completely change. You see here? This is great. And especially when you can serve it depending on the theme as we discussed earlier. So you see the components change completely. Now I'm going to show you an example of how you do that, right? Step by step. So imagine you want to tweak a particular dialogue, a particular component of a dialogue. It couldn't be easier, right? So you go to your EastDirectory inside of your core, and here you will find in this sub folder online this XML file. It couldn't be more semantic, right? A file that has a definition is called definition. And inside you will see a bunch of sub tags. Now let's discuss one by one. The style tag, in a simple way, it deals with colors, right? Highlight, font colors. So even without messing too much around too many SVGs, et cetera, you can just tweak the overall aesthetic just by changing those values. Next we have settings. End settings, you can set values of things that are not particularly from a specific control per se, but generally, for instance, margins, tabs alignment, right? And we know that there is some dialogues with quite the number of tabs. So you can control that, the default font size, et cetera. And now we reach to our first control. Let's simplify this. So we can divide this in three parts. So first we need to say which type of control we are talking about, right? Here let's talk about our little radio button. Then you will say, OK, this control will have this size using the part tag, and inside of this part tag you will have a bunch of states. Now, each of these states is actually not an individual state, but a combination of states, right? So as you see here, I'm saying, hey, please define that when the radio button is enabled, not pressed and checked use this SVG, right? And you see that all the other states are actually a combination of states. You see? These allows you to have many intermediary states, right? Not just on, off, disable, enable, which is really awesome. Because if you play your SVGs right, you can achieve some interesting aesthetic results. So for instance here, when it goes, basically you are talking about when the radio button is on and it's pressed. And we kind of, I'm not sure if you see it with the video project, but we are already deeming out our little inner circle. So it almost gives this, even though there is no animation, it gives the essence and gives this visual cue to the user. And that's cool. Now, yeah, here we have, yes, it shouldn't be like this, yeah? Sorry for the rendering issue. Maybe it's a resolution. And exactly, we have many states as we say, like, of course, more than one state can be catch, right? More than one state can be active. But just the first one will be understood and rendered. Yeah, that's why it's important for this order, the order you set your states. But of course you can always play with it, right? You can, you set some definitions, you play, you change some SVGs, it's quite easy. The SVGs, it would be located in parallel with your XML file. So there is actually no structure folder complexity here. Now, that being said, it doesn't make much sense to customize your widgets and then forget the rest, right? Everything should be one identity, one visual identity. And I'm happy to say that it should be still easy to set up and easy to act even if you are just playing with it. So in here, inside of your own line directory, inside of this sub folder, you will find many CSS, many JavaScript files. So a word of advice would be to don't try to change or hack every single file because then you will have many loose pieces, right? And harder for you even if it's just personally, even if you are just playing with it, it will be harder for you to maintain and then you fix some CSS rule in one file and then you find out that in the other file is... And that's why you can just use this file, branding.css. And of course if any images are referenced there or you want to add any extra image, you can just drop them here, right? Before all this, you need to get a collaboration or development version of it, right? And be sure this is quite important that the code, brand, package, it's on your machine, right? Just to check. And then hopefully you will see what we see here, right? Now, this has a couple of advantages, right? You have just one place where all these customizations go, one file, one folder, that's it. But where if, and we sometimes receive these emails, where if you went really happy with your customizations and suddenly you want to have many variants of your own customizations, suddenly you want to have your own personal set of customizations, your little themes, if you will. It will be a little bit troublesome to just have it like branding, underscore, copy one, and then if you want to change, you need to rename. So for it, you should just... We have here a potato. And for this case, you should either refrain to have these multiple files and just have this CSS file and everything is there. So for instance, if you want to change the currency symbol, imagine you have a specific requirement from your costumers or even at your home, someone really likes potatoes, right? And for them, potatoes means currency. And that's how they see it. So you should be as easy as a potato to just replace the SVG with your SVG and making sure that this is over this folder. And then it should be easy-peasy, right? You will just redraw and you will have a potato as your format currency symbol. So at the end, this gives you a great flexibility because it's really up to you. It doesn't matter your method. It doesn't matter how you do it locally. At the end, you just need to be sure that you update that CSS. You drop it there, right? That images are located here. And that's it, right? Now, could you improve this workflow? And again, I reiterate, you are free to choose whatever method you want. What you might start to think is that, okay, wait, where if I divide the CSS file in multiple CSS files that have my own customizations and I can play with it? Like, I would, again, recommend to don't do that because then it means that you will alter your lowly flat directory. So it will not be this pre-steam directory anymore. Suddenly, you will have many things happening there. So for instance, if there is an update or something, you will have, again, these loose pieces. And then you might think, okay, maybe I can change the classes in the HTML node. Don't do that. It will be really messy. So maybe if you really want to have a more organized structure of your own locally, I mean, apart from Collabra, so you have your own things and then whatever you want, you just want to, okay, now I want to have it from my own customizations and I want to drop it to Collabra and everything works. If you want that, maybe we can talk about pre-processor, right? And this CSS pre-processor, it allows you to compile, I think, yes, it allows you to compile from a scripting language to CSS. And this, yes, adds a layer of complexity, but it also, and we will, for this example, we will take sess. And there is many, as you see, but for this example, we will take sess. These suddenly allows you to work with variables, functions, what they call mixings. These translated means that you can avoid repetition because you can have variables. And you can have, for instance, even in this example where we are talking about vendor-specific properties, for instance, when you want to transform an element in CSS or other example and you need to use more these vendor-specific either for that browser or that browser, you can have these in one place and reuse the code, right? So you don't need to have this redundancy all over the place. Yes, plus it will still allow you to debug directly on the browser as you have been doing with CSS. You just need to be sure that you have the source maps on. And source maps are nothing more than little files that tell the browser, hey, this CSS came from this scripting file that happens to be a SAS file. And this even allows you to edit the SAS file directly. And you can then use these links to just to be sure if they are enabled or set up correctly in your preferred browser. How you'd go about to install it, there is many ways and using many different technologies. So again, great level of flexibility, it's really up to you. And even all these we are discussing now, it's even not needed. If you are happy with just CSS, just do your own customizations, just drop it in that directory, we spoke about it. And that's it, no more work. But if you want more level of granular level of organization, you might want to install it over your preferred implementation. Again, a word of advice. This is the primary implementation, which means that performance fixes and even new features always appear first on Dart. And then it's up to the communities on the other implementations if they appear or not, or even with some small tweaks, different tweaks. Now this is how you could structure it locally. So again, the big advantage is that it doesn't affect your low reflect directory. So your online folder structure is still pristine. No probability of problems there. And here is how you could structure. So you could, for instance, divide it in components. Your own, of course, here I went crazy. I'm just to give an example that you can really go granular and you can really have a lot of customizations as much as you want. And then you have, for instance, a base file where all your theme specific variables will be. And then this little guy, actually our main guy, would do the breach of all these files and say, if there is a rule that comes from one of these files and uses a specific theme, the guy would say, okay, give me this color from this specific theme and we'll probably read from this variables file. And we'll see this in a minute. So you don't need to worry. And finally to run will be, for instance, just one line and there is quite interesting flags here. But the advantage here is that you can automate this process. You can run this on a terminal and actually many editors even have some plug-ins that if you really don't want to even can avoid the terminal and run this on the background and it will be watching always your file. And then you see even your own custom structure is in your local folder, it can automatically deploy to the directory we spoke about it. So at the end it's doing the same, right? It's just rewriting that file. And then there is cool things like you can choose a compressed style for a smaller file, et cetera. But enough of bullets. Let's see an example or second example actually. So you see here and I tried to be a little bit brief and talk just a small detail because I think then it's clear to follow through. So you see we have here, we are talking about drop-down menus, different accent colors. For instance, even here we have a normal font height. Certainly here we have bold. So you'd go about if you want to have for instance different set of customizations. Easy. So following that structure we'll just go to our toolbar up file. We'd set normally as we do for instance in CSS but instead of keeping hammering down all the roles here and probably if we have like two, three set of customization these times two times three, who knows. So instead of these we say okay, no, no, just go and ask this little fellow, our base file where we have all these theme specific variables, et cetera and get the values from there. On that side, this could be an implementation where we have just two set of rules and said okay, so if these variables are set to this, use this. If it's set to our your theme too which is extremely semantic variable value you'd use this and suddenly have these two different set of customizations and this is just one way to go about it. Of course if you read the previous slide there is many methods you can go about it. You can even have theme, many themes for each specific file. It's up to you again, a greater level of flexibility but just to make it simple, I use like this. I think it's easy to follow. And at the end the goal here is to make it yours either for your own personal taste or if you have a specific need for instance as we saw previously if you want to have a currency format icon that is not a coin but it's a potato, no problem you can just switch it and have it there so it's really up to you and this is just a couple of examples how the variety you can get from these simple steps. Yes, thank you, I hope it was not too fast and not too slow. And sorry for, I know that you were waiting here long time but I was waiting for everyone to calm down before starting. Tell me, tell me. Wait, it depends because I go back a little bit? Yes, like if we are talking about widgets it's different, right? Because as you notice we are actually not using CSS inside when we are defining these objects, right? So, and I hope we have time. I skipped that because I thought we wouldn't have time for that but for instance many of these components they are SVGs so for instance when we go here to our definitions you see they are SVGs, right? Now we have two types of SVGs on one side we have the SVGs regarding the controls, right? And they end up to be rendered as a bitmap then we have other SVGs the SVGs that they are mutable they are changing, right? An SVG for instance for our, I don't know drop-down menu or you know they change width so they are actually rendered via draw comments, right? So there is a difference there but if you are talking about but if you are talking about the overall theme so not the widgets per se but the overall theme then the coolness of these is that you can have online running you can even use the web tools on a browser go to that branding.css change it or even delete the whole thing and paste whatever you want and you will see in real time the changes appearing, yeah? So depending on what you are talking about it's slightly... It's awesome to have candy in the room It's you next It's you next? I didn't know, sorry I'll show you Unless you want to show me something else No, no I'm okay Thanks It's okay, I don't need applause No, no