Foundation for Apps vs Material Design for Bootstrap

Need advice about which tool to choose?Ask the StackShare community!

Foundation for Apps

30
42
+ 1
0
Material Design for Bootstrap

80
206
+ 1
46
Add tool

Foundation for Apps vs Material Design for Bootstrap: What are the differences?

What is Foundation for Apps? Angular-powered framework for building powerful responsive web apps, from your friends at ZURB. Foundation for Apps is a framework you can use to build better, more polished single-page web applications that work across many devices. We’ve taken what we’ve learned from building the original Foundation framework to build an entirely new framework just for web apps.

What is Material Design for Bootstrap? Material Design for Bootstrap. This Bootstrap theme is an easy way to use the new Material Design guidelines by Google in your Bootstrap 3 based application. Just include the theme right after the Bootstrap CSS and include the javascript at the end of your document, everything will be converted to Material Design (paper) style.

Foundation for Apps and Material Design for Bootstrap can be primarily classified as "Front-End Frameworks" tools.

Some of the features offered by Foundation for Apps are:

  • Vertical Grid
  • Independent Scrolling Sections
  • Easier Source Ordering

On the other hand, Material Design for Bootstrap provides the following key features:

  • Input fields (text, numeric, email, etc)
  • Textarea
  • Buttons (ripple effect working)

Foundation for Apps and Material Design for Bootstrap are both open source tools. It seems that Material Design for Bootstrap with 19.9K GitHub stars and 3.31K forks on GitHub has more adoption than Foundation for Apps with 1.65K GitHub stars and 236 GitHub forks.

Get Advice from developers at your company using StackShare Enterprise. Sign up for StackShare Enterprise.
Learn More
Pros of Foundation for Apps
Pros of Material Design for Bootstrap
    Be the first to leave a pro
    • 16
      Bootstrap
    • 6
      Light weight
    • 6
      Awesome and simple to use
    • 4
      Modern Looks
    • 4
      Google Material Design
    • 4
      Responsive
    • 3
      Open Source
    • 3
      Great angular compatibility

    Sign up to add or upvote prosMake informed product decisions

    Cons of Foundation for Apps
    Cons of Material Design for Bootstrap
      Be the first to leave a con
      • 2
        Not free for premo stuff

      Sign up to add or upvote consMake informed product decisions

      What is Foundation for Apps?

      Foundation for Apps is a framework you can use to build better, more polished single-page web applications that work across many devices. We’ve taken what we’ve learned from building the original Foundation framework to build an entirely new framework just for web apps.

      What is Material Design for Bootstrap?

      It is an open source toolkit based on Bootstrap for developing Material Design apps with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

      Need advice about which tool to choose?Ask the StackShare community!

      What companies use Foundation for Apps?
      What companies use Material Design for Bootstrap?
      See which teams inside your own company are using Foundation for Apps or Material Design for Bootstrap.
      Sign up for StackShare EnterpriseLearn More

      Sign up to get full access to all the companiesMake informed product decisions

      What are some alternatives to Foundation for Apps and Material Design for Bootstrap?
      Foundation
      Foundation is the most advanced responsive front-end framework in the world. You can quickly prototype and build sites or apps that work on any kind of device with Foundation, which includes layout constructs (like a fully responsive grid), elements and best practices.
      Bootstrap
      Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
      Material Design for Angular
      Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices. Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design system for use in Angular SPAs.
      Animate.css
      It is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
      Tailwind CSS
      Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it's not a UI kit. It doesn't have a default theme, and there are no build-in UI components. It comes with a menu of predesigned widgets to build your site with, but doesn't impose design decisions that are difficult to undo.
      See all alternatives