DEV Community

Cover image for Bootstrap vs Foundation
Tina Huynh
Tina Huynh

Posted on

Bootstrap vs Foundation

Bootstrap is free, and being a front-end framework it is used to facilitate and consolidate the designing aspect of a project by reducing the time and amount of coding required. Not using a framework requires very good knowledge and considerable experience with coding, which in turn means a longer designing time and a lot of effort.

Foundation, in general, makes for faster designing, but not necessarily easier. It leaves plenty of room to work and play around with for designing projects that are easy to create and very visitor-friendly, both visually and functionally. Foundation is made for customization-heavy projects.

While Foundation is focused on the visual and customization aspects of a project, Bootstrap is primarily focused on functionality and not so much in the way the final project will look. Bootstrap is less complex in both its customization availability and its code, which makes it easier to use overall.

If you want a hassle-free solution that has a lot of support, go for Bootstrap. To get more freedom on your components, try out Foundation. Foundation offers a slightly more complex, but a do it yourself style approach that will create something more unique and custom. Whereas Bootstrap allows for easy creation of simple yet elegant websites, with very little knowledge of CSS and JavaScript.

Foundation
Pros:

  • Design-it-yourself approach
  • Immense customization settings
  • Strong grid system
  • Provides rapid development of code
  • Easy to use templates available for download
  • Lightweight

Cons:

  • More complex when trying to customize
  • Not a great framework for beginners
  • Less popular than Bootstrap

Bootstrap
Pros:

  • Massive community support
  • Widest variety of themes
  • Best browser capability
  • Has both a fluid and fixed pattern grid system
  • More development tools available
  • Many popular websites are built on this framework

Cons:

  • Not as lightweight when compared to others
  • Difficult to use jQuery plugins
  • Websites are easily recognizable

In order to make a conclusion which framework is better, you have to decide which one suits your requirements. In order to decide you must go through the features that each has to offer.

Happy coding!

Top comments (2)

 
louislow profile image
Louis Low • Edited

I never seriously thought of the selling point yet, I created it to have existed. And practising my coding skills. It is just another tool that you probably dislike. if you don't like it, try out my another frontend tool, it's called WEAVV CSS. And also check out my other newly created tool, Knott. Thanks for the comment. Much appreciated.

Collapse
 
louislow profile image
Louis Low

How about trying the new Artis.js virtual CSS library, it just 1.4 kilobytes? No extra CSS payload added into your project. No CSS at all. Try out the Artis.js with Playground, the online live editor.

Image description