Foundation 6.6 sass

Frameworks Foundation
1

Are there any tips for using Pinegrow with Foundation 6 and SASS?

I found that I had to install foundation-cli and create my sites with the command line. Now that I have that figured out, I wanted to see if I needed to work on .scss outside of Pinegrow and compile with ‘foundation watch’ or if Pinegrow is up for the task of compiling the css.

Just trying to wrap my head around the work flow needed to make using Foundation easier. Any ideas?

2

So, getting the Foundation sites set-up is sometimes the biggest challenge! I had a bit of a wrestle because their newest packages choke on the latest version of node. At any point, once you have the site created you can either stay in the terminal for the next bit, or use Pinegrow. I’ll use Pinegrow.

  1. Open up your new ‘Foundation-sites’ folder as a project in PG by selecting the “Open project icon”
  2. Create a new folder by clicking on the down caret to the right of the project name in the Project panel (the one with the folder icon) - this is where your final compiled site will live. I’ll call it “Production”
  3. Add a new page by right-clicking the “Production” folder. From the modal select the Foundation 6.6 framework and any of the templates.
  4. In the “assets” folder create a new file by right-clicking on the folder name and selecting from the context menu. This is where your Sass will live - I’m calling mine “custom.scss”
  5. Open that file and add the following:
@import '../util/util';
@import 'foundation.scss';
  1. With your html page open, select the “Manage stylesheets” option from the File menu.
  2. Detach the “foundation.min.css” file using the link. You can choose to keep it in the list or unload it.
  3. For the “style.css” file click on the “Use SCSS/LESS” link to the right of the name. From the pop-up select the newly made “custom.scss” file
    Pinegrow will compile for you. Just make sure to only change the custom.scss file - copy variables there and the such.
    I think this is the best way if you want to use the Sass version.
    Cheers,
    Bob
3

Thank you RobM! I’ll try it.

Yes, setting up Foundation sites was a challenge. Windows 10 finally made working with Linux better with WSL 2, but I update my Linux distribution and didn’t realize the old version was still installed…and set as default. Sorting out the file structure etc., and then as you mention, Node needed to have an older version installed and enabled. By the time I had that working I was getting worried about what Pinegrow might do to the code.

All this because I wanted to see how hard it would be to move a project from Foundation 4 to Foundation 6. Still sorting out the xy grid. :wink:

4

In the end I just compiled manually from GitHub. I used nvm exec 10.10.0 foundation-sites rather than actually change node versions.
Glad it worked for you!