Propeller is a new framework that encorporates the best practices of both Bootstrap and Material Design. It is quickly gaining traction as more and more developers and designers understand the need for mobile-first web designs and appreciate the more nuanced graphical approach advocated by the Material Design specifications. Lets learn how to leverage this new tool to create better responsive websites, faster.
Under The Hood
Since Propeller unifies Bootstrap and Material Design (with a jQuery backbone), we should first explore these code bases so we understand where we are going. Lets dive right in!
Bootstrap is a CSS and JS framework developed by Twitter to solve the issue browser responsiveness. Sure, CSS already gives us media queries, but you would have to write hundreds of queries to directly target every device browser. And these media queries would have to be updated constantly to keep up with new innovations and device drop-off. I’m getting tired just thinking about such an undertaking.
Bootstrap simplifies things by providing styles that control your page responsiveness. Instead of writing a media query, you just style up a class with the prefix of .col-lg and that class will be called when the browser has a large screen size. Learn more about Bootstrap and how to use it here: http://getbootstrap.com/css/ .
Material Design has a completely different focus, but the two frameworks dovetail nicely together. Whereas Bootstrap solves responsiveness issues by moving objects around the page, Material Design tries to provide a common graphical interface for interacting with said objects. It provides the theory and principles upon which we can base the digital experiences we are crafting. It’s also incredibly robust. Learn more here: https://material.io/
And that robustness is probably the specifications downfall. Attempting to encorporate all of Material Design best practices is a daunting task, forcing you to begin with material design in mind, or forego the directions entirely. Propeller nicely bridges this gap and allows for an easy transition from your current Bootstrap website to Material Design specifications.
So, now you need to know how to get started with Propeller. First, head to the official website at http://propeller.in/get-started/ . There, choose your relevant download (I’m choosing the Propeller Kit download option) to grab the files to your computer. From there, unzip the “pmd” folder to take a look at the resources.
The folder we will be working with for our purposes is the “dist” folder, but also take note of the assets folder which includes the CSS and JS files for Bootstrap and jQuery. All thats left to do is add calls from your HTML document (that already uses bootstrap) to the propeller.css and propeller.js files, thus adding the Propeller framework to your website
Whats the Big Deal
Okay, now we have it installed, what’s changed? For starters, Material Design uses a Roboto font from Google that is very pleasing and easy to read. You will also get a different blocquote styling and the background will change. Beyond that and a few minor display changes, everything should be as it was before Propeller was installed. It is still a normal Bootstrap websites, Lets take a look at some of the classes we can apply to change things up.
- For your navigation bar, use class=”navbar-inverse” to make the nav bar dark and the text light.
- Add class=”pmd-navbar” to your navigation bar to encorparate material design specs, which will make the nav bar a bit larger than bootstrap and the font a bit more readable.
- Staying with the navbar, at a small width the menu changes to a hamburger button that collapses the items. This button is used extensively in bootstrap websites. Simply add class=”pmd-ripple-effect” to this button for a fun effect added to click events. This ripple effect can be applied to any button or link that is styled as a block.
- <span class=”caret”></span>
- When you want to add a toggle to top-level drop-down menus to let the visitor know that there are more items beneath the top-level, simply add the bootstrap component of <span class=”caret”></span> next to the link text (inside the link) to add a little graphical toggle. Can also apply ripple to the link that contains the caret.
- Add a small dropshadow to your buttons and clickable objects with class=”pmd-btn-raised”.
- Remove the background from a button until hover with class=”pmd-btn-flat”.
- Remove the background but keep a border of the same color with class=”pmd-btn-outline”.
Accordions (Bootstrap Panel-Group)
- To add material design look to accordion menu, which is known as a panel group in Bootstrap, simply add class=”pmd-accordion” to the same div that contains the class=”panel-group”.
- For a fun addition that makes the active accordion panel larger than the rest, use class=”pmd-accordion-inbox” on the panel-group div. However, you also have to add data-expandable=”false” to the title links inside each panel (look for link with role=”button”).
- To create an accordion without space between items, add class=”pmd-accordion-nospace” to the panel-group
- To style up text fields to make them look much better and more intuitive, simply add class=”pmd-textfield” to the form-groups that contain text field elements.
- For a fun way to make the text field labels start inside the input, then reposition themselves above the input, add class=”pmd-textfield-floating-label” to the form-group
- For better checkbox styling, add class=”pmd-checkbox” to the label within which the input is located.
- Add a little ripple effect to the checkboxes with this class added to the label which contains the checkbox element.
Wrapping It Up
There is so much more to learn and experiment with Propeller, we just didn’t have time! Head over to http://propeller.in/get-started/ to review the components mentioned here and find out about some new ones. The framework is constantly being updated, so keep checking to to stay up-to-date with the latest methods and components. Thanks for stopping by!