Foundation 6 and sage


#1

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"
  }
}

#3

I forked the sage latest release here :

https://github.com/fredericpfisterer/sage


#4

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,


#5

Hi Frederic,

This is definitely something I will be interested in!


#6

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


#7

hi Frederic,

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


#8

Glad you like it. I just updated the repo :

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

#9

Do you keep your repo updated @fredericpfisterer?


#10

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


#11

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


#12

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?


#13

I fixed it.

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


#14

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?


#15

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


#16

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


#17

I’m happy to do it. Cheers.


#19

Repo updated with the following :

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

Cheers.


#20

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?


#21

Yes, I fixed it. git pull to update.

Cheers


#22

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