Using Middleman 4 with Foundation

#1

Hi guys, new to the forum. Just starting to use Middleman and have run into a problem with Foundation.

I wanted to use the Sass version of Foundation so I’ve set it as a bower dependency and installed it into source/bower_components.

I’ve added the following into my config.rb file.

compass_config do |config|
  config.http_path = "/"
  project_path = File.expand_path(File.join(File.dirname(__FILE__), '..'))
  config.add_import_path "bower_components/foundation-sites/scss"
  config.output_style = :compact
  config.css_dir = "stylesheets"
  config.sass_dir = "stylesheets"
  config.images_dir = "images"
  config.javascripts_dir = "javascripts"
end

I’ve then used @import 'foundation' in my main Scss file.

Nothing complains, but it seems Foundation isn’t actually being imported when building or serving my files. Other files are being imported fine if they’re in my stylesheets folder.

Does anyone have any idea on what I might be missing?

Thanks

#2

I’m not sure if this helps you or not, but I don’t personally use the add_import_path feature from Compass to bring in 3rd party dependencies from Bower. (In fact, I don’t use Compass at all, since it is not supported by LibSass.) I use middleman-sprockets gem, which uses Sprockets to manage assets. Although Sprockets does have its own problems and has been removed from the core in Middleman v4, I still find it very useful.

Here is an example of how I configure Middleman v4 to bring in Bootstrap. It shouldn’t be difficult to change it to use Foundation or any other framework.

#3

Thanks for the reply.

Yep I wanted to try and get it working without using Sprockets seeing as it’s been removed from v4.

After some experimentation, it seemed like the Foundation file was being picked up, but it wasn’t getting interpreted from sass into compiled css. Nothing was being included in the final CSS from Foundation.

I’m obviously missing a step but not sure what. If anyone has an idea please let me know. Would be good to get this working nicely with v4.

#4

I just took a look at the scss files provides by foundation-sites, and they are just a bunch of mixins. Having the following lines in the scss file brought in Foundation styles correctly in Middleman 4 (sans Sprockets):

@import "foundation";
@include foundation-everything;

Hope this time it helps. :slight_smile: