Learn how to use Pingendo to build a responsive page with Bootstrap 4
Let's go over the basics of UI.
The workspace is divided in 4 main areas :
In Pingendo, you can choose between two kinds of elements to build your pages
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).
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 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 https://v4-alpha.getbootstrap.com/layout/overview/
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.
|Esc||Select parent element|