Propeller - Develop more, Code less. Propeller is a front-end responsive framework based on Google's Material Design Standards & Bootstrap.

  • By Digicorp
  • Last update: Nov 23, 2022
  • Comments: 16

A front-end responsive framework based on Google's Material Design Standards & Bootstrap.
Visit Propeller »

Table of contents

Key Features

  • Library with 25 Responsive UI Components

  • Ready to use template which speeds up the Development process

  • Detailed User Manual which provides step by step usage for every Propeller component.

Quick start

There are different ways you can start using Propeller,

  • Download the latest release.
  • Clone the repo: git clone https://github.com/propeller.git
  • Install with Bower: bower install propeller
  • Install with npm: npm install propellerkit

Using third party components:

  • Install Select2 with npm: npm install propellerkit-select2
  • Install range slider with npm: npm install propellerkit-range-slider
  • Install datetimepicker with npm: npm install propellerkit-datetimepicker
  • Install datatables with npm: npm install propellerkit-datatables
  • Install custom scrollbar with npm: npm install propellerkit-custom-scrollbar

Propeller Guidelines

Follow our Guidelines and get familiar with the basic setup and structure.

What's included

The downloaded folder will have following directories and files, with a logical grouping of common assets including both compiled and minified versions.

Propeller/
├── css/
│    ├── bootstrap.css
│    ├── bootstrap.min.css
│    ├── propeller.css
│    ├── propeller.min.css
├── js/
│    ├── jquery.min.js
│    ├── bootstrap.js
│    ├── bootstrap.min.js
│    ├── propeller.js
│    ├── propeller.min.js
├── fonts/
│    ├── roboto/
└── index.html

Just copy the compiled CSS and JS files and the font files(created for icons) from the .zip and add them to your project.

Browser Support

  • Firefox, Chrome, Safari Mac
  • IE 9+
  • Android 4.4+, Chrome for Android 44+
  • iOS Safari 7+

Bugs and feature requests

Found any bug or issue? Post them on GITHUB. Have feedback, suggestions or Questions? Join GITTER CHAT ROOM.

Community

Get updates on Propeller's development. Chat with the Product team and community members using Propeller.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, Propeller is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to those rules whenever possible.

See the Releases section of our GitHub project for changelogs for each release version of Propeller.

License

