Feb 4, 2019

Front-End UI Framework

by Aksha Verma
Reading time: 6 mins


Share this article:

 

A UI framework is basically a software suite, that prrovides certain (Application Programming Interface) API’s so that developers can build their own UI components or modify the UI itself.

The term, Framework refers to a set of API and documentation that will allow us to do the above tasks. A Ui-Framework helps us to speed up the development of the front-end of an application. Due to their popularity, a wide array of front-end UI frameworks are available.

In website design and development, a UI-Framework enables the developers to build beautiful, responsive multi-device web applications with readily available code to create attractive themes and layouts. Most UI-Frameworks try to make the final visual appearance uniform across various browsers and devices.

Things to Look for in a Front-End Framework:

1) Skill Level - For beginner, a more robust framework like Bootstrap may be in order, as it comes prepackaged with many useful widgets and requires minimal coding skills. For more experienced, one may be better off with a simpler framework that gives lots of wiggle room for customization. These frameworks are typically leaner and less bloated too, which is a plus.

2) Responsive Design - Any site that is being developed should render properly across all devices, as more and more people access the internet via mobile devices. Therefore, stick with front-end frameworks that support responsive web design.

3) CSS Preprocessors - If CSS preprocessors are being used, one should prefer one or another in particular, typically Sass vs LESS, making sure that the framework being used supports it.

4) Appearance - Choose a framework that allows you to achieve the appearance that is wanted with as little effort as possible.

5) Prototypes - The ideal front-end framework allows you to quickly produce wireframes and prototypes to speed up the overall design and development process. More than anything, the right front-end framework simplifies, streamlines and speeds up the website design and development process while still giving you the flexibility and features that you need to produce exceptional results.

1. Bootstrap

An effective front-end framework, Bootstrap includes CSS, HTML and JavaScript, or JS, components. It adheres to responsive web design standards, allowing you to develop responsive sites of all complexities and sizes.

Because it is updated continually, Bootstrap typically includes the latest and best features. For example, it added themes that met Google’s material design guidelines shortly after they were published, and it was also upgraded to use Sass as a CSS preprocessor.

Pros:
  • Responsive web design support (can also be disabled if required)
  • Extensive documentation
Cons:
  • Out-of-the-box file size of 276kB due to excessive number of rarely used styles
  • Excessive number of HTML classes and DOM elements can be messy and confusing
Ideal for:

Beginners and those who prefer a robust front-end framework.

2. Semantic-UI

This framework’s main claim to fame is its simplicity. Because it uses natural language, the code is self-explanatory. Even those with very little coding experience will feel fairly at home working with this framework.

Another notable feature of Semantic-UI is that it is integrated with a dizzying array of third-party libraries. Therefore, the development process is a bit easier and more streamlined.

Pros:

Semantic class names make for a low barrier of entry, so even beginners can hit the ground running Small file sizes and minimal load times because you can load only the components that you need; each has its own JS file and stylesheet Versatile elements make for easy customization

Cons:

Very large packages when compared to Foundation and Bootstrap Those with more complex design and development needs may find this framework lacking

Ideal for:

Beginners and those who want a lightweight, nimble framework.

3. Foundation

Foundation is a highly advanced, enterprise-grade front-end framework that is ideal for developing nimble, responsive websites. Used on sites like Facebook, eBay, and Mozilla, it is also fairly complex and may not be suitable for newbies.

This features-rich framework supports GPU acceleration for smooth, lightning-fast animations and Fastclick.js for fast rendering on mobile devices. It runs on the Sass preprocessor and includes the Foundation-developed data interchange attribute, which lets you load lightweight HTML sections for mobile and “heavier” HTML sections for larger screens.

Pros:
  • No style lock-in, so you have greater flexibility
  • Uses REMS instead of pixels, eliminating the need to explicitly state width, height and other attributes for each device
Cons:
  • Fairly large file size out of the box
  • A bit too complex for beginners
Ideal for:

Developers who have decent amounts of experience and who are primarily concerned with developing fast, attractive, responsive websites.

4. Materialize

The Materialize responsive front-end development framework also implements Google’s material design specifications and is loaded with ready-to-use buttons, icons, cards, forms and other components. It is offered in both a standard version and in one that runs on SASS. Materialize includes a convenient IZ column grid feature that can be used for website layouts. It is also loaded with CSS that’s ready to use out of the box for material design shadows, typography, colors and other features.

Additional features include ripple-effect animation, drag-out mobile menus, SASS mixins and more.

Pros:
  • Huge selection of components
  • Responsive support ensures that websites are supported across all devices
Cons:
  • Large file size makes this a bulky framework to work with
  • No support for Flexbox model
Ideal for:

Less experienced developers who need guidance regarding Google’s material design specifications.

5. Pure

Pure comes with a lightweight array of CSS modules that can be used in just about any project. Using Pure, you can easily create responsive buttons, menus, grids, tables and other features. Because it is purely CSS based, however, it does not support JavaScript or JQuery plugins.

When minified and compressed with Gzip, Pure clocks in at just 4.5kB, making it one of the lightest and nimblest front end development frameworks out there. As a result, it is terrific for mobile website development, and many developers rely on it for precisely that.

Pros:
  • Extremely lightweight, ensuring fast loading times even on mobile devices
  • Flexible array of CSS modules can be used on just about any web design and development project
Cons:
  • CSS only - does not include JQuery or JS plugins
Ideal for:

Developers who are focusing on creating responsive, fast mobile websites.

Conclusion

As one can see, different front end development frameworks bring different benefits to the table. What works for one developer or project may not work for another, so it is imperative to research a wide selection of solutions before committing yourself to one.

Therefore, before selecting a front-end framework, consider the skill level as well as the basic requirements of the project being tackled.


Share this article: