Menu icon Foundation
How to "shrink" foundation css

I'm creating a theme for a CMS based on Foundation. What I would like to do is strip out all the 'extra' css that I won't be using.

For example there are lines and lines of code that I could completely eliminate without any ill effects(like all the push, pull, centered, uncentered, etc).

I want to keep developing with the full foundation scss, but then run some tool on the compressed css output that would check a directory of theme templates and delete tags that didn't exist in the template. While I could go through and manually do this, I don't really view it as a practical option. Obviously there are some things you would manually have to override(hover, after, etc).

Are there any tools that will do this for me?

Foundation-5scss

I'm creating a theme for a CMS based on Foundation. What I would like to do is strip out all the 'extra' css that I won't be using.

For example there are lines and lines of code that I could completely eliminate without any ill effects(like all the push, pull, centered, uncentered, etc).

I want to keep developing with the full foundation scss, but then run some tool on the compressed css output that would check a directory of theme templates and delete tags that didn't exist in the template. While I could go through and manually do this, I don't really view it as a practical option. Obviously there are some things you would manually have to override(hover, after, etc).

Are there any tools that will do this for me?

dims about 5 years ago

if you are compiling from scss then you can disable foundation components which you do not need.

Nathan Wright about 5 years ago

Disabling specific foundation components wouldn't work for me, because I'm looking for even more reduction.

For example if I never use the "small-4" class then I would like all references to "small-4" to be removed.

Does that make sense?

Jerry Thompson about 5 years ago

Yes, very interested about a reply to this. I have been wondering about exactly the same thing!

Chris M about 5 years ago

There's uncss:

https://github.com/giakki/uncss

This allows you to strip out any unused css rules, and can drastically reduce css file sizes.

Here's a guide to using it with Wordpress:

http://www.gladdy.uk/blog/2014/04/13/using-uncss-and-grunt-uncss-with-wordpress/

I've not tried it with Wordpress yet, would be interested to hear how simple the process is!

Nathan Wright about 5 years ago

@Chris M, this is just what I was looking for! Very, very helpful!

Thank you so much!

dims about 5 years ago

@Nathan
I faced a similar issue with the visibility scss component. I wasn't using tables in my site and did not need the visibility classes for table, thead, tr..etc.

I achieved it by selectively commenting out those lines in the visibility.scss file.

@chris M : Thanks for sharing

Chris M about 5 years ago

No problem, good luck with your project! :D

Hans McMurdy about 5 years ago

You may also want to consider using gulp to reduce your build time
http://mattbanks.me/gulp-wordpress-development/

andrea tagliazucchi almost 5 years ago

I am trying to configure grunt-uncss to work with reveal and the small screen hamburger. but no luck so far. After linking to the cleaned.css file (the one return from grunt uncss) if i click the harburger menu or a button triggering a modal, nothing work.
I know this is a documented "issue" with code injeced dynamically, but I wonder if anybody came out with a good "ignore" configuration in the Gruntfile.js to solve this.

Below the last config i tried (pay attention to the Ignore setting)

  uncss: {
            options: {
                ignore       : ['.reveal*', ':hover', /test\-[0-9]+/],
                //media        : [],
                //csspath      : '',
                //raw          : 'h1 { color: green }',
                stylesheets  : ['css/app.css'],
                //ignoreSheets : [],
                //urls         : [], // Deprecated
                timeout      : 1000,
                //htmlroot     : '',
                //report       : 'min'
            },

            dist: {
                files: {
                    'css/app-cleaned.css': ['*.html']
                }
            }
        },