Series: Material Design with ember-paper

Material Design with Ember Paper-Intro + CSS tricks

Published on May 11, 2016

Material Design- made easy(er)!

This episode introduces the ember-paper library and does some strategic source diving to show you how to get around in the source and find things that are left out of the docs.


Links

Code

$ ember install ember-paper
{{#paper-content class="md-padding"}}
  <h1>Courses</h1>
{{/paper-content}}
$primary: 'deep-orange';

@import 'ember-paper';

md-list-item {
  background-color: color($primary);
}

Transcript

Hey everyone. In the next few free episodes, we’re going to be talking about Ember Paper. So this is a great way to use Material Design in Ember. So if you’re already a designer, great, you know what Material Design is and you’ll love to have an easy way to use it. If you’re not a designer, like me, then it’s a great way to not look quite as incompetent when you’re designing things. So let’s dive in.

So right now there are several versions of Ember Paper available. There’s the 1.0 Beta which is in pre-production and not all the way ready. So we’re going to be using version 0.2. You can install this by typing ember install ember-paper. As well as installing the ember-paper addon, it’ll also install ember-cli-sass for you. And if you already have stuff in your sass file and choose not to overwrite it, make sure to go to your sass file and add import 'ember-paper'. So this import 'ember-paper', it gives us a lot, and we’ll be looking at some of what it gives us in a little bit, including several variables like primary, background, and a couple of others.

Before we go further, I want to emphasize that I’m not a designer. I’m just showing you how to use the Ember Paper library so that you can make your designs that are better than what you would without it. So today I’m just going to give you some basic tips and tricks to get you to know your way around the library. And then in future free episodes, we’ll be showing how to do specific tasks with Ember Paper.

So this is the application that we’ll be working with today. It’s for a future project. And so the first thing you’ll notice is this title bar up here. It looks pretty nice. And so this is the code for it. I’ll go into this in much more detail on a future free screencast, but I want you to notice the paper-button. And this is a demonstration of how powerful Ember Paper is. This paper-button component... Check out that animation. That’s really cool. So you get that for free. That’s one of the benefits of using a library like this.

So next we’ll look at this bottom part down here. So this is surrounded... all this stuff is surrounded by paper-content. And you may think, okay... so the documentation is pretty good. See it has really good documentation for a lot of these components. So it’ll have something aboutpaper-content, right? Well it actually doesn’t. So what you’ll need to do is go in and look in here and see what it’s giving you. So this is in ember-paper under node modules. And this is actually how you can get a lot of information about what’s included, because the documentation while fantastic for what it covers, doesn’t cover everything.

So it also gives us some css, and notice how this stuff is all nicely labeled. So the stuff that goes with content, it’s in paper-content.scss, and the stuff that goes with the other components is in the appropriate scss file. So we can see that paper-content, it gives us a div that is flex, and we’ll talk about that in a second, and it gives us some specific tagnames and classNames and some Bindings. And then paper-content.scss has the stylings for those.

So one of the things that you'll want to do is attach classes to a paper-content. Here we’ve attached md-padding, and md-padding is not really well-documented, but if you look it up, you’ll see that it basically puts a padding around all this. That’s why there’s stuff here instead of it being crammed up against the side like it would otherwise. md-padding is found in the appropriately named structure.scss file. Once again, these are very well-named, so even if something isn’t in the documentation, you can fairly quickly find it in the app itself.

But to understand a lot of the css, you’ll need to understand flex box. So this is a new type of css display. And I’m not going to cover it in this episode, maybe in a future episode. But if you want to have a short introduction, there are two great games that help teach it, Flexbox Froggy and Flexbox Defense. Flexbox Defense is actually written in Ember.

So let’s talk about these default colors and how to change the color scheme. So we can use some of these defaults in our own styling. Here, we are feeding the primary color, we’re feeding it into a function called color, you have to do that, then setting it as the background color of this list on the side. Let’s go ahead and try to change that variable. So we’ll set it to a hash like 234, and let’s see how that works. And it fails. So why does the hexadecimal fail? So it fails because... so notice how all these in default theme, these are strings, and then when you go to color-palette you’ll see that each of these strings is matched. Here at the bottom we’ve got this match of the various colors with these sets of variables, and these sets of variables depending on the font weight will be a different color. So what we need to do is to choose one of these. We can choose... to make it really clear, let’s choose deep-orange. So in our own css, instead of using a hexadecimal, we’ll do deep-orange. We’ll see that it works but only on this sidebar, not on the top. To get that to work, we’ll need to do it before we input ember-paper. There we go.

So that’s the basics of using Ember Paper. We saw how to install it, which version you should use, as well as some of the tricks on being able to find things that you might not be able to find in the documentation. In next week’s episode, we’ll go deeper and we’ll focus just on building the title bar, so we’ll get something a little less theoretical, a little less tips-and-tricksy, and something focused on creating something. I’ll see you then.

Material Design with ember-paper

Subscribe to our mailing list