The rapid evolution of web design has led to the creation of various frameworks that are instrumental in building responsive websites. Propeller is an emerging front-end framework that skillfully incorporates best practices from Bootstrap and Material Design, underpinned by a jQuery backbone. With the ever-growing need for mobile-first web designs and an appreciation for Material Design’s nuanced graphical approach, Propeller is gaining significant traction among developers and designers. This article provides insights on how you can leverage this powerful tool to create impressive, responsive websites faster.
Under The Hood
Before we delve into Propeller, it’s essential to understand the underlying frameworks, namely Bootstrap and Material Design.
Bootstrap
Developed by Twitter, Bootstrap is a comprehensive CSS and JS framework that addresses the issue of browser responsiveness. It simplifies the development process by offering responsive classes. Instead of writing hundreds of media queries to target every device, you simply use a class prefixed with .col-lg, which adapts the design based on the browser’s screen size. Learn more about Bootstrap here.
Material Design
On the other hand, Material Design primarily focuses on providing a uniform graphical interface for digital experiences. It sets the theoretical principles for crafting digital experiences. Although robust, Material Design could be daunting for designers aiming to incorporate all its best practices. Propeller conveniently bridges this gap, allowing easy transitioning from Bootstrap to Material Design. Learn more about Material Design here.
Getting Started with Propeller
To get started with Propeller, visit the official website at http://propeller.in/get-started/ and download the relevant files. Unzip the “pmd” folder to access the resources. You will primarily work with the “dist” folder, but note the assets folder, which includes CSS and JS files for Bootstrap and jQuery. The next step involves adding calls to the propeller.css and propeller.js files in your HTML document, which already uses Bootstrap. This addition will incorporate the Propeller framework into your website.
Whats the Big Deal
So, what changes when Propeller is installed? For starters, you get to use Google’s pleasing and easy-to-read Roboto font. Additionally, the background, blockquote styling, and a few other displays will change. However, beyond these, your website will function as a regular Bootstrap website. Let’s explore some classes we can apply to enhance your website:
- Navbar:
navbar-inverse: Makes the nav bar dark and the text light.pmd-navbar: Makes the nav bar larger with a more readable font.pmd-ripple-effect: Apply to the hamburger button for a fun ripple effect added to click events.<span class="caret"></span>: Add a graphical toggle to indicate more items in top-level drop-down menus.
- Buttons:
pmd-btn-raised: Adds a small drop shadow to buttons.pmd-btn-flat: Removes the background from a button until hover.pmd-btn-outline: Removes the background but keeps a border of the same color.
- Accordions (Bootstrap Panel-Group):
pmd-accordion: Adds a material design look to the accordion menu.pmd-accordion-inbox: Makes the active accordion panel larger than the rest.pmd-accordion-nospace: Creates an accordion without space between items.
- Forms:
pmd-textfield: Styles text fields to look better and more intuitive.pmd-textfield-floating-label: Repositions text field labels from inside the input to above it.pmd-checkbox: Provides better checkbox styling.pmd-checkbox-ripple-effect: Adds a ripple effect to checkboxes.
Wrapping It Up
Our exploration of Propeller just scratches the surface. The framework offers much more to learn and experiment with. Visit the official Propeller website at http://propeller.in/get-started/ to delve deeper into the components mentioned here and discover new ones. The framework is consistently updated with the latest methods and components, so keep checking in to stay up-to-date. Happy designing!