USER MANUAL

Ocean v.1.0

Top menu bar

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


Html Editor

Top bar:

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

Left Sidebar:

Tools - all tools (example code for all elements) according to selected framework
Tools / search field - you can search with name, section name
Tools / tool / arrow - check element info
Components - user components connected with project or user account; search field as for Tools
Components / tool / cog icon - change name, delete
Fovourites - tools and snippets marked as favorite
File Manager - as for Css editor
Comments - comments for selected element (focused) or project

Mouse:

hover - highlight element
click - select element

Element menu on top of selected (mouse) element:

Left arrow - select parent element
Element name - click to select main framework property
Show variations - show all classes variations
Left/right - click to toggle value for selected property

Element menu on bottom of selected (mouse) element:

(Hide), Duplicate, Insert Inside, Empty, Delete

Sidebar / Doc:

Framework - select framework name to load selected library
Cog icon - document settings
Validate - validate the whole document
Cdl - framework definition
Doc - documentation
Css - a listo of linked css files (which exists)
Css / right arrow - click to open the file with 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

Sidebar / Element:

Name - a name of selected element
Def - element definition according to Cfd
Doc - element description
Justivy icon - format code inside
Dialog icon - comment element
Add button - save as user component
Validation - validation status of selected element
Applied Classes - a list of applied classes
Applied Classes / right arrow - open the css file in text editor
Applied Classes / change - show style definition
Properties / id, name, class, style - properties value

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

View Menu (right/bottom):

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


Css Editor

Left Sidebar / File Manager:

File Manager / Html section - a list of html files in all directories
File Manager / Files section - file manager
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

* you can upload .zip file and extract with double click

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


Ocean

- saas
- 50MB space

FREE
Ocean Inspector

FREE
OCEAN APP for Mac, Windows

- access to online projects
- access to local projects for DEVELOPER account owners

FREE
Ocean Account DEVELOPER

- Ocean Cloud access with user features: file manager, collaboration, comments
- Ocean App with local projects access

$9 /month, $99 /year
OCEAN APP+ for Mac, Windows

- access to online projects
- access to local projects

$99 $49 / one time with FREE upgrades for 15 months

Price for first 100 customers.
Additional disc space

- 1GB

ask




Copyright © 2017 frontendocean.com