Sage 9 and Foundation integration best practices

sage
, ,
1

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.scssin 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 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?

2

Nothing to do with Yarn, this is stylelint. You can modify the config in package.json.

Also nothing to do with Yarn.

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.

You might want to look at the Sage 8 forks that include Foundation, such as https://github.com/fredericpfisterer/Foundation-for-Sage.

3

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

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.

4

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.