Menu icon Foundation
Make your final CSS file super tiny with UnCSS

Hey friends,
Just wanted to let you know that the next Foundation (Foundation for Sites 6) will have an optional build template, like Assemble with UnCSS included into the build. This is huge because because it will help you scaffold you projects, then make you CSS output tiny when you're all done. This template helps you have all your files in one place to easily zip up and deploy.

Brett DeWoody wrote about his experience with UnCSS and how he went from 83kb to 16kb!

Until then, here is a great tutorial on adding UnCSS to the current Foundation for Sites:
https://corydowdy.com/blog/foundation-5-sass-and-grunt-uncss

As always, feel free to ask us questions on this below :)

uncssminifycsssmaller filesfile sizelight weightload times

Hey friends,
Just wanted to let you know that the next Foundation (Foundation for Sites 6) will have an optional build template, like Assemble with UnCSS included into the build. This is huge because because it will help you scaffold you projects, then make you CSS output tiny when you're all done. This template helps you have all your files in one place to easily zip up and deploy.

Brett DeWoody wrote about his experience with UnCSS and how he went from 83kb to 16kb!

Until then, here is a great tutorial on adding UnCSS to the current Foundation for Sites:
https://corydowdy.com/blog/foundation-5-sass-and-grunt-uncss

As always, feel free to ask us questions on this below :)

Joshua Smith about 4 years ago

I always thought there was this drawback of UnCSS that is removes things that aren't necessarily used now but will be used eventually.

As in, jQuery adds a class that isn't currently in the HTML but will be once that particular event fires.

I'm going to stay tuned in to this.

Yucel about 4 years ago

Hello Rafi,

It may be off topic but do you have any other updates on Foundation 6?

Rafi Benkual about 4 years ago

@Joshua - I'd say the UnCSS step would be used last, when you feel the site is done. The way we're setting it up, the output of this execution is a stylesheet featuring only the used CSS rules. A separate stylesheet.

@Yucel - We're deep in the code for Foundation Sites 6. We're refactoring all the JS, writing our SCSS mixins to be customizable and more simple. Plus a bunch of other workflow goodies that are game changers.

There is a roadmap you can see here: https://trello.com/b/QBPKlQqf/foundation-for-sites

We haven't set a date yet. Considering the other work we do with client projects and other internal work, we hope to be done by end of summer.

Yucel about 4 years ago

Hello Rafi, that is awesome news. Looking forward to it...

Calder Pegden about 3 years ago

Hey Rafi, did this end up happening? I cant find any documentation talking using UnCSS in Foundation 6.

Dan Feather about 3 years ago

I would reiterate Calder's question: where is UnCSS info for Foundation 6? 

(I could swear I saw a doc page on this somewhere at Zurb during the first months of Foundation 6's release, but I can't find anything today.)

There are so many hassles (and not even very gratifying results) in the "until then" recipe from Cory Dowdy that I'm completely discouraged from trudging down this path with my FND 5 site. (If only the title of this post really gave me adequate information to make my final CSS "super tiny!")

I've done a bit of messing around with Yeti Launch and FND 6, but without any instructions or documentation about UnCSS and FND 6 (or even guides for transitioning a FND 5 site to FND 6), I can't help but feeling reluctant to jump into FND 6.

Can anyone sell me on it?

AND/OR: Can anyone point to a fairly straightforward path to getting a Foundation site to be as small as possible?

 

Rafi Benkual about 3 years ago

Using the ZURB Stack (advanced project): When you run `npm run build` that sets the production flag that includes UnCSS.

You may run into some of your classes that get stripped out, so:

You can set any classes that should be ignored here: https://github.com/zurb/foundation-zurb-template/blob/master/config.yml

Dan Feather over 2 years ago

<sigh>Is this not a concern to everyone?</ ....> Well, here I am 10 months later, my FND5 site still bloated, and again working with FND6 and YetiLaunch, and again back and the forum looking for unCSS info.

After finding a post (one of the few RE: this topic) advising this and more minification will be accomplished by changing the isProduction var in the gulp file (http://foundation.zurb.com/forum/posts/36189#comment_26511). I edited the gulp file, stopped and started YL (because 'foundation build' won't run for me ??), and the app.css and app.js files in 'dist' were indeed MUCH smaller. 

Hooray, I cried. . . . BUT . . . danged if the html pages aren't working right. The orbit slider stops after 1 click . . . 

So, as also concerns Joshua Smith (http://foundation.zurb.com/forum/posts/25541#comment_23553), I'm stuck wondering WHEN the solution to de-bloated css will be reliable.