The myths of Foundation framework "overhead"

There is a myth out there that the Foundation framework contains too much "bloat" or "overhead". Don't believe everything that people dish you... Let me educate you...

Normal stacks ship with all of the JS and CSS that they need in order to function. If you have 2 instances on the page, you have almost 2x the CSS and JS. 3 instances renders almost 3x, etc. There are exceptions but for the most part this is true.

Foundation ships with generic CSS that is used to power all of its stacks. This means that pretty much the same amount of code is used whether you have 1 or 20 instances of its stacks on the page.

Lets use the Foundation columns for instance. If you include all of the CSS required for all columns, block grid and visibility, the size of the CSS file clocks in at 55kb. And your web server compresses that down to 5KB before sending to the browser. No matter how many you have on your page! Still think that is overhead? Let me take it a step farther...

Browsers cache assets like JS and CSS. This way when you user visits another webpage, only the new assets from that page are loaded. All of the assets used from another webpage are loaded from cache.

Normal stacks store all of their CSS and JS inside page specific files named like stacks_page_page1234.css. Since these files are page specific there is zero caching between pages. All of the CSS and JS for every stack is loaded all over again.

However, since Foundation stores most of its assets centrally. This means that once the browser caches the CSS and JS, it does not download it again. This is a big performance win. The Foundation code is loaded once for you site instead of on each page load.

I hope that this helps educate you from when people talk about "overhead"