The Power of UI Frameworks

What is a UI Framework?

When I was first going through the code camp for HTML and CSS, I was frustrated by how many design elements I had to write from scratch. While it allowed for personalized control, there were limits of relying solely on CSS to create a visually appealing and functional website, such as having to spend hours crafting every button, managing text sizes, and ensuring proper alignment. It became apparent to me that a more efficient approach was necessary, and that was when I learned the power of UI Frameworks. A UI (User Interface) framework is a collection of pre-built components, libraries, and design elements. There are various types of UI libraries and frameworks, such as Bootstrap, Angular, and Vue. Most of these frameworks come with pre-designed elements and tools like buttons and navigation bars, which will be discussed in the next section.

Bootstrap 5

My first experience with Bootstrap 5 was not the best because of its confusing naming scheme used in classes, like the ones below:

<div class="container mx-5 py-5 ">
<nav class="navbar navbar-expand-sm navbar-light bg-light">

This would mean that I had to invest time to learn its components and classes to effectively utilize it. However, after creating several web pages with Bootstrap, I’ve found myself saving more time and creating less CSS classes. One advantage I got from using it was the framework’s simplicity in styling. Bootstrap 5 eliminated the need for manual resizing of images, texts, and other elements. Gone were the days of endlessly typing out spacing and margins; Bootstrap’s predefined classes streamlined the process, allowing me to focus on the core aspects of design and hopefully the website’s functionality in the future.

Another great advantage of using UI Frameworks like Bootstrap is having access to its navigation bar and dropdown library with documentations, where there’s great examples on how to use them depending on how we want our website to look. One aspect that left a lasting impression was the inclusion of icons. Nowadays icons are almost present in every website, serving as gateways to social media platforms, among other things. Bootstrap’s icon page was a game-changer, offering an extensive selection of icons that could be seamlessly integrated into websites. I found this feature essential since it allows me to enhance the aesthetic appeal and user experience of my web pages effortlessly, like the Island Snow page I re-created for my class assignment:

Conclusion

Embracing UI frameworks like Bootstrap 5 has not only alleviated the challenges posed by raw HTML and CSS but also improved the look of my web pages. While it may initially be challenging to learn it, the rewards reaped in terms of efficiency, aesthetics, and user experiences make it worth the effort. Whether you’re aligning text, images, or interactive components, Bootstrap 5 makes the process intuitive and efficient and allows web developers to focus on the functionality of their code.