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
resources/assets/styles/common/ and included it from main.scss.
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
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
\\ 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.
@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-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?