15 Best Lightweight CSS Frameworks for Responsive Websites

What Is a Lightweight CSS Framework?

A lightweight CSS framework is a small stylesheet, usually under about 15 KB gzipped, that provides a responsive grid, typography, and basic styles for forms and buttons. Heavier frameworks such as Bootstrap add many components and JavaScript plugins. Lightweight ones trade those extras for less code to download, parse, and override.

They come in three main types. Classic micro frameworks such as Milligram and Chota give you a grid and a few components. Classless frameworks such as Simple.css style plain HTML elements with no classes. Utility-first frameworks such as Tailwind CSS and Tachyons give you small single-purpose classes to compose your own design. For a wider view that includes heavier options, see our guide to the best CSS frameworks.

Lightweight CSS Frameworks Compared

Sizes are the gzipped size of each framework's main minified stylesheet from its latest npm release, fetched from jsDelivr and compressed at gzip level 9 on October 5, 2026. Release dates come from npm, and stars from GitHub on the same day.

15 Best Lightweight CSS Frameworks

2. Bulma

Bulma is a Flexbox-based framework with ready-made components such as cards, navbars, modals, and forms, written in pure CSS with no JavaScript. Version 1 rebuilt it on CSS custom properties, so themes and dark mode can change at runtime. The full build is not small, but Bulma is modular in Sass, so you can import only the parts you need.

• Simple column system - Add columns and they share the row equally, or size them with classes such as is-half.
• No JavaScript - Pair it with any JS framework.
• CSS variables - Theme and dark mode without recompiling.

Best for - Readable class names and ready components without JavaScript.

3. UIkit

UIkit is a modular front-end framework with a large set of CSS and JavaScript components, including accordions, sliders, modals, sticky navigation, and animations. It is written in Less and Sass, ships a right-to-left stylesheet, and is released often.

• Large component set - Interactive components work without jQuery.
• Modular - Include only the components you use.
• RTL support - A separate stylesheet for right-to-left languages.

Best for - Interactive sites that need components and behavior from one library.

4. Pure.css

Pure.css is a set of small CSS modules for grids, forms, buttons, tables, and menus, originally created at Yahoo. It is built on Normalize.css and adds little styling of its own, so it is easy to override. Each module can be used on its own.

• Responsive grid - Mobile-first grid units with breakpoint classes.
• Separate modules - Load only the grid or only the forms.
• Minimal styling - Easy to restyle with your own CSS.

Best for - A tiny, unopinionated base for your own design.

5. Milligram

Milligram is a minimal starting point that styles typography, forms, buttons, tables, and a Flexbox grid in about 2 KB gzipped. It relies on Normalize.css and keeps the number of properties low so there is less to override.

• Tiny - The smallest framework in this list with a grid.
• Flexbox grid - Simple rows and columns.
• Clean defaults - Good typography out of the box.

Best for - Small sites and prototypes that need a clean base fast.

9. Chota

Chota is a micro framework with a 12-column grid, buttons, forms, navigation, tabs, cards, and utility classes in about 3.5 KB gzipped. It uses CSS variables for theming and includes a dark mode, and it needs no build step.

• 12-column grid - Responsive columns with breakpoint classes.
• CSS variables - Theme by overriding a few variables.
• Dark mode - Built in.

Best for - A small framework that still has a grid and components.

10. Tachyons

Tachyons is a functional CSS toolkit of small, single-purpose classes, similar in idea to Tailwind but shipped as a plain stylesheet with no build step. It still gets about 106,000 npm downloads a week.

• Single-purpose classes - Compose styles in the markup.
• Responsive suffixes - -ns, -m, and -l apply classes at breakpoints.
• No build step - Link one file and start.

Best for - Utility-first styling without a build tool.

14. Skeleton

Skeleton is a boilerplate of about 400 lines with a 12-column fluid grid, typography, buttons, and forms. Its last code commit was in December 2014, so it uses floats rather than Flexbox or Grid. It is still useful for learning and very small pages.

• Very small - Easy to read in one sitting.
• Fluid grid - 12 columns that stack on small screens.
• No dependencies - Plain CSS.

Best for - Learning how a CSS framework works.

15. Spectre.css

Spectre.css is a Flexbox-based framework with typography, a grid, and components such as cards, tabs, modals, and toasts in about 9.5 KB gzipped. Its last code commit was in July 2020, but it still has about 6,600 weekly npm downloads.

• Flexbox grid - Responsive columns.
• Many components - More than most frameworks this size.
• Sass source - Customize variables and rebuild.

Best for - Existing projects that already use it.

Frameworks Removed From This List

Earlier versions of this article included frameworks that are no longer a safe choice for new projects.

• Pico CSS - Archived on October 4, 2026. Its README says v2.1.1 is the final release and that npm, the CDN, and the website stay online, so existing sites keep working.
• Mini.css - The GitHub repository is archived, and the last npm release was in 2018.
• InvisCSS, Wing, Fluidity, Turretcss, and Typebase.css - No code changes since between 2016 and 2021, and InvisCSS is archived.
• Avalanche - The GitHub repository no longer exists.
• Fictoan - The repository was archived in 2025.
• HiQ, Spark, Vital, and Beauter - Removed for low adoption, with no npm package or only a few hundred weekly downloads.

How to Choose a Lightweight CSS Framework

• Match the type to the project - Pick classless for content sites, a micro framework for small apps, and utility-first for custom designs.
• Check maintenance - Look at the last release and commit. An unmaintained framework will not get fixes for new browser behavior.
• Measure the real size - Compare the gzipped CSS you will actually ship, not the marketing number.
• Check the grid - Flexbox or Grid layouts are easier to adapt than older float-based grids. See CSS Grid layout vs CSS frameworks for when you need a framework at all.
• Plan for customization - CSS variables make theming and dark mode far easier than editing compiled CSS.

How to Test a Responsive CSS Framework

A framework's grid only proves itself on real screens, which is the core of responsive design testing. Check your layouts at common breakpoints, such as 375px, 768px, and 1440px, and in each browser your users have, because Safari, Chrome, and Firefox can render the same CSS differently.

TestMu AI's LT Browser shows your page side by side in multiple device viewports with synchronized scrolling, and a responsive test checks a URL across screen sizes in the cloud. To catch layout changes after a framework upgrade, SmartUI compares screenshots of each page against an approved baseline and highlights what moved.

Coding agents can help too. An agent driving a browser through the Playwright MCP server can step through breakpoints and flag overlapping or overflowing columns. Agents check layout, not intent, so a person still needs to confirm the design matches the brand.

Conclusion

There is no single best lightweight CSS framework. Tailwind CSS suits custom designs, Pure.css and Milligram suit small sites that need a grid, and classless options such as Simple.css suit content pages. Whichever you choose, check that it is still maintained, measure what you ship, and test the layout on real browsers and devices before release. To start, create a free TestMu AI account and open your site in LT Browser.