FREELessons: 8Length: 39 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.2 Material Design and Propeller

Material Design is a “visual language” developed by Google that provides a set of guidelines for solid visual and interaction design. In this lesson you’ll learn more about these guidelines and how the Propeller framework can help you apply them to your Bootstrap websites.

Related Links

1.2 Material Design and Propeller

Hello and welcome back. In this lesson we're gonna take a look at a few different websites as we discuss what material design is and what Propeller is. You can find the material design website at material.IO. And we will include the links for these sites in the course notes for this lesson. But what material design is, is it's a visual language created by Google that provides a set of guidelines or design principles. And if you look through the material design website you'll see a whole set of documentation on how material design came about, and how it's used. So, if we click on the guidelines and resources section here, and then click on design guidelines, you can read all about what material design is. And what the purpose behind it is, and you'll see a lot of examples of how it's used as well. So again, it's really just a design language, or a set of design guidelines. Now, in this course, we're gonna be talking about how to apply material design principles to our Bootstrap websites using Propellor. So first of all, you need to be familiar with Bootstrap. You can find the Bootstrap website at getbootstrap.com. Bootstrap is a very popular HTML, CSS, and JavaScript framework that allows you to very, very quickly, get a website up and running. And we're not gonna be teaching the basics of Bootstrap in this course, we're going to be assuming that you're already somewhat familiar with Bootstrap. And that you have a basic knowledge of some of the classes that are used to put a Bootstrap website together. But again, you can get to that website at getbootstrap.com. Now Propeller is a separate framework that's built on top of Bootstrap. And you can find the propeller website at propeller.in. So again, Propeller is a framework that's built around Bootstrap that applies material design principles to your Bootstrap websites. One of the problem with a lot of Bootstrap websites is you can tell immediately, just by looking at them, that they are Bootstrap websites. They have a very particular look to them unless you spend a lot of time customizing them. Well Propeller is just another way to speed up that customization process, especially if you plan on using material design principles in your site. And there's a lot of information here on the Propeller website about how to use Propeller and how to use classes that are specific to Propeller to enhance and improve your own Bootstrap designs. So if you go to the how it works link for example, it just scrolls us down the page a little bit. And it gives you same options for Downloads, you can Download Individual Components within Propeller or you can Download Entire Kit. The kit, I believe, at this point in time has about 25 different components that it will style for you. And a lot of these components are basically just Bootstrap components that are re-styled, but it also has a few components that aren't even available in Bootstrap. And we'll talk about some of those as we move forward in this course. So we can click on the get started link here or in the upper-right hand corner of the page. And this is kind of our documentation. So we have some Get Started information here. Underneath this, we have Style, which gives us some basic information on typography icons and then how to use Shadows in the Propeller framework. And shadows are discussed a lot in the material design website. And then again in the menu on the left, we have our Propeller components, which is a list of all of the components that we have access to using this Propeller framework. So this is a really good reference for you, I would advise you to bookmark This website because it does help you a lot when you are building out your website using material design. So now that we have a pretty good idea of what we're getting into, in the next lesson we'll talk about how to set up our files in order to use boot strap and the propeller framework in your web code. Thank you for watching, and I'll see you then.

Back to the top