USER MANUAL

v.1.0

Top menu bar

Address - share to give Read Only access (enable Settings / Share option)
Mode - R (read only)
Editor tools - depending on the file type
Run - preview with js enabled
Export: Github, Download
Settings
Fork / Save
Logout


Html Editor

Top bar:

Arrow icon - selecting tool
Tool icon - click to change to last selected tool/snippet
Text cursor - enable text mode
Outline - show outline (link to css)
Edit - edit selected element
Undo and redo icons

Left Sidebar:

Tools - all tools (example of elements) according to selected framework
Tools / search field - you can search with name, section name
Tools / tool / cog icon - check element code
Snippets - snippet connected with project or user ; search field as for Tools *
Snippets / tool / cog icon - change name, delete
Fovourites - tools and snippets marked as favourite
File Manager - as for Css
Comments

Mouse:

hover - highlight element
click - select element

Element menu on top of selected (mouse) element:

Left arrow - select parent element
Element name - click to check for main framework properties
Left/right - click to toggle value for selected property

Sidebar / Doc:

Cog icon - doc settings
Framework - select framework name to load selected library
Validate - validate the whole document
Css - a listo of linked css files which exist
Css / right arrow - click to open the file in text editor
Css / + - click to add link to new css file (to remove, edit the document code)
History - a window with a list of last operations
History / click on list item - undo all operations up to the selected item

Sidebar / Element:

Name - a name of selected element
Book FDL icon - element definition according to Fdl
Right Justivy icon - format code inside
Trash - remove element
Dialog icon - comment element
Add button - save as snippet
Applied Classes - a list of applied classes
Applied Classes / right arrow - open the css file in text editor
Applied Classes / change - show style definition
Validation - validation status of selected element
Properties / id, name, class, style - properties value
Style - click to show all properties from style-auto.css file

Code View:
doc/element (html) code
css code - click to change Sidebar type (to css)

View Menu (right/bottom):

Size - the size of main view (in pixels)
Zoom - click to zoom out
Comments - show comments
Element - show the code of selected element
Doc - show whole document code


Css Editor

Left Sidebar / File Manager:

File Manager / Screens section - a list of html files in all directories
File Manager / Files section - a list of files
File Manager / refresh icon - refresh icon
File Manager / code file icon - show/hide html files in list above
File Manager / upload icon - upload file *
File Manager / file icon - create new file in current directory
File Manager / directory icon - create new dir in current directory

Sidebar / Doc:

A list of selectors
Click on an item - select css selector

Sidebar / Selector:

Name - selector name
Properties - a list of css properties
Property / color field - you can set the color with a color picker
Property / file field - you can select the file by clicking file in File Manager or picture (for pictures)
Property / file field / max, refresh, Upload buttons

OCEAN INSPECTOR


Click on html element and check for available parameters.
For each framework element you can see a list of properties.
Click share to open Ocean with new project and a copy of the page you are working on.
Installation

PLANS


Standard account:
- Ocean Inspector access
- Ocean access
- space 100MB
- cooperative mode with comments
- file manager

FREE
Fish:
- commercial use

FREE, waiting for your opinion




Copyright © 2017 frontendocean.com