27 March 2026
Picking a CSS Framework
For some recent coding projects, I experimented with a few popular CSS framework options.
I’ve used Bootstrap for most of my projects for a long time. It consistently remains one of the top CSS frameworks and is probably still the most widely used. Tailwind and Foundation are also popular. My primary focus isn’t design, although I think this site and the Eastern Pennsylvania Gaming Society site I designed both look good. They’re both Bootstrap sites. When I was working on ParkPin, I wanted something lighter and ultimately chose Bulma.
For this article, I built some framework demos, which you can reach at https://techinfo.brainbuz.org/frameworkdemo. I also made an archive of the source files, which you can download at https://techinfo.brainbuz.org/assets/frameworksdemo.tar.gz. While developing the demo page, I started with Bulma, then translated it to a Pure CSS version, and then to the other frameworks. You’ll see that I was able to get all of them to produce fairly similar sites. Pico was the exception: because it’s a lighter framework, I chose to lean into its strengths and paradigm rather than forcing it to reproduce a design built with another framework.
According to W3Techs Market share trends for CSS frameworks, Bootstrap is still the king, with a 75% market share, while Foundation and Tailwind are each around 2%.
Bootstrap
Bootstrap has the advantage of excellent documentation and lots of forum discussion, and it gives you a pretty complete kit out of the box. It’s easy to get started and easy to find answers when you get stuck. On the downside, I sometimes feel like I’m fighting with it.
When I’m creating a site, one of the first things I tackle is the color scheme. In theory, you should be able to build from Sass and override colors in Sass. But Bootstrap 5.x isn’t fully compatible with modern Sass and won’t be fully compatible with Dart Sass until version 6. I’m writing this in 2026, and Bootstrap 6 might still be several years away. In practice, you often need to use Bootstrap precompiled and then load an override stylesheet after it.
Bootstrap gives you a very solid foundation, but when you need to go beyond it, it can feel like a fight. For example, Bootstrap defines a lot of sub-elements in table styling, which can make restyling difficult.
Sites built with Bootstrap can look similar if they aren’t heavily customized. This site is built with Bootstrap (as of early 2026), and hopefully it doesn’t look like a run-of-the-mill Bootstrap site.
Foundation
Before writing this page, I hadn’t done anything with Foundation. For the demo page, I found it comparable to Bootstrap. The general consensus seems to be that it has a steeper learning curve (AI helped me on the demo, so I didn’t get the full experience), offers better customization than Bootstrap, but isn’t as ready out of the box.
Bootstrap and Foundation are about the same age, and Foundation shares Bootstrap’s issues with modern Dart Sass, including no clear timeline for a fully compatible update.
Tailwind
Tailwind is favored by many UI developers, but it was also the most difficult for me to use. In Tailwind, you’ll use a lot of classes. When I customized Tailwind to match the appearance of the demo that was initially created with Bulma, the SCSS file was very short: I defined 3 colors and set 2 theme colors, everything else was done by applying many utility classes.
By contrast, the original Bulma version defined a 7-color palette and redefined 13 theme colors. For my demo, the Tailwind customization was mostly CSS, which fits Tailwind’s philosophy of writing very little custom CSS. For basic palette setup, this worked well; if you need more, the Tailwind project recommends PostCSS.
I can see the appeal for developers who do a lot of design and want precise control. It has built-in classes for very complex layouts. For me, it’s a harder sell. Without AI assistance, it would have taken me a long time to learn it well enough to build this demo page, and everything needs many class tags. Tailwind is the hardest to master and takes the most effort to use.
Bulma
Bulma is a unique animal: semantic elements don’t dictate style. In Bulma, <p>, <h1>, and <div> can look the same without classes. In addition to the Bulma Framework Demo Page, I created a more specific Bulma Example to show how this works.
Instead of semantic context, elements need classes. For example, an H1 might be <h1 class="title">, but if semantic hierarchy is irrelevant in your site, it could just as easily be <div class="title">.
Bulma also doesn’t include JavaScript, focusing purely on CSS. In the example, there’s a small helper JavaScript snippet for the menu. If you want to make text small with danger styling and a warning background, you can do this: <span class="is-size-6 has-text-danger has-background-warning">.
Despite how different it is, I like using it.
My site ParkPin has no semantic structure, so Bulma was a perfect fit.
Pico
Pico is the opposite of Bulma: it can be used without classes. Pico provides 20 theme templates with different text color schemes, and it also has a set of 380 predefined colors that can be referenced by name. You’ll see those predefined colors in the SCSS source for the Pico Framework Demo Page. For a site where formatting follows semantic tagging, Pico is a great choice.
Pico is also minimalist. It’s tiny compared to the others (fast to load) and better suited for sites with simpler design needs.
Conclusion
For anyone inexperienced with CSS frameworks, I recommend starting with Bootstrap. It still has a huge lead in popularity, there is lots of coverage on the web, the docs are good, and it’s designed to be easy to learn.
Foundation seems like a reasonable alternative to Bootstrap, but I don’t see a strong reason to pick it, and it has a steeper learning curve. Tailwind might be the best choice for design-oriented developers, but it also has a steep learning curve and requires extensive class usage.
Pico is lightweight and designed for classless use. It may limit your design options, but if your project is tightly tied to semantic document hierarchy, you can pick one of its 20 color schemes and move quickly. Bulma is a great platform, and once you get going, it becomes intuitive.
My CSS framework toolbox includes Bootstrap, Bulma, and Pico. Pico won’t fit every project, but for something like a documentation site, it can be a great choice. I already have several Bootstrap sites, with no reason to switch them. For new sites, Bulma is my current go-to.