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 (6)

Collapse
 
codingchili profile image
Robin Duda (they/them)

The bar for avoiding frameworks have been drastically lowered with the custom elements spec etc. Why would it still require considerable experience to avoid frameworks? Nothing these frameworks are doing is complex or time consuming, the added flexibility will make your components future proof as well. I'd rather see reuse on a component level than framework level.

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

Collapse
 
codingchili profile image
Robin Duda (they/them)

Why not just write vanilla CSS? Artis introduces yet another custom flavor and new aliases and abbreviations. I guess with Artis there wouldn't be any IDE autocompletion/hints either.

"No extra CSS payload added" - but there is an added lib + artis css-like payload?

"No CSS at all" - we send artis-css to the client just to generate css-css, ending up with duplicated styling information in the DOM.

<div class="
      p:40
      m:20
      fontFamily:sans,serif
      textSize:50
      textColor:white
      bgColor:rgba(423,145,103,1)
      curveStyle:inset
      curveWidth:10
      curveRadius:20
      cursor:pointer
    " style="padding: 40px; margin: 20px; font-family: sans, serif; font-size: 50px; color: white; background-color: rgb(255, 145, 103); border-style: inset; border-width: 10px; border-radius: 20px; cursor: pointer;">
        Hello World!
      </div>
Enter fullscreen mode Exit fullscreen mode

What's the selling point of artis? I still don't understand why it's syntax is better than css. I can reuse styles with CSS-in-JS as well.

Thread Thread
 
louislow profile image
Louis Low • Edited on

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.

Thread Thread
 
codingchili profile image
Robin Duda (they/them)

Ah, it doesn't need to have a selling point - your previous comment seemed like an advertisement that's why I asked. Simply building things is purpose enough, your projects seem interesting and I really like the effort you put into documenting them as well, solid work. I also like that you're doing plain web components stuff and working with the platform, after reading about Knott I think you might find some inspiration in the lit-html project. Weavv seems to me to be an interesting implementation of atomic css in practice. Keep building and having fun :)

Collapse
 
igmuska profile image
igmuska

I was making Sublime Text snippets for each of Foundation's different webpages, and also using the custom snippets available there.

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