Frameworks: Building Upon vs. Building From Scratch
05 Oct 2023To build from scratch, or to build upon something that already exists. This is a decision between using raw HTML and CSS versus using a framework. As someone who recently experienced both, I’ve found that frameworks offer a significant advantage for web UI design. Although you can create your own elements and be unique with them using HTML and CSS, it can be quite time consuming to do so. Wouldn’t it be faster to use defined variables that do the same thing but with less work? Just build upon a framework and utilize it.
Power of Frameworks
Typing a different name in the class inside the tag is what makes frameworks powerful. By simply changing the name in a class inside the tag, I could manipulate the styling or the positioning of the elements on my webpage. These names are predefined variables from the framework’s ready-to-use stylesheets. Additionally, there are pre-styled built in components included. Typing class names instead of creating new blocks in your own CSS style saves a lot of time.
Learning Curve of Frameworks
The tradeoff of using frameworks is that you need to spend more effort learning the various variables and features they provide. It may be time-consuming, however, once mastered, the time difference in building websites with raw HTML and CSS won’t matter when you can create websites quickly with frameworks. It takes more time to build new websites with HTML and CSS due to the repetitive tasks involved, such as creating standard web design functions like setting colors, layout, and fonts, each time you set up one.
Additionally, there are plenty of frameworks out there, but it’s similar to learning a new programming language. Each has its own terms and syntax but they do the same task of changing the style or the formatting of an element.
First look at Bootstrap 5
My very first framework was Bootstrap 5, one of the most popular frameworks used today. As with most things, it took a while to get used to but I realized how much better it is compared to using raw CSS and HTML.
One part about Bootstrap 5 I like is how there are auto-sizing components. When adding the keyword “fluid” to a container or a component, these elements become responsive to the window size. This ensures that the layout and design of the web page remain consistent across various screen sizes. This also means I don’t need to create multiple websites for each device size.
This is a remake of an islandsnow website for one of my Bootstrap 5 practice assignments in ICS 314. I was amazed at how simple it was to make adjustments to the elements of the website. I was struggling trying to get familiar with what was what though since it was my first time using Bootstrap 5 and there were so many class names that changed a lot of parts of a component. Some things wouldn’t be aligned because I accidentally put the element outside the container, or when trying to change a dropdown component nothing changes because I had a typo with the class name.
Will I still use raw CSS and HTML?
While learning the various features of a framework was somewhat of a pain, the benefits of using a framework like Bootstrap 5 were worth it. I’m also aware that frameworks can’t cover all the ways to decorate or build a website. I’ll use my own CSS only if the framework limits what I want to create. As I continue web development, I will continue to use frameworks and see what they have to offer.