Menu icon Foundation
Foundation Sass file size

I am concern about the file size of foundation sass

what exactly the file size using this version?

when i finish creating the file and check the whole folder i think its 6mb +

why the file size is up to 6mb?

sass file size

I am concern about the file size of foundation sass

what exactly the file size using this version?

when i finish creating the file and check the whole folder i think its 6mb +

why the file size is up to 6mb?

James Stone almost 4 years ago

If you leave everything as is with ZURB Foundation 5 the sass outputted will be about 250k. I don't know the exact figure off hand. You can get this much smaller.

1) use compressed output in compass or grunt (this will get you down to around 150k)
2) remove unused components (varies, but can make things much smaller). Replace the @import "foundation"; blanket import with specific component ones.

Then, you should think about reducing your JavaScript is a similar way. On most sites that I build out I usually end up somewhere between 40-100k depending on the complexity.

Jay Dcoder almost 4 years ago

so we don't count the bower_components folder and the rest here?

as it only use to compile your file

just to confirm is that size only include the ff:

  • index.html
  • stylesheets folder
  • scss folder
  • js folder

James Stone almost 4 years ago

if you are concerned about your site speed and the size of the files being downloaded, you should only look at files referenced in your html files.

Typically this is stylesheets/app.css <-- generated by the scss files, but you should only count the size of this file.
All loaded JavaScript files.

Nothing else should be loaded. You will also need to consider any 3rd party javascript, css etc. that might be loaded through iframes or async.

Typically you want to create a build script or use something that has an asset pipeline. All of your JavaScript files should be ideally concatenated (added together) into one single file. Then it should be minified. If you change your settings on app.css in config.rb or in Gruntfile.js you will get the same for CSS for free.

Often using a tool like tools.pingdom.com is a good way to look at the actual file sizes of your site or app. It will show you all the files that are being loaded and how large they are.

Luke Pettway almost 4 years ago

James is correct, I used to worry about the size of my sites until I noticed I was loading in a lot of extra stuff I didn't know. Typically now I start off with only the basics in my project by commenting out the sass includes I don't plan on using until I run into an instance where they might be helpful, this saves me from accidentally including unnecessary bytes.

The new version coming out is really going to impress you with its total filesize!