# Sage 9 and Foundation integration best practices **URL:** https://discourse.roots.io/t/sage-9-and-foundation-integration-best-practices/10830 **Category:** sage **Tags:** gulp, sage9, blade **Created:** 2017-11-05T18:17:36Z **Posts:** 4 ## Post 1 by @slam — 2017-11-05T18:17:36Z I’m coming to Sage 9 from JointsWP which uses Foundation and has a different workflow and I’m trying to wrap my head around the Sage way of doing things. Almost any Foundation project is going to involve edits to `_settings.scss`, but Sage 9 doesn’t appear to install an editable copy of this file. It exists in `node_modules/foundation-sites/scss/settings/_settings.scss` but we can’t edit it there. I did find that Sage installs a file `resources/assets/styles/common/_variables.scss` that has a tiny part of the Foundation settings in it. So I copied `_settings.scss` to `resources/assets/styles/common/` and included it from main.scss. However, running `yarn run build` promptly failed without reporting why. The current Sage 9 documentation left it unclear whether adding any file required editing `config.json,` or whether editing the config was only needed for adding output files, so I thought I had broke the theme. It took me many hours to discover `yarn run build` has no error reporting and it’s necessary to quit it and run `yarn run lint:styles" instead. That let me see that the linting in yarn is so anal it was choking on minor issues in `_settings.scss` such as commas without trailing spaces and no leading zero on decimal numbers, issues I’ve never had with `grunt`. Editing `_settings.scss` allowed `yarn run build` to operate correctly, but it also means I can’t also @include`node_modules/foundation-sites/scss/settings/_settings.scss`in my project which as far as I recall is a Foundation best practice (I could be wrong). Yarn also failed on styles that use slashes `/` and `\\` which isn’t making me feel very secure about yarn. Grunt hasn’t shown me a bug in two+ years of development and yarn is immediately high-maintenance. I did find that Sage imports Foundation but does not import the settings file. `resources/assets/styles/autoload/_foundation.scss`: ``` @import "~foundation-sites/scss/foundation"; @include foundation-everything; ``` This seems to contravene [Foundation’s own docs](https://foundation.zurb.com/sites/docs/sass.html) which call for importing settings before foundation: ``` @import 'settings'; @import 'foundation'; ``` There’s doesn’t seem to be a way to override this in Sage as the `resources/assets/styles/autoload/_foundation.scss` isn’t explicitly not developer-editable. I’m guessing there’s a composer file that controls that and it would need to be edited there. Another issue is that using `foundation-everything` is that it doesn’t give the developer nearly enough control over individual components; for instance it uses `foundation-xy-grid-classes` which is really bleeding-edge and it’s generally better to use `foundation-grid` or `foundation-flex-grid` for much wider browser support. Having Sage output a foundation loader that lets the developer specify the components seems important. Lastly, the blade templates have no Foundation integration at all. This means if I use Sage 9 to develop Foundation sites I’ll need to start from scratch every time, including adding the \_settings.scss. I’m used to minimal styling in a starter theme, but this is essentially zero styling or integration at all. Blade itself is new to me, learning it represents another cost of entry, and even removing it has a research and implementation cost. So in short I suppose I’m reporting back that for an average coder like me the cost of entry to Sage 9 is initially very steep. Is Sage too cutting edge for me, or Sage 9 beta too early? Or is Sage 9’s Foundation integration going to improve over time? --- ## Post 2 by @ben — 2017-11-05T18:22:56Z > [@slam](#): > > That let me see that the linting in yarn is so anal Nothing to do with Yarn, this is stylelint. You can modify the config in `package.json`. > [@slam](#): > > Yarn also failed on styles that use slashes / and \ which isn’t making me feel very secure about yarn. Grunt hasn’t shown me a bug in two+ years of development and yarn is immediately high-maintenance. Also nothing to do with Yarn. > [@slam](#): > > Lastly, the blade templates have no Foundation integration at all. This means if I use Sage 9 to develop Foundation sites I’ll need to start from scratch every time, including adding the \_settings.scss. I’m used to minimal styling in a starter theme, but this is essentially zero styling or integration at all. > [@slam](#): > > Or is Sage 9’s Foundation integration going to improve over time? Sage focuses on integrating Bootstrap, other frameworks have minimal integration right now. You can contribute to making the Foundation integration a better experience over at [GitHub - roots/sage-installer: Sage 9 installer](https://github.com/roots/sage-installer). > [@slam](#): > > So in short I suppose I’m reporting back that for an average coder like me the cost of entry to Sage 9 is initially very steep. Is Sage too cutting edge for me, or Sage 9 beta too early? You might want to look at the Sage 8 forks that include Foundation, such as [https://github.com/fredericpfisterer/Foundation-for-Sage](https://github.com/fredericpfisterer/Foundation-for-Sage). --- ## Post 3 by @pmang — 2018-01-22T07:57:00Z Hi Slam, I’m in the same boat where I’ve come from JointsWP / Foundation Press but want to get into Sage as I used to use Roots. Everything I’m about to mention is not thoroughly tested as I’m still playing around and wondering if I will encounter too many roadblocks and will have to revert back to 8.0, that being said, so far I have had some success with a few of the same issues you’ve mentioned. In relation to settings.scss, You can take a copy of the standard \node\_modules\foundation-sites\settings\_settings.scss And put it somewhere. I put mine in styles\common\_settings.scss Within your new \_settings.scss, you’ll need to scroll down to line 63 and change, @import 'util/util’ to @import “~foundation-sites/scss/util/util”; This is essentially what FoundationPress does, but FoundationPress links back to the copy of Foundation it creates that isn’t in node\_modules. Sage isn’t doing that so pointing this file back to the node\_modules copy is fine for now I think, as you probably won’t be modifying that file. Then within \_foundation.scss, after: @import “~foundation-sites/scss/foundation”; You will want to include your settings file: @import “…/common/settings”; // Foundation settings file. Like I said, I’m using /common/ so change it to wherever you put it. As you mentioned when you build, stylelint is fussy and hates a lot of the syntax within \_settings.scss The easiest way to solve this was what Ben mentioned, by modifying your projects package.json file. Where mine once said: “stylelint”: { “extends”: “stylelint-config-standard”, “rules”: { "no-empty-sour… I added ignoreFiles and pointed to the specific file. “stylelint”: { “extends”: “stylelint-config-standard”, “ignoreFiles”: [ “resources/assets/styles/common/\_settings.scss” ], “rules”: { "no-empty-sour… It now ignores this file and builds without error. In relation to foundation-everything within \_foundation.scss, Comment out that line and paste in the content (without @import ‘foundation’:wink: underneath ‘Adjusting CSS Output’ on the following page, [https://foundation.zurb.com/sites/docs/sass.html](https://foundation.zurb.com/sites/docs/sass.html) i.e. @include foundation-global-styles; @include foundation-xy-grid-classes; //@include foundation-grid; //@include foundation-flex-grid; @include foundation-flex-cla… … … … You should be able to now pick and choose the components you want to use. I had a few compile errors when I disabled typography and something else whilst testing as I think variables and such defined in these files are being used elsewhere, but hopefully that will get you started and be able to customise it somewhat. I have been able to turn off all the grids and some pointless components like breadcrumbs and such in my testing with success so far. Hopefully I didn’t leave anything out, if you do try this and have errors let me know and I’ll try and help. --- ## Post 4 by @slam — 2018-01-22T08:23:39Z Thanks for the feedback! I had already taken a similar approach but then took a break from development and wasn’t able to update this thread. I’m working on the project again. For importing Foundation: - I ignore `resources/assets/styles/autoload/_foundation.scss` because it has a note saying it might be updated and my changes erased. - I created a new `resources/assets/styles/autoload/_foundation.scss` file to manually load Foundation components so I could using Flex Grid instead of the default and experimental XY Grid (and also turn off styles I don’t need). - I did end up copying the node version of Foundation settings to `resources/assets/styles/common/_settings.scss` - I edited the two problematic sections of Foundation settings and I kept style lint enabled. I might eventually turn it off, but for now it might be improving my code style. I also made some basic changes to the Views templates to make a more Foundation-ready base theme. I can now spin up a new Sage 9 starter theme now by running the Sage installer and copying in my `resources/assets/styles` and `resources/views`. It would be _nice_ if Sage 9 were more “Foundation ready” out of the box. I’m not that great at coding, but if I can figure out how Sage 9 builds the above files I’d propose changes and make a pull request.