Development 101

brixioapp edited this page Apr 3, 2015 · 10 revisions

Feel free to start exploring editor capabilities. It is easy as drag & drop can be. Let’s create simple html screen from scratch.

Add elements to the screen

"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. container

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. header

  • 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. header text

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. header text

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.

header text

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

action icons

Move element

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.

move element

Reorder elements
  • grab selected element
  • drag it to the blue area before another element
  • drop it there

reorder containers

Outline view, Handle mode

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.

outline view