Projects allow you to open any folder as a project. The file tree of the folder is displayed in Project panel. There you can easily open pages, add new ones, delete unneeded files. Note: the use of many template resources requires that you set-up a project folder.

What are Projects in Pinegrow?

Projects group sets of files and folders to keep your web design work organized. Basically, a project is a folder on your hard drive which contains all the files and folders relative to a particular web design project. (HTML, CSS, JS, Images and more …).

Screenshot of the Pinegrow Project panel with context menu open

The files and folders in your project are displayed in the Project panel.

Many Pinegrow features only function in the context of a Project

How to start a project?

For an existing project

Opening an existing project with Pinegrow

If you already have a folder with your HTML template and resources, you can either use File -> Open project, or from the Home screen, click on the ‘Open project’ icon and then select the Project folder.

Starting a new project

Screenshot of starting a new project in Pinegrow

To begin a brand-new project, either use File -> New page or click the ‘New page or project’ icon from the home screen.

Screenshot of the Pinegrow Framework and template selection modal

Select the desired framework for your project from the list on the left and then a starter template. Finally, save your new file into a new folder using File -> Save -> New folder -> select a name and folder location for your project.

Screenshot of the Pinegrow modal to open a file as a project

Pinegrow will now ask if you want to open your new folder as a project, select “YES”.

Screenshot of the Pinegrow Project panel project initialization message

Alternatively, if this modal does not appear, navigate to the Project panel. There you will have the choice to open your new file as a project.

Using an existing file

Screenshot of opening an existing file for use in a project

You can also use existing files to create a new project. Simply open the file in Pinegrow using the File -> Open file menu item, or the Open file icon on the home page. Then navigate to the Project panel and click the “Open as project” button.

In Pinegrow, you can set up a project in a way that suits you by adding, moving, renaming files and folders using the Project panel, BUT you can also modify your project from your computer file explorer:

  • Explorer for Windows
  • Finder for Macintosh
  • Nautilus for Ubuntu
  • Linuxexplorer_view

Working with projects

The project panel provides a listing of the files and folders within your project folder.

Screenshot of the Pinegrow Project panel

While the panel by default does not display subfolders starting with a dot, if you find that the Project panel is displaying too many other subfolders that you do not want to alter in Pinegrow, you can go to the Support -> Settings menu item. Then scroll down to “Misc. Settings” and add the folder name to the “Ignore Project Subfolders” setting.

Screenshot of the Pinegrow settings modal to alter the folders visible in the Project panel

In the Project panel you can right-click on the Project name to bring up a context menu. From this menu you can:

Screenshot of the Pinegrow Project panel with context menu open
  • Reload the project: Useful to activate some of your modifications
  • Add new folders to your project structureAdd new HTML pages from the template list
  • Create new files for JavaScript or other non-HTML files used in your project
  • Delete backups: You can clear the automatic backups that Pinegrow creates (Note: The Support -> Settings menu item allows you to alter the number of backups retained)
  • Remote URLs: You can open a remote URL to be used in your project
  • Close your project

Depending on the document type that you select, there are a number of different options through a contextual menu (accessed by right-clicking on the file name)

For HTML pages:

Screenshot of the Pinegrow Project HTML context menu

Pages section

  • Open document
  • Open as a partial to include in another document (deprecated and in the Actions panel)
  • Open in the code editor
  • Save document
  • Duplicate document
  • Delete document
  • Rename document
  • Fix links: Fix broken links and resources references if you move a page and/or the resource of a page in a different location of your project folder. Note: Fix links will not work if you RENAME a page and/or the resource of a page.

Links Section

  • Set href/src of …
  • Append link to …
  • Insert link after …
    • The Links section will allow you to select resources in your project and use them to create or replace resources and links in selected elements from the Tree view.
    • For example, in your document, you can select an image reference from the tree view, then select an image resource in the project and use Set href/src of Image to use the selected image as resource in your document.
    • This is also useful for setting up page navigation. You can select a navigation link element from the Tree panel or Page View, then select a page from the project and use Set href/src of Link to use the selected document as link in your document.

Components Section

There are two components sections. The first has either one or two items:

Add to resources: Read our documentation about Libraries and Resources

Update screenshot: If the page you have selected is a Master page, you can update the screenshot that is used for the document.

The second section has a single control:

Scan for components & master pages: If you have a complex project that is not utilizing Master pages or component objects, you can uncheck this to speed-up project load and refresh times.

Meaning of the icons in the Project panel

While working in project mode, and if you use Master pages and components, you will notice some useful icons beside your files names. Here is the meaning of these icons.

List of the icons found in the Pinegrow Projects panel