Skip to content

Editor

Jump to bottom
brixioapp edited this page Mar 30, 2015 · 5 revisions

######Editor layout overview

Editor screen consists of following areas - top menu, left sidebar and document view.

  • top menu

    • frequent use toolbar
      • viewport / device screen size switcher
      • select tool / text mode
      • outline mode / show hidden
      • show comments
      • zoom mode
      • undo / redo
    • app high level functions
      • home - redirects to panel
      • live test - live preview window
      • download project - zips and downloads whole project to local storage
      • share this project link (facebook, twitter, linkedin)
      • toggle fullscreen
      • settings - change and save your brix app preferences
      • help
      • account

  • left sidebar with with convenient access to controls, properties and tools

    • favorites - user selected set of bricks, common for all user projects
    • bricks - all bootstrap components and html5 elements for drag & drop
    • sections - your custom sections go here
    • brick properties - settings for current brick / html5 element
    • page properties - style switcher / brixio bot navigator
    • file manager - quick access to all html screens and full blown d&d file manager with cut, copy, paste, move, delete, rename, duplicate, new file, new directory, and upload capability
    • comments - chat and comment tool for project and selected bricks

  • document view - depends of file type and view mode.

    • design mode - wysiwyg for html screens

      • select / insert brick
      • drag & drop brick
      • text mode for simple text content edit - place text cursor inside element, type and edit (cut, copy, paste, delete)
      • pause / play debug mode
        • in Pause mode (default) all scripts are off, you can click "+show hidden" (top menu) to expand all hidden areas and "-" (element frame) to hide element again.
        • in Play mode all scripts are on - active Bootstrap actions (like dropdown / button click)
      • context css file selector

    • code editor - text editor for code: html, css, less, js, xml and other text files (uses CodeMirror)

      • html - full access to code editing for html screens
      • css, less - edit included style sheets files. If less file with the same name as css exists in the same directory, it is opened for editing instead of css file. Less file is automatically compiled to css with file save operation.

Design Mode - html screen open in editor workspace

  • Click Select tool (arrow) and then click an element on screen. Now this element is selected, with icons on the right. (Comment, Duplicate, Remove, Insert text/html). Properties panel opens on sidebar.
  • Click Text tool or click twice to edit node content in text mode.

Code View - html screen code open in text editor. Shortcuts:

  • shift + tab: auto indent current line or selection
  • ctrl (cmd) + S: save current document (with linked css files)

Settings - here you can set your preferences config settings for project.

  • code editor background (light/dark)
  • show comments (yes/no)
  • show bootstrap bricks (yes/no)
  • show advanced options - (yes/no) - access to code editor
  • shared for preview (yes/no)
  • autosave (yes/no) - we recommend to keep autosave on
  • code formatting - for inline tags (a, img, span, strong, button)
  • action (create sections) - creates sections for brixio bot / customizer

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),
  • Prevent - disable standard script execution,
  • Show hidden - to expand hidden menu options in nav elements

######brix.io wiki

Clone this wiki locally