UI Frameworks: Scary but Useful
10 Oct 2024When I was starting out in web development through this course, I initially thought that just HTML and CSS are all you need to create nice-looking, functional websites. After all, these are the fundamental building blocks of the web. However, as websites become more complex and the expectations for those websites get raised, it becomes clear that developing a site from scratch with just HTML and CSS can be time-consuming, prone to error, and difficult to scale. This is where UI frameworks like Bootstrap 5 come in handy as they offer an efficient solution that provides several advantages.
Why UI Frameworks Are Worth the Effort
UI frameworks such as Bootstrap 5 and Semantic UI, have pre-designed components that help developers to avoid recreating common web elements like buttons, navigation bars, and forms. While it may seem like learning these frameworks are fairly complicated, the investment of time in learning them pays off significantly in terms of productivity, maintainability, and consistency.
One of the main advantages of using UI frameworks is the speed at which you can develop a functional website. For instance, using Bootstrap 5’s grid system allows you to design layouts that can adapt smoothly to different screen sizes, like from mobile to desktop, without the additional work. Instead of having to spend extra hours getting the perfect position of elements and ensuring that they can work across various devices, Bootstrap 5 takes care of this for you with minimal input. In addition to this, Bootstrap provides a wealth of pre-built components including modals, tooltips, carousels, and dropdowns, which are readily available to use and customizable. For someone new to web development, having this library of components can vastly accelerate the design process.
Another benefit of using UI frameworks is that it is consistent, especially when collaborating with others for a project. When working with teams, having consistency in design and behavior becomes crucial, especially when multiple people are contributing to the same code. Using a framework like Bootstrap ensures that there is a consistent design language and style being applied across the entire site. Developers will not have to worry about variations in button styles or inconsistent margins between components, as Bootstrap enforces a uniform look and feel, creating a cohesive user experience.
Challenges developers often face when using raw HTML and CSS is ensuring that their design works flawlessly across different browsers. This is because CSS properties can behave unpredictably on various platforms and require extensive testing. UI frameworks like Bootstrap, provide components and layouts that are tested to ensure compatibility across different browsers. Having this saves you from spending additional time fixing your design to adapt to specific browsers.
My Personal Experience Using Bootstrap 5
When I first started using Bootstrap 5, I was initially overwhelmed by the amount of classes and components that it had to offer. However, doing a few assignments in this class, I was able to see how useful this framework was. From building a responsive navigation bar to creating a grid-based layout, or styling forms—all of these tasks started to become easier, and the results I was achieving were much better than what I could have achieved with just using CSS in the same amount of time.
Personally, one of my favorite aspects of Bootstrap 5 is the flexibility it has. While the framework provides a default styling for components, it does not limit you into using them how they come. You are able to easily override the default styles with your own CSS, allowing you to create unique designs while still benefiting from the Bootstrap’s structure. For example, in one of the assignments I did, I got to recreate the visuals of Stüssy, where I utilized Bootstrap’s grid system and card components for the layout. I was able to customize the card design using my own CSS, but without worrying about creating the responsive structure from scratch. What would have taken me hours to do with CSS took just minutes with Bootstrap, giving me more time to focus on other areas of the project.
Original
Recreation
