Menu icon Foundation
Optimize for used styles

Hello, I'm wondering if there is some type of optimizer to just generate used styles. Out of the box, foundation has a ton of canned styles/functionality however at a size cost.

Question: using some precompilation tool like compass, is there a way to only generate used css based on either inspecting your html or even some configuration file.

Thanks!
-Paul

cssfile size

Hello, I'm wondering if there is some type of optimizer to just generate used styles. Out of the box, foundation has a ton of canned styles/functionality however at a size cost.

Question: using some precompilation tool like compass, is there a way to only generate used css based on either inspecting your html or even some configuration file.

Thanks!
-Paul

Brandon Arnold almost 6 years ago

While i'm not sure if you can do this dynamically, instead of importing @foundation.scss, you can import partials for all the components and leave out the ones you didn't use.

https://github.com/zurb/foundation/tree/master/scss/foundation/components

So if you know you never used Alert Boxes don't import _alert-boxes.scss. This can drastically effect the unused classes and file size.

Paul almost 6 years ago

Ah ok. I suppose to could pick and choose by component as you suggest. I knew with JS I could, didn't think about the same for the css.

It would be nice if in _config.cscc there could be a component flag/toggle. Nice having everything in one place, though grouped by component blocks. Then compass just generates selected & custom css props.

Thanks for your reply,
Paul

Paul almost 6 years ago

Also, if generating components via .scss you can also comment out import lines in foundation.scss

here is where each is brought in:

// Make sure the charset is set appropriately
@charset "UTF-8";

// Behold, here are all the Foundation components.
@import
"foundation/components/accordion",
"foundation/components/alert-boxes",
"foundation/components/block-grid",
"foundation/components/breadcrumbs",
"foundation/components/button-groups",
"foundation/components/buttons",
"foundation/components/clearing",
"foundation/components/dropdown",
"foundation/components/dropdown-buttons",
"foundation/components/flex-video",
"foundation/components/forms",
"foundation/components/grid",
"foundation/components/inline-lists",
"foundation/components/joyride",
"foundation/components/keystrokes",
"foundation/components/labels",
"foundation/components/magellan",
"foundation/components/orbit",
"foundation/components/pagination",
"foundation/components/panels",
"foundation/components/pricing-tables",
"foundation/components/progress-bars",
"foundation/components/reveal",
"foundation/components/side-nav",
"foundation/components/split-buttons",
"foundation/components/sub-nav",
"foundation/components/switch",
"foundation/components/tables",
"foundation/components/tabs",
"foundation/components/thumbs",
"foundation/components/tooltips",
"foundation/components/offcanvas",
"foundation/components/visibility";