 Hi again Red Hat Developers. This is Jason with the Red Hat Developers Program. I'm here at Summit 2017 in the Dev Zone. Today we have Andres Galantes with us to talk about the five minute dashboard on Patternfly. Hello, guys. My name is Andres. I am from Buenos Aires in Argentina. I work at Red Hat and I'm part of the Red Hat's user experience team. And I'm also a core contributor to the Patternfly project. And today I'm going to show you how to create a dashboard in five minutes, completely from scratch using Patternfly components. So Patternfly is an open source design system based on Bootstrap. And think about Patternfly as a wrapper on Bootstrap or an extension of Bootstrap for enterprise use cases. So we changed the look and feel of Bootstrap to show large amount of information. And we also included new components by extending Bootstrap like data tables, font awesome, cards, dashboards, vertical navigation, and much more. So let's try building this dashboard. So this dashboard will have a navigation on top, then aggravated status cards to monitor your system, then utilization trend cards, and a utilization bar card. And everything will be based on the grid system, on Bootstrap grid system, which is responsive. So let's try to do that. The best way to use Patternfly is a dependency for your project. So to do that, you will type npn install Patternfly. And this will get you Patternfly and all the dependencies you will need. And this is the best way to use it, mainly because whenever we update the system, then you will get the latest. So you will get all the new components and the update we make. But since I don't trust the internet here, I'm not going to do it. I already added it in my home. So let's create an index.html, sorry, let's go, and then open it on my code editor. There you go. So here I have the index. And the first thing I want to do is to create an HTML5 structure. This structure will have a head to pass information to the browser and a body that will give the information that the user will see. So the first thing I want to do is to load Patternfly CSS, so all the styles. And these are two CSS files. The first one is Patternfly.css, which are all the things that we've changed from Bootstrap. And the second one is PatternflyAddition.css, which are all the things we've added to Bootstrap, so all the extra components. Now let's load all the behaviors, so Patternfly JavaScript, which will include Patternfly JavaScript, Bootstrap JavaScript, jQuery, D3 and C3 for charts. Now this document is completely ready to use any of our components. So the first thing I'm going to do is to create a grid. So this grid has a container. Inside a container, it has a row. And then it has as many volumes as you can define. And this grid is responsive. It's the same one that is bringing from Bootstrap. Now I want to add a horizontal navigation. So I can go to Patternfly documentation here. And I have all these navigations. And I'm going to use the simplest one, which is single level menu. So I can copy the snippet here. Then I can go to my code and then paste it here. I have the navigation here. So by copying and pasting these snippets from the documentation, I can get any of our components out of the box. Now the next thing to do is to create these aggregated status cards. So I can go to documentation again, copy the snippet and paste it. But since for the sake of speed, I have already loaded all the snippets on my IDE. So I'm going to trigger them, but it's only copying and pasting from the documentation. I'm not introducing anything new or any CSS. So if I do pf-aggregated status card, I will see the status cards there. Then I want the Utilization Trend Card. So I can do the Utilization Trend Card snippet. And again, this is only, I know it looks like magic, but it's only me copying and pasting from the documentation. I'm not writing one line of CSS. And finally, these Utilization Bar Charts here. And here I have my dashboard. I know it looks like magic, but it mainly is, right? It's just copying and pasting these snippets from the documentation. And then I can bring up my data from the back end and hook it up to the front end with either pattern fly like as it is here or using our Angular offering or the React project that we are building. And as I mentioned before, this is responsive, so I can change the size to a smaller screen or even a tiny screen, and this will look great on all devices. So pattern fly is great if you want to build an enterprise web application. We design it and build it exactly for those needs. So if you want to use it, it's open source. It's completely free. You can use it, change it, or you can even contribute to the project. If you want to contribute, you can check out our Slack channel. The community is super nice. You can get all the repos from our GitHub organization or check out the website for more information on the mailing list or on what pattern fly has to offer. And we're also down here on the user experience design team. You can get these t-shirts or chat with us for any other question you have. And thank you very much for being here.