Menu

12 Small CSS Frameworks To Use In Your Web Designs

You probably don’t need most of the features that come with large UI frameworks such as Bootstrap, especially when you’re working on small, straightforward projects that you just want to get up and running as soon as possible. Fortunately, there are smaller, simpler CSS frameworks out there that you can use instead.

Using a small CSS framework typically translates to a gentler learning curve for developers, non-dependency on JavaScript for functionality, and faster load times for your users.

I’ve created an excellent list of small/minimalist CSS frameworks for you to explore. Most of them are under 5 KB (when minified and gzipped) and contain the essential ingredients for building responsive web designs.

min

min

min, the smallest CSS framework on this list, has a responsive 12-column grid system, button styles, table styles, Android-compatible icons, and more. min even supports ancient browsers like Internet Explorer 5.5.

Milligram

Milligram

Milligram is for modern UIs — its grid system uses FlexBox, sizes and lengths use the rem unit, and it’s Mobile First. Being on the cutting edge comes at a cost: Milligram only officially supports the newest versions of Chrome, Firefox, IE, Safari, and Opera.

Blaze CSS

Blaze CSS

Out of the box, Blaze CSS is already lightweight, but you can reduce its file size even more due to its modular architecture which allows you to include only the parts you intend to use in your project. (Read the instructions for creating a custom Blaze CSS build for more info.)

Kube

Kube

Kube packs a punch for a CSS framework that weighs less than 6 KB. It has a responsive grid system, a robust set of classes for styling your web forms, multiple table classes, notification classes for displaying important messages to your users, and more.

Pure

Pure

Pure, an open source project led by Yahoo! developers, is a suite of CSS modules that will help you quickly build responsive web designs. Pure has basic styles for all HTML elements (developed on top of Normalize.css), and modules for grid layouts, web forms, buttons, tables, and navigation menus.

Furtive

Furtive

Calling itself a "CSS micro-framework", Furtive is geared towards modern web designs. Like Milligram, Furtive is Mobile First, has a responsive grid based on FlexBox, and uses the rem unit for lengths and sizes. It has the basics covered: buttons, forms, and even default color classes.

Skeleton

Skeleton

Though it hasn’t been updated in over a year, Skeleton is still a top-notch starting point/boilerplate for rapidly building modern, responsive web designs. It comes with an intuitive grid system and base styles for your HTML elements.

FOX CSS

FOX CSS

FOX CSS is a lightweight, modular CSS framework. It uses the Mobile First design approach, supports browsers as old as IE 9, and has a non-aggressive CSS reset (inspired by KNACSS).

Basscss

Basscss

Basscss is made up of 22 CSS modules consisting of a CSS reset, a grid system, color classes, utility classes to help you build your responsive designs, and much more. Basscss is surprisingly feature-rich for something that weighs less than 4 KB.

Siimple

Siimple

Siimple is a minimalist CSS framework for building responsive, clean web designs. It’s similar to Skeleton: It has an intuitive 12-column grid system and base styles for typography, tables, buttons, forms, and more.

Lotus

Lotus

Lotus is one of the smallest CSS frameworks out there. It’s got the essentials covered: a responsive grid system, typography, buttons, and web forms.

Picnic CSS

Picnic CSS

Picnic CSS is a lightweight UI framework written in Sass, making it easier for you to edit and customize variables such as colors and lengths. It also has some impressive, purely-CSS UI components such as a modal window and a content slider.

Summary Table

The following table contains useful details about the CSS frameworks featured in this list.

NameSize*DocsLicenseGitHub RepoPopularity **
min1.02 KBDocsMITRepo685
Milligram4.05 KBDocsMITRepo3,000
BlazeCSS5.71 KBDocsMITRepo7
Kube5.94 KBDocsMITRepo (outdated)538
Pure4.0 KBDocsBSDRepo13,373
Furtive2.37 KBDocsMITRepo369
Skeleton1.57 KBDocsMITRepo10,884
FOX CSS2.46 KBDocsUnknownRepo87
Basscss3.49 KBDocsMITRepo2,597
Siimple5.56 KBDocsMITRepo14
Lotus1.80 KBDocsMITRepo14
Picnic CSS2.32 KBDocsMITRepo932

*Size is the file size of the minified and gzipped CSS file. Size values were derived from my independent testing of the production-ready/distribution stylesheets of each CSS framework.

**Popularity is the amount of users who are keeping track of the CSS framework’s source code on GitHub. This value is measured by the number of Stars the project had around the time this post was published. A higher value means the project is more popular.

Read Next

7 CSS Tools You Should Be Using

5 CSS Effects Libraries for Supercharging Your Designs

CSS Development at Large-Scale Websites

This was published on Feb 3, 2016

22 Comments

Angelica Costa Feb 03 2016

I just love Kube. I have been using it in everything since I found it.