Propeller v1.3.3 (https://propeller.in) © 2016-2021 Digicorp Information Systems Pvt. Ltd. Licensed under MIT

Author

Developed and maintained at Digicorp.

Github

https://github.com/digicorp/propeller

Comments(16)

  • 1

    Provide javascript api for propeller components

    Every website has dynamic sections. As soon as I want to render a list from a ajax request I can't use the library to make this work. The last option is to copy paste and reinitiliaze all components. My suggestion is to provide a javascript api e.g by jquery plugins.

    Further I would remove all html in javascript and provide a interface like in bootstrap.

  • 2

    Modal compatibility issues with datepicker and select2

    i'm using the admin template and want to use select2 and datepicker on a modal, but neither of them seems to work, i click them but nothing happens, looks like it's something related with z-index, can somebody help me???

  • 3

    No spacing between cards?

    Seems like there is no spacing between cards, is that right?

    I had spacing okay when I was using card deck - but I think I have to change because, apparently, Bootstrap 4 doesn't support responsive-column card decks.

    So I'm looking at going back to cards that should be 3-wide at lg breakpoint. But, with Propeller enabled, there is no space between the cards. When I go back to plain Bootstrap, I get spacing.

    My mark-up is something like this, but I am also sometimes laying more than two cards side-by-side...

    <div class="container-fluid  cxt-bgimg     pt-4 pb-5 ">
      <div class="container pt-4 pb-5">
    
        Content here
    
        <div class="row ">
        
          <!-- card -->
          <div class="card pmd-card cxt-card-profile pmd-z-depth col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3">
            <!-- background color -->
            <div class="cxt-card-top cxt-bgimg" style="background-image:url('background.jpg')"></div>
            <!-- avatar -->
            <div class="cxt-avatar"><img src="avatar.jpg" class="rounded-circle img-responsive"></div>
            <div class="card-block">
              <h3 class="text-center">Name</h3>
            </div>
          </div> <!-- / end card -->
          <!-- card -->
          <div class="card pmd-card cxt-card-profile pmd-z-depth col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3">
            <!-- background color -->
            <div class="cxt-card-top cxt-bgimg" style="background-image:url('background.jpg')"></div>
            <!-- avatar -->
            <div class="cxt-avatar"><img src="avatar.jpg" class="rounded-circle img-responsive"></div>
            <div class="card-block">
              <h3 class="text-center">Name</h3>
            </div>
          </div> <!-- / end card -->
    
        </div>
    
    </div>
    
  • 4

    Bootstrap 4: Dropdown does not work

    Hi, I need to open my dropdown menu but not working Here my navbar code:

    <div class="collapse navbar-collapse pmd-navbar-sidebar" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link pmd-ripple-effect" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link pmd-ripple-effect" href="#">Link</a>
        </li>
        <li class="nav-item dropdown pmd-dropdown">  // HERE
          <a class="nav-link dropdown-toggle pmd-ripple-effect" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item pmd-ripple-effect" href="#">Action</a>
            <a class="dropdown-item pmd-ripple-effect" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item pmd-ripple-effect" href="#">Something else here</a>
          </div>
        </li>
      </ul>
    </div>
    
  • 5

    Sidebar Dropdown and Full Page Reload

    When using dropdowns in the sidebar, clicking a link causes a full page reload in an SPA. Top level links do not do this. Any thoughts on what would cause this?

    <ul class="nav pmd-sidebar-nav">
    	<li class="dropdown pmd-dropdown ...>
    		<a>dropdown</a>
    		<ul class="dropdown-menu">
                           <li><a href="/profile">Profile</a></li>  CAUSES FULL PAGE RELOAD ON CLICK
                       <li><a href="/logout">Logout</a></li> CAUSES FULL PAGE RELOAD ON CLICK
    		</ul>
    	</li>
                <li>
                  <a href="/dashboard">Dashboard </a> DOES NOT CAUSE RELOAD
                </li>
         </ul>
    
  • 6

    Manually open and close sidebar

    Hello, I am currently working with Vue and have a sidebar and navbar, but they are in separate components (but are basically the same as the demos you have provided). Thus, the toggle functionality does not work. Is there a way to manually toggle the sidebar overlay? Adding and removing the requisite classes does not seem to work (I am adding and removing 'pmd-sidebar-overlay-active' to no avail).

    I appreciate the help greatly

  • 7

    cannot find fonts

    i am using propeller in my react app.

    first i did npm i propellerkit and then import import 'propellerkit/scss/propeller.scss'; to app.jsx file.

    i have solve this problem by copying fonts folder from dist to propellerkit.

  • 8

    parentSelector variable with 'undefined' failed to check

    I found a problem when trying using propeller with jquery 3.2.1 & 3.3.1 maybe is not about jquery version, because i check with jquery 1.12.4 is working

    image

    The problem seems from propeller.js in commons.attachParentSelector function. It seem failed while trying to evaluate parentSelector which has undefined value

    My simple fix is, just added some new conditionals while evaluate parentSelector value

    if (parentSelector && parentSelector !== '' && parentSelector.length > 0)

    This 'parentSelector' conditional will guarantee that parentSelector for this value

    • null
    • undefined
    • NaN
    • empty string ("")
    • 0
    • false

    https://stackoverflow.com/questions/5515310/is-there-a-standard-function-to-check-for-null-undefined-or-blank-variables-in

  • 9

    [FEATURE] . Alerts could be triggered by javascript

    Im having kinda of a harsh time using this library alerts. i want to use it to tell the user that an ajax call was successful, but when i try the "js || jquery way"

     <button type="button"
                    id="success"
                    data-positionX="center"
                    data-positionY="top"
                    data-duration="5000"
                    data-effect="fadeInUp"
                    data-message=""
                    data-type="information"
                    data-revert="fadeOutUp"
                    class="btn pmd-ripple-effect btn-info pmd-btn-raised pmd-alert-toggle">
            </button>
    
    document.getElementById('success').click();
    $('#success').trigger('click');
    $('#success').click()
    

    The alerts aren't being erased. image

    Must be cool if they trigger with the same jquery you guys are using.

    Neat library btw .

  • 10

    Left Sidebar Fixed to Left and Top?

    My propeller-styled sidebar is working properly except that it continues to scroll with the main content rather than fixing to the left as it should with the '.pmd-sidebar-left-fixed` class.

    Scrolling down the page scrolls the sidebar, I mean.

    My current markup.

    // Sidebar
    section#pmd-main
    	// Left sidebar
    	aside.pmd-sidebar.sidebar-custom.sidebar-default.pmd-sidebar-slide-push.pmd-sidebar-left.pmd-z-depth.sidebar-hide-custom(role='navigation', style='position: absolute;')
    		ul.nav.pmd-sidebar-nav
    			// My Account
    			li.dropdown.pmd-dropdown.pmd-user-info
    				a.btn-user.dropdown-toggle.media(aria-expanded='false', data-sidebar='true', data-toggle='dropdown', href='javascript:void(0);')
    					.media-left
    						// img(width='40', height='40', alt='avatar', src='http://propeller.in/assets/images/avatar-icon-40x40.png')
    					.media-body.media-middle 
    						i.fa.fa-wifi.fa-lg
    						| &nbsp; The Superuser Blues
    					.media-right.media-middle
    						i.material-icons.pmd-sm more_vert
    				ul.dropdown-menu
    					li
    						a.pmd-ripple-effect(href='javascript:void(0);', tabindex='-1')
    							i.material-icons.media-left.media-middle person
    							span.media-body Who Am I?
    

    ... and so on. Thanks for your kind attention to what may prove to be my idiocy again.

  • 11

    Floating Action button without Ripple-effect issue

    Floating Action Button with pmd-ripple-effect works fine, but when i try to remove the pmd-ripple-effect from the buttons i face strange issue, the data-title of the rest of buttons becomes showing even if i don't hover over them...

    Floating Action example with pmd-ripple-effect :

    Imgur

    works fine!

    Floating Action example without pmd-ripple-effect :

    Imgur

    you can see the issue!

    Hopefully i fixed this by adding overflow:hidden to the buttons:

    .pmd-floating-action-btn{ overflow: hidden; }

    I attached some demos floating_actions_issue.zip

  • 12

    Ripple effect not using cursor as starting point

    In some cases the ripple effect is not using the cursor as starting point.

    Dropdown: https://i.imgur.com/ieK81RP.gifv

    FAB: https://i.imgur.com/cLwD61t.gifv

  • 13

    [propeller] expose ability to call propeller kit init to external lib…

    Adding ability to expose the propellerkit init method calls so that SPA type web apps can initialize propellerkit externally. For example, aurelia framework document.ready() is 'too late' given the lifecycle of page loads so we can instead use aurelia's page lifecycle to hook this in immediately.

  • 14

    Amplify Wordpress Theme Update?

    Hello, I use the Wordpress theme version of Propeller, and was wondering if there was going to be an update for WP 5.0? I got errors all over the place.

  • 15

    Multi Level menu

    Hi,

    Is there any way to add more than two levels for menu page as propeller supports only single level for menu or suggest how to add multi level for menu.

  • 16

    Uncaught RangeError: Maximum call stack size exceeded

    When i try to 'append '14 'pmd-card' i get this error with 'Propeller v1.3.1' but it not happen with 'Propeller v1.1.0'. Here screenshot for more details.

    1