Simplifying Web Design: The Perks of UI Frameworks Like Bootstrap
22 Feb 2024
Introduction to UI Framework
Imagine you are building a house of your own. You can make each brick yourself, mixing cement to carefully sculpt your house, or you can use prefabricated materials, ready for assembly. This is the nature of UI frameworks like Bootstrap. They are pre-made materials for web design that provide a standardized set of building blocks for creating websites and web applications. But why choose these frameworks when you can make a website from scratch using raw HTML and CSS?
Why Choose Bootstrap?
As a beginner in web development, this was my first time trying Bootstrap. The first steps feel like learning a new dialect. At the beginning, I would also have this question, why should I remember classes like navbar-toggler or modal-footer? But when I built my first responsive menu, the answer became clear. Without Bootstrap, I would have to write multiple lines of CSS and HTML to make the menu adapt to different screen sizes. However once I became familiar with Bootstrap, I was able to use the same templates to complete tasks that previously took a lot of time to solve. It was a lightbulb moment - I was writing less code and building faster. Take the various icons needed in the website as an example. Before I knew Bootstrap, I needed a lot of time to search Google for pictures or codes of the icons I needed. However after I learned Bootstrap, I could easily find the icons I needed on the Bootstrap website. Examples include icons like Instagram, Facebook, and shopping carts.
The Learning Curve: A Humbling Climb
There is no denying that the learning process is difficult. But I think this is very meaningful. In the beginning, we need to learn and understand every class and component in Bootstrap, which is a difficult process. When I first started learning, I didn’t know how to use Bootstrap. I often wrote some inexplicable code and misplaced the code, which made my webpage look very ugly. For example, when I first started learning, I didn’t know that I should put the Navbar into a Container. This caused the navigation elements in my website to extend to the entire width of the window, becoming very ugly and difficult to use, especially when compared to the large window. However, as I built more web pages, what once seemed like a foreign language started to become simple and very easy to use. When I began to see that it only took a very simple code to create a very beautiful and practical website, all the difficulties and frustrations at the beginning disappeared.
Practical Lessons from Real Projects
In the WODs we completed this week, we were asked to rebuild some web pages that were already in use. Using Bootstrap, we can quickly combine various elements on the website, such as various navigation bars and core buttons. At the same time, thanks to the Bootstrap framework, we can easily make various elements of the website appear where we need to. It has great reliability when I test it on various web page sizes. In contrast, a similar form built with only HTML and CSS requires a lengthy battle with media queries and testing on multiple devices to achieve the same result.
Conclusion: The Framework Advantage
In the end, UI frameworks like Bootstrap provide a balance. They offer a foundation that allows you to build quickly and with confidence, knowing that the basics are covered. For those starting, it’s a way to get to grips with the design without getting bogged down by the intricacies of responsive design principles. And for seasoned developers, it’s a way to prototype and develop at speed, without sacrificing quality or compatibility. Whether you opt for Bootstrap, Semantic UI, or raw HTML and CSS, the choice depends on the project’s needs and your workflow preferences. However, the investment in learning a UI framework often pays off, granting you a toolset that can handle a plethora of design challenges efficiently and elegantly.