That summary table at the end is gold, my only questions is how come you didn’t organize the frameworks from most popular to least popular in the article?

    Jacob Gube Feb 04 2016

    I’m glad your brought this up Dylan. Thanks!

    I did consider sorting the summary table based on popularity, but I decided against it because I didn’t want to imply that popularity is the most important metric for deciding which framework to use.

    Popularity is definitely important because a more popular project might indicate that you’ll get more frequent updates and bug fixes due to a potentially bigger pool of contributors. Popularity can also give you a clue of how large the community behind the project is, and a large community is never a bad thing. However, equally (if not more) important is how well the project suits your personal needs and standards, and that’s harder to quantify, or correlate to a hard metric such as popularity.

    In addition, popularity as a quality metric is incomplete. You might be looking at a project that’s less popular only because it’s newer, or because it hasn’t been marketed as effectively as a more popular project, or because it isn’t led by a famous developer or company.

    Popularity on its own won’t tell us how much of a good fit an open source project is with us. By sorting the table based on popularity, I might end up suggesting that one project is better than another simply because it’s more popular.

    One reason I linked to the official documentation of each project is because looking at the docs gives you an idea on how well a project fits your personal needs and style. Looking at the docs of each CSS framework, you might also notice that there’s no strict correlation between the project’s popularity versus how well-documented and well-maintained it is.

    I also thought about sorting the table based on file size, which would be more aligned with the theme of this post. But I also didn’t want to suggest that file size was the most important factor to consider.

    File size as a Web performance metric is too simplistic. File size on its own doesn’t show you a complete picture. A larger framework might contain a little bit more features, and those extra features might in turn reduce your project’s overall weight because you won’t need additional packages to fill the feature gap of the smaller framework. For example, Blaze CSS is more than 5x bigger than the smallest CSS framework on this list (min), but it also comes with a ton more features like multiple styles of modal windows, a range/slider interface component, etc. Adding other packages to fill those gaps might increase your project’s overall weight and number of HTTP requests (if you don’t concatenate your CSS and JS files), not to mention that you’ll have more project dependencies to maintain and keep track of.

    In the end, I decided to leave the table unsorted. However, I’ll keep your comment in mind in the future, because I do see the added value, readability, and usefulness of having sorted lists or tables. Thank you for your comment Dylan.

      Alessandro Mar 11 2016

      Great answer mate. What do you reckon should I use for old browser support? I work with IE7-8 businesses and the css is a pain in the arse

Elian Potter Feb 03 2016

Furtive looks compromising! Gotta try it out on my next web app!

Nice article,
The summary table was a nice addition!

Ricardo Zea Feb 08 2016

Great list Jacob, huge Thanks for sharing.

Your table is great, but why not go the extra step and allow sorting?

It isn’t too difficult to implement and enhances the usability of the table ten-fold. After all, you’re a front-end dev :)

    Jacob Gube Feb 08 2016

    Good suggestion Ricardo . I’ll keep that in mind. Something like tablesort might be useful on posts that have sortable tables.

Min looks promising, but I wish it had flex grid.

Still bata, but I’m working on a small css flexbox framework: http://thimblecss.com

Haritha Feb 23 2016

Framework is the standard set of concepts which can practice the common type of problem. Framework can be used as the reference of single approach. This is designed with more package of structure with files of standard code to build a site. Front end framework will consist of structure of files to obtain the standard code. Simple framework will include the grid system. Complete system of framework with the features of typography will include the set of forms and buttons. Following are some of the framework for web design
* Bootstrap
* Foundation 3
* YAML 4
* Tuktuk
* Kube
* Groundwork
The major advantage of this framework is speed up the mock process, Browser compatibility, Learn good practices.

Charles Henry Feb 24 2016

Thanks For sharing this post. I bookmark you for future.

I built BLAZE. Thank you for including it in the list.

If anyone would like to provide feedback I’d really appreciate it! Why you’d use another framework instead of Blaze, or what you’d like to see Blaze include. Or anything, feedback is gold!

It nice to see the other frameworks that Blaze lives with in the ecosystem too. Nice article ;-)

    Jacob Gube Feb 29 2016

    Blaze strikes a beautiful balance between performance and features. Thank you for creating and sharing your awesome CSS framework Greg!

    Great framework …. Keep up the good work.

Matt Harris Mar 11 2016

I would like to put forward my small css framework Outline: http://outlinemail.co.uk/

I welcome any thoughts / improvements / feedback!

cheers

    Jacob Gube Mar 13 2016

    This looks very interesting Matt! I think this addresses a pain-point many designers have: Creating HTML emails in an easy and beautiful way. Your docs is awesome!

    My only feedback is it would be nice to know which email clients you officially support and test in.

Jacob Gube Mar 20 2016

I just found this recently:
Grd – a CSS Flexbox grid framework. It’s only 512 bytes.

Mickael Apr 07 2016

My favorite one is not listed, you should check the Swiss CSS micro framework Rocssti https://rocssti.net/en/

charleshenry Apr 19 2016

Thanks for sharing this post. It is really useful to me.

Another great framework is Shine CSS. It’s very lightweight and quite easy to use.
The address is:
http://rmmfree.github.io/shine_css/

This comment section is closed. Please contact us if you have important new information about this post.


Partners