Loosely Strapped On
04 Oct 2023
Just like libraries that are built into programming languages like Java, JavaScript, C++ and Python, UIs also have pre-built libraries that people can use to code and create more efficient user interfaces. After playing around and refreshing my knowledge on basic HTML and CSS, I was reminded of how annoying CSS can become, especially when you’re making changes to already existing components of the webpage. After experiencing my first UI framework, Twitter BootStrap, my hatred for CSS has only grown to a whole different level.
The Few Improvements that BootStrap Brings
After the harsh words that I used to describe BootStrap, I am here again to say that BootStrap wasn’t actually that bad. It helps remove majority of the messy CSS code that might have litered your styles.css file, and use pre-built classes that is extremely easy to use, and change in most cases. By eliminating the extra CSS code, it also eliminates the frustration of trying to figure out why certain things aren’t aligned correctly. Now, instead of going through hundreds of lines of code, and double checking all your CSS styles, you can just look at the classes that you have appointed to your divs, and alter them as you like. Most if not all of the classes that are pre-built into BootStrap have some sort of margin/alignment already configured, as long as you have the same classes use for all your components, they will automatically be aligned, down to the tiniest pixels. By using BootStrap, I was able to speed up my time spent on replicating the webpages exponentially, as I no longer have to go back and change those CSS values myself, I can just trust BootStrap to do them for me, while I fill in the text needed to replicate the webpage.
Instructions Unclear, Brain Fried
Although BootStrap simplies most of the work that needs to be done with CSS, it also creates its own problem, such as trying to figure out which classes to use, what each class’s functions are, and how to debug the code when things aren’t what you want it to be. Because BootStrap uses pre-built classes to do all its CSS, it makes it extremely hard for its users to debug and even test out, as you don’t really understand the specifics of each class, they do provide a documentation online, however sometimes even reading through the different classes on there doesn’t explain it fully. The most frustrating thing when working with BootStrap was when I would add in a new class, go back to the webpage to check if the changes went through, and nothing would happen. I would add in 5 different “justify-content-center”s in all 5 of the divs that navigation bar menu is wrapped around, and it still wouldn’t center the text. When that happens, I would have to go through all the divs to check for any issues, if I find nothing, then I would have to manually change the CSS properties in the styles.css file. Even reading through the online documentation on the class that I’m having issues with, it feels like I’m just copying over code written by someone else, and pasting it into my own project, without actually understanding what each line does. However, I hope that with more practice with BootStrap and UI design, I’ll be able to see certain patterns, and finally truly understand some of the classes we are using.