Jump to content

Foundation 5 / SASS / CodeKit 2 setup

Peter Knight

Recommended Posts

Does anyone here use Foundation 5 and CodeKit 2 and SASS?

Things have changed since v5 was released and I wanted to sanity check my setup and my understanding of it.

In CodeKit 2, I've created a Foundation project and pointed it at a folder called Foundation within my site/assets/scripts directory. 

_settings.css (foundation > scss)

This is the place to make fundamental changes to the framework. IE change the background color or base font size.

This is then compiled by CodeKit 2 into a file called:

app.css (foundation > css > css)

This file should be referenced in my HEAD as follows (your paths may differ)

<!-- Foundation 5 -->
<link rel="stylesheet" href="<?php echo $config->urls->site; ?>assets/scripts/foundation/css/app.css">

Previously I'd created a file called foundation-custom.css at the end of my HEAD and used that for custom over-rides. 

With Foundation 5 and the _settings.css, is this bad practice or no longer necessary or not important?

Link to comment
Share on other sites

I think it is better to have your overrides as well as custom styles included in app.css to reduce http requests. This is all made easy with sass via @import. If you customize foundation, you will not benefit from framework being cashed in browser anyway. So put you custom styles in app.scss after the foundation import directives or in custom included partials.

  • Like 1
Link to comment
Share on other sites


  • Create New...