Get familiar with the basic setup and structure of Propeller.
Propeller comes in four different forms. You can choose either of them depending on your preference and requirements. Download from one of the options available below to get started.
Download this to themify your bootstrap based html page. You'll have to include the css and js files in your html page.
Preview and download our precreated Admin template with all standards to save time and speed up your development.
Install with NPM
Alternatively you can install and manage Propeller using npm:
Below is the list of third party component available for npm install:
Install with Bower
You can also install and manage Propeller using bower:
Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap and Propeller files. You'll see something like this:
Just copy the compiled CSS and JS files and the font files(created for icons) from the .zip and add them to your project.
Copy the HTML below to begin working with a minimal Propeller document.
Use the components
You'll find below a couple of examples of Propeller Button component: A button with ripple effect and a raised button.
Just copy & paste the corresponding source code in the
<body> of an HTML page of your project and the component will render as shown below.
Propeller components can be tweaked and configured by adding CSS classes. For example adding
.pmd-ripple-effect to a Propeller Button will add a ripple effect when the button is clicked and
.pmd-btn-raised will change the style of the button to a raised button.
Checkout the components section in left navigation bar to see the complete list of components available with Propeller.
Steps to follow
Follow these basic steps to use a Propeller component in your HTML page:
- Add a standard HTML element for instance
<div>, depending on the component you want to use.
- Add the Propeller specific classes to the element depending on the component you are using. The classes enhances the appearance of your element according to material design standards and converts it into a Propeller component.
Theming with Sass
The Sass version of Propeller allows you to customize your theme by using variables, mixins and CSS nesting rules, rather than manually overwriting a lot of CSS rules by hand. Click here to learn how to modify the Propeller styling using Sass.
Detailed guidelines for using any component, can be found in the individual component page.