Building pages with Pingendo

Learn how to use Pingendo to build a responsive page with Bootstrap 4 

Getting started

Let's go over the basics of UI.

The workspace is divided in 4 main areas :

  1.  Canvas: Shows your document and let you select elements
  2.  Components Browser : browse the available components 
  3.  Selection Properties : configure the currently selected element
  4.  Live Code Editor: Inspect and edit HTML and SASS files

Build with components

In Pingendo, you can choose between two kinds of elements to build your pages 

  • Stock Bootstrap 4 components
  • Prebuilt full-width sections – made of BS4 components 

To quickly shape layouts, click on the green lightglobe icon on the left and drag sections to canvas. You can insert a section only after another section, no nesting is allowed.

Once your have roughed-out your layout, you can further customize each section by adding components. Components can be dragged anywhere on the page. When dropping components the insertion point will be highlighted in blue. 

On the other hand, if you prefer instead to build your layout from scratch, you can just drop stock components on a blank canvas. Pingendo will take care to create the grid for you. (Read more about the grid here).

Configuring your components

When you select a component, you'll see its properties are displayed in the selection panel (right).

The panel is divided in two parts. The upper one shows the component tree structure. The lower one shows its properties.

Properties are organized into 4 groups and reflect the standardized configuration options offered by Bootstrap 4.

For complex components – i.e. navbars – the tree panel permits you to inspect, create and delete children of the main component.

To add children, click the '+' button. You can sort these children at any time by dragging them up and down in the tree.

The Grid

The Bootstrap grid system provides a quick and easy way to create responsive layouts. Pingendo handles the creation of grid elements for your layout work automatically (container, rows and columns).

So while you drop elements on canvas, the required grid will be created.
Every column can be resized dragging its left or right border. 
If you don't know how the Bootstrap grid system works, please have a look at Bootstrap documentation here

Using Themes

Under the page panel you can view which SASS theme is currently associated to your page, and change the most commonly used variables.

When you change a variable, your SASS source will be updated to reflect the changes and recompiled to CSS automatically. (On slower computers SASS compiling could take a moment)

To modify less common variables or to add custom CSS rules, just use the SASS source editor that you find at the bottom of the workspace.


Ctrl-c Copy
Ctrl-x Cut
Ctrl-v Paste
Ctrl-shift-c Clone
Del Delete
Esc Select parent element
Ctrl-z Undo
Ctrl-shift-z Redo
Ctrl-s Save
Ctrl-shift-s Save as

Made with lots of love since 2014.

© 2014-2017 Pingendo