Development 101
#####Development
Feel free to start exploring editor capabilities. It is easy as drag & drop can be. Let’s create simple html screen from scratch.
"Hello world" walkthrough
When you begin with plain vanilla blank html screen, you get predefined, bootstrap ready html file with empty <body>. Editor starts in design mode by default.
- Select Bricks on left sidebar scroll down, click on container tool under grid group.
- Drag container tool to workspace. When you hover over body area in workspace, mouse pointer displays + (plus sign), outline of body turns red and body label shows up. Now you can drop container into body of the document.
- Workspace turns white, and there is visible blue outline of newly placed container with subtle plus sign icon inside. It means you can place another html element in it.
We have bootstrap container placed on document screen. Let’s add a header.
-
Select Bricks on left sidebar scroll down, find and click on h1 tool under typography group.
Hint: You can narrow selection of available tools by typing name of brick in search box. -
Drag h1 tool to previously placed container on workspace. When you hover over container, mouse pointer turns into + sign. Container outline changes to red and its label shows up. Drop h1 header into container area.
-
Double click on “header” text. You will see a red dotted frame around text. It indicates the editor is in text mode. Now you can type (or cut/copy/paste/delete text). Clear default header text using delete and/or backspace key on your keyboard. Type in something original like (in)famous Hello world phrase to change your very first html document header.
Now we can place some content text beneath the header.
- Select Bricks on left sidebar scroll down, find and click on <p> paragraph typography to select element. We can drag&drop element like before or use select and place method. Let’s try the latter.
- Hover mouse pointer over header element previously placed on html document. You will see two blue areas - before and after. Click blue area after header to place new <p> paragraph element underneath the header.
- Double click newly added paragraph to enter text mode. Type in some text to create real content of this paragraph.
Try to add some other elements by yourself. Do not worry about mistakes. On top bar you find handy Undo / Redo tool to rollback more than one editing step.
Customize "hello world" project
######Element action icons
Click on any element on the page to select it. Blue border shows up, to indicate currently selected element. Next to the border of selected element, there are some action icons. You can add a comment to element (teamwork feature), clone and delete element, finally insert some text (with or without html markup) into element.
- comment
- clone
- remove
- insert text
Click on the element and drag it to new position. While dragging over another element, two blue areas shows up - before and after. To settle its new position, drop it before, after or inside that element.
- grab selected element
- drag it to the blue area before another element
- drop it there
For use with elements invisible by default or hard to grab.
- Outline view displays frames and additional space around all bricks on screen.
- In Handle mode you are getting an additional handle grab space for parent element. It works in Design view: play/debug mode.
