Get familiar with the basic setup and structure of Propeller.
Download
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.
Material Themed
Download this to themify your bootstrap based html page. You'll have to include the css and js files in your html page.
Propeller Kit
This kit has both css and javascript files and Sass source files along with the html code for all 25 Components.
Stand Alone
Download and use the individual component. You'll get the css, javascript and html files of the component.
Admin Template
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:
Folder Structure
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.
HTML Setup
Next you just have to make sure you link the files properly in your webpage. Generally it is wise to import javascript files at the end of the body to reduce page load time. Follow the example below on how to import Propeller into your webpage.
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
adding .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.
- Apply the specific Javascript, if any, to the element.
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.
What's next?
Detailed guidelines for using any component, can be found in the individual component page.