Quick introduction to Pinegrow

New In-App Documentation

Since version 3.1, you can access our NEW In-App documentation directly from within the application.

• From the Support Menu > Quick Introduction to Pinegrow
• By clicking the Help icon  available from the top right of the UI

You will find an Interactive tutorial about Getting started with Pinegrow V3, How to guides, keyboard shortcuts and direct links to the online documentation.

What is Pinegrow?

Pinegrow Web Editor is a desktop application for creating and editing websites.

Pinegrow is a general purpose HTML and CSS editor. Although it has extensive support for frameworks like Bootstrap and Foundation, Pinegrow is not tied to any particular framework or library.

With Pinegrow you build websites by editing HTML layout and CSS rules. Pinegrow is a collection of integrated tools: some are visual and some work with code. You’re free to mix & match these tools in a way that best fits the task at hand.

For example, when working with Bootstrap, you can use Element properties panel to (1) visually control Bootstrap properties, live-synced with the (2) code view where you can inspect and tweak the HTML code directly. At the same time you use (3) Style panel to edit active CSS rules.

Note: numbered points ((1), (2)…) used on images in this document are not interactive. Clicking on them will just open the whole image.

Your page never becomes tied to a closed Pinegrow file format. Pinegrow reads and writes HTML and CSS directly, so you can use it alongside your other tools.

Let’s take a look at the editing interface. The following description is just a quick overview. Every tool in Pinegrow has a bunch of useful features for speeding up your work.

Live page views

Most editing operations happen live on the page view. Each page can have multiple page views showing the page at different sizes and in different devices.

Document structure tree

Tree panel displays the nested HTML structure of the selected page. The tree is editable.

Library

Library panel contains HTML elements and components (groups of HTML elements) that can be placed on the page. You can also use the Library panel to insert the code directly and to define your own snippets and smart components. You can drag Library elements to the page view or to the tree.

Selecting elements

Most editing operations in Pinegrow are done on one or more selected elements. Select elements by clicking on them in the page view or in the tree. Use CTRL (CMD on Mac) and SHIFT to select multiple elements.

Now let’s take a look at what you can do with the selected elements.

Element properties

Use Element properties panel to edit element’s attributes. For example, to change source and alt text of an element. Classes are managed there as well. This panel also contains controls for properties defined by frameworks. Bootstrap pages get a range of handy controls for text alignment, text context and so on. You can define custom element properties by using Smart components and editable areas or by creating Pinegrow plugins.

Style

Use Style panel to work with CSS rules. The panel has multiple parts: (1) Active tab shows the list of CSS rules that affect the selected element. (2) Individual stylesheets can be opened in separate tabs. Click on any rule to display it in (3) Visual editor with controls for most CSS properties, including: shadows, transforms, transitions and Flexbox. You can use (4) List editor to directly edit rules and their properties – or switch to code editor. SASS and LESS stylesheets are fully supported.

Element Code

Pinegrow is not only a visual website builder – you can use it to work with code as well. Edit element code panel lets you edit the code of individual elements. Instead of dealing with the whole page you focus only on the relevant parts of the code. And if you prefer a simpler syntax, you can switch to Pug (ex Jade) mode. Pinegrow will automatically convert HTML code to Pug and back. Code editors and visual tools are synced, so that you can immediately see how editing operations affect the HTML code.

Page code

Whole page code editor is available as a separate panel. Again, all changes are synced between the code editor and all open visual tools.

Actions

Actions panel lets you create Smart components, Master pages, Editable areas and more. Select one or more elements on the page and assign a specific action (behaviour) to them. These features are available in Pinegrow PRO edition.

WordPress

Use WordPress panel to convert the HTML project into a PHP-based standard WordPress theme. This feature is available in Pinegrow with WordPress theme builder.

Text editing

Use the “Text edit” control or simply double-click on the text that you want to change. When text editing mode is active, just click around the page and type to edit the text.

Flexible workspaces

Pinegrow’s user interface can be freely re-arranged: panels and tabs can be (1) moved, (2) resized and (3) collapsed. You can create the workspace that best fits your workflow or switch between a set of pre-defined workspaces.

Useful workspace tips

• Make the user interface smaller to fit more information on the screen (4). That’s especially useful on retina screen.
• Click on the selected panel tab to collapse the whole panel stack. Click again to expand it (3).
• Click on section headings to collapse and expand them (5). ALT + Click to do it for all sections. ALT + Click also works in the tree.

Using Pinegrow with other tools

Pinegrow can be used with any tool that works with standard HTML and CSS files, for example code editors or website builders that export complete HTML and CSS files. Pinegrow automatically reloads open files when they are saved in other apps.

In addition to that, Pinegrow and Atom code editor can be connected together with a special Atom plugin, so that all edits are live-synced between the two apps, without having to save files.

Plugins

Features like support for Bootstrap, Foundation, WordPress, Smart components are implemented as Pinegrow plugins. Plugins are JavaScript files that use Pinegrow API to integrate into Pinegrow and extend its functionality. You can develop your own plugins to add support for your specific frameworks, component libraries, CMS…

Is Pinegrow the right choice for me?

Short answer: if you read so far – Yes ☺

Long answer:

If you don’t know what HTML elements and CSS rules are, and you’re just looking for a simple drag and drop editor to quickly build a website without knowing what happens in the background, then Pinegrow is probably not the right tool for you.

On the other hand, Pinegrow is a good choice for you if:

• You’re proficient with HTML and CSS and want a powerful editor that combines visual tools with code editing and integrates well into your existing workflow.
• You aren’t familiar with HTML and CSS yet, but need a playground where you can learn them well.
• You’re working with Bootstrap or Foundation and don’t want to remember hundreds of framework classes and are tired of copy-pasting the code of various components.
• You prefer to work with HTML and CSS directly and have complete control over your code or need flexibility that code generators can’t provide.
• You wish to automate your development workflow by using reusable component libraries, master pages and editable areas.
• You are looking for a simple CMS for static HTML websites, either for yourself or for your clients.
• You need an easy way to convert HTML websites into WordPress themes.
• You’re looking for an efficient alternative to a cloud-based or subscription-based web editing software.

Last updated on October 2, 2017 at 11:03 am

Print this article