email@encode8.com
CollectionCSS

15 Tiny But Robust CSS Frameworks for Your Next Project

Good things come in small packages. That’s true for CSS frameworks too. There is no point in using bloated UI frameworks that come packaged with too many classes you don’t even need. May be you just need a grid system, not all the bells and whistles of several button classes. You can start building your own, but why reinvent the wheel? Instead, here are 15 very tiny yet robust CSS frameworks.

1. Milligram

milligram css framework
Milligram provides a minimal setup of styles for a fast and clean starting point. That is all it does. Incredibly small in size — 2kb gzipped — this is not about a UI framework. It is specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. It is actively developed and supports flexbox, css grids among many other features.

2. Pure.css

purecss framework
Pure is ridiculously tiny. The entire set of modules clocks in at 3.8KB minified and gzipped. The framework is responsive out of the box, so elements look great on all screen sizes. By using Grids, Menus, and more, it’s easy to create beautiful responsive layouts for all screen sizes. Unlike other frameworks, Pure’s design is unopinionated, minimal and flat.

3. Mini.css

minicss framework
Mini.css is another minimal CSS framework which is actively developed and currently at version 3.0.0. It offers an array of advanced CSS features including grids, flexbox. This framework is 7KB in size when gzipped. Among all other frameworks listed here, I find this one to be best documented.

4. lit

lit css framework
When a certain framework claims to be the world’s smallest, you need to pay heed. Lit is only 395 bytes in size. It offers all of the basics for a framework, such as a responsive grid, typography, and other elements. Util, an atomic css addon for lit, further extends the framework with several useful classes.

5. Chota

chota.cssChota is a very small responsive CSS framework (only 3kb when gzipped). It comes with a 12-column grid system. You can customize skins by overriding only a few CSS variables in your stylesheet. It doesn’t require learning a lot of class names like other frameworks. If you have used Bootstrap previously, Chota’s utility classnames will sound familiar to you.

6. Spectre

spectre css framework
Spectre may feel a bit heavier with a size of 10KB but it only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler. It is designed for modern browsers but does not provide support for IE versions below 10.

7. Skeleton

skeleton css framework
Skeleton is a simple, responsive boilerplate to kickstart any responsive project. It contains  around 400 lines of code. It is a plug-n-play framework that does not require you to install anything. However, if you want to customize Skeleton, you can use both LESS and SASS preprocessors.

8. min

min css framework
Min provides easy copy-and-paste examples for every element. You can get started with any of the provided templates, or you can read the complete and concise documentation with visual examples for every part of Min.

9. Cutestrap

cutestrap css framework
At a size of 8Kb, Cutestrap is a tiny CSS framework that can be used to build responsive, modern websites. It provides utility classes for forms, buttons, grids and typographic elements. You can customize the default variables using SASS preprocessor.

10. Base

base css framework
Base is a lightweight CSS framework that you can use to create beautiful responsive websites. With Base, you don’t have to spend hours overriding styles already set by bloated frameworks. It is built on top of the latest Normalize.css to ensure all basic styles are set. It has a modular core and is cross-browser compliant.

11. Furtive

furtive css framework
Furtive is truly mobile-first and nearly all dimensions are done in rem. It also has a small footprint, cutting down on the bandwidth necessary for downloading CSS. Furtive is intended to be just that, furtive. It’s the perfect starting point to get your project up and running. It offers a responsive grid system based on flexbox.

12. BassCSS

basscss framework
Using clear, humanized naming conventions, Basscss is quick to internalize and easy to reason about while speeding up development time with more scalable, more readable code. It strikes a balance between consistency and flexibility to allow for rapid prototyping and quick iterative changes when designing in the browser. Basscss provides lightweight, performant styles and flexible utilities to design for any device and to help reduce boilerplate in stylesheets.

13. Siimple

siimple css framework
Siimple has been built using SASS/SCSS. You can import only what you need. It allows you to design a web page that looks great on all devices (desktops, tablets and phones). Being non-aggressive in nature, Siimple combines an elegant, modern, flat and minimalistic design.

14. Picnic

picnic css framework
Picnic is a responsive and modular CSS framework. It is under 10kb in size when compressed. It offers a handful of commonly used CSS transitions. Written in SCSS, you can customize Picnic to suit your needs.

15. Teutonic

teutonic CSS framework
Teutonic CSS is a modern web design system to develop responsive, accessible websites and web applications. It’s based on CSS Variables for easy customization and extension. It features cool tech like CSS Grid. The source is a collection of SCSS modules, but you can use the minified version, as it can be modified using CSS Vars.

Conclusion

While preparing this list of minimal CSS frameworks, I made it a point to select only those which is less than 12kb in size, does not provide too many css classes, and is actively developed on Github. In doing so, I had to discard a few frameworks but they need mention: Tachyons (larger size), Thimble (larger in size and sparse documentation), Lotus (not actively developed), BlazeUI (too many CSS classes), and Kube (not enough commits). If you just need to only style HTML5 elements, check out this post for a list of barebones CSS libraries — no need to remember any classname!