Working with Foundation in Pinegrow

See how Pinegrow can help you to work with Foundation 5 and Foundation 6.

Create new Foundation sites

To create a new Foundation site simply select Foundation 5 or 6 and then chose one of the starting pages and save it. Pinegrow will create a project with all Foundation CSS and Javascript files linked to the page and ready to be used.

Note, the videos in this document have no sound.

If you want to use SASS create a project with Foundation source files, Yeti Launch or another tool and then open the project in Pinegrow. Read more about SASS below.

Open existing Foundation websites

Open an existing Foundation document (or the whole folder if you want to work with projects) and edit it in Pinegrow. Use Page -> Manage libraries and plugins if Pinegrow doesn’t auto-detect the version of Foundation that is used on the page.


Edit the grid

Place rows and columns on the page and control all their properties including responsive behaviour. Use multiple views to edit the grid at different screen sizes.


Use full range of Foundation components

Place components from the Library to the page and control their Properties. Use the tree to effectively work with the structure of the page.


Foundation properties for all elements

With Pinegrow you can easily set Foundation properties for text, layout, responsivenes, accesability and more. Simply select any element on the page and set its properties.



Topbars are complex elements. Pinegrow makes working with them easy.



Easily create and manage dynamic Foundation components like Offcanvas. Use Test clicks or SHIFT + Click to interact with the component while editing it.


Orbit slider

Pinegrow lets you easily add Orbit sliders and slides. Not only that, you can even control the slider while you’re editing it.



Add tooltips to any element by assigning Tooltip action to it in the ACT panel. Refresh the page to activate the changes and use Test clicks to see the tooltip in action during editing.



Create, edit and test modals – all at the same time. Use Test click (or SHIFT + Click) to open the modal and then edit its content.


Using SASS with Foundation sites

At the moment Pinegrow doesn’t support editing SASS directly. Instead, edit and compile SASS files as you normally do. Pinegrow will detect that CSS files were changed and reload them automatically. Of course that means that any changes done to CSS files through Pinegrow would be overwritten by SASS generation process.

And a lot more

These are just few examples of what you can do. Pinegrow supports the complete range of Foundation 5 and 6 components like Icon bar, Pagination, Flex video… And that’s just Foundation! With Pinegrow you can do a lot more: edit CSS, work with HTML code, create master pages and smart components… Check out the user manual for details.