Front-end frameworks: The amazing sets of development tools that help make the modern web look great. Their existence means web developers can spend less time worrying about CSS and allow them to focus more on their code. The advent of front-end frameworks has changed the way developers work – these new frameworks not only provide utility, but act as a guide for how to design and develop.
Not all frameworks are created equal, however. Each framework has a different goal and approaches problems in a different way. I tend to work with Bootstrap very heavily, but Bootstrap isn't perfect all of the time. Like every good developer, I’m constantly on the prowl for a better solution.
Bootstrap
Bootstrap isn't perfect. The aesthetics are starting to show a little bit of age and some of the markup can look a little clunky (I'm looking at you navbar). But that doesn't mean it's not great. There are a lot of components built into the framework, like glyphicons, navbars, and jumbotrons. All of their plugins can be called through their programmatic API and with the release of the alpha for Bootstrap 4 comes the new bootstrap theme store. Each theme in the store is a theme that extends Bootstrap with more features and different styling.
Why would you use this framework?
There isn't much about Bootstrap that hasn't already been said. As it is the most popular framework, you can expect to find more tutorials for it than the other frameworks. As a result, it is a fantastic framework for beginners to learn with. When you decide to progress beyond vanilla Bootstrap, there are a large handful of people who have built extensions, either to add functionality or to change the styling.
Foundation
Foundation is a heavy hitter and used by a lot of bigger companies like eBay, Disney, and Amazon. There's good reason for its widespread use too. It has clear documentation, a huge assortment of components, and the company that makes Foundation, ZURB, offers a variety of services to support their framework.
Why would you use this framework?
Foundation is quite beefy. It sports a clean, flat design and surprisingly provides solutions for accessibility issues. It makes use of a mobile-first philosophy by having a big emphasis on use of the
"data-interchange" attribute to determine what gets loaded on the web page based on the media query. While I haven't played with this all that much, it seems to be a very powerful tool when used correctly.
Materialize
Heralding Google's material design, Materialize is a relatively new framework to the scene. But it has a lot going for it. The documentation is clear, the javascript isn't slow and the animations feel good.
Why would you use this framework?
Materialize, from my experience, is really slick. The developers behind it have really made it their goal to streamline their framework. While you might look at some other frameworks and see huge lists of features, Materialize instead keeps focused. But this is probably a result of material design philosophy. It has a great selection of useful components that are easy to implement. You won't find components for wells and advertisements, nor does it have it's own theme store. Instead, you get cards, multiple navbars, and a fantastic color system. You would primarily use this if you want to easily and quickly implement a material-based design for your site.
Semantic-UI
Semantic is another newcomer to the scene that tries to make markup more humanized. Ironically, compared to the other frameworks, it is the most alien. However, it is potentially the most feature complete out of anything on this list.
Why would you use this framework?
It's all in the name, semantics. It can be confusing at first, as the CSS syntax is non-traditional. However, if you're willing to learn the new style and all of the components, Semantics can become a vibrant tool for speedy development. There aren't many other frameworks out there that have inherent support for dimmers, flags, feeds, and rather cool three dimensional cards.
Skeleton
On the other end of the feature list, we have Skeleton. There is a lot to be said about simplicity. It's definitely more of a boilerplate for responsive CSS than a full-fledged framework. Skeleton focuses on responsive design, without providing any specific stylistic elements (buttons, carousels, and other eye candy) commonly found in most other frameworks."
Why would you use this framework?
It's the bare-bones basics. If you’re looking for a framework that provides responsive design without providing additional styles, then Skeleton is a perfect fit. It gives you your grid and some neutral CSS styling, but not much else. Sometimes, that's all you want.
When it comes to building a responsive web application, it is beneficial to know the strengths and weaknesses of the different frameworks that you might be working with. The ones I listed here are by no means a complete list as there are a large number of frameworks in existence. So play around with a few of them and see which ones best fit your specific project.