In my previous career, I was dubbed as the one who "makes things look pretty".
If it could be better organized, it would be. If it could be color-coded, it would be. I am proud to say that both school districts I worked at continue to use some form of my year-long, digital "rainbow planner".
So, it should come as no surprise that I have uncovered a slight obsession with UI frameworks during my time at Flatiron School.
Just to be clear, I have zero formal training or degree of any kind when it comes to design. I am definitely not a professional.
What are UI frameworks?
"The UI framework is a collection of pre-built components, libraries, and design elements." - Classic from Sencha
The design of a website can include icons, animations, dropdowns, colors, typography, buttons, layouts, and more. UI frameworks help you implement your design, which can simplify the development process.
Popular UI frameworks include Bootstrap, Semantic UI, Material UI, Material Design, and Ext JS UI. Each framework has its strengths and weaknesses.
In my research, I came across many advantages, and a few disadvantages, of using UI frameworks.
Advantages of UI Frameworks
Consistent User Experience: UI frameworks ensure all parts of your app look and behave similarly, which impacts user familiarity and trust.
Faster Development Time: Developers can leverage pre-built components and templates, reducing repetitive work.
Responsive Design: Frameworks facilitate in creating apps that look good no matter the size of the screen.
Disadvantages of UI Frameworks
Larger File Sizes: Extra resources in UI frameworks can make application files bigger, causing slower loading times and potential performance issues.
Limited Customization: While UI frameworks help things look consistent, they might not let you change everything to match your specific needs. Your app could end up looking a lot like others that use the same framework.
Poor Documentation: Inadequate or unclear documentation can hinder the learning process and cause frustration for developers trying to use the framework effectively.
Is it worth it?
As a baby coder, I have only used one UI framework (Semantic UI). After experiencing the frustration that pure CSS can so willingly provide, I have really enjoyed the simplicity and efficiency of Semantic so far. (And how it handles responsive design for me.)
From my brief experience and research, I believe that UI frameworks can be very "worth it". However, before you commit to a framework, check that it has solid documentation, a good support community, and meets the requirements of your unique project.
UPDATE:
I wrote this blog post after dabbling with Semantic UI CSS in a few of my course labs. The following week, we were tasked with creating a React application and I decided to import that same lightweight version of Semantic into my project. Here are a few thoughts I had during development:
That's all I had to do to install? That was easy.
This is the prettiest form I've ever created.
Grids are the greatest.
Wait, let me change the site's background color.
Could you just look how I want you to look?!
I know I'm not supposed to use !important, but it's the only way.
After a week of implementing (and sometimes fighting with) Semantic UI CSS, I've come to the same conclusion as before. UI frameworks can be extremely helpful when it comes to consistency and responsive design. But, for the sake of your sanity, triple-check that the framework you choose will allow you to create a project that looks how it was designed to look.