tl;dr tutorial

brixioapp edited this page Feb 4, 2015 · 5 revisions
tl;dr Quick tutorial v1.9
Design Mode

You can toggle between Design Pause and Design Play mode.

  • In Pause mode all js scripts are off and you can show all hidden elements with + tool (top menu).
  • In Play mode the document is live and you can use Prevent and Handle helper tools.
Text Mode

Select arrow (Select tool) and click brick or click an element twice - you will see a red dotted frame around all child nodes. Now you can type (or cut/copy/paste text). You can also insert new element (to cursor position), drag existing elements from outside text node or move elements inside text node.

Helper tools

To help 100% WYSIWYG editing, you can turn on Handle (additional grab space - outline around parent element), Outline Mode (a static space and border outline each brick) and Prevent - disable standard script.


You can add bricks to Sections area. First, click on html element, then click Add to Sections. This is the way to create reusable elements.

Team Work
Commentators &contributors

To get comments from others directly in Brix or to work on the same project, add users to your Brix account. From now, other users can comment, not only the whole project, but single bricks like sidebar, button, image, etc...


Click :speech_balloon: (top menu) to show all comment indicators (above commented bricks). You can click comment icon above brick to switch to Chat (sidebar) and focus on the brick.

Project sharing

To get feedback from your friends, you can share your project. Click Sharing Icon and select Facebook, Twitter or LinkedIn. Now they can open your project in readonly mode.

mbcode_id :bowtie:

Mbcode_id binds a brick with comments. You can move html element with existing mbcode_id to another file (but the same project). Mbcode are automatically removed during Download (export)...


To add a css file, first upload the file and then insert:

<link href="assets/css/your_name.css" rel="stylesheet">

inside <HEAD>. Now, reload document (click again Screens/file_name). Brix will search for name.less file and open this file instead of name.css.

Less compiler

Brix compiles less file while saving and saves generated css file in the same directory.

File Manager

To copy or move files, first click Copy, then change folder and click Paste (or Move) icon.