Home/ Documentation/ Foundation


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

Note, the videos show an older version of Pinegrow interface.

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  les linked to the page and ready to be used.

Note, the videos in this document have no sound.

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 behavior. 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, responsiveness, accessibility 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.

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…