Grav and Foundation SASS, how does it work?

0
votes

I've installed Grav (https://getgrav.org/) via composer. I've created my own theme so I can start from scratch. But now I want to use the media queries (breakpoints), flex grid, rem-calc() function, equalizer form Foundation Zurb.

I've installed Foundation via the command line:

npm install foundation-sites --save

But right now I dont have no idea how to get foundation working with the Grav CMS. I've tried to @import foundation.scss in my base scss (I already use a css compiler). But it doesn't seem to work.

My folder structure is like this:

folder strucure

Foundation-sites is in the node_modules map. What do I have to do to get Foundation working?

1
csssasszurb-foundationgrav

1 Answers

0
votes

Your theme will contain the page partials where you reference the path to the css files that are built using your build tools.

Inside the user directory, there is a themes directory which contain the assets, such as css and twig files.

It would actually be best to think about the Grav site and theme separately. You will likely want your Foundation assets to be inside the theme and built from there, along with any other theme configuration and blueprints.

From the theme reference that built css file with something like...

{% do assets.add('theme://css/dist/styles.css', 101) %}
{{ assets.css() }}

...inside of your <head>. Your build path could be different than css/dist/styles.css, but hopefully you get the idea. What the assets.add does is allow your styles to filter through Grav's asset manager, which comes with some cool things like minification and cache busting. Very helpful!