Menu icon Foundation
app.css File size

Hi all,

I have just started using foundation 5 and so far it's been fun! The first time I played around with it I download the "Complete" version.

I've now created a project using Compass but when comparing the amount of lines in the compiled app.css file it comes to 15122 which is well over double the size of the lines in the foundation.css file at 6173.

Why is this?

scssSasscss

Hi all,

I have just started using foundation 5 and so far it's been fun! The first time I played around with it I download the "Complete" version.

I've now created a project using Compass but when comparing the amount of lines in the compiled app.css file it comes to 15122 which is well over double the size of the lines in the foundation.css file at 6173.

Why is this?

Adrian Rogowski almost 5 years ago

This is completely normal. If you take a look at app.scss you will see everything that is imported into app.css which is much more than what is just in foundation.scss.

Chris M almost 5 years ago

Hey, actually there's a problem which has just popped up in the last few days, relating to Sass versions of Foundation - some versions of app.css are getting _global.scss compiled multiple times, and becoming way too large.

The Foundation team knows about it and it's being sorted at the minute.

There is a hot fix I'm using (this is via jonathanmelville, posted here: https://github.com/zurb/foundation/issues/5863)

In /bower_components/foundation/scss/foundation/_functions.scss, make the following change on line 12:

// change this...
@if(not index($modules, $name)) {

// to this...
@if (index($modules, $name) == false) {


This has worked for me, until a patch is released.

EDIT: Just to confirm, this is only if you've definitely got that problem - if your app.css is over 300kb then that's the case, if it's ~100kb or in that region then you don't have a problem.

Nick Ayeh almost 5 years ago

I just came here to reply and say something is definitely not right.

My app.css was around 400kb and on further inspection blocks of css were being duplicated up to 30 times!

Thanks. That's cleared things up!

Nico Encarnacion almost 5 years ago

I also actually experienced this. I first noticed it when I began inspecting elements in my website and saw that one element inherits dozens of classes/selectors like, body, html, .*, *:before, *:after. When I inspected app.css, a lot of theses selectors are unnecessarily repeated depending on the number of Foundation components you imported.

I hope Foundation can solve this soon.

Sanket Sharma almost 5 years ago

Had the exact same problem. Upon inspecting the the generated app.css, saw body {..} definition being imported several times.
Bug aside, if you are using grunt, you might wanna look at https://github.com/addyosmani/grunt-uncss

The grunt module inspects your html files and removes unused css from your css files.

Roger Coathup almost 5 years ago

Have updated to 5.4.7 -- code bloat (duplicated CSS) in app.css is still a problem.

Compass build -- Codekit for compilation