 Alright. Hi. Can hear me? Good. Yep. Hi everyone. So today I'm going to talk about material design for Rails. I'm Sam. So a while back, I started the journey of trying to find out the unifying UX experience for my own app. I want the UX experience to be the same regardless of iPads, computers, large screens, TV, watches, and so and so forth. So I chance upon material design. And today I'm going to use that format. This format is to go through the materials review. Material design has a very brief, very short history so far. It's introduced last year by Google. I'm going to go through that. And who are the target audience material designs for? The principles of material. What material design isn't? Some of the material design UI, why should you use material design? Comparison with Bootstrap. I know it's not an Apple to Apple comparison, but it's good to put things in perspective. And then finally a gem that you could use so that you could apply material design in your Rails app today. So Google announced material design about last year, June in the Google IO conference. And the crux of that message was that material design is a visual language that expresses principles of good design. And also it's a unifying system that will provide the same UX across all devices and screens. That's all. That's basically the key message from Google. Who are the audience? Well, first of all, application users because that's the people who interact with the app that you design. Second of all, developers. Not so much for UI and UX designers because they are the guys who come up with the new UI elements. But it's actually the developers who consume all those concepts and apply it to the apps. And then in return, your users will use them. Yes, VisualCom's designers could learn a few things from Google. That's definite, but they're not really the direct audience. Now, it's hard to jump right in and show you a few things of material design. We're just going through some of the basic principles of material itself. It's very worthy. I'm just going to go through very, very quickly some of them. Well, material design is a 3D world, so light and shadow give depth. Shadow is not just an effect. The width and height may vary, but the thickness is always 1dp because material design runs on an XYZ axis. So the thickness of every object is important. Elevation cast shadows, content behaves independently of the material but limited by its bounds. Number six, no two material can occupy the same overlapping XYZ point in space. Well, as with a reality world, we don't really have two things knocking each other on the XYZ space. Material cannot pass through another material. That's straightforward. If you take two pieces of paper, they don't go through each other. Material can change shape, can shrink, grow, not a problem. If materials join together split, they can be spontaneously generated or destroyed. Material can move along any axis. The Z axis motion as a result of a user interaction. So I'm going to try to show that down some of the slides. Now, what material design isn't, just to put things in perspective as well, it's not just a bootstrap theme and it's not just a CSS or Android theme. You actually see material design more prominently in a few places or few apps. Firstly, in Lollipop, the latest, or one of the latest Android OS, in Google Drive, in Google Inbox, some of those apps, but it's not just a CSS or Android theme. It's not just a concept without implementation. There is implementation. It's not just for the web. It can work for your watchers too. So as a mock-up, there is a watch face mock-up using material design concept. Now I'm going to jump right in and show you a few material design UI elements. Like Bootstrap, it has a responsive grid system. So child columns and rowing columns. That's not very surprising. It has shadows. Because material design talks so much about shadows, in Bootstrap or any other CSS, you have to actually specify your own box shadow. But in material design, since they have talked about the different layers or different depth, it's good to have a CSS class to actually define all that already. So what it means is that the one with the depth 5 is closer to the screen and the one with the depth 1 is further away from the screen. In conventional UI, when you press a button, when you use a mouse click and you click, the item actually goes further away from you. It goes down. But in material design, it's the reverse. Why? Because nowadays we use touchscreen more often. So when your thumb presses on the glass, the material actually goes closer to the glass as a magnetic effect. That's how it works. Colors. Material design or Google is nice enough to define all the colors for us. There's a very huge palette of colors that you can use. And there are some color theories or, say, style guides that Google has left us with to say that perhaps you want to use a certain contrast to emphasize important things and you shouldn't use certain colors or foreground with certain background. And if you were to look at the code I have here, it says the blue and lightened four are classes. And you can use the same on your markup. I'm going to show you a gem later on that we'll demonstrate this. All right. So like Bootstrap, Material Design has a number of responsive framework classes that allows you to specify medium and down, medium and up, large only, small only, hide on small only, or show on small only. That's all there. That's not too different from Bootstrap actually. But where it differs are elements like this. Responsive topography. Well, no matter how responsive is your web design today, your text sizes are about the same, right? But in this gem that I'm going to show you guys, it knows both diff has actually the exact amount of text. Same words, same characters, right? But the one on the right-hand side uses less or smaller font size. It's responsibly resizing itself. So you don't have to do all the media queries on your own. I tried that before. It's very frustrating to fit on all screens. And all you need to do is add a class called flow text. Truncating text as well. It's just a class called truncate. And it figures by itself whether there's enough width. All right. So this has a very good use case where let's say you're developing a tribal website and you have a description of a location, right? So you want to have the more toggle, more and less of the description of the place. You could truncate or don't truncate. You can work that out. So it's very easy. Without using a lot of JavaScript, you can actually have truncating text. Floating buttons. So this is one of those features that material design actually tries to express. If you try out any of the latest Google apps, say Google Drive, or you try out Google Calendar, you actually see this. Or actually even Google Inbox. It works as a very good contextual manual, right? But it's also very nifty. It doesn't take up a lot of space. And if you look at the markup, it's actually quite straightforward. It's just a button floating, button large, wave effect, and red color. Very straightforward. Nef bar. So I think one of the things I tried to do with Bootstrap was to mimic the Google Inbox search bar. So if you want to click on the search, you want the whole bar to change color and all, you probably have to write some form of CSS transition and then use the JavaScript toggle. But this gem that I found actually tries to mimic all that behavior. So pretty good. If you try to search, it switches to white color, switches back to red or whatever color that you choose for your theme. Okay, toasters. You could do this in Bootstrap as well, but what's interesting here in this framework is that they know if you're on a larger screen, iPads, IMAX maybe, and the toasters will come from the right. And if you are on a mobile device, smaller device, it comes from the bottom. And then you can swipe it away. It comes with building gestures as well. So what it means to developers is that you don't really have to care. All you need to know is that, oh, this is an alert. Let me toast it, right? And then the framework takes care of it by itself. And many, many more features that I cannot go through in one talk. I can highlight a few. That's parallax. So a lot of us like to do parallax website designs in these days. And they have that. Pushpin, which mimics the material design pushpin. Tons of transitions. And they have sticky footer. More importantly, this gem called materialized sass actually provides you with sass variables, sass mixings, and sass prefixes, which is really interesting because I'm going to showcase some of those websites that has applied this gem right now. Okay. Okay. Let me zoom this. All right. Okay. Sleek. Burglar website, right? And so this website uses material design, specifically material sass CSS gem. And it uses a few nifty tricks of which, one of which is the spy fire, which means as you scroll, it detects a certain scroll height and it fires an event. So let me try to do that now. Scroll. You get to see that. Scroll some more. You get to see some of that. Yeah. So all this is building to the framework. You don't have to like, you know, install or add another plugin for this. Okay. And it's really nice and you could actually, let me try to resize this thing and then, okay, let me try to resize this. And like you would expect, the website actually resizes itself pretty well in a very responsive fashion. It has a nav bar. So you can access all the manuals regardless of screen size. It has a little alert on the bottom, which can go away. Okay. Next, yeah. So this is the parallax theme that I talked about. It's one of the effects that come with the framework. So as I scroll, you can get this little, little parallax effect. Okay. That comes out of the box with the framework. Okay. Next, this is a website. It's actually a Chosmode lockdown app for Android OS. But what's interesting is that the website actually has a lot of stuff, a lot of details, that would fit very, very well on a large screen. But look what happens when I try to resize this. Again, the sidebar is there to navigate all the different links. Okay. So this is more like a real application with a lot of details on screen. It looks really well on a large screen. And see what happens when I try to resize the height as well. You will see that actually the floating button is here. Yeah. The floating button is there. Okay. It doesn't take a lot of space to show the details of the page, whatever you want to navigate. The page still works. It's still double tap. It works. So what I really like about material design is it's not so much just a framework that allows you to, say, detect large screens, small screens, and everything. Even a UI element behaves differently on different screens. And a lot of those are not just code. It's actually UX design concepts passed down by Google. And I like the floating button a lot because a lot of time, if you look at Visual hierarchy from VisualCom's design, you would have a navbar on the top and then you have the side links, which are the sidebar. And then you have the content. But then more often than not, you're going to have links in the content when you click and you try to navigate your sidebar or the navbar. But sometimes you want something contextual. What happens? You don't want the content area to change or to swap out your parents. In this case, it would be the sidebar or the parent or the navbar. So what you can do is to provide a floating button. The floating button menu changes as you select different items on the content area. And that would conform to Visual hierarchy pretty much. That's what I like. Okay, so I'm going to go back to these slides for now. Okay, so why material design? It conforms to Visual hierarchy. Why is that important? So as a developer, you crunch a bunch of code, you create an app, and then your US guy come along and say, hey, that looks cool rather than, hey, that doesn't conform to visual comps. So you actually get to write good UI and good UX. Materialism metaphor is a natural approach because it tries to mimic paper. Motion provides meaning. And this is something that a lot of coders, a lot of front-end coders, we know how to create animations, right? Sliding, gradient alpha and all. But sometimes they are overdone. Sometimes we don't use certain effects that we're supposed to do. So if you study material design, it actually teaches you how to use motion in a very meaningful way. So if it comes from the bottom, it wants your attention, comes from the side, it's more so for information navigation. And because of that, you would have less user training with standardized UX. Across different apps, if you apply the same principles, the UX is the same. So a user would know if I swipe from extreme left to the right, I pull up the sidebar. But if I swipe from the center to the right, it's more of navigating between cards. So that's one of the examples. And that example can apply on your watch, on the iPads, most probably on your browser as well. It's a spec rather than a framework for responsive design. And why is that important? Because we all know if you use Rails, it's an MVC framework. But you can actually code it such that you defy all the MVC values. But you're still using Rails. So material design, because it's not specifically an implementation, it's a design concept. So if you do not apply some of the material design principles, you are actually not following material design at all. So that's more important. It has a consistent icon, UI element, look and feel. So it's not just colors, it's not just buttons and all. Your icons as well, you can look at the example there done by Google. It's pretty good, very nice. And so that your app won't have a certain look and feel for buttons, but then the icons look totally different. In fact, if you look at Bootstrap 3 or 4, in order to provide a very good consistent icon design, the Bootstrap guys have reduced the icon set to a very low fidelity, just one color, white or gray or black, more of an outlinish silhouette icon, so that it will fit all situations. But that low fidelity sometimes may not be enough. So material design actually has a guideline for icon design. And because it uses size, color and depth for emphasis, which is more natural. So for example, on an ad ticket, if you want to develop an ad ticketing app, so what's the most important? Not quite the date, because you usually get your boarding pass on the date itself. So the date is not so much important. What's important? The gate number. If you get a gate number, you get the airline correct. You get the rest correct as well. So maybe boarding time. So those, you use a bigger font, maybe a more high contrast color. The rest of the information, maybe lower font size, less contrasting colors. And it works from desktop to watch. Just a short little comparison between material design and Bootstrap. I like to say that material design is 100% replacement, although in certain cases I will still use Bootstrap. So well, material design first and foremost conforms to visual hierarchy, right? And it's a responsive design. Whereas on Bootstrap, if you use Bootstrap, it allows you to conform to a responsive design. There's a huge difference there. So because Bootstrap allows you to know when the screen is small, when the screen is medium, when the screen is large, the default UI elements will respond according. But your custom elements may not respond. And you have the right CSS that detects those sizes and then respond. But since there's no guideline as to how you should respond, so it's up to you. And then you have this ping-pong between your UX guy and you as to maybe force, or small screen switch the fonts to something else and large screen use certain fonts and everything else. Material design is not really an implementation. It's more of a concept. It already shows you how to do so. Material design is a responsive set of layouts, UI elements, and user interactions. Bootstrap is more of a grid system with a default UI look and feel. Like I said, material design is an opinionated UX. So it's very opinionated in terms of the UX. But Bootstrap is very opinionated in terms of the implementation. And therefore, material design does not or does not have a popular implementation yet. There is materialized CSS or materialized CSS. There is materialized from Google. But there's only one official implementation from Twitter for Bootstrap. At the moment, material design is more so a designer ecosystem. Whereas Bootstrap, you have a lot more designer themes. You have plugins and jQuery and all that sort of stuff. The only few plugins that I see that is targeted for material design is ReactJS. I guess hand in hand because of a fixed UX, fixed UI kind of a concept. ReactJS is kind of like naturally suited for that. Material design provides you with transitions, typography, icons, UI elements, tables, colors, layout, and navigation. There's more for layout, icon, for my elements, and navigation. Having said that, Bootstrap 4 is now in alpha, so check it out as well. Alright, so how do you use material design in your code today? You actually can use your material design in your code today. And all you need is to add these two lines, the top two lines. Gem, materialized CSS into a gem file. And I recommend using reals utilities. That's a gem written by Winston. You have to include the icon spawn to utilize all the icons. You have to include materialized sprockets so that all the JavaScripts goes into your assets pipeline. You have to initialize JS and bind some of the events that you want to use. And you can use the built-in CSS classes. And you can also use the sass variables mixing prefixes. Let me see what's the next slide. Okay, so I'm just going to show you a sample. A very basic sample app. Alright, so pretty straightforward. Add materialized sass into your gem file over here. And add reals utilities over here. So that's step one. Step two, include the font icon, right? Sorry, the icon's font. That's simple. Just go to your application layout and include this line. It's actually a web font from Google. Materials icon. Quite straightforward. Okay, next step, initialize JS, sorry, include materialized sprockets. That's also pretty simple. Just go to your application JS and add this line. Require materialized sprockets. And now you have enabled materialize. And the next thing you need to do is initialize JS to bind events. And I happen to have such a file here. The reason why I use reals utilities is because it kind of organizes a JS code for you. So I have a single point of in it for all pages of my app. And this is where you could actually bind all the universal events. You can also bind page specific events or controller specific events if you want to just create more methods or more classes. And you can use like CSS classes. I'm going to demonstrate that by just bringing up one of the hammer files. Quite straightforward. It's actually a Nefbar fix. The Nefbar color is cyan, lighten one. It's a Nefbar wrapper. I have a brand logo here. And I have a vertical align. I have material icons here. It's on the right hand side. It hides on medium and down. So I have two menus. One hides, one doesn't hide. Quite straightforward. And lastly I can use a lot of the SAS variables. So let me show that to you. Utility. Let's see. So this. See that there? This little piece of code. So all the media queries you used to have to tell your CSS, hey, which size to which size. But now you can use all these variables. And that's specified by materialize. And all the classes that you can apply, for example, wave effect, which is this ripple effect when you click on a button, you can just extend it in SAS. Even down to colors. Your primary color, your secondary color. All the different colors, you can use them as variables. And that's basically a very simple demonstration of how you can use it. And if you're wondering, I have a lot more resources to share. The gem comes from materialize.css.com. There is a huge gallery on materialup.com. I'm going to show that to you guys in a sec. You should check out Google's material design spec. There's a lot to read. A lot of videos to watch. It's amazing. There is a gem, another gem called material icons for Rails. Which will just include all the icons to your assets pipeline. There is the material icons guide from Google. And there is another font called material design iconic fonts. And that's also on GitHub. The credits are for some of the references that I have picked up. All the icons that I've seen on the slides, I picked it up from materialup. And some of the websites that I have showcased. So if I were to return back to materialup. It's a very nice website with a lot of showcases of material design. Really really nice. You're all animated. Check it out. Also icons. This is the material design iconic fonts. The actual spec itself from Google. Lots of videos here. You should check it out. And finally the gem that made it all happen. Materialize. So a group of really really nice guys who... Let me bring up the credit page. These guys who made it happen. They implemented all, if not more than the spec. And made it happen. And provided a SaaS friendly gem. So I don't have to learn all the colors, the hexadecimals and everything. I get to use them as variables. I could extend them anywhere I want. I could use them on a markup or within my SaaS. I know that a lot of people don't like to put classes on your HTML tags. They say what if I could just bundle them in a class. So now you can do so. Just keep extending those class in SaaS. And just apply a single class on your markup. And they have a lot of JavaScript stuff. Very nifty tricks. They have applied to the gem. Wonderful team. And yes, if at all I think the credit goes to all of them. They did a good job. In fact, I recommend this gem more so than Materialite from Google. That's all I have. Thank you.