Elective1_IT503_Web_System_and_Technologies Download

Hi! Great day! Welcome to this course. Thank you for taking an interest in this course. Learning from this course will help you become an IT Professional.

OBE Syllabus

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Getting Started
1. Pinegrow Walkthrough
1. Quick Introduction to Pinegrow
1. Pinegrow, the right choice
1. Download, install, and run Pinegrow
How-to Guides
1. Add elements to the page
1. Add stylesheet or script to the page
1. Duplicating existing elements
1. Delete elements
1. Add or Remove classes from elements
Master Pinegrow
1. Page views
1. The Library Panel
1. Page Libraries
1. The Tree Panel
1. Element Properties
1. Styling with CSS
1. Code editing
1. HTML Snippets
1. History – Undo and Redo
1. Drag & Drop
1. Tools & Helpers
1. Getting the Most out of Pinegrow UI
1. Keyboard Shortcuts
1. Edit remote websites and web applications
1. Working with dynamic HTML elements
1. Using External Code Editors
Pinegrow PRO

Timeline

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

This module is open for 5 months from the day this is opened by a student or until the institution’s stipulated deadline, whichever comes first.

1. Getting Started: 1.1. Pinegrow Walkthrough

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Watch this video to quickly learn how HTML and CSS editing is done in Pinegrow.

1.2. Quick Introduction to Pinegrow

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

This interactive guide will go through all Pinegrow panels and take them for a spin.

We’ll need a page to play with during this introduction. To open the sample page used in this guide, open the in-app help in Pinegrow by clicking on the in the top toolbar. There, go to “Getting started with Pinegrow” and click on the “Open the sample page” button. Or, you can open one of your own pages and experiment with that.

NOTE: Feel free to mess up the sample page as much as you want during this tutorial. You can always close it and open a fresh copy by clicking on this button again.

1. THE PAGE VIEW

Most editing operations in Pinegrow happen on the page view.

Page view with our test page.

Try

Play around with page views:

Move the mouse over the page view. Notice that hovered elements get highlighted with the green border.Highlighted element.
Click once on an element on the page to select it. The selected element has a blue menu and border.Selected element.
Try clicking on the Duplicate icon or press CMD + D to make a copy of the selected element.
Click on the Delete icon or press DELETE to get rid of the duplicated element. Use undo if things get messed up.

While you’re working with your page, the Tree panel lets you keep an eye on the page structure.

The Page structure

Open the Tree panel.

The Tree panel displays the nested HTML structure of the selected page. The selected element is blue.

NOTE: You can click on the “Open the panel” links throughout this guide to open that panel. Pinegrow will also show a visual clue to highlight the panel.

Tree panel with the selected element.

Try

Let’s take a quick look at the tree:

Click on any element in the tree to select it. This element will also be selected in the page view. A menu 1 will appear next to the selected element in the tree.
Elements that have children (other elements inside itself) can be collapsed and expanded. Click on and icons and see what happens. Use collapsing to hide details that are not relevant for the task at hand.
A super useful trick: press ALT while clicking on and icons to collapse and expand the whole tree level.
The Tree panel also lets you do precise drag & drop moves.

The purpose of this guide is to go through all Pinegrow panels and tools quickly. So we’ll cover the rest of the selected menu commands elsewhere.

2. ADDING ELEMENTS TO THE PAGE

Open the Library panel.

Library panel contains HTML elements and components (groups of HTML elements) that you can add to the page. You can also use the Library panel to insert the code directly and to define your custom snippets and smart components.

The Library panel.

Try

Let’s add a new element to the page:

