{"id":30138,"date":"2017-06-07T21:01:15","date_gmt":"2017-06-07T13:01:15","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=30138"},"modified":"2023-04-06T19:14:30","modified_gmt":"2023-04-06T11:14:30","slug":"bootstrap-material-design-propeller-framework","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/","title":{"rendered":"Propeller Framework Joins Bootstrap & Google Material Design"},"content":{"rendered":"

The immense popularity of Google\u2019s material design<\/strong> should come as no surprise. It\u2019s part of a modern UI style focusing more on flat design<\/strong> with an emphasis on UX and usability patterns<\/strong>.<\/p>\n

By taking the material design concepts & adding them to Bootstrap, we get the Propeller framework<\/a><\/strong>.<\/p>\n

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

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tFlat 2.0 & How It Solves Flat Design\u2019s Usability Problems<\/a>\n\t\t\t\t<\/p>\n

You can find all source code<\/strong> on GitHub<\/a>, along with browser support information and recent updates.<\/p>\n

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

\"Propeller<\/a><\/figure>\n

Most components run on top of Bootstrap\u2019s classes, so you\u2019re working with a genuine BootStrap codebase<\/strong>. However, it\u2019s heavily customized to mimic material design<\/strong>\u2018s animations and design ideologies.<\/p>\n

Dropdown menus, forms, tabbed widgets, and progress bars, all of these components follow the material design style<\/strong> and they\u2019re 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.<\/p>\n

Generally speaking, Propeller follows most of Google\u2019s design guidelines<\/strong>. The developers have done a fantastic job with this framework and it really does match the material style.<\/p>\n

On the Get Started page<\/a>, you\u2019ll find four different downloads<\/strong>, each for a distinct purpose:<\/p>\n

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

    If you\u2019re new to the framework you can download the whole kit and tinker away. This pack doesn\u2019t have many sample pages but you can look at the Propeller site to see what it looks like.<\/p>\n

    This framework is production-ready<\/strong> if you\u2019re looking for a material theme. It\u2019s one of the simplest frameworks to build with and it\u2019s likely to be around for years to come.<\/p>\n

    \n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tUltimate Material Design Resources for Android Devs<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"

    The immense popularity of Google\u2019s material design should come as no surprise. It\u2019s 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. This fully responsive open source framework plays…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[2289,1823,37,3446,4317],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nPropeller Framework Joins Bootstrap & Google Material Design - Hongkiat<\/title>\n<meta name=\"description\" content=\"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\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Propeller Framework Joins Bootstrap & Google Material Design\" \/>\n<meta property=\"og:description\" content=\"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\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-06-07T13:01:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-06T11:14:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-material-design-propeller-framework\/02-propeller-buttons-docs.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-material-design-propeller-framework\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-material-design-propeller-framework\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Propeller Framework Joins Bootstrap & Google Material Design\",\"datePublished\":\"2017-06-07T13:01:15+00:00\",\"dateModified\":\"2023-04-06T11:14:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-material-design-propeller-framework\\\/\"},\"wordCount\":385,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-material-design-propeller-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-material-design-propeller-framework\\\/02-propeller-buttons-docs.jpg\",\"keywords\":[\"Bootstrap\",\"Frameworks\",\"Google\",\"Material Design\",\"UI frameworks\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-material-design-propeller-framework\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-material-design-propeller-framework\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-material-design-propeller-framework\\\/\",\"name\":\"Propeller Framework Joins Bootstrap & Google Material Design - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-material-design-propeller-framework\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-material-design-propeller-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-material-design-propeller-framework\\\/02-propeller-buttons-docs.jpg\",\"datePublished\":\"2017-06-07T13:01:15+00:00\",\"dateModified\":\"2023-04-06T11:14:30+00:00\",\"description\":\"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\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-material-design-propeller-framework\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-material-design-propeller-framework\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-material-design-propeller-framework\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-material-design-propeller-framework\\\/02-propeller-buttons-docs.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/bootstrap-material-design-propeller-framework\\\/02-propeller-buttons-docs.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/bootstrap-material-design-propeller-framework\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Propeller Framework Joins Bootstrap & Google Material Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Propeller Framework Joins Bootstrap & Google Material Design - Hongkiat","description":"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","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/","og_locale":"en_US","og_type":"article","og_title":"Propeller Framework Joins Bootstrap & Google Material Design","og_description":"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","og_url":"https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-06-07T13:01:15+00:00","article_modified_time":"2023-04-06T11:14:30+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-material-design-propeller-framework\/02-propeller-buttons-docs.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Propeller Framework Joins Bootstrap & Google Material Design","datePublished":"2017-06-07T13:01:15+00:00","dateModified":"2023-04-06T11:14:30+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/"},"wordCount":385,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-material-design-propeller-framework\/02-propeller-buttons-docs.jpg","keywords":["Bootstrap","Frameworks","Google","Material Design","UI frameworks"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/","url":"https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/","name":"Propeller Framework Joins Bootstrap & Google Material Design - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-material-design-propeller-framework\/02-propeller-buttons-docs.jpg","datePublished":"2017-06-07T13:01:15+00:00","dateModified":"2023-04-06T11:14:30+00:00","description":"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","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-material-design-propeller-framework\/02-propeller-buttons-docs.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/bootstrap-material-design-propeller-framework\/02-propeller-buttons-docs.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/bootstrap-material-design-propeller-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Propeller Framework Joins Bootstrap & Google Material Design"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7Q6","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30138","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=30138"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30138\/revisions"}],"predecessor-version":[{"id":65856,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30138\/revisions\/65856"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=30138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=30138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=30138"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=30138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}