Foundation

We want to inform you that while we previously supported Foundation up to version 6.6.3, we have made the strategic decision to cease future updates for this framework. This decision was influenced by its minimal usage among our customers, which does not justify the continued resource allocation required for high-quality support and updates. We apologize for any inconvenience this may cause.

You can still use the latest versions of Foundation with Pinegrow by downloading the framework directly from the Foundation website at https://get.foundation/. Please note, however, that going forward, Pinegrow will not offer dedicated integration for Foundation, as our development efforts will now focus exclusively on enhancing support for Bootstrap and Tailwind. We appreciate your understanding and are here to assist you with any questions or concerns you might have regarding this transition.

Create new Foundation sites

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

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

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

Offcanvas

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.

Tooltips

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.

Modals

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…