Take a h3 from the Library and drag it to the page. The orange line will show where the element will be placed.Dragging h3 from Library to the page.
Take another element from the Library panel and drag it to the Tree panel. As always, use undo if things get messed up.Dragging h3 from Library to the tree.
Select an element on the page. Then right click on any element in the Library panel to display the menu for inserting the element into, before or after the selected element.
Type “p Hello” into the Insert code box (that’s a simplified syntax for <p>Hello</p>. A “p | Hello” item will appear just below the code editor. Drag it to the page.Inserting the code.

3. ELEMENT PROPERTIES

Open the Element properties panel.

Properties panel (resized to two columns).

Use Element properties panel to edit element’s attributes. For example, to change source and alt text attributes of an image. Classes are managed there as well. And the panel contains controls for properties defined by frameworks like Bootstrap.

Try

Let’s try to edit some properties:

Select the h1 heading on the page or in the tree. Use Heading level control (in Heading section) to change the level to Heading 2.
Add a class by clicking on Add class button 1 in Classes section. A floating tool 2 will show up. Enter a class name (for example, title) into the input field and click on Add class button 3. Close the floating tool.Add class from the Properties panel.
Play around with Bootstrap controls in Text & Context section.

4. STYLE – PAINT WITH CSS

Open the Style panel.

Visual styling of page elements is done with CSS rules. Each rule has a selector that specifies what elements are affected by the rule and properties like color, font, etc. that define the visual style.

Example of a CSS rule with selector and properties.

We’ll spend a bit more time on this panel because it is a very powerful tool if you know how to use it effectively.

Exploring and editing existing CSS rules

Select the big Pine tree image on the sample page and take a look at the Active tab in Style panel: Active tab 1 displays all CSS rules that affect the selected element.

Active tab in Style panel.

The Active tab also displays the style set directly on the HTML element with the style attribute 2. We’ll explore it a bit later.

Rules from framework stylesheets, like bootstrap.css, are hidden by default. Click on the Show more links 3 to display them.

Visual editor 4 contains visual controls for editing CSS rule properties.

Try

Let’s do some styling!

In Visual editor play around with the text properties in the Font / Text section 1.

Creating new CSS rules

So far we were modifying an existing CSS rule. Let’s create a new CSS rule now:

Try

Add a new CSS rule:

Select the h1 heading element on the page. Enter a class selector into the Create rule input box 1, for example, “.big”.Adding new CSS rule for the selected element.
Since the selected h1 doesn’t have the .big class assigned, Pinegrow will offer to add the class to the element 2. Leave that check box on.
Click on Create button 3. Since this is the first CSS rule that we are adding, Pinegrow will ask us to confirm which stylesheet should be selected as default for adding new CSS rules. Let’s choose style.css. After we set the default stylesheet, all new rules created with the Create button will go there.Confirming the default stylesheet for new CSS rules.
The .big CSS rule is now created 1 and displayed in the Visual editor. Use control selector (or scroll) to go down to the Text section. Play around with different controls.Using text controls in Visual editor.

Quick styling with Style attribute

Every HTML element can have the style attribute for setting its visual properties. For example:

<h1 style="color:red>I'm red!</h1>

Although the style attribute is the quick and easy way of styling elements, using it is not recommended. Why? Because instead of using one CSS rule to tell the browser that all H1 elements should be red, you have to specify the color on each and every H1 element on your site. Now imagine that you have 20 pages and want to change the color to green.

But, Pinegrow knows a smart way of using the style attribute:

Edit Style attribute and then save it as a new CSS rule.

Try

Let’s paint with style attribute:

Select a P paragraph on the page. In Style Active panel, select the Style attribute 1 if it is not already selected.
Set some properties in the Visual editor, for example, text color, size, background color, etc. If you check the Element code panel you’ll see the visual properties stored in the style attribute.
Once we’re happy with the style, click on the “Save as a CSS rule” icon on the Style attribute. The Create CSS rule dialog will open:Choose selector and destination for the new rule.
Enter the new rule name 1 and select the destination stylesheet. Pinegrow will transfer the visual properties from the style attribute to the new rule, and delete the style attribute from the element.

The “Style attribute -> Save as CSS rule” is a very convenient workflow. It lets us jump right into styling the element without first having to figure out what kind of CSS rule we need to create.

The Style panel has a lot more to offer, but for now, let’s leave it and continue exploring Pinegrow.

5. TEXT EDITING

Click on in the toolbar or double click on any text on the page to activate the text editing mode.

The edited element will get a dotted yellow border and a blue text editing menu:

Text editing is active.

Try

Let’s change some text:

double click on the paragraph describing the oldest pine trees. The editing toolbar will appear above the element.
Edit the text. Select a word and click the B icon or press CMD + B.
Click on the page heading. The text editing mode is still active. Now you can edit the heading text.
Click on Done button in the blue text toolbar, press ESC, or click on the in the top toolbar to exit the text editing mode.

NOTE: For best results select only the element that you want to edit. For example, if you want to change a button label, just select the button, not the parent container of the button.

NOTE: Use the Element code panel (described next) in situations where Text editing doesn’t do exactly what you want.

6. CODE EDITING

Pinegrow is not only a visual website builder – you can use it to work with HTML and CSS code as well.

NOTE: Don’t know HTML? The Element code panel is a great place to learn about code. No scary code soup – instead take a look at different elements one at a time and observe how different editing operations change the code.

Edit the code of one element at the time

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.

Open the Element code panel.

Try

Let’s get coding!

Select a paragraph or any other element on the page. Its code will appear in the code editor. Try changing the text. The change is immediately seen on the page.Edit the code of the selected element.
Switch to simplified code syntax by clicking on the icon. The simplified syntax is sometimes easier to edit, and it is less prone to errors. Note, this syntax is only used for editing. Normal HTML code will be used on the page.Simplified code syntax.

Page code editor

Use the page code editor to edit the code of the whole page.

Open the Page code panel.

Page code editor.

Note that simplified syntax mode is not available in the page code editor.

Try

Let’s edit the code of the whole page:

Select an element (h1, for example) on the page. Notice that the element also got highlighted in the page code editor.
Change the text of h1 in the code editor. The change appears in page view as well.
Right click on an element in the code editor. The element will get selected in the page view.

NOTE: The editor is also used for editing CSS code and JavaScript files.

7. SPEED-UP YOUR WORK

Select multiple elements

Most editing operations in Pinegrow can be done on more selected elements at the same time. This is a great time saver.

Changing background context of three elements at the same time.

To select multiple elements:

CMD + click on elements on the page or in the tree.
SHIFT + click to select a range of elements on the same level.

Try

Do editing operations on multiple elements:

Select a couple of elements on the page by CMD clicking on them.
Now you can duplicate or delete all of the selected elements with one operation. You can also change their properties and so on.
Press ESC to deselect all elements.

Work with multiple page views

Each page can have multiple page views showing the page at different sizes and in different devices.

Editing multiple page views at the same time.

Try

Play around with page views:

Open another page view by clicking on the Add page view icon.
Move the mouse over the two page views. Notice that hovered elements get highlighted (with green border) in both views.
Click on any element on the page. The element will get selected in both page views.

Use the Repeater

The Repeater is a handy feature that lets you repeat a single command many times.

Repeat the next operation X times.

Try

Let’s repeat some stuff:

Select an element on the page.
Make sure you’re not in Text editing mode. The Repeater doesn’t work there.
Type a number, for example 10. Note, there is no input box for that, just press “1” and “0”.
Click on Duplicate on the selected element. 10 copies of the element will be created.

8. YOU DID IT!PINEGROW PRO & WORDPRESS

So far we explored features available in all editions of Pinegrow. Let’s take a quick look at what we can do with Pinegrow PRO and with WordPress Theme Builder.

Project panel

Open the Project panel.

NOTE: Projects are a part of the Pinegrow PRO edition.

Pinegrow projects are plain-old file folders. Just open a folder as a project, and you’ll see a list of all files and subfolders here.

Project view with the open menu.

Try

Let’s create a project:

Select File -> Save from the top menu or press CMD + S and save the sample page into a new folder on your computer.
After the page is saved, Pinegrow will offer to open the folder as a project. Say Yes and take a look at the Project panel.

Master pages, smart components and editable areas

Open the Actions panel.

NOTE: These features are available in Pinegrow PRO edition.

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

Turning the main heading into a reusable Page title component.

Creating WordPress themes

Open the WordPress panel.

NOTE: WordPress theme builder is available in Pinegrow with WordPress Theme Builder edition.

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.

Mapping image element to WordPress post featured image.

9. YOU DID IT!

Congratulations! Now you know what Pinegrow is about and how to use it.

There are many features here. Almost every panel & tool has a bunch of tricks up its sleeve that can help you to be more productive. Start using Pinegrow.

1.3. Pinegrow, the right choice

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Pinegrow Web Editor is a great 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 web editing software.

1.4. Download, install, and run Pinegrow

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

System requirements

Pinegrow is available for Windows 10, macOS 10.13, 10.14 and 10.15 and Ubuntu Desktop 16.04 LTS and 18.04 LTS.

Windows 10

Although it is known that Pinegrow may work flawlessly with previous versions of Windows, we now test each release of Pinegrow with Windows 10 only and we provide support only for this version of the system.

A. If this is the first time you are going to install Pinegrow on your computer, kindly download the Pinegrow for Windows using this link to have a full version of it. Then follow the instructions inside it to install it for the first time. After this, you can already go to Lesson 2 and use it. This only works in Windows. No full version for Mac and Ubuntu as of the moment.

B. If the installed Pinegrow in your computer is already expired, kindly download this software called Advanced Uninstaller Pro from this link (or search for it if the link does not work anymore) to uninstall your expired Pinegrow then install it again and your computer will not recognize that it has already expired. This link is the tutorial on how to use the Advanced Uninstaller Pro.

C. If “B.” does not work, kindly follow this link for you to use another email and have another 7-day trial on Pinegrow.

Download Pinegrow trial only for Windows

macOS 10.13, 10.14 & 10.15

Although it is possible that Pinegrow may work flawlessly with previous versions of macOS, we now test each release of Pinegrow with macOS 10.13 (High Sierra), macOS 10.14 (Mojave) and now macOS 10.14 (Catalina) only and we provide support only for these versions of the system.

Download Pinegrow trial only for Mac

Ubuntu Desktop 16.04 LTS & 18.04 LTS

Although it is possible that Pinegrow may work with previous or future versions of Ubuntu Linux, we now test each release of Pinegrow with Ubuntu Desktop 16.04 LTS and Ubuntu Desktop 18.04 LTS only and we provide support only for these versions of the system.

Download Pinegrow trial only for Linux

Requirements for WordPress Themes Development

If you plan to build WordPress themes with Pinegrow PRO/WP or Pinegrow Theme Converter for WordPress, you will have to install and configure a Web development environment (a webserver, a database engine, and WordPress) on your own computer.

Download XAMPP for Windows

Download XAMPP for Mac

Download XAMPP for Linux / Ubuntu

Code Editor

Download Atom for Windows

Download Atom for Mac by clicking the same link above as the Windows version but use your Mac devices.

Download Atom for Linux by clicking the same link above as the Windows version but use your Linux / Ubuntu devices.

2. How-to Guides: 2.1. Add elements to the page

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Let’s take a look at how you can add new HTML elements to the page.

As always in Pinegrow, you can add elements in a couple of different ways. Choose the one that suits your task at hand the most.

1. OPEN THE LIBRARY

Open the Library panel.

Library panel contains elements and components (ready-made groups of elements) arranged in sections.

The Library panel.

What sections are shown depends on which frameworks and libraries are activated on your page. For example, if Bootstrap support is active a bunch of Bootstrap-related sections and components will be listed in the Library.

Moving the mouse over an element in the Library will show the preview of the element.

2. DRAG ELEMENT TO THE PAGE VIEW

Open the Library panel.

Grab the element from the Library panel and drag it over the page.

As you move it over the page (while still holding down the mouse button) you’ll see two things:

Dragging the element from Library to the page.

The target element is highlighted with a green border and orange line shows where in relation to the target element the new element will be inserted.

Drop the element at your chosen destination by releasing the mouse button.

You can use Repeater to insert more copies of the element. Type a number before or during the dragging operation with 0 to 9 keys to set how many copies of the element you want to insert.

Press ESC to abort the drag & drop operation without adding the element to the page.

3. DRAG ELEMENTS TO THE TREE

Open the Library and the Tree panels.

Dragging elements from the Library to the Tree gives you precise control over the placement of new elements.

Take the element from the Library and drag it over the tree. Insertion line will show the position.

Dragging an H2 element from the Library to the Tree panel.

Release the mouse to insert the element at the indicated position.

You can use Repeater to insert more copies of the element.

Press ESC to abort the drag & drop operation without adding the element to the page.

4. INSERT INTO THE SELECTED ELEMENTS

Open the Library panel.

Selected element is required

You have to select one or more elements on the page to use this feature.

Right click on the element in the Library and choose the placement of the new element in relation to the selected element:

Insert with right click on the Library element.

Use Repeater to insert more than one element to the page.

“Insert into selected” Library section

In addition, for some types of selected elements, Pinegrow suggests elements that can be inserted into the element.

Insert into selected heading element.

Such suggestions are listed in “Insert into selected” section. To insert such element into the selected element click on the name or right click on the name for more options.

5. INSERTING CODE

Library panel lets you enter code directly to the page.

Open Insert code section and enter the HTML or simplified Pug syntax for the element you wish to add to the page.

A Library panel element representing the code will appear below the code editor.

Insert code from the Library panel.

Use it as you would use a normal Library element: drag it to the page, to the tree or use right click to insert it into the selected element.

6. QUICK INSERT INTO THE SELECTED ELEMENT

Selected element is required

You have to select one or more elements on the page to use this feature.

You don’t have to keep the Library panel visible at all times.

Click on Insert element icon in the selected element menu or press the + key to bring up the floating Library panel.

Open Quick insert tool.

SHORTCUT Press + to display the floating Quick insert library for the selected element. Use ESC to close the floating Library.

Choose placement and click on any Library element to insert it into the selected element.

In addition to dragging elements to the page or to the tree, you can also just click on a library element to insert it into the selected element.

Use position icons to chose the placement of the new element in relation to the selected element.

7. QUICK INSERT INTO THE TREE

Open the Tree panel.

Hovering the mouse pointer over the borders between elements in the Tree panel will display orange insertion line at that position. Click when the insertion line is displayed to open a floating Quick insert library.

Hover the mouse over element borders to display the insertion line.

Click on an element in the Library to insert it at the indicated position.

Quick insert into the tree.

SHORTCUT Press ESC to close the floating Library.

8. USING REPEATER TO ADD MULTIPLE COPIES OF THE ELEMENT

All operations that insert new elements to the page work with Repeater. Just type the desired number before the operation or during a Drag & drop move and Pinegrow will add that many copies of the element to the page.

The Repeater.

Type a number before the operation with 0 to 9 keys to set how many copies of the element you want to insert.

9. SMART DRAG & DROP INTO THE MULTIPLE SELECTED ELEMENTS

Selected element is required

You have to select one or more elements on the page to use this feature.

Let’s say we need to insert a new element into multiple elements on the page. For example, we need to add a button into each of the ten DIVs. With Pinegrow, we can do that with one move.

When you insert a new element into one of the multiple selected elements…

Inserting a button into one of the selected elements.

…Pinegrow will analyze the situation and repeat the same operation on all selected elements.

Buttons were inserted into all selected elements.

2.2. Add stylesheet or script to the page

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Need to add a CSS stylesheet or Javascript file to the page? Just drag it from the Project panel.

This approach requires Pinegrow Web Editor PRO 5.95

To add an existing stylesheet or script to the page, simply drag it from the Project panel to the page view:

Files that can be dragged to the page have icon displayed next to their name.

Javascript files are added to the end of the <body> element by default. To change that, use the Tree panel to drag the script element to the <head> of the page.

Create a new file

If you need to add a new file, create it by right-clicking on the project name or project subfolder and choose “Create new file” command from the menu.

Enter and confirm the file name:

Next, drag the newly created file to the page.

Editing the file

To edit the file click on the file in the Project panel to open it in the code editor:

Refresh the page view to re-run the Javascript code without having to save the code first.

Although this works for both stylesheets and scripts, we recommend that you use the Style panel to edit stylesheets.

2.3. Duplicating existing elements

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Sometimes the easiest way to add more elements to the page is duplicating (making copies) of existing elements on the page.

To duplicate an element click on the in the selected element menu.

Make copies of the element.

A copy of the element will be inserted right after the original.

SHORTCUTUse CMD + D to duplicate the selected element.

Duplicate also works with multiple selected elements.

By default, duplicating multiple elements will duplicate the elements individually, one by one:

Press ALT when duplicating or choose “Duplicate as group” from the context menu to duplicate the elements as a group:

Use Repeater to create more than one copy of the element.

2.4. Delete elements

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Let’s take a look at how you can delete HTML elements from the page.

Selected element is required

You have to select one or more elements on the page to use this feature.

As always in Pinegrow, you can do that in a couple of different ways. Choose the one that suits your task at hand the most.

1. DELETE ELEMENTS IN THE PAGE VIEW

The easiest way to delete an element is using the in the selected element menu:

Delete the selected elements.

This operation will delete all selected elements.

Delete is also available in the element context menu accessible by right click:

Right click to display the element menu.

NOTEYou can use right click to display the context menu even for the elements that are not selected.

The quickest way to delete all selected elements is pressing DELETE or BACKSPACE:

SHORTCUTUse DELETE or BACKSPACE to delete all selected elements.

This keyboard shortcut is not available in _ACTIVE text editing mode.

2. DELETE ELEMENTS IN THE TREE

Open the Tree panel.

Use the in the selected element menu in the Tree to delete all selected elements.

You can also right click on any element in the Tree, even if it is not selected, and remove it with a Delete menu command.

NOTEDeleting a selected element with the right click menu will delete all other selected elements as well. Doing the same on a not-selected element will delete just that element.

2.5. Add or Remove classes from elements

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Let’s take a look at how you can add and remove classes (for example .my-class) from elements on the page.

In Pinegrow you can use multiple tools to do a single task. This is also true for editing classes. Choose the tool that best suits the task at hand:

1. EDIT CLASSES IN ELEMENT PROPERTIES

Open the Element properties panel.

There you’ll find the Classes section with the list of all classes that are assigned to the selected element and the Add class button.

Classes section in Element properties panel.

Remove a class

Remove the class by clicking on the x icon 1.

Toggle the class (switch it on and off on the element) by clicking on its name 2.

Add a class

Add a class to the element by clicking on the Add class button 3.

This will open the Add classes tool:

ADD CLASSES TOOL

Add classes tool is a floating panel that lets you quickly add and remove classes from the selected elements.

Add classes tool.

You can use the tool to:

Type one or more class names 1 and press ENTER or click on Add button to assign the classes to selected elements. Use , or space to separate multiple class names.
Search the list of all known classes 2 in the project by typing in the same input box. Click on the class in the list to assign it to elements. Or use UP and DOWN keys to navigate the list and ENTER to confirm the selection.
Click on the class name in the Recent list 3.
Toggle and remove assigned classes 4.

SHORTCUTUse CMD + L to open the Add classes tool.

SHORTCUTright click on the element and select Add classes from the menu.

2. WORK WITH CLASSES IN STYLE PANEL

Style panel is used for styling page elements with CSS rules. But classes can be added and removed from there as well:

Using the rules context menu

Open the Style panel.

Right click on any rule that contains .class selector(s). The context menu contains commands for adding and removing such classes from the selected elements.

Context menu of a rule with classes in selector.

Using Create CSS rule

Open the Style / Active panel.

Both “Quick create rule” 1 and “Create with selector maker” 2 tools have the option to add any classes mentioned in the new rule to the selected elements – if those classes are not assigned to the element already.

Create new CSS rule tool with option to add classes to elements.

NOTEThis feature will not only add the class to the element but will also create a corresponding CSS rule for the class.

3. EDIT CLASS ATTRIBUTE

Open the Element properties panel.

There you’ll find the Attribute editor section:

Attribute editor in Element properties panel.

Add or edit the class attribute. Note that according to HTML specification multiple class names must be separated by a space character, not by a comma.

4. EDIT ELEMENT CODE

Open the Element code panel.

The element code panel shows the code of the selected element.

Edit the class attributes of the element in the HTML code:

Element code editor.

Or switch to simplified Pug syntax 1 and edit classes prefixed by ‘.’ after the element tag name:

Element code editor with simplified HTML syntax.

3. Master Pinegrow: 3.1. Page views

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Everything you do in Pinegrow is live. All the changes you do are immediatelly visible in one or more page views. There you can build and test your page at the same time.

Here’s everything there is to know about page views.

In Pinegrow, most editing happens right on the live page view.

1. CHOOSING THE SIZE

Users will view your pages on different devices and in at different browser sizes: from large desktop computers, laptops to mobile phones. That’s why you should design your webpages with this flexibility in mind.

Page views can be freely resized so that you can work with your page at different device sizes.

Device size menu.

Use Device menu to chose one of predefined sizes.

The menu contains:

Sizes defined by frameworks, like Bootstrap, or default Pinegrow sizes. Keyboard shortcuts CMD + 1, CMD + 2 and so on are associated with them.
Widths set by responsive CSS breakpoint. Pinegrow discovers breakpoints by analysingstylesheets used on the page. “Manage breakpoints” command is also there.
A set of actuall devices that have both width and height set (the rest of items in this menu only specify the width).

The width and height of the page view can also be set by entering dimensions into the width and height input fields:

Input width and height of the page view.

Page views with both width and height can be rotated.

Another way to change the width of the page view is to drag its right edge left or right:

Drag the right edge to resize the page view.

2. USING MULTIPLE PAGE VIEWS

Not only can you resize the page view – Pinegrow lets you open multiple views of the same page. All page views are editable and all edits are immediatelly synced between them.

Use in the page tab or in the top toolbar to add a new view:

Opening multiple page views.

Views are displayed in a row, from left to right.

If the zoom level is set to Fit, views will be resized to fit into the available space. If you use a fixed magnification – 100%, for example – all views might not fit into the space. In that case use the horizontal scrollbar at the bottom to scroll left and right.

Or, click on view icons in the page tab to jump to a page view:

Click on devices in the tab to navigate between page views.

You can select and edit elements on any of the page views. Selected elements will be marked on all page views and all edits synced between them.

NOTEHaving too many page views open will impact the app performance. Keep only as many are needed for the task at hand. Closing and reopening page views is easy.

3. THE ACTIVE PAGE VIEW

In general, it doesn’t matter on which page view you edit the page. But, that’s not the case for CSS editing if you use media queries to target specific devices.

In that case some CSS rules only affect the page when it is displayed at the certaing device size. For example, we might use media query to make the H1 element smaller on mobile devices.

So how does the Style panel decide for which page view to show active CSS rules?

That’s simple when only one page view is open.

When multiple page views are open, the active view is marked by the highlighted style icon:

Select the active page view for CSS editing.

You can switch the active view by:

clicking on the icon above the page view.
Selecting an element on the page view will mark that page view as active.

4. CLOSING THE PAGE VIEW

Click on the above the page view to close it:

Closing page views.

When you close the last page view, the whole page will be closed.

5. CENTER PAGE VIEWS

By default, page views are positioned on the left side of the page area. So, if the width of page views is less than the width of the page area, the empty space will be shown on the right side. That’s the good place for placing various panels.

Sometimes it is better to have the page view front and center, for example, when you’re writing content or focusing on an important design consideration.

To center page views in the page area, right-click on the empty space in the page area and choose “Center page views” option from the menu:

Right-click in the page area to choose page view position.

6. SHOWING MULTIPLE PAGES SIDE BY SIDE

Until here we were talking about multiple views of the same page. That’s great, but sometime it is useful to show different pages side by side.

To do that, you can split the page area by holding the page tab and dragging it…

Grab the tab…

…to the left or to the right side of the existing page area.

…and drag it to the edge of the page area.

This will create two or more page panels. You can freely move page tabs between page panels.

Two pages shown side by side.

Close an extra page area by closing its pages or by dragging its page tabs to the main page area tab header.

3.2. The Library Panel

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

The Library panel contains elements that can be placed on the page. You can also use the Library panel to insert the code directly, to define your own components and load any page as a library.

Let’s take a look at what the Library panel can do for you.

1. THE LIBRARY

Open the Library panel.

Library panel contains elements and components (ready-made groups of elements) arranged in sections.

The Library panel.

Moving the mouse over an element in the Library will show the preview of the element.

2. DRAG ELEMENT TO THE PAGE VIEW

Grab the element from the Library panel and drag it over the page.

As you move it over the page (while still holding down the mouse button) you’ll see two things:

Dragging the element from Library to the page.

The target element is highlighted with a green border and orange line shows where in relation to the target element the new element will be inserted.

Drop the element at your chosen destination by releasing the mouse button.

You can use Repeater to insert more copies of the element. Type a number before or during the dragging operation with 0 to 9 keys to set how many copies of the element you want to insert.

Press ESC to abort the drag & drop operation without adding the element to the page.

3. DRAG ELEMENTS TO THE TREE

Open the Tree panel.

Dragging elements from the Library to the Tree gives you precise control over the placement of new elements.

Take the element from the Library and drag it over the tree. Insertion line will show the position.

Dragging an H2 element from the Library to the Tree panel.

Release the mouse to insert the element at the indicated position.

You can use Repeater to insert more copies of the element.

Press ESC to abort the drag & drop operation without adding the element to the page.

4. INSERT INTO THE SELECTED ELEMENTS

Right click on the element in the Library and choose the placement of the new element in relation to the selected element:

Insert with right click on the Library element.

Use Repeater to insert more than one element to the page.

“Insert into selected” Library section

In addition, for some types of selected elements, Pinegrow suggests elements that can be inserted into the element.

Insert into selected heading element.

Such suggestions are listed in “Insert into selected” section. To insert such element into the selected element click on the name or right click on the name for more options.

5. INSERTING CODE

Library panel lets you enter code directly to the page.

Open Insert code section and enter the HTML or simplified Pug syntax for the element you wish to add to the page.

A Library panel element representing the code will appear below the code editor.

Insert code from the Library panel.

Use it as you would use a normal Library element: drag it to the page, to the tree or use right click to insert it into the selected element.

6. QUICK INSERT INTO THE SELECTED ELEMENT

You don’t have to keep the Library panel visible at all times.

Click on Insert element icon in the selected element menu or press the + key to bring up the floating Library panel.

Open Quick insert tool.

SHORTCUT Press + to display the floating Quick insert library for the selected element. Use ESC to close the floating Library.

Choose placement and click on any Library element to insert it into the selected element.

In addition to dragging elements to the page or to the tree, you can also just click on a library element to insert it into the selected element.

Use position icons to chose the placement of the new element in relation to the selected element.

7. QUICK INSERT INTO THE TREE

Open the Tree panel.

Hover the mouse over element borders to display the insertion line.

Click on an element in the Library to insert it at the indicated position.

Quick insert into the tree.

SHORTCUT Press ESC to close the floating Library.

3.3. Page Libraries

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Load any website into the Library panel and use it as a component library from where you can drag elements to your page.

Do you have a web page with a collection of reusable elements and components? Or, did you find such a library online?

Wouldn’t it be great to simply add this page to the Library panel and then drag the components from there to your page?

That’s exactly what Page Libraries can do.

Note, Page Libraries work with HTML code of components. When you drag an element to your page only the HTML code will be added. You have to add any required CSS and Javascript resources manually.

To open a Page Library click on its tab or on the in the Library panel tab bar.

The two types of Page Libraries

There are two kinds of Page Libraries:

Page Libraries that are defined by plugins

For example, Bootstrap plugin registers a page library “Components” that includes a collection of various Bootstrap example components.

When registering page libraries, plugins usually define which elements are draggable, which elements represent navigation and they might also add custom logic for getting the HTML code of the selected element, in order to make using the page library as simple as possible.

Plugin Page libraries are listed at the top of the “Add Page Library” menu and are open as tabs in the Library panel by default :

Custom Page Libraries

These are local or remote web pages that you load as Page Libraries.

Adding a custom Page Library

To load a new Page Library click on “Open”:

This brings up the Page Library settings dialog:

The settings are:

URL or local file

Enter the URL of the remote website or click on the file picker icon to select a HTML file on your computer.

There is a slight difference in how local files and remote URLs are loaded:

Local HTML files are loaded through Pinegrow’s internal web server. Why? That lets Pinegrow connect browser DOM elements to their representation in the source code. That means that when we drag an element to the page we get the source code of the element without any dynamic changes that might have happened after the page was loaded the browser.

Remote URLs are loaded directly from the remote website, bypassing the internal web server. This ensures that the page navigation and any login methods work correctly. That means that you’ll work with HTML code as it is in the browser, potentially altered by the Javascript code. In most cases that’s not a problem.

The selected file or URL will be loaded into the Library panel:

The file or URL is the only required setting, all other are optional.

Library name

Give a library an easily identifiable name that will be shown in the tab title and in the menu. By default, the name of the HTML file is used.

Components selector

By default, all elements on the page can be selected and dragged to your project. Although this is ok in most cases, we can make working with the page library more efficient by telling Pinegrow what elements on the page are actual components that can be dragged on the page.

We do that by specifying a CSS selector for such elements. To discover the selector we have to investigate the structure of the page with browser developer tools or similar.

For example, we discover that all components are wrapped around the div with the class bd-example and so we enter the selector .bd-example > *. Or, if components consist of <section>, <header> and <footer> elements, we enter the selector section, header, footer.

Clicking outside of such components will interact with the page directly, for example, it will navigate to a selected sub page.

Navigation selector

In some cases we might want to keep all elements on the page draggable and only exclude certain elements, for example those that are used for the navigation.

Or, the Components selector might not be specific enough and also includes the navigation area.

In such situations we can explicitly tell Pinegrow what page elements to leave alone.

For example, imagine we have a bunch of <section> elements on the page. The navigation menu is also wrapped in <section> and has the id “navigation”.

In this case we set Components selector to section and Navigation selector to #navigation.

Add the elements from the page library to the page

Now the Page Library is loaded and we can start using it.

Move the pointer over the library page and drag highlighted element to the page view or to the Tree panel.

Page library behaves slightly different when all elements are draggable, as opposed to when components are defined with the Components selector.

Case A – Components are defined

In case components are defined with the Components selector setting you can only drag those elements that match this selector.

Clicking on such component will break it apart, so that you can drag any of its subelement to the page.

Click again to restore the component back to its original state.

Case B – Components are not defined and all elements are draggable

You can drag all elements to the page.

Click on any element on the page to select it and to show its HTML path.

When an element is selected only that element is draggable.

Click on another element to select it or use the HTML path to select any of its parents.

This feature lets you precisely select the element that you want to drag to the page.

Click on the selected element again to unselect it.

Double-click on the element to break it apart. Double-click again to restore it to the original form.

Navigating the page

Each page library doesn’t represent only a single page. Rather, any loaded local file or URL is a full website. You can use its navigation features to move around its sections and sub-pages.

The toolbar

Each Page Library has a toolbar at the top:

Navigation history

Use the Back and Forward buttons to move around the navigation history.

Page click mode

If all elements on the page are draggable but you need to click on a link or use any interactive feature of the page, activate the “Page click” button in the toolbar:

When the Page click is active Pinegrow will let the page handle all clicks.

Click on the icon again to deactivate the Page click mode.

Zoom

Zoom lets you decrease the scale of the page library view so that you can see the whole page at desktop size without having to enlarge the Library panel.

3.4. The Tree Panel

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

The Tree panel displays the structure of the page. Use it to navigate and edit the page elements with precision.

Open the Tree panel.

1. SELECTING ELEMENTS

To select elements in the tree:

Click on the element line to select only that element.
CMD + click to select multiple elements.
SHIFT + click to select a range of elements that are on the same level in the tree.

Multiple selected elements in the tree.

2. THE CONTEXT MENU

Right-click on the element in the tree to open the element context menu:

The element context menu.

Like in the page view, you can right-click on any element, even if it is not selected. Opening the element’s context menu will not select the element.

3. COLLAPSING AND EXPANDING NODES

Collapse and expand tree nodes to focus only on the relevant part of the page structure:

Click on the to collapse the node.
Click on the to expand it.
Press ALT while clicking on the and icons to collapse and expand the whole level.

Collapsing and expanding tree nodes.

When an element located within a collapsed node is selected on the page, the collapsed branch will be temporarly expanded so that the selected element can be shown in the tree. When you deselect the element, the branch will collapsed back.

Pinegrow keeps track of collapsed nodes by adding the data-pg-collapsed attribute to the collapsed elements. By default, these attributes are removed from the code when you save the page. Use “Support -> Settings -> Remember collapsed and hidden nodes” to tell Pinegrow to keep these attributes in the code and preserve collapsed and hidden nodes between sessions.

4. HIDING ELEMENTS

Sometimes an element gets in the way of editing the page. Use to hide the element in the page view. This only hides the element in Pinegrow, while you edit the page.

Hide elements in Pinegrow.

Click on the to show the element.

Pinegrow keeps track of hidden nodes by adding the data-pg-hidden attribute to the hidden elements. By default, these attributes are removed from the code when you save the page. Use “Support -> Settings -> Remember collapsed and hidden nodes” to tell Pinegrow to keep these attributes in the code and preserve collapsed and hidden nodes between sessions.

5. DRAG ELEMENTS TO THE TREE

Open the Tree panel.

Dragging elements from the Library to the Tree gives you precise control over the placement of new elements.

Take the element from the Library and drag it over the tree. Insertion line will show the position.

Dragging an H2 element from the Library to the Tree panel.

Release the mouse to insert the element at the indicated position.

You can use Repeater to insert more copies of the element.

Press ESC to abort the drag & drop operation without adding the element to the page.

6. QUICK INSERT INTO THE TREE

Open the Tree panel.

Hover the mouse over element borders to display the insertion line.

Click on an element in the Library to insert it at the indicated position.

Quick insert into the tree.

SHORTCUT Press ESC to close the floating Library.

7. MOVING ELEMENTS

Grab the element in the tree and drag it to a new position in the tree or on the page.

Elements in the tree can be moved around.

If you move one of the multiple selected elements, all selected elements will be moved to the new position.

If you move the element from or to one of the multiple selected elements, Pinegrow will try to do the same change to all of the selected elements.

8. SEARCH

Use the search box to find elements on the page.

By default, Pinegrow looks for textual match in the tree and for CSS selector match in the page.

Searching in the tree.

Examples:

Searching for div will search for the text “div” in the tree and for all <div> elements on the page.
h2.title will search for the text “h2.title” in the tree (it probably won’t be found there) and for all <h2> elements with class title on the page.
Prefix the search string with $ to only do selector search on the page. Looking for $p will only find <p> elements on the page, without including all tree items with the text “p”.

Once one or more search results are found, you can use the selection icons next to the search box to:

to select page elements found by the search.
to add search results to the selected elements, without clearing previously selected elements.
to deselect search results, if they were previously selected.

NOTESelecting more than 10 elements at the same time will take a while. Select too many elements will slow down or crash Pinegrow.

9. THE SOURCE CODE STRUCTURE VS. THE DOM STRUCTURE

Every page has two distinct layout structures:

The Code structure as defined in the source code of the page.
The DOM structure as it is displayed in the browser, after browser parses the source code.

The Code structure is displayed by default in the Tree panel because it lets you see what’s happening in the source structure of your page. Use the DOM mode when you need to see what’s actually displayed in the browser.

Use to toggle between the two modes.

Toggle between source and DOM mode.

These two structures can differ if the page contains Javascrip code that adds page elements at run-time. For example, a Javascript plugin adds a “page is loading” overlay, or displays a popover. Such elements exist in the DOM structure of the browser, but not in the source code of the page.

Another reason why the structures can differ are syntax and semantic HTML errors in the source code.

For example, the code bellow is invalid because it contains nested P elements:

<p>

<p>Hello</p>

</p>

Most browsers will render it as:

<p></p>

<p>Hello</p>

The Code structure mode is useful for fixing such errors.

NOTEUse “Page -> Check for HTML errors” to inspect and fix syntax errors on the page.

3.5. Element Properties

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Use Element properties panel to edit element’s attributes. For example, to edit classes of any element, or to change source and alt text attributes of an image. The panel also contains controls for properties defined by frameworks like Bootstrap.

All changes done in the Properties panel are applied to all selected elements.

Element properties panel has two parts.

The panel is divided into two parts:

The top part shows general properties common to all elements.
The bottom part shows specific element properties and contains controls defined by frameworks.

1. GENERAL PROPERTIES

These controls are common to all HTML elements:

Classes (see below).
Element id ( id HTML attribute).
Name, used to identify the element in Pinegrow (for example in the tree).
Title ( title HTML attribute).
Empty placeholder is used inside Pinegrow to add a pg-empty-placeholder class to elements that would otherwise be shown with height 0 and thus inaccesible in the visual editor. This class has no effect outside Pinegrow and is removed from the element once a child element is inserted into it.
Attribute editor (see below).

2. CLASSES

The Classes control lets you add and remove classes (for example .my-class) from elements on the page. In HTML, classes are listed in class element attribute.

The control contains the list of classes that are assigned to the selected element and the Add class button.

Classes section in Element properties panel.

Remove a class

Remove the class by clicking on the x icon.

Toggle the class (switch it on and off on the element) by clicking on its name.

Add a class

Add a class to the element by clicking on the “Add class” button.

This will open the Add classes tool:

ADD CLASSES TOOL

Add classes tool is a floating panel that lets you quickly add and remove classes from the selected elements.

Add classes tool.

You can use the tool to:

Type one or more class names 1 and press ENTER or click on Add button to assign the classes to selected elements. Use , or space to separate multiple class names.
Search the list of all known classes 2 in the project by typing in the same input box. Click on the class in the list to assign it to elements. Or use UP and DOWN keys to navigate the list and ENTER to confirm the selection.
Click on the class name in the Recent list 3.
Toggle and remove assigned classes 4.

SHORTCUTUse CMD + L to open the Add classes tool.

SHORTCUTright click on the element and select Add classes from the menu.

3. GIVING AN ELEMENT A NAME

You can give a name to important elements on the page, so that it will be easier to recognize the elements in the tree, in the undo history and elsewhere in Pinegrow.

Pinegrow displays the name when refering to the element:

Use names to organise your projects.

The name is stored in data-pg-name attribute of the element and it has no effect outside of Pinegrow.

4. ATTRIBUTE EDITOR

Attribute editor lets you edit HTML attributes (for example, title, src, class…) of the selected elements. Pinegrow has handy tools for editing most of these attributes (for example, Classes tool), but sometimes is needed to edit a non-standard attribute. data-* attributes are one such example.

Edit attributes directly.

5. SPECIFIC PROPERTIES

The bottom part of the Properties panel shows specific controls for the selected elements.

That includes properties of HTML elements like <a> links, <img> images and so on:

If you’re using Bootstrap, Foundation or another framework supported by Pinegrow, various framework controls will also be shown here, including Pinegrow PRO editable areas:

Properties that depend on the type of the element.

3.6. Styling with CSS

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Styling – painting and positioning elements – is done with CSS properties and rules. Pinegrow offers a collection of powerful styling tools to suit different tasks and workflows.

This guide – and Pinegrow – assume that you’re at least somewhat familiar with CSS. If not, Pinegrow is a great companion tool for learning about web development.

Open the Style panel.

1. WHAT IS A CSS RULE?

First, let’s define what we call a CSS rule.

Example of a CSS rule with selector and properties.

2. ACTIVE RULES

Open the Style / Active panel.

“Active” tab of the Style panel shows the CSS rules that affect the currently selected element. If more elements are selected, the rules for the last selected element are shown.

Click on the rule to select it.

Active tab in the Style panel.

The selected rule is shown in the CSS Visual editor. There you can use visual controls edit rule’s properties like width, color and so on.

CSS List editor

Back in the active rules list, you can expand the rule to show and edit its properties right there in the list. We call this mode CSS List editor.

CSS List editor.

Click on the property name or value to edit them.

Click on the empty space right of the property value to select that rule and to jump to the Visual editor control for that property.

Hover over the on the right side to show controls for hiding (commenting out) and deleting rule or property.

Position the mouse between properties. After a short time insertion line will show up. Click to insert new property at that place.

Click on the icon at the top of the Active panel to toggle the auto expanding of all rules listed in the Active tab.

Style attribute

“Style attribute” rule is always listed at the top of the Active rules. It represents the style attribute of the selected element. Its properties are not stored as a CSS rule in a stylesheet. Rather, they are listed in the style attribute in the HTML code of the element.

For example:

<h1 style="color:red>I'm red!</h1>

But, Pinegrow knows a smart way of using the style attribute:

Edit Style attribute and then save it as a new CSS rule.

Use Style attribute to quickly style the selected element using the Visual editor or CSS List editor. One you’re happy with the result, click on the to save the style as a new CSS rule. Pinegrow will create the new CSS rule, transfer CSS properties from the style element to the rule and then clear the style attribute on the element.

Element states (pseudo selectors)

HTML elements can be displayed in a different states, beside the regular state: hovered with a mouse pointer, active when pressed down, focused and for links, visited.

Element pseudo states.

Each of this states can be targeted with CSS rules. That’s the most common with links and buttons.

For example, a button has different color when it is hovered by a mouse and then when it is clicked.

Toggle the buttons for these pseudo states to force the selected element to be displayed in that states. Then the Active tab will also show rules that target the states.

To create a new rule that targets the element in a pseudo state, simply append :active, :hover, :focus or :visited to the selector, for example button.primary:hover.

Ignored stylesheets

By default, CSS rules from framework stylesheets are not shown in the Active tab because showing too many of those rules would clutter the list. To show them click on the “Show more” link at the bottom of the list.

Show hidden rules.

Use Stylesheets menu to hide any stylesheet. Right click on the stylesheet name and chose “Ignore in Active”.

Ignore rules in Active tab.

More about the Stylesheet menu later.

3. VISUAL CSS EDITOR

Controls in the Visual editor are organised into logical sections.

The section filter at the top of the editor lets you quickly see which sections have defined properties. Click on any icon in the filter to jump to that section.

Sections can be collapsed and expanded with and icons. Press ALT when clicking on the icon to collapse or expand all sections at once.

Visual CSS editor.

Numerical controls have sliders that let you change the value by dragging them up and down. You can also use UP and DOWN to increase/decrease by 1 and SHIFT + UP and SHIFT + DOWN to change the value by 10.

Controls like margins and padding have that makes all directional values the same.

Shadows, transitions and transforms can contain multiple definitions (for example, three different shadows). Use to add more items and to remove them.

Shadows, transforms and transitions.

Controls that deal with colors have a color picker. When the color picker is open you can pick up any color from the Pinegrow window by moving the cursor over the area and then clicking to pick up the color of the pixel below the cursor.

Pick up colors from the app screen.

Media queries

Click on the “Media query” button in the “Selector & Media query” section to display the query selector tool.

Show media query tool.

You can choose from one of the predifined queries that are generated based on the breakpoints values used on the page.

Select or compose a media query.

The or darker color on the query buttons indicates that the query is visible on the active page view (use above the page view to set the view as active).

If needed, you can also type the custom media query value in the input box.

Use “Page -> Manage breakpoints” to edit breakpoint values for the page.

What to do if the property you want to edit doesn’t have control in the Visual editor?

Simple. You have a couple of options:

Use CSS List editor in the top part of the Style panel, as described above. Click on the property value to edit it, or position the mouse between existing properties to insert a new one.
Select “Edit rule code” to edit the code of just that rule.
Go to code editor for that stylesheet and edit the property there. More about this later.

4. CREATING NEW CSS RULES

So far we were modifying an existing CSS rule. Let’s see how we can create new CSS rules. As usually in Pinegrow, we have a couple of different options.

Using the quick create tool

The quick create tools is located at the top of the Active tab. To create a new rule enter the selector in the input field and click on the Create button.

Here’s an example:

Select the h1 heading element on the page. Enter a class selector into the Create rule input box 1, for example, “.big”.Adding new CSS rule for the selected element.
Since the selected h1 doesn’t have the .big class assigned, Pinegrow will offer to add the class to the element 2. Leave that check box on.
Click on Create button 3. Because this is the first CSS rule that we are adding, Pinegrow will ask us to confirm which stylesheet should be selected as default for adding new CSS rules. Let’s choose pine.css. After we set the default stylesheet, all new rules created with the Create button will go there.Confirming the default stylesheet for new CSS rules.
The .big CSS rule is now created 1 and displayed in the Visual editor. Use control selector (or scroll) to go down to the Text section. Play around with different controls.Using text controls in Visual editor.

Changing the default stylesheet for new rules

You can change the default stylesheet to which new CSS rules are appended in the Stylesheets menu. Right-click on the stylesheet and select “Set as default for new rules”.

Choose the default stylesheet.

The default stylesheet is marked by next to its name.

Creating new rules with the Selector maker

Click on the … button to open the Selector maker tool.

Open the Selector maker.

Input the selector as text or click on various components of the selected element path to construct the selector:

Construct the selector.

Click on : to choose a pseudo selector:

Choose pseudo selectors.

The selector maker will display information about how many elements on the page match the selector:

If the selector includes one or more classes, and the selected element doesn’t have that classes, the tool will offer to assign the classes to all the selected elements:

If needed, select the right media query.

Chose the stylesheet where the new rule will be appended.

Click on the in the tool header to select another element on the page for the selector path display.

Click on the Create button to create the rule. The new rule will be selected in the Active tab and displayed in the Visual editor.

5. THE STYLESHEETS MENU

Click on the on the top of the Style panel to open the Stylesheets dropdown. There you can:

The Stylesheets dropdown menu.

“Manage” button will open a dialog where you can attach / detach stylesheets from the page and create new stylesheets. It is described further down on this documentation page.

“Refresh” rescans stylesheets that are attached to the page. Use it when stylesheets change but the change is not automatically recognised by Pinegrow.

All stylesheets, including imported ones, that are attached to the page are listed:

marks the default stylesheet for the new CSS rules.
Use to hide and show the stylesheet on the page. This just hides all the stylesheet’s rules from the page, it doesn not remove the stylesheet from the page. Use it to quickly see what styling the stylesheet contributes to the page.
Click on the stylesheet name to open the stylesheet in the individual tab in the Style panel. More about this below.
Use the to edit the stylesheet in the code editor. See below for details.
Clicking on the displays the menu with further options:Stylesheets menu.
- “Set as default for the new rules” selects the stylesheet as default destination for new CSS rules created in the Active tab.
- “Convert to SCSS” and “Convert to SASS” will enable SASS and LESS live editing on the stylesheet. More details below.
- “Ignore in Active” will hide rules from this stylesheet in the Active tab. This is useful for hidding CSS rules from various plugin and framework CSS stylesheets.
- “Hide in page view” is the same as clicking on the .
- “Reload” will reload the stylesheet from file. Useful if auto-reloading of externally changed files is disabled or if Pinegrow doesn’t automatically recognise the changed file.
Use to reorder stylesheets on the current page.

6. EDITING INDIVIDUAL STYLESHEETS

Clicking on the name of the stylesheet in the Stylesheets menu, or on the next to the stylesheet’s name in the Active tab, opens the stylesheet in a separate tab of the Style panel.

Open a stylesheet in a separate tab.

Click on rules to select them in the Visual editor or click on the to expand the rules in the CSS List editor. Everything there is editable, including selectors, comments, property names and values.

Edit the stylesheet with the CSS List editor.

Position the mouse on the border between items to display the insertion line. Click to insert a new rule or property at that position.

The stylesheet tab has a couple of options displayed at the top:

Select the icon to only show active rules that affect the selected element.
Use to only show rules that are visible on the active page view, when using media queries to target specific view sizes.
will open the stylesheet in the code editor. Style panel and code editor are linked together. See the next chapter for details.

7. CSS CODE EDITOR

Some web developers do their CSS editing purely in code and some prefer to use visual tools. With Pinegrow there is no need to choose just one way – you can do both at the same time.

Edit the code of a single CSS rule

Hovering over the next to rule in the CSS List editor reveals the . Click on the icon to open a floating CSS code editor for that rule. Any changes are immediatelly applied to the edited CSS rule.

Edit the code of a single CSS rule.

Using the internal code editor

Clicking on in Style panel opens the stylesheet in Pinegrow’s internal code editor:

All changes that you do in code editor, Active tab, CSS List editor or in the Visual editor are immediatelly synced among all the tools.

In addition, selecting the CSS rule in the Style panel will highlight the rule in the code editor.

Edit stylesheet code.

The stylesheet must be open in the code editor and this option has to be enabled in the code editor settings.

Code editor options related to CSS.

The matching of selected rules in the code editor is done by simple selector text search. While not perefct, this feature is still very useful to quickly navigate complex stylesheets. Use CMD + G, while cursor is focused in the code editor, to jump between multiple matches.

Using the external code editor

Pinegrow will ask before reloading the externally changed stylesheet if the stylesheet has unsaved changes in Pinegrow.

Pinegrow watches open files and reloads them when change made with another program is detected. Most code editors will also reload documents after they are saved in Pinegrow.

Pinegrow will ask before reloading the externally changed stylesheet if the stylesheet has unsaved changes in Pinegrow.

Live-sync with Atom

Using Pinegrow with Atom goes a step further – all edits are synced between the two apps without having to save them first.

8. USING SASS AND LESS

Pinegrow comes bundled with full-featured SASS and LESS compilers. You don’t have to install anything to use SASS and LESS with Pinegrow. No node, gulps, grunts, yetis, npms, no jsonconfig files.

Not only that – SASS and LESS editing in Pinegrow is Live! Every change that you do, be it changing a variable or adding a new rule, is immediatelly reflected in the page view, without having to save changes first.

Changing SASS variables.

And when you save changes, Pinegrow also saves the compiled .css files. It’s as simple as that.

NOTEAuto-prefixer is used when Pinegrow compiles SASS and LESS files. No need to use different vendor specific properties like -webkit-box-shadow. Just say box-shadow.

Working with existing SASS/LESS projects

If .scss / .less version of the file is located in the same folder as the .cssstylesheet, Pinegrow will automatically discover it and load it (and any imported stylesheets) to the Style editor.

If source files are located in different location you have to tell Pinegrow where they are. To do that, open the Stylesheet manager with “Page -> Manage stylesheets” or with “Manage” button in the Stylesheets menu in the Style panel.

There, find the .cssstylesheet in the list and click on the “Use SCSS/LESS” link. Locate the main SASS/LESS source file and click on the “Use” button. Pinegrow will load the source files and remember the setting.

Select SASS/LESS source.

Converting a .cssstylesheet to SASS/LESS

If you have an existing .cssstylesheet and want to start using SASS or LESS with it, simply use “Convert to SASS” or “Convert to LESS” right-click menu options in the Stylesheets menu.

Convert a CSS stylesheet to SASS or LESS.

Creating a new SASS/LESS stylesheet

To create a new main SASS/LESS stylesheet, use “Manage stylesheets” to add and attach a new .cssstylesheet. Then convert it to SASS/LESS in the Stylesheets menu in the Style panel, as described above.

To create a new file that will be imported into an existing main SASS/LESS file, simply add the @import statement to the main stylesheet and Pinegrow will take care of creating the new file.

Editing SASS/LESS projects

Complexity of SASS and LESS projects spans from simple stylesheets with variables to complex projects, containing lots of variables, reusable mixins, nested code and so on (for example, Bootstrap).

Multitude of style editing tools in Pinegrow gives us the needed flexibility to chose the best approach for the task at hand.

Although the CSS List editor can handle nested statements it would be awkward to edit large Bootstrap source files there. Internal or external code editor is much more suitable for that.

On the other hand, CSS List editor is perfect for editing the variables of even large complex projects. Tweaks to the existing CSS rules can also easily be done there.

And the Visual editor is handy for editing individual rules, even if they use variables and expressions.

As with other Pinegrow use-cases, just try different tools that are available in Pinegrow and use the ones that suit the best. And you can always supplement your Pinegrow workflow with using an external code editor – or vice versa.

9. MANAGING STYLESHEETS

And we’re almost at the end of the Styling chapter. Let’s take a closer look at the Stylesheets manager, that was mentioned a couple of times before.

NOTEAlthough their names sound similar, “Stylesheets manager” and “Stylesheets menu” are two distinct dialogs. We’ll probably integrate them into one in the future.

Open the Stylesheet manager with “Page -> Manage stylesheets” or with “Manage” button in the Stylesheets menu in the Style panel.

Manage stylesheets.

The Manage stylesheets dialog lists all stylesheets that are loaded in Pinegrow, even if they are not attached to the current page.

There, you can duplicate, rename, save or close individual stylesheets, as well as connect them with their SASS/LESS source files.

Use Attach and Detach links to add or remove the stylesheet from the current page. This operation adds or removes the <link> statement in the <head> of the page.

Below the list, we have a form for creating a new stylesheet or loading existing one from file or url.

Type the url of the stylesheet, absolute or relative to the current page, and click on the “Add” button.

3.7. Code editing

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Pinegrow’s unique feature is deep integration of visual and code editing tools – both for HTML and CSS editing.

Let’s take a look at different ways of how code can be edited in Pinegrow.

1. EDIT CODE OF A SINGLE ELEMENT

Open the Element code panel.

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.

Select any other element on the page. Its code will appear in the code editor. When you edit the code, the change is immediately seen on the page.

Edit the code of the selected element.

Switch to simplified PUG syntax by clicking on the icon. The simplified syntax is sometimes easier to edit, and it is less prone to errors. Note, this syntax is only used for editing. Normal HTML code will be used on the page.

Simplified code syntax.

Use to toggle line wrapping and to toggle display of HTML syntax errors and warnings (not available in the simplified syntax mode).

Editing multiple selected elements

When the range of elements is selected on the page and these elements follow one after the other, all of them are displayed in a single Element code editor.

Editing a range of selected elements.

Inserting new elements

The Element code editor is a handy tool for inserting new elements to the page.

Of course, you can add new sub-elements to the edited element by inserting their code inside the main element’s code.

In addition to that you can also insert new elements by inserting their code before or after the edited element.

Just type before or after edited elements to insert a new element.

Pinning editors to the Edit code panel

Normally, only the code editor for the currently selected elements is displayed in the Edit element code panel. Use the to pin the current element code editor to the panel.

Use pinning to display multiple element code editors.

This will keep the editor displayed even when you select another element on the page. Code editor of the newly selected element will be added to the panel.

Quick Element code editor

To display a floating element code editor press CMD + H (C also works when not typing text) or chose “Edit element code” from the element right-click menu.

Quick element code editor.

This is a convenient way of editing the element code without switching to the main Element code panel.

2. PAGE CODE EDITOR

Open the Page code panel.

The page code editor lets you edit the code of the whole document: page, stylesheet, Javascript code or other file (click on the name of the non-HTML file in the Project view to open it in the code editor).

Press CMD + E or click on the in the top toolbar to toggle the code display for the selected page.

Page code editor.

There we can also edit the code of the whole page.

Note that simplified syntax mode is not available in the page code editor.

Elements selected on the page also get highlighted in the page code editor.

All code changes appear in page view as well.

Right click on an element in the code editor. The element will get selected in the page view.

Use icon to open the Code editor options menu:

Code editor options.

Toggle line wrapping.
“Show code for the selected page” will always show the code of the currently selected page. When you switch between pages in the page area, code editor will switch code tabs accordingly.
“Display HTML errors and warnings” will highlight any errors in the code. This only works with pure HTML code and you’ll see errors when editing code with server side scripts. In such cases, just turn this feature off and use “Page -> Check for HTML errors” instead.
“Search for the selected CSS rule” will highlight the CSS rule that is currently selected in the Style panel by performing a search for its selector. Use CMD+G while focused in the editor to jump between multiple search hits.

3. USING THE EXTERNAL CODE EDITOR

Pinegrow watches open files and reloads them when change made with another program is detected. Most code editors will also reload documents after they are saved in Pinegrow.

Pinegrow will ask before reloading the externally changed document if the document has unsaved changes in Pinegrow.

4. LIVE-SYNC WITH ATOM

Using Pinegrow with Atom goes a step further – all edits are synced between the two apps without having to save them first.

3.8. HTML Snippets

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Add any HTML element into a custom snippet library and reuse it on the same page, on other pages and even in other projects.

NOTEPinegrow PRO also lets you create auto-updatable smart components with editable areas.

Snippets are listed in the Library panel.

1. CREATING A HTML SNIPPET

To create a snippet just select the element on the page, click open the element context menu and then “Add as HTML snippet”.

Add the element as a snippet.

Another way to add a snippet to an existing library is to click on library’ name in the Library panel and choose Add as HTML snippet. Selected element will be added to the library.

This will create a new library in the Library panel and add the first snippet.

Snippet in the Library panel.Another way to create a snippet.

2. INSERTING SNIPPETS TO THE PAGE

Drag components to the page just as you would drag any other element from the Library panel.

Right-click on the snippet in the Library panel to rename it, delete it or update it with the content of the currently selected element.

Editing the snippet.

3. SAVING THE SNIPPET LIBRARY

If you want to keep the library you have to save it. Click on the library name to do that.

Save the snippet library.

4. ACTIVATING SNIPPET LIBRARIES

Use “Manage libraries & plugins” (in File and Page menu) to select which libraries are active for the selected page. Pinegrow remembers the settings.

Manage snippet libraries.

Once you created a library you can use it on any page you want. Just go to “Manage libraries & plugins” for that page and activate the library.

NOTEUse “Load plugin” if you need to load the snippet library. Don’t use “Load library”, that refers to Pinegrow PRO smart component libraries.

5. BEHIND THE SCENES

Libraries are saved as Javascript files that are loaded as Pinegrow plugins. That means that you can edit libraries as you would any other Javascript file (but be careful, at the moment only components, their names and codes can be edited – other stuff will get overwritten when you save a library from Pinegrow).

3.9. History – Undo and Redo

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

History panel lets you move back and forward through HTML and CSS edits.

Open the History panel.

1. COMBINED HISTORY

By default, History panel shows the combined history for all pages and stylesheets. This mode is very convenient to use, but it doesn’t let you perform undo and redo operations just on a selected page.

Combined undo history.

For example, to undo operations on page A, you also have to undo any subsequent operations on page B.

2. SEPARATE HISTORIES

Use options icon to separate history tracks for every page and one for all stylesheets.

Choosing the undo mode.

In this mode the panel has two tabs: the HTML tab with history of the current page and the CSS tab with the global history of all CSS edits.

Separate undo histories.

The drawback of this mode is that you have to manually switch between HTML and CSS tabs in the History panel, depending on what you want to undo or redo.

3. UNDOING AND REDOING OPERATIONS

Press CMD + Z to Undo the last step.
Press CMD + SHIFT + Z to Redo the last step.
Click on any step in History panel to restore that state.

3.10. Drag & Drop

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Drag & drop in Pinegrow has a bunch of useful tricks up its sleeve.

Let’s take look at the basics first:

1. WHAT CAN I DRAG? WHERE I CAN DROP?

You can drag elements from:

the Library panel
the page view,
the tree.

You can drop the dragged elements on:

the page view or
the tree.

When dragging the element over the page view the orange line will show where in relation to the target element (highlighted with green border) will the element be placed.

Press ESC to abort a drag & drop operation.

2. MOVING AND CLONING

When you grab an existing element and drag it somewhere else the default behaviour is to move the element.

Hold down the ALT to clone the element instead.

Hold ALT down to clone the element.

3. GRAB & MOVE

You don’t have to select the element before grabbing and moving it.

Hold down the mouse when the element is highlighted with the green border. Wait for about half second without releasing the mouse button and the drag & drop operation will begin.

Grab & move elements.

Use ALT to clone the element instead of moving it.

Press ESC to abort a drag & drop operation.

A pro tip: you can begin the move without waiting for half a second. Just hold down the mouse button, start the move and drag & drop will start half a second into the move.

4. INSERTING N ELEMENTS WITH REPEATER

All drag & drop operations work with Repeater. If you wish to insert 12 copies of the dragged element, type “1” and “2” before or during the drag operation.

Use repeater to insert many elements with one move.

5. DRAGGING MULTIPLE ELEMENTS

When multiple elements are selected on the page, and you drag one of them, all of the selected elements will follow and be inserted right after the moved element, regardless of how they were positioned before the move.

6. INSERTING ELEMENT INTO MULTIPLE SELECTED ELEMENTS

When you drop an element into or next to one of the multiple selected elements, Pinegrow will try to repeat the same operation on all other selected elements.

For example, if you have three Team members selected and drop a button into the first one…

Inserting elements into multiple selected elements.

…Pinegrow will insert buttons in the other two Team members, at the same position.

Pinegrow inserts the element into all other selected elements.

7. REARRANGING THE LAYOUT OF MULTIPLE SELECTED ELEMENTS

When you move an element within one of the multiple selected elements, Pinegrow will try to repeat the same move on all other selected elements.

So, continuing with our Team members example, if we select all Team members and then move the name before the image in the first Team member:

Moving the button in one of the selected elements…

Pinegrow will make the same move on other Team members – if possible.

…moves the button in all other selected elements.

For this to work you have to move the element without selecting it first. This can be done with grab & move or using the tree.

3.11. Tools & Helpers

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Pinegrow contains many helpers and tools that can make you even more productive.

Here are a couple of tips on how to effeciently work with inline text editing:

1. THE TOOLBAR

Let’s take a look at the top toolbar.

The toolbar has many useful tools.

The toolbar contains many useful tools:

Use 100% zoom control to select the page views magnification. “Fit” will auto resize page views to fit into the available page area.
Display helpers lets you toggle visual helpers like selected elements menus and borders, element outlines and so on. More details below.
toggles the text editing mode.
Use Test clicks to let your page handle clicks, more below.
toggles the Page code editor.
Use to toggle Javascript code on your page during editing in Pinegrow. This is useful if Javascript causes performance issues or too much movement on the page.
Click on or press CMD + R to refresh the page view of the current page. That is handy if page display becomes messed up during editing or if you want to reload external resources (images, scripts).
Use or CMD + B to preview the current page in the external browser.
opens another page view in the selected page tab.
Repeater × 1 lets you repeat any editing operation (described below).
and TAB collapse all panels and hides all floating panels. Click it again to bring the panels back.

2. VISUAL HELPERS

Clicking one the displays the menu where you can toggle various visual helpers that are displayed in page views.

Menu with visual helpers.

Visual helpers:

Show server-side code displays PHP, ASP and similar tags and marks them with yellow color.
Element outlines displays dotted blue border around all elements on the page. That’s useful for observing the boundaries and layout of page elements.
Selected element menu toggles the blue menu displayed on top of the selected element. Sometimes it’s useful to hide it because it obstructs the view of other elements.
Selected element border controls the display of blue border around the selected elements.
Mark components uses blue and yellow borders to mark Pinegrow PRO component definitions and their instances.

On Bootstrap pages additional helpers can be used:

Grid displayes the column grid inside all containers on the page.
Columns displays light blue overlays over all columns on the page, with information about their size.

3. TEST CLICKS

When Test clicks are active, Pinegrow let’s the page handle all clicks. That is useful for developing dynamic pages with elements like modals and sliders. Normally, Pinegrow handles the clicks and selects the element that was clicked. So, the modal button will not open the modal, but will get selected in Pinegrow.

With Test clicks the page will handle the click and clicking the button will open the modal that can then be visually edited in Pinegrow.

Test interactive page elements.

A tipPress ALT when clicking to toggle the Test clicks setting just for that click. When Test clicks are off ALT + click will do a test click. When Test clicks are on, ALT + click will select the clicked element.

A tipYou can still select and move elements in the tree even if Test clicks are active.

4. THE REPEATER

Repeater lets you repeat operation like inserting and duplicating elements N times. It is a great time saver.

All operations that insert new elements to the page work with Repeater. Just type the desired number before the operation and Pinegrow will add that many copies of the element to the page.

The repeater lets you repeat an operation N times.

Type a number before the operation with 0 to 9 keys to set how many copies of the element you want to insert.

For example, to make 10 copies of an existing element, select that element, type “1” and “0” and click on the or press CMD + D.

To change the number, just type another number.

5. ELEMENT CONTEXT MENU

Right-click on any element on the page or in the tree to display its context menu with many useful commands.

The element context menu.

While some commands, like Duplicate and Delete, can also be accessed elsewhere, some are unique to this menu:

“Change element tag to” provides a quick way to change element tag, for example from <p> to <h1>. If the tag you need is not listed, click on the … to enter a custom tag. This tag will then be displayed in the list for the duration of the session. When creating <li> list items, Pinegrow will wrap the elements with <ul> or <ol> if needed.
“Remove outer tag” removes the clicked element and leaves its children in its place. Use it to get rid of unwanted wrapping elements.
“Merge selected into” will take all selected elements and append or prepend them to the clicked element.
“Split parent at this position” clones the parent element and leaves all child elements positioned before the clicked element in the original parent and moves all the rest child elements into the cloned parent element.

6. ZOOM THE USER INTERFACE

Use setting to make the whole Pinegrow user interface smaller or larger. Making it larger helps with accessibility issues, while making it smaller lets you fit more panels and page views on the screen. That’s especially handy on small screens and on retina screens.

Zoom the user interface.

Zooming the user interface affects everything in the app window, including page views.

7. WORKSPACES & THEMES

The Workspace menu lets you restore one of predefined workspace layouts, save and display your custom workspace layouts as well as choosing the user interface theme.

Workspace layouts and themes.

At the moment, two themes are available: the default gray theme and high contrast theme with dark backgrounds. We’ll add the light theme soon.

8. CHECKING HTML FOR ERRORS

Use “Page -> Check for HTML errors” to let Pinegrow inspect the page for any syntax and semantic HTML errors.

The tool will check for:

Incorrectly closed tags.
Elements located in wrong places, for example a <p> within a <p>.

Check the page for errors.

Click on the element names in the list of reported errors to select that element on the page.

Every page is automatically checked for errors when opened in Pinegrow. Any HTML errors on the page can interfere with editing operations and can lead to unexpected results if they are not fixed.

9. FIXING BROKEN LINKS

Did you know that Pinegrow can automatically fix broken links within a project? This feature is available in the Project panel. Right click on the file and choose “Fix links”.

Fix broken links.

Pinegrow will examin the page for broken links and then try to rebuild them by searching the project for the closest file with the same name as the url linked in broken link.

Fixing links is a Pinegrow PRO feature because it requires projects to work.

3.12. Getting the Most out of Pinegrow UI

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Pinegrow comes with a powerful and flexible user interface that gets out of your way when you don’t need it.

Let’s get familiar with the user interface.

In addition, watch the video explaining how the floating panels can be used on multiple screens:

3.13. Keyboard Shortcuts

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Pinegrow has many useful keyboard shortcuts that can make your work even faster.

1. GENERAL

`CMD` + `O`	Open file
`CMD` + `S`	Save
`SHIFT` + `CMD` + `S`	Save as
`ALT` + `CMD` + `S`	Save all
`CMD` + `Z`	Undo
`SHIFT` + `CMD` + `Z`	Redo
`CMD` + `R`	Refresh page views
`CMD` + `B`	Preview in browser

2. EDITING

`+`	Insert into selected
`CMD` + `D`	Duplicate
`ALT` + `CMD` + `D`	Duplicate as group
`DELETE`	Delete
`P`	Quick element properties
`R`	Show & create active CSS rules
`ESC`	Deselect all elements
`0` to `9`	Repeater
`CMD` + `1` to `CMD` + `5`	Resize the page view

3. TEXT EDITING

double click	Start text editing
`ESC`	Exit text editing mode
`CMD` + `B`	Bold
`CMD` + `U`	Underline
`CMD` + `I`	Italic

4. CODE EDITING

`CMD` + `F`	Search
`CMD` + `G`	Find next
`SHIFT` + `CMD` + `G`	Find previous
`SHIFT` + `CMD` + `F` (Win)`OPTION` + `CMD` + `F` (Mac)	Replace
`SHIFT` + `CMD` + `R` (Win)`SHIFT` + `OPTION` + `CMD` + `F` (Mac)	Replace all

5. COMPONENTS AND MASTER PAGES

`CMD` + `U`	Quick update open pages
`SHIFT` + `CMD` + `U`	Update whole project

6. WORDPRESS

`CMD` + `P`	Preview PHP code
`CMD` + `W`	Import HTML from WordPress

7. MOUSE CLICK COMBINATIONS

`CMD` + click	Select multiple elements
`SHIFT` + click	Select range of elements
`ALT` + click	Test click (on page) or select elementif Test clicks are enabled.
`ALT` + click	Collapse / expand level (in tree and panel sections)

3.14. Edit remote websites and web applications

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Let’s take a look at how Pinegrow Web Editor can be used to open and edit websites and applications from local or remote web servers.

With Pinegrow we can open documents in two ways:

Work with local files directly, for example, opening, editing and saving a HTML file on your computer.
Open URLs directly from the internet or from your local development server.

In this guide we’ll take a look how we can use Pinegrow to work with remote URLs.

Pinegrow Web Editor 5.92 or higher is required. This feature requires Pinegrow PRO edition because it relies on projects. Older Pinegrow versions have a more limited URL editing support.

Examples of remote projects are:

Static HTML websites on the remote server
WordPress sites
Server-side (PHP, Rails, Node…) applications
React single-page applications running on the production or development server

When we say remote, we refer to documents that are not accessed directly from your local file system. That can include projects running on your local web development server.

Pinegrow does not download the complete website with all its resources to your computer. That’s not its purpose. Instead, it locally saves only the modified files and injects them into the remote page when you re-open it in Pinegrow.

Common use cases

We can use all HTML and CSS editing features of Pinegrow on documents accessed with Open URL.

That said, Pinegrow can’t be used for editing the source code of your remote project if it is a server-side or Javascript-based web application.

SASS and LESS styling is also not supported.

Therefore, the most common use-cases are:

Edit CSS styling of a remote website or application.
Edit HTML of remote static HTML websites.
Edit HTML of web applications as a way of prototyping changes and new features

Limitations

Editing remote documents has the following limitations:

Remote URL editing might not work with your project. Complex Javascript code or web server configuration can clash with the way how Pinegrow works. Some apps even cause Pinegrow to crash.

The best approach is to try and see if it works.

Please note that unless the problem involves an obvious Pinegrow bug, the Pinegrow support team is not able to offer support related to your specific project.

The workflow

The general Pinegrow Web Editor workflow for remote projects is:

Use Open URL to open a document. Select a local folder for saving modified HTML and CSS files.
Make changes to the HTML structure and CSS styling.
Save changes. Modified files will be stored in a selected local folder.
Next time you open this URL in Pinegrow, any resource that is saved locally will be loaded instead of the original remote resource.

Here is an example of a typical scenario:

Let’s open a remote WordPress page with Open URL, for example docs.pinegrow.com, the Pinegrow documentation site:

Before opening the URL we have to select or create a local folder that will be used for saving modified files:

The selected folder is now opened as Pinegrow project:

Alternatively, we could first open the project and then use Open URL to open the remote document.

Let’s use the Style panel to make styling changes to pg_docs.css. We have to unlock the stylesheet first because remote stylesheets are locked by default:

We’ll change the background and margin of inactive navigation tabs:

Save changes. Modified pg_docs.css is saved into a selected local folder:

Next, we’ll change the HTML code of the page by changing “Documentation” tab label…

…into “Guides”:

Save the changes. The modified HTML files is now saved to the folder as well.

Let’s close Pinegrow and take a break.

When we come back to this task, we can open the local project directly, it will be listed in the Open recent section:

We can then quickly re-open the previously edited URL from the project menu -> Remote URLs -> Recent:

The page and all its resources are loaded from the website – except the modified pg_docs and the HTML document that are loaded from the local folder.

Notice that the tab label and styling are just as we set them before:

Continue making CSS changes.

Preview how the changes look on the site without having to upload changed files. We see that in Pinegrow, as well as by using the browser preview:

Share the project with the team so that they can take a look or contribute.

When the task is complete, upload the modified pg_docs.css to the WordPress theme folder on the server by whatever method we’re using with this project.

We can’t just upload the changed HTML file because the website is a WordPress site. The changed HTML can serve as a blueprint for changes that we then do in the theme source code or in WordPress admin panel.

Using the locally saved files

Modified HTML and CSS files are stored in a selected local folder (or the current open project) in mapped_urls subfolder.

Pinegrow doesn’t upload files to the server. We have to use the appropriate method for our project, for example:

Upload changed files to the server with your favorite file transfer tool.
Copy changed files to your source control system, like Git repository.
Use changed files as a prototype or blueprint for implementing the changes in the source code of your web application.

Let’s take a look at the details.

Open the URL

Use File -> Open URL and enter the URL you want to open.

There, we also need to select a local folder/project that will be used for storing modified files.

If a project is already open, it will be used for this purpose.

Click on Open URL button to load the document.

Edit the HTML structure

Use powerful tools to edit HTML document, including

Adding new elements from the Library.
Duplicating, deleting and moving elements around the page.
Use the Tree panel for precise manipulation of the structure.
Select elements and edit their properties and attributes…

Edit the CSS styling

Use the Style panel to edit styling of the document.

If we want to upload changed stylesheets back to the server, deactivate minimizing and combining stylesheets on the server. For example, in WordPress deactivate an optimization plugin.

Remote stylesheets are locked by default. Unlock a stylesheet by clicking on the orange lock icon.

Saving the changes

Use File -> Save or CTRL + S (CMD + S on Mac) to save the changes.

Files will be placed inside the mapped_urls/<hostname>/<url path> folder at the base of the current project.

For example:

If we selected /Users/Me/Work/Project1 as the folder/project when opening the URL, and
opened the url https://mysite.com/products
the saved files will be put into the /Users/Me/Work/Project1/mapped_urls/mysite.com/ folder.

Note that URLs without extension (like https://mysite.com/projects) will be saved as index_default.html .

Re-opening the URL

URLs opened in this way are not listed in the global recent file list.

Instead, we can re-open URLs by:

Open the project menu, go to Remote URLs and select a URL from the Recent list.
Click on the .html file inside the mapped_urls folder in the project panel. Pinegrow recognizes such files and opens them as URLs.
Go to File -> Open URL and enter the URL again.

When the URL with saved resources is opened, such resources are loaded from their local versions. All other resources are loaded from the remote server.

For example, if the HTML document was modified and saved, the saved version will be loaded instead of the remote version. The same happens with CSS stylesheets.

Working with dynamic HTML elements

Dynamic HTML elements are created by Javascript code after the page loads.

Starting from Pinegrow Web Editor 5.92, you can select and edit dynamic elements on the page. Dynamic elements have an orange border and menu, the static elements have blue.

Learn more about working with dynamic HTML elements.

Deleting saved changes

If we want to load a fresh version of the project, simply delete:

the whole mapped_urls folder, or
just specific subfolders or files.

Note that doing this will delete any locally saved changes.

Collaborating on projects

Folders that store modified files are self-contained and portable.

For example, we can select a Git repository as the folder where modified files are stored and edit the project with your team.

Or, we can send the folder to our colleagues and clients so that they can preview changes. Note that they will need to open the project in Pinegrow in order to correctly inject modified files and preview changes.

Troubleshooting

If the remote project doesn’t load correctly, try loading it with disabled Javascript by toggling the Javascripticon in the toolbar.

For example, some React projects serve static HTML and then activate the dynamic parts when the Javascript code loads. In situations where active parts cause issues in Pinegrow, turning the Javascript off lets Pinegrow display the static version of the page.

3.15. Working with dynamic HTML elements

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Dynamic elements are HTML elements created by Javascript code after the page loads.

Starting from Pinegrow Web Editor 5.92, you can select a dynamic element by clicking on it, just like any other element on the page.

For example, a Javascript code for displaying a modal box, creates a <div class="modal-backdrop"> element for the darkened background behind the modal box.

Selecting dynamic elements

Dynamic elements have orange highlight border when the mouse pointer moves over them.

Select the element by clicking on it in the page view.

Dynamic elements have orange border and menu. This helps to distinguish them from the static elements.

Displaying dynamic elements in the Tree panel

The Tree panel only shows static HTML elements, as they are structured in the document source code. Click on the Code icon to switch the source code mode off and instead display the current DOM structure as displayed in the browser.

Once we do that, we can click on the .modal-backdrop element in the tree to select it.

Difference between static and dynamic elements

Dynamic elements are created by Javascriptcode, they don’t exist in the HTML source code.

That means that we can’t save edited dynamic elements to the HTML source code – they were never there in the first place.

The only way to change dynamic elements is through editing the Javascript code that created them.

That’s why only the following editing features are available on dynamic elements:

Editing the textual content with inline text editing
Editing classes and attributes
Editing inline style

Although these changes can’t be saved, they can be used for prototyping or to support the task of styling the element.

Styling dynamic elements

The main purpose of selecting dynamic elements is to edit their CSS styling in the Style panel.

CSS styles are usually saved in separate stylesheets, so any changes we do there can be saved back to the CSS sources.

The only limitation are inline styles, encoded in the style attribute of the element. That means that inline styles can’t be saved.

You can edit inline style of dynamic elements. Pinegrow will display a warning when you do.

But then, if you want to keep such styles, you have to save them into a proper CSS rule in one of the stylesheets:

3.16. Using External Code Editors

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Pinegrow is not an all-or-nothing web development solution. You can use Pinegrow alongside your favorite code editor or IDE like Atom, Visual Studio, Sublime Text, Vim, Emacs, WebStrom or Adobe Dreamweaver.

Use Pinegrow for those tasks where it can save you lots of time and effort while using other tools for tasks more suited to them.

Pinegrow can connect directly with Atom and VS Code for seamless editing experience or it can work with any other editor based on watching file changes.

Atom

Now you can use Atom and Pinegrow together: code parts that are easier to code in Atom and use Pinegrow’s powerful tools to work with HTML structure, Bootstrap, WordPress, master pages, components and so on.

Visual Studio Code

Now you can use Visual Studio Code and Pinegrow together: code parts that are easier to code in VS Code and use Pinegrow’s powerful visual tools to work with HTML structure, styling, Bootstrap, WordPress, master pages, components and so on.

Other code editors and IDEs

Pinegrow can be used with any external code editor. It detects when a file is saved outside of Pinegrow and then refreshes modified parts.

4. Pinegrow PRO (with Assignment)

Course: elective-1-elec1-web-system-and-technologies-it503-3-units-p-1394-49

Follow practical examples to learn how to use master pages, smart components, and editable areas.

This section is not yet updated to reflect the changes in the user interface in Pinegrow 4.

Homework for Lesson 4. Pinegrow PRO (with Assignment)

Submitting a solution to assignment

Assignment 1: Create a website using Pinegrow

1. Create a website using Pinegrow.
2. Use all the tools inside Pinegrow to make a great looking website.
3. Add features such as sign up, log in, log out, and send forms.
4. Zip or Rar all the files then attached it as you submit it here.

Elective 1

1.2. Quick Introduction to Pinegrow

1. THE PAGE VIEW

The Page structure

2. ADDING ELEMENTS TO THE PAGE

3. ELEMENT PROPERTIES

4. STYLE – PAINT WITH CSS

Exploring and editing existing CSS rules

Creating new CSS rules

Quick styling with Style attribute

5. TEXT EDITING

6. CODE EDITING

Edit the code of one element at the time

Page code editor

7. SPEED-UP YOUR WORK

Select multiple elements

Work with multiple page views

Use the Repeater

8. YOU DID IT!PINEGROW PRO & WORDPRESS

Project panel

Master pages, smart components and editable areas

Creating WordPress themes

9. YOU DID IT!

1.4. Download, install, and run Pinegrow

System requirements

Windows 10

macOS 10.13, 10.14 & 10.15

Ubuntu Desktop 16.04 LTS & 18.04 LTS

Requirements for WordPress Themes Development

Code Editor

2. How-to Guides: 2.1. Add elements to the page

1. OPEN THE LIBRARY

2. DRAG ELEMENT TO THE PAGE VIEW

3. DRAG ELEMENTS TO THE TREE

4. INSERT INTO THE SELECTED ELEMENTS

“Insert into selected” Library section

5. INSERTING CODE

6. QUICK INSERT INTO THE SELECTED ELEMENT

7. QUICK INSERT INTO THE TREE

8. USING REPEATER TO ADD MULTIPLE COPIES OF THE ELEMENT

9. SMART DRAG & DROP INTO THE MULTIPLE SELECTED ELEMENTS

2.2. Add stylesheet or script to the page

Create a new file

Editing the file

2.4. Delete elements

1. DELETE ELEMENTS IN THE PAGE VIEW

2. DELETE ELEMENTS IN THE TREE

2.5. Add or Remove classes from elements

1. EDIT CLASSES IN ELEMENT PROPERTIES

Remove a class

Add a class

ADD CLASSES TOOL

2. WORK WITH CLASSES IN STYLE PANEL

Using the rules context menu

Using Create CSS rule

3. EDIT CLASS ATTRIBUTE

4. EDIT ELEMENT CODE

3. Master Pinegrow: 3.1. Page views

1. CHOOSING THE SIZE

2. USING MULTIPLE PAGE VIEWS

3. THE ACTIVE PAGE VIEW

4. CLOSING THE PAGE VIEW

5. CENTER PAGE VIEWS

6. SHOWING MULTIPLE PAGES SIDE BY SIDE

3.2. The Library Panel

1. THE LIBRARY

2. DRAG ELEMENT TO THE PAGE VIEW

3. DRAG ELEMENTS TO THE TREE

4. INSERT INTO THE SELECTED ELEMENTS

“Insert into selected” Library section

5. INSERTING CODE

6. QUICK INSERT INTO THE SELECTED ELEMENT

7. QUICK INSERT INTO THE TREE

3.3. Page Libraries

The two types of Page Libraries

Page Libraries that are defined by plugins

Custom Page Libraries

Adding a custom Page Library

URL or local file

Library name