How to Choose a perfect UI framework

While working on projects, many web-developers are facing an irresistible desire to add, modify, or sometimes even create their own UI framework. And this makes me wonder, whether a perfect UI framework exists and what it looks like.

After thinking this over and analyzing the niche, I’ve come to several conclusions I’d like to share with you.

Properties of a perfect UI framework

To answer this question, let’s determine the properties of a functional UI framework:

1. Efficiency.

After all, every framework is designed to make our lives easier, reduce the time for prototyping and develop basic UI elements.

2. Modularity.

The framework must also strike a balance between different elements, their usage, and quick loading. In my opinion, this is possible with the help of fine tuning and the ability to attach only the required modules.

3. Mobile Device Support.

There is no way we can create products not compatible with mobile since in a world we live in portable devices have changed our daily lives completely.

4. Cross-browsing and Old Browsers Support.

Many devices and modern systems are designed based on cutting-edge technologies. But there are still many users who don’t have access to the latest platforms or have no desire to get the latest updates. It isn’t wise to create obstacles between your product and such users. It would also be nice to support old browsers as an optional framework feature because it influences its size.

5. JavaScript.

This point is particularly interesting, because some frameworks don’t use clean JS, but are based on libraries such as jQuery. It’s great since it simplifies the code. But on the other hand, loading and execution speeds must be considered  —  in large projects they can become really insane

Now that we have determined the main properties of a perfect UI framework, let’s look at real examples. We will discuss projects such as Bootstrap, Foundation, UIKit and Semantic UI, which have been included in TOP-5 ratings recently.

Read also: Why should we have ‘Definition of Done’ in projects?

Now, let’s try to understand the details and answer your question.

What makes a framework excellent?

Browser Support

If our goal is to develop a product compatible with as many browsers as possible, then we will likely give priority to those which are more adapted. If we want users to access our system through IE8, we’ll probably prefer Bootstrap. This will help us reduce the labor costs of supporting this browser.

Differences in CSS Units

Foundation stores almost all its units in ems and rems. Bootstrap uses mostly ems and rems, with pixels for media queries. UIKit uses mostly pixel measurements. Therefore, for each individual project, you will need to choose the CSS unit that is the most suitable. This decision should be based on the devices you want to support.

Number of Components

In all projects, the number of components is permanent and you must decide what will be required for your current project; whether you want to use the heavyweight Semantic UI and UIKit with a huge number of components and templates or something less developed. Or maybe you only need one component and you will refer to a very simple framework.

CSS Preprocessors

This is simply a matter of taste. We can write and talk about the pros and cons of each but the result will be the same. The versatility and optimality of styles will determine the quality of the product being developed.

Subproject Improvements

Longer projects will most likely be developed and improved on the go, and you will need to modify the existing style. But this can’t always be done painlessly. For example, Foundation blocks any hard interference, and Bootstrap, Semantic UI, and UIKit only allows partial modification.

Focus on Content

You should fully understand the functionality you are developing and the content you are working with. In the case of administrative site sections, UIKit or Semantic UI are perfect. If there are a lot of block-content components, it is better to use Foundation.

Differences in the Template Grid

Bootstrap and Foundation offer 12-column grids. UIKit offers a completely different approach to grid layouts, and with different styles. Foundation grids can be easily modified for more or fewer columns using SCSS. Grids of UIKit, Semantic UI and Bootstrap are by default based on flexbox. Foundation’s grids are based on floating points but can be converted to flexbox via SCSS.

Conclusion

Now that we’ve gone through the basic properties, and the details that must be considered, we would all agree that a choice of a perfect UI framework depends on the project being developed. Each new project will require a different perfect UI framework that will not only reduce development time but also provide a good basis for further support and development of the project.

Above all, the most important thing is not to get lost in this huge range of UI frameworks and always try to make the right choice for your project.

l.sidorenko