Propeller Framework Combines Bootstrap & Google Material Design

The immense popularity of Google’s material design should come as no surprise. It’s part of a modern UI style focusing more on flat design with an emphasis on UX and usability patterns.

By taking the material design concepts & adding them to Bootstrap, we get the Propeller framework.

Flat 2.0 & How It Solves Flat Design’s Usability Problems

.no-js #ref-block-post-25181 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/flat-20.jpg”); }

Flat 2.0 & How It Solves Flat Design’s Usability Problems

Flat design has been around since as early as the 1950s when the International Typographic Style was developed.…Read more

This fully responsive open source framework plays the material role perfectly. It comes packaged with a component library of 25 UI elements, along with custom templates to speed up production.

You can find all source code on GitHub, along with browser support information and recent updates.

If you really want to dive in you should check out the documentation page. This is where the good stuff happens, covering folder structure, basic site setup, using components and how to customize the kit yourself.

Propeller buttonsPropeller buttons

Most components run on top of Bootstrap’s classes, so you’re working with a genuine BootStrap codebase. However, it’s heavily customized to mimic material design‘s animations and design ideologies.

Dropdown menus, forms, tabbed widgets, and progress bars, all of these components follow the material design style and they’re super easy to set up. The difficult part is finding the exact component to match your site because there are so many to pick from.

Generally speaking, Propeller follows most of Google’s design guidelines. The developers have done a fantastic job with this framework and it really does match the material style.

On the Get Started page, you’ll find four different downloads, each for a distinct purpose:

  1. Material Themed – for existing Bootstrap sites that want a material design style
  2. Propeller Kit – the whole CSS/JS library ready for production
  3. Stand Alone – individual components that you can copy/paste for your own projects
  4. Admin Template – a custom admin panel template made with Propeller

If you’re new to the framework you can download the whole kit and tinker away. This pack doesn’t have many sample pages but you can look at the Propeller site to see what it looks like.

This framework is production-ready if you’re looking for a material theme. It’s one of the simplest frameworks to build with and it’s likely to be around for years to come.

70+ Material Design Resources for Android Developers

.no-js #ref-block-post-24308 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/material-design-resources.jpg”); }

70+ Material Design Resources for Android Developers

Material Design is the new heart and soul of Google’s Android. Material Design is a visual language that…Read more

Source: http://www.hongkiat.com/blog/bootstrap-material-design-propeller-framework/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s