Foundation 6 and sage

I’m trying to integrate the new foundation 6 framework instead of bootstrap. It seems that only the first sass import inside foundation.scss is getting compiled in css (normalize.scss). I’m wondering why. Any help would be appreciated.

bower.json :

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "foundation-sites": "6.0.0"
  }
}

I forked the sage latest release here :

https://github.com/fredericpfisterer/sage

1 Like

I found the solution. For who might be interested :

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "foundation-sites": "6.0.3"
  },
  "overrides": {
    "foundation-sites": {
      "main": [
        "./foundation-sites.scss"
      ]
    }
  }
}

I am now going to update the scss according to foundation 6. I’ll post here when it’s ready,

2 Likes

Hi Frederic,

This is definitely something I will be interested in!

So, I now have something that works. I fixed the header and some js. I changed the repo name to avoid confusion with the original.

https://github.com/fredericpfisterer/sage-foundation-sites

3 Likes

hi Frederic,

I’ve been looking for this killer combination. I’ll try to contribute as well. Thanks!

Glad you like it. I just updated the repo :

  • Bower grab the last version of Foundation for Sites
  • Update Sage to 8.4.0
2 Likes

Do you keep your repo updated @fredericpfisterer?

Looks like he does! Already up to date with Sage 8.4.0

I’ll try to keep it updated as much as I can. I’d also like to spend more time working on the menu.

2 Likes

Just clone a copy of your Foundation 6 repo. When I run gulp, it doesn’t seem to find the grid-row mixin :

assets/styles/components/_grid.scss
Error: no mixin named grid-row

Any idea?

I fixed it.

My bower.json file was not compatible with the latest version of Foundation for Sites.

Ok now it doesn’t give any errors but the foundation stuff does not get compiled into the /dist/main.css.

Is it working for you?

Same here. I found the problem and fixed it. The repo has been updated. Check the commit to see what it was.

Thank you, it works now. I’m still learning how Sage works. Eventually I’ll be able to fix these issues myself and do pull requests! :wink:

Cheers

I’m happy to do it. Cheers.

Repo updated with the following :

  • Added a walker for Foundation Top Menu
  • Added some css to the sidebar
  • Added some responsiveness !

Cheers.

3 Likes

Hey Frederic,

thanks for this fork. Trying it out at the moment, running into this error:

Warning: Declaration of Roots\Sage\Extras\Foundation_Nav_Menu::start_lvl(&$output, $depth) should be compatible with Walker_Nav_Menu::start_lvl(&$output, $depth = 0, $args = Array) in /srv/www/mysite.dev/current/web/app/themes/io/lib/extras.php on line 40

Any idea what could be causing this?

Yes, I fixed it. git pull to update.

Cheers

1 Like

Looks like the upcoming 6.2 release is going to require some Babel transpiling.