CSS Framework Architecture and Utility Strategies
bootstrap, bulma, purecss, tachyons, and tailwindcss are all CSS frameworks designed to speed up frontend development, but they solve styling problems in different ways. bootstrap and bulma provide pre-built components and a grid system using semantic class names. purecss offers a minimal set of responsive modules without imposing a specific look. tachyons and tailwindcss use a utility-first approach, where small single-purpose classes are combined to build designs directly in the HTML. While bootstrap includes JavaScript for interactive components, the others are primarily CSS-only, requiring you to bring your own JavaScript for behavior.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
CSS Framework Architecture and Utility Strategies Compared
bootstrap, bulma, purecss, tachyons, and tailwindcss all aim to reduce CSS writing, but they differ in how much control they give you and how they structure your markup. Let's compare how they handle layout, customization, and interactivity.
📐 Layout and Grid Systems
bootstrap uses a 12-column grid system with predefined breakpoints.
- You wrap columns in a
.rowcontainer. - Classes like
.col-md-4define width at specific screen sizes.
<!-- bootstrap: 12-column grid -->
<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>
bulma uses a flexbox-based grid that is mobile-first by default.
- You use
.columnsas the container and.columnfor items. - Modifiers like
.is-one-thirdset the width.
<!-- bulma: Flexbox grid -->
<div class="columns">
<div class="column is-one-third">Column 1</div>
<div class="column is-one-third">Column 2</div>
<div class="column is-one-third">Column 3</div>
</div>
purecss provides a responsive grid using percentage-based widths.
- You use
.pure-gfor the row and.pure-u-1-3for units. - It relies on inline-block or flexbox depending on version.
<!-- purecss: Unit-based grid -->
<div class="pure-g">
<div class="pure-u-1-3">Column 1</div>
<div class="pure-u-1-3">Column 2</div>
<div class="pure-u-1-3">Column 3</div>
</div>
tachyons uses functional classes for flexbox layouts.
- You combine
.flexand.w-33(width 33%) to create columns. - There is no explicit grid container class required.
<!-- tachyons: Functional flex -->
<div class="flex">
<div class="w-33">Column 1</div>
<div class="w-33">Column 2</div>
<div class="w-33">Column 3</div>
</div>
tailwindcss uses utility classes for flexbox or CSS grid.
- You use
.flexor.gridwith.grid-cols-3. - Width utilities like
.w-1/3control sizing.
<!-- tailwindcss: Utility grid -->
<div class="grid grid-cols-3">
<div class="w-full">Column 1</div>
<div class="w-full">Column 2</div>
<div class="w-full">Column 3</div>
</div>
🎨 Customization and Theming
bootstrap relies on Sass variables for theming.
- You override variables like
$primarybefore compiling. - CSS variables are also available in v5 for runtime changes.
<!-- bootstrap: Sass variables -->
$primary: #007bff;
$btn-border-radius: .25rem;
@import "bootstrap";
bulma uses Sass variables with a specific import order.
- You set variables like
$primarybefore importing the framework. - It allows easy tweaking of colors and spacing.
<!-- bulma: Sass variables -->
$primary: #00d1b2;
$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI";
@import "bulma";
purecss is minimal and expects manual CSS overrides.
- There are no built-in Sass variables for theming.
- You write custom CSS to change colors or fonts after importing.
/* purecss: Manual overrides */
@import "purecss";
.button-custom { background: #007bff; color: white; }
tachyons is immutable and does not support theming.
- Classes map directly to static CSS values.
- To change colors, you must edit the source CSS or use a fork.
/* tachyons: Immutable classes */
/* No config file. To change blue, you must edit .bg-blue in source */
.bg-blue { background-color: #0074d9; }
tailwindcss uses a JavaScript configuration file.
- You define colors and spacing in
tailwind.config.js. - The build process generates only the classes you use.
// tailwindcss: Config file
module.exports = {
theme: {
extend: {
colors: { primary: '#007bff' }
}
}
}
⚡ JavaScript and Interactivity
bootstrap includes JavaScript for components like modals and navbars.
- You import the bundle or use individual modules.
- Data attributes can trigger behavior without writing JS.
// bootstrap: JS Bundle
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
// HTML: data-bs-toggle="modal"
bulma is CSS-only and requires you to add JavaScript.
- You must write your own toggle logic for navbars or modals.
- This gives you full control but adds development time.
// bulma: Custom JS
const navbar = document.querySelector('.navbar-burger');
navbar.addEventListener('click', () => { /* toggle logic */ });
purecss is CSS-only with no interactive components.
- You build all behavior using your own framework or vanilla JS.
- Best paired with libraries like React or Vue for state.
// purecss: Custom JS
// No built-in helpers. You manage all DOM events manually.
tachyons is CSS-only and focuses on styling state.
- You handle interactions via your application logic.
- Classes like
.dimprovide hover effects without JS.
// tachyons: Custom JS
// Use .dim class for hover, JS for click handlers
tailwindcss is CSS-only but has plugins for forms and typography.
- You manage interactivity with your framework of choice.
- Official plugins exist for common UI patterns but not behavior.
// tailwindcss: Custom JS
// Use Alpine.js or framework state for interactivity
🛠️ Maintenance and Ecosystem
bootstrap is actively maintained with regular security updates.
- Large community ensures many third-party themes exist.
- Long-term support makes it safe for enterprise projects.
bulma is maintained but updates are less frequent than Bootstrap.
- Community is smaller but dedicated.
- Good stability for projects that do not need frequent feature updates.
purecss has low activity and is considered stable legacy code.
- Yahoo maintains it but feature additions are rare.
- Suitable for projects where dependencies should not change often.
tachyons is no longer actively developed.
- The repository sees very little activity in recent years.
- Do not use for new projects requiring long-term maintenance.
tailwindcss is highly active with frequent releases and updates.
- Massive ecosystem of plugins, UI kits, and tools.
- Best choice for new projects needing modern features and support.
🤝 Similarities: Shared Ground Between Frameworks
While the approaches differ, these libraries share common goals and techniques.
1. 📱 Mobile-First Responsive Design
- All five frameworks prioritize mobile layouts by default.
- They use media queries to adjust styles for larger screens.
<!-- Example: All support responsive adjustments -->
<!-- bootstrap: col-12 col-md-6 -->
<!-- bulma: column is-full-mobile is-half-tablet -->
<!-- purecss: pure-u-1 pure-u-md-1-2 -->
<!-- tachyons: w-100 w-50-ns -->
<!-- tailwindcss: w-full md:w-1/2 -->
2. 🎨 Reset and Normalization
- Each includes a reset to ensure consistency across browsers.
- This removes default margins and padding from elements.
/* Example: All normalize heading margins */
/* h1, h2, h3... { margin-top: 0; } */
3. 🧩 Modular Imports
- You can import only the parts you need to save space.
- This applies to Sass imports or utility configurations.
// Example: Selective importing
// bootstrap: import only grid
// tailwindcss: purges unused classes
4. ✅ Accessibility Focus
- All aim to provide readable contrast and focus states.
bootstrapandtailwindcsshave strong accessibility tooling.
<!-- Example: Focus rings -->
<!-- All frameworks provide :focus styles for buttons -->
5. 👥 Community Resources
- Each has documentation and examples available online.
bootstrapandtailwindcsshave the largest collections.
<!-- Example: Documentation links -->
<!-- Official docs provide copy-paste snippets for all -->
📊 Summary: Key Similarities
| Feature | Shared by All Five |
|---|---|
| Responsiveness | 📱 Mobile-first media queries |
| Base Styles | 🎨 CSS reset/normalize included |
| Modularity | 🧩 Partial imports supported |
| Accessibility | ✅ Focus states and contrast |
| Documentation | 📚 Online guides and examples |
🆚 Summary: Key Differences
| Feature | bootstrap | bulma | purecss | tachyons | tailwindcss |
|---|---|---|---|---|---|
| Approach | 🧱 Component-based | 🧱 Component-based | 🧱 Minimal modules | ⚡ Utility-first | ⚡ Utility-first |
| Grid | 12-column | Flexbox | Percentage units | Flex utilities | Flex/Grid utilities |
| JS Included | ✅ Yes | ❌ No | ❌ No | ❌ No | ❌ No |
| Customization | Sass variables | Sass variables | Manual CSS | Edit source | Config file |
| Maintenance | 🟢 Active | 🟡 Stable | 🟡 Low Activity | 🔴 Inactive | 🟢 Very Active |
💡 The Big Picture
bootstrap is the safe choice for teams needing a complete UI kit with JavaScript included. It reduces decision fatigue but can make sites look generic.
bulma is a clean middle ground for those who want components without JavaScript baggage. It works well when you want readability and flexbox power.
purecss fits niche cases where size is critical and you only need basic layout helpers. It is not suitable for complex dashboards.
tachyons should be avoided for new work due to lack of maintenance. It remains useful only for maintaining older systems built with it.
tailwindcss is the modern standard for utility-first development. It offers the best balance of control, performance, and community support for new projects.
Final Thought: Your choice depends on how much design freedom you need versus how much pre-built functionality you want. For most new professional projects, tailwindcss offers the best long-term value, while bootstrap remains valid for rapid internal tooling.
How to Choose: tachyons vs bootstrap vs bulma vs purecss vs tailwindcss
- tachyons:
Choose
tachyonsonly for maintaining legacy projects or if you strictly prefer immutable functional CSS with no build step. Note that this package is no longer actively developed, so it should not be used for new greenfield projects where long-term support is required. Modern utility frameworks liketailwindcssoffer similar benefits with active maintenance. - bootstrap:
Choose
bootstrapif you need a complete UI kit with built-in JavaScript components like modals, dropdowns, and tooltips. It is ideal for internal tools, admin dashboards, or prototypes where speed and consistency are more important than unique branding. The large ecosystem means you can find themes and extensions for almost any need. - bulma:
Choose
bulmaif you want a modern flexbox-based grid and clean components without any JavaScript dependencies. It is suitable for projects where you prefer to handle interactivity with your own framework (like React or Vue) and want a readable class naming convention. It works well when you need a good starting point but plan to customize the look significantly. - purecss:
Choose
purecssif you need an extremely lightweight foundation for a project where every kilobyte counts. It is best for simple landing pages or widgets where you only need a grid and basic form styling without a heavy component library. Avoid it for complex applications that require extensive pre-built UI elements. - tailwindcss:
Choose
tailwindcssif you want full design control without leaving your HTML and need a highly customizable system backed by an active community. It is ideal for custom designs where you want to avoid overriding default component styles and need a robust build process to purge unused CSS. It requires a build step but offers the best developer experience for modern utility-first workflows.
Popular Comparisons
README for tachyons
TACHYONS
Functional CSS for humans.
Quickly build and design new UI without writing CSS.
Principles
- Everything should be 100% responsive
- Everything should be readable on any device
- Everything should be as fast as possible
- Designing in the browser should be easy
- It should be easy to change any interface or part of an interface without breaking any existing interfaces
- Doing one thing extremely well promotes reusability and reduces repetition
- Documentation helps promote reusability and shared knowledge
- CSS shouldn't impede accessibility or the default functionality of HTML
- You should send the smallest possible amount of code to the user
Features
- Mobile-first CSS architecture
- 490 accessible color combinations
- 8px baseline grid
- Multiple debugging utilities to reduce layout struggles
- Single-purpose class structure
- Optimized for maximum gzip compression
- Lightweight (~14kB)
- Usable across projects
- Growing open source component library
- Works well with plain HTML, React, Ember, Angular, Rails and more
- Infinitely nestable responsive grid system
- Built with PostCSS
Getting Started
Docs can be found at http://tachyons.io/docs The modules are generally pretty small and thus quick and easy to read.
Use the CDN
The quickest and easiest way to start using Tachyons is to include a reference to the minified file in the head of your HTML file.
<link rel="stylesheet" href="https://unpkg.com/tachyons@4/css/tachyons.min.css">
Local Setup
Clone the repo from Github and install dependencies through npm.
git clone https://github.com/tachyons-css/tachyons.git
cd tachyons
npm install
Dev
If you want to just use everything in tachyons/src as a jumping off point and edit all the code yourself, you can compile all of your wonderful changes by running:
npm start
This will output both minified and unminified versions of the CSS to the CSS directory and watch the src directory for changes. It's aliased to the command:
npm run build:watch
If you'd like to just build the CSS once without watching the src directory, run:
npm run build
If you want to check that a class hasn't been redefined or 'mutated,' there is a linter to check that all of the classes have only been defined once. This can be useful if you are using another library or have written some of your own CSS and want to make sure there are no naming collisions. To do this run the command:
npm run mutations
Docs
The tachyons docs located at http://tachyons.io are all open source and located at https://github.com/tachyons-css/tachyons-css.github.io
You can clone the docs and use them as a template for documenting your own design system / patterns / components. While not everything is automated, the component library generation makes it extremely easy to generate and organize the documentation for components as demonstrated at http://tachyons.io/components
Community Resources
- DWYL Learn Tachyons: Learn how to use Tachyons to craft beautiful, responsive, functional and fast UI with minimal CSS
- Tachyons TLDR: Quick lookup for Tachyons classes, scales and color palette
- Tachyons Pro: Fun quiz for memorizing class names
Contributing
Please read our code of conduct for contributors.
Tachyons in Production
A longer list of sites that use tachyons in production can be found in sites.md We love letting the community see what people are building. Please add your link to sites.md in a PR or by opening an issue if you're willing to share to your site or project.
Featured Sites
- https://interfacelovers.com
- https://npmjs.com
- https://womenwho.design
- https://friendstalkfrontend.com
- https://play.webvr.rocks
- https://gohugo.io
- https://coralproject.net
- http://www.philipyoungg.com
- https://gitpoint.co
- https://2017.nodeconf.com.ar
- https://goldenstaterecord.com
- http://hicuties.com
- https://urlbox.io
- https://fontawesome.com
- https://purple3.herokuapp.com
- http://blunt.af/tachy.app/
- https://fenderdigital.github.io/css-utilities/intro/
- https://play.cash
- https://bitmidi.com
And of course...
Sponsors
Development of Tachyons is supported by
Help
If you have a question or need help feel free to open an issue here or jump into the Tachyons slack channel.