Currently I am half-way through a 6-month full-stack web development boot camp. Since day one we've been using Bootstrap as an HTML framework. I am not ashamed to admit, I've been in love with it ever since. It makes my "this had to have been made circa 2002" web designs look modern and relevant in today's environment both on desktop and mobile with little fuss.
Recently, though, I've been experimenting with new frameworks so that I don't cement one method of design in my head with Bootstrap's syntax. I wanted to share my thoughts on each. Firstly, here is a list of the pros and cons of continuing to use Bootstrap for every project:
Bootstrap 4
Pros
- Incredible documentation - Bootstrap's Documentation page is world class in terms of organization and ease of use. For a new dev, it set a high standard that has rarely been met in my experience.
- Full featured - There's a reason that one of the chief cons of BS4 (spoiler alert) is its size. This framework has just about everything covered for complex and richly featured web designs.
- Intuitive grid system - I cannot over-emphasize how helpful Bootstrap was in helping me understand the concept of CSS grids. Rows divisible by 12 columns each is about as visually elegant as it gets.
Cons
- It's huge - One of the biggest complaints that I've read about when exploring alternatives to BS is the size of the codebase. I haven't personally run into issues here, but my applications are still relatively rudimentary. I can see this becoming an issue at scale and for accessibility reasons given the amount of data needed to render on a browser with a slow connection or dated hardware.
- It does a little too much - Sometimes I want more control over the finer details of my design. Bootstrap handles so many elements of design and offers a ton of built-in components but these can cause styling conflicts when building out my own stylesheet. For some projects it would be nice to rely more on my own styling and lean on a framework for the basics, like an intuitive grid system.
Let's meet the alternatives:
Materialize
https://materializecss.com/
Familar, maybe a little too familar - For the sake of clarification: I haven't permanently shelved any of these options. I've only dabbled in each and so will come back as my skills develop and explore the finer details of each of these tools. With that said, Materialize felt a little too similar to Bootstrap to require learning the differences in syntax. It was missing some of the built-in components I had come to rely on as well.
Everything I read about Materialize pointed to it being a full featured framework but with less bulk than Bootstrap. As mentioned above, I haven't seen cases of performance strain in any of my projects yet so that benefit wasn't readily apparent. Since I am currently only using maybe 20-30% of the power BS offers, it felt like a lot of duplication using Materialize and therefor not worth the time investment to keep digging.
The incredibly clean look of Materialize was one of its standout features. Squared corners and clean lines gave the HTML a very sleak, modern feel out of the box. That and the potential performance gains definitely make this framework one to revisit in a future project.
Foundation
https://get.foundation/
A roller coaster of emotions - Foundation is the tool I wanted to love the most but ultimately generated the most heartburn. This framework strips away a lot of the complexity of Bootstrap's syntax while remaining modular enough to offer a robust catalog of snippets and components, many made by outside contributors.
I just felt a little out of my depth on it. There were the expected growing pains of working with a new framework or library where one spends hours pouring over documentation and YouTube tutorials to get a handle on the basics. The point where it became too much of an obstacle for my project was when trying to assign a font-family attribute.
I was test-driving Foundation on the third verison of my developer profile between bootcamp homework projects. I wanted to import a Google Font into my landing page for the header and I could not find a way to assign it a attribute in the stylesheet. Some Googling of the issue found a solve for it, but it required making configuration changes in the package's CSS files. For that project I am relying on CDN's for outside libraries and frameworks and so Foundation is making its way back on the shelf to wait for another day.
The ability to quickly build in mobile responsiveness and easily maintain design consistency was very attractive. I also really like how the grid system is handled in Foundation. I feel it would have been tough to learn grid with but, with a "foundational" (sorry, couldn't help it) understanding of grid, the control Foundation provides over both the x and y axes was a welcome change. Once I have more experience in server side deployment and am no longer relying solely on CDN's, I will be revisiting Foundation.
Simple Grid
https://simplegrid.io/
Joyfully bare bones - Simple Grid is the least robust, most feature limited, and my personal favorite of all the frameworks I've tried, excluding my beloved Boostrap of course. This framework focuses solely on making pages responsive via CSS Grid. SG's grid system is a very similar syntax to Bootstrap but less cumbersome. Instead of a class <col-md-6>, a simple <col-6> is needed and SG handles the rest. There are no pre-built components and very little other than the grid itself is provided.
So why is it my favorite? Because it provides a wide-open canvas to design and build my own CSS library and have full control over customization of the project's HTML. Because of this skeletal approach, Simple Grid won't make sense on every project. Sometimes time-constraints will require a more full-featured framework. Consistency of design is also a great reason to work with a more robust framework. But for side projects and certain other tasks, the race-car performance and granularity of styling that SG allows makes it a permanent addition to my toolbox.
The bottom line
Ultimately, Bootstrap is still my go-to choice. I see potential in all of the frameworks and the experience of thinking about the grid and design differently were well worth the experimentation. But BS4 just does everything well. I look forward to the day when performance is a big enough concern to look for a more performant solution. I have some great ideas for functional applications that would be a perfect fit for the bare bones efficiency of Simple Grid once our class dives into React. But for now, I'll be continuing to lift my skills up by their, you guessed it, Bootstraps.
What are you using?
What frameworks are you currently using? I'd love to see some suggestions for other frameworks to explore.
Come say hello at https://lucsedirae.github.io/
I'm always up for collaboration and constructive criticism.
Top comments (0)