What are the best frontend frameworks?

Question

9

Options
Considered

67

User
Recs.

Aug 12, 2020

Last
Updated

Here’s the Deal

8 Options Considered

Best frontend frameworks	Price	GZipped size	Languages
-- Foundation	-	-	-
-- Bootstrap	Free	-	-
-- React	-	45K	-
-- Semantic UI	-	-	-
-- Axentix	-	-	-

See Full List

See flagged products

I Recommend...

Built By the Slant team

Find the best product instantly.

Lustre recommends the best products at their lowest prices – right on Amazon.

4.7 star rating

Add to Chrome

Try it now - it's free

score 25 · Answer 1

Foundation

Top Pro

Block grid

Foundation has a feature called block grid. Block grid gives designers the power to divide the contents of an unordered list into a grid that is evenly spaced. Furthermore, Foundation also takes care of collapsing columns as well as removing gutters. See More

Top Con

Needs more pre-built components

Example would be a scroll-spy not only for one cell, but cell to cell. See More

Top Pro

No style lock-in

Styles are purposefully undeveloped to encourage differentiation between different sites using Foundation. See More

Top Pro

Uses REMs instead of pixels

Foundation uses REMs instead of pixels, meaning you don't have to state an explicit height, width, padding, etc, for every device. Simply put, using REMs means you can just state font-size: 80%; and have the whole component (and its nested elements) shrink by 20%. This is great for making your site mobile friendly. There is also a Sass function in Zurb that converts pixels to REMs so if you're used to thinking in pixels, you don't have to learn a different system. See More

See All

Built by Slant

Find the best product
instantly.

Stop wasting time searching endlessly. Lustre recommends the best products at their lowest prices – right on Amazon.

4.7 star rating

Add to Chrome - It's Free Try now - it's free

score 21 · Answer 2

Bootstrap

Top Con

Too many classes

Bootstrap's over-reliance on HTML classes for styling can get very messy very quickly. There's also an overabundance of DOM elements which have a lot of classes and are more often than not nested inside DOM elements with even more classes. This gets problematic down the line because the maintainability of the project gets harder when the project starts to get large. See More

Top Pro

Well documented

Documentation is thorough, well organized and full of live examples and templates ready for use. Every component and every part of the framework is explained and covered in depth. See More

tekh box's Experience

Ever Excellant See More

Top Con

Websites can start to look the same

If the initial Bootstrap colors and styles are not changed or edited, different websites start looking the same even if they have nothing to do with each other and they are made by different developers. See More

Top Pro

Designed to get a site running quickly

Bootstrap is designed to get a site up and running quickly. Each of it's components is pre-configured to help with getting a site up and running quickly. See More

Top Con

Bloated

Tons of classes have to be added to elements, not all are friendly or easy to remember. The default styling is pretty bad although the typography is nice. See More

Top Pro

Consistency across browsers

The grid layout with the predefined CSS elements and JavaScript components make it easier to have consistency across different browser versions and even different devices. See More

Top Con

Large file size out of the box

Bootstrap has an out-of-the box filesize of ~276K, which is pretty large considering it's just CSS. Most of those styles aren't even used in 90% of web pages built with Bootstrap. By only including the required styles it can be trimmed by 70%-75%. See More

Top Pro

Easily make professional looking websites

Bootstrap makes it easy to learn how to make professional looking websites. It can even make code junkies semi-enjoy design. See More

Top Con

Hard to customise

It's quite hard to customise Bootstrap using pre-processors like SASS and LESS, the only real flexibility is with typography and colours. See More

Top Pro

Great community

Bootstrap is very popular and has a large community. As a result of this it is much easier to find help with anything you might need. This also gives you a treasure trove of prebuilt components to use and add to your site. See More

Top Con

Slow development

Development has been stalled for almost a year with no "final" release. When it finally releases it may not be utilizing the latest web technologies and will be instantly outdated. Many other frameworks are hitting the web that is much more modern. See More

Top Pro

One of the most popular ones

Ranked on GitHub as the most starred CSS repository. See More

Top Pro

Custom builds

If you don't want to download the full Bootstrap framework. Custom builds of Bootstrap can be created, including only the desired CSS, CSS components, and JavaScript components. This can be done directly from the Bootstrap website by simply choosing what components to download. See More

Top Pro

Customizable

Bootstrap can be customized in a variety of ways. Either by overriding the default CSS styles with new CSS styles or by editing the .scss Bootstrap files. See More

Top Pro

A wide variety of themes available

To help you avoid the "Bootstrap look", there are many resources that provide a great selection of themes and templates for Bootstrap. See More

Top Pro

Responsive design philosophy

Bootstrap is developed to be instantly compatible with all sizes of screens, so you don't have to worry about which device the user is accessing your site from. Yet if you prefer, you can disable responsiveness of Bootstrap. See More

Top Pro

Supports responsive embeds

Allows easily adding responsiveness to <iframe>, <embed>, and <object> elements. See More

See All

score 4 · Answer 3

React

Top Pro

Supported by ClojureScript libraries

Reagent, Om, Rum, etc. See More

Top Con

Heavy on memory

React's virtual DOM is fast, but it requires storing elements in the virtual and real DOM increasing memory usage for the page. This can be a real problem for single-page webapps designed to be left running in the background. See More

Specs

GZipped size:45K

Top Pro

Server side rendering

React can render it's components and data server side, then it sends those components as HTML to the browser. This ensures faster initial loading time and SEO friendliness out of the box, since it's indexed as any other static website by search engines. See More

Top Con

Verbose

React gets a little verbose as applications get more complicated with more components. It's simply not as straightforward as simply writing HTML and JavaScript would be. See More

Top Pro

Supported by Facebook and Instagram

React is built by Facebook engineers initially to be used only for their inner projects especially to solve the problem of building large complex applications with constantly changing data. See More

Top Con

Not a complete solution

React does not do everything for the developer, it's merely a tool for building the UI of a web app. It does not have support for routing or models, at least not out of the box. While some missing features can be added through libraries, to start using React and use it in production, you still would need to have experience, or at least a good grasp on what the best libraries to use would be. See More

Top Pro

Can be used with different libraries

ReactJS can be used independently as the only library for building the front-end, or it can be used alongside JavaScript libraries such as jQuery, or even Angular. See More

Top Con

Large file size

React's react.min.js is 145.5KB in size. It's much larger than some other libraries that offer roughly the same features and it's almost the same size as some MV* frameworks such as Angular or Ember that offer more features out of the box. Although, it should be mentioned that sometimes having a smaller library may force developers to reinvent the wheel and write inefficient implementations on features that React already has. Ending up with a larger application that's harder to maintain and/or that has bad performance. See More

Top Pro

Functional programming style leads to less buggy UIs

Top Con

You have to learn a new syntax

Requires learning a custom syntax, JSX, that has some gotchas and introduce complexity, a steeper learning curve, and incompatibility with other tools. Though you can opt out from JSX and use vanilla JS instead. But that is not recommended since it adds a lot of unneeded complexity which JSX tries to avoid. See More

Top Pro

Virtual DOM support

Instead of relying on the DOM, React implements a virtual DOM from scratch, allowing it to calculate precisely what needs to be patched during the next screen refresh. This is orders of magnitude faster than fiddling with the DOM itself. See More

Top Con

Template(view) mixed into code

Top Pro

Easy to reuse components

Since every single UI component is created independently in JavaScript, it becomes very easy to reuse them throughout your app without having to re-write them. See More

Top Con

Renders too frequently

Top Pro

One-way data flow

React's one-way data binding (or one-way data flow) means that it's easy to see where and how your UI is updated and where you need to make changes. It's also very easy to keep everything modular, fast and well-organized. See More

Top Con

No support for legacy browsers

React has recently dropped support for Internet Explorer 8. While the library may still work on IE8, issues that affect only IE8 will not be prioritized and/or solved. See More

Top Pro

Easy to write tests

Since React's virtual DOM system is implemented completely in JavaScript, it's very easy to write UI test cases. See More

Top Pro

Template engine independent

React provides a template engine (JSX) which is easy to use. But it's not mandatory. See More

Top Pro

Good debugging tools

React has an official Chrome Extension which is used as a developing and debugging tool. It can be used to quickly and painlessly debug your application or view the whole application structure as it's rendered. See More

Top Pro

Flux architecture pattern

Flux is a platform agnostic pattern which can technically be used with any application or programming language. One of Flux' main features is that it enforces uni-directional data flow which means that views do not change the data directly. With React this is useful because this way it's easier to understand an application as it starts getting more complicated. By having two-way data binding, lead to unpredictable changes, where changing one model's data would end up updating another model. By using the Flux architecture, this can be avoided. See More

Top Pro

Extensive SVG support

Since React v0.15, SVG is fully supported. React supports all SVG attributes that are recognized by today's browsers. See More

Top Pro

Keep control over your app's logic

React is just a view library, so you still have (almost) full control over how your app behaves. See More

Top Pro

Tested on Facebook itself

React is used on one of the most visited websites on the planet, Facebook. With stellar results and with millions of people experiencing it every day. See More

See All

score 4 · Answer 4

Semantic UI

Top Pro

Official support for third-party applications

There are several official implementations of Semantic UI for many popular libraries, frameworks and CMS. Such as Angular or Wordpress. See More

Top Con

Not maintained anymore

Use Fomantic-UI instead. See More

Top Pro

Well documented

The documentation is easy to use, well written and has lots of examples each with their source codes. See More

Top Con

Very large file size

Packages are much bigger when comparing to Twitter Bootstrap or Zurb Foundation. See More

Top Pro

It's semantic

Uses semantic class names for its styling, making it easier to grasp and understand even for beginners looking to jump right in. See More

Top Pro

Load only the components you need

The whole Semantic-UI package is well organized, with every component neatly set up with it's own stylesheet and JavaScript file. This way you can load only the components you need for each page, minimizing the load time and file size. See More

See All

score 3 · Answer 5

Axentix

Top Pro

Easy to learn

score 2 · Answer 6

UiKit

Top Pro

Well architected

The code is pretty clean and follows well-defined conventions. See More

Top Con

Not very popular

UiKit is not a very popular framework, especially compared to other options. As such it may be hard to find learning resources other than the official documentation or it may be more likely for development of UiKit to be dropped than for another more popular framework See More

Top Pro

Namespaced

It's handy that everything is prefixed by "ui" so you know at a glance what classes are UIKit stylines. See More

Top Con

Closed development

Development is mostly done in-house and not publicly available. See More

Top Pro

Ready to use themes available

There are plenty of ready to use themes available from the official website. You can choose the theme that you want to use from the dropdown menu and then download the CSS, LESS or SASS file for that theme to use for the website. See More

Top Pro

Built-in animation capabilities

UiKit has some built-in animation features which can be used to animate various components. See More

Top Pro

Great style even out of the box

UiKit has a pretty good and clean style even out of the box without any customization needed. See More

Top Pro

Very customizable

UiKit's rather minimal style can be easily customizable to create an entirely new look to fit the needs of the designer. See More

Top Pro

Extremely modular

Every aspect of the framework is designed to be modular, this way designers can easily choose which components to add to their stylesheet without risking to damage the overall style. See More

See All

score 2 · Answer 7

jQuery Mobile

Add Video or Image

score 1 · Answer 8

JQuery

score 1 · Answer 9

8 Options Considered

My Recommendation for Foundation

My Recommendation for Foundation

Block grid

Needs more pre-built components

No style lock-in

Uses REMs instead of pixels

My Recommendation for Bootstrap

My Recommendation for Bootstrap

Too many classes

Well documented

Websites can start to look the same

Designed to get a site running quickly

Bloated

Consistency across browsers

Large file size out of the box

Easily make professional looking websites

Hard to customise

Great community

Slow development

One of the most popular ones

Custom builds

Customizable

A wide variety of themes available

Responsive design philosophy

Supports responsive embeds

My Recommendation for React

My Recommendation for React

Supported by ClojureScript libraries

Heavy on memory

Server side rendering

Verbose

Supported by Facebook and Instagram

Not a complete solution

Can be used with different libraries

Large file size

Functional programming style leads to less buggy UIs

You have to learn a new syntax

Virtual DOM support

Template(view) mixed into code

Easy to reuse components

Renders too frequently

One-way data flow

No support for legacy browsers

Easy to write tests

Template engine independent

Good debugging tools

Flux architecture pattern

Extensive SVG support

Keep control over your app's logic

Tested on Facebook itself

My Recommendation for Semantic UI

My Recommendation for Semantic UI

Official support for third-party applications

Not maintained anymore

Well documented

Very large file size

It's semantic

Load only the components you need

My Recommendation for Axentix

My Recommendation for Axentix

Easy to learn

My Recommendation for UiKit

My Recommendation for UiKit

Well architected

Not very popular

Namespaced

Closed development

Ready to use themes available

Built-in animation capabilities

Great style even out of the box

Very customizable

Extremely modular

My Recommendation for jQuery Mobile

My Recommendation for jQuery Mobile

My Recommendation for JQuery

My Recommendation for JQuery

Don't see your favorite option? Add it.

My Recommendation for freeCodeCamp

My Recommendation for freeCodeCamp