Tutorial Introduction

Thank you very much for downloading Xpressive. With this software, you can intuitively write code in both CSS3 and HTML5. Take some time to learn how to use the application and then enjoy the "live design" process.

1.Selecting Elements

Choose an Element that is displayed in the preview.

  1. Click on the Finger IconSelect Icon that is in the Header or the DOM Inspector (or use the shortcut [⌘D] ),and enter Selection Mode.
  2. Click on an Element in the Preview

2.Editing Style

1.Modifying Style

  1. Display the Style Inspector by clicking on the Style Inspector Icon in the Header. ※short cut [^⌘I]
    ※[⌥⌘] for hidden temprary.
  1. Select an Element and the Style information will be displayed in the Style Inspector.
  2. Select the Property in the Style Inspector that you would like to edit and then press the [return] in order to enter the Property Edit Mode.
  3. Enter the CSS Property variable into the Text Input.

If you press the Down Arrow while in Property Edit Mode, you will see a Candidate List showing you the various choices available to you. Using the Up/Down Arrow keys, you can change the variables for the options on the Candidate List in real time.

If there is an Edit icon by the Property, the GUI Editor will appear when you double click the Property. The GUI Editor is not available for Properties that do not have an Edit icon.

2.Insert a Rule

  1. Open the Style Inspector
  2. Press the + to display the Insert Sheet.
  3. that you would like add in the Selector Name input box.
  4. Select the File that you would like to modify.
  5. Select the location for the new Rule.
  6. Press the OK button to confirm your changes.

Media Query and Keyframe can be modified in the same way. Directly insert Selector Name, File, and Location from a list of options.

4.Duplicating a Declaration

  1. Select an Element and display the Style information in the Style Inspector.
  2. Select a Rule, and then choose (Duplicate Selector) from the Rule Menu. The Insert Sheet will be displayed.
  3. Enter the Selector that you would like to duplicated in the Selector Name input box.
  4. Select the File that you would like to modify.
  5. Select the Location for the duplicated Declaration.
  6. Press the OK button to confirm your changes.

Media Query and Keyframe can be duplicated in the same way.

3.Editing the Style Sheet

2.Changing the Name of a Rule

  1. Select an Element and display the Style information in the Style Inspector.
  2. Open the upper pane.
  3. Choose a Selector and press [return]. to enter Edit Mode.
  4. Type the new Rule Name and then press [return] to complete the change.

Media Query names can only be used once. It is not possible to enter a name if that name has already been used for another Media Query.

4.Editing the DOM

1.Adding an Element

  1. Select the Element that you would like to add from the Element List.
    Drag the Element to the DOM Inspector.

2.Deleting an Element

  1. Select an Element and press [delete].

3.Duplicating an Element

  1. Select an Element and press [⌘C] to copy. Select the Element that you would like to copy to and press [⌘V] to paste.

4.Moving Elements

  1. Drag an Element in the Dom Inspector to reorder it. You can select one or multiple Elements to reorder.

Please use the DOM Inspector to move Elements. You cannot move the Elements in the Preview.

5.Modifying Attributes

  1. Select an Element and press [return]. to enter the Edit Mode for that Element. Input the Element and its Variable into the Text Input box. Press [return]. to confirm the change.

6.Save as a Snippet

  1. Select an Element and drag it to the Element List.Or choose "Save This Element as a Snippet" from the Element Menu.

7.Organizing Snippets

  1. Choose a Snippet from the Snippet List and drag it to the Dom Inspector.

8.Ignore Option

It is possible to prevent Elements produced by JS in Runtime.
  1. Right-click on an Element in the Dom Inspector to display the Element Menu.
  2. Select "Do Not Save This Element". The selected element will be removed from the HTML when data is saved.

This setting will be saved until you delete or remove the Project.

5.General Edit

1.Saving Files

  1. All the processes explained above can be saved by just pressing [⌘S] .

2.Undo/Redo

  1. All the processes explained above can be undone and redone. Press
    [⌘Z] for Undo and [^⌘Z] for Redo.

If you reload the Preview, the editing history will be lost. If you lose your editing history, you can recover it in the Backup History.

3.Responsive Slider

  1. Select Menu->Preview->Show Responsive Rule to display the Responsive Ruler.
  2. Drag the Slider to your desired size.

4.Responsive Short Cut

  1. Choose your desired size from the options in the Header.

The short cuts [⌘0] to [⌘4] have been assigned to this process.

5.Capture

  1. Select Menu->Preview->Take A Caputure.
  2. Select the destination you would like to save to in the Dialog and press [OK] .

6.Using Keyframe Timeline

  1. Select Menu->Preview->Take A Caputure.
  2. Select the destination you would like to save to in the Dialog and press [OK] .

6.Window Control

Xpressive has short cut commands that allows you to adjust the size and arrangement of Windows.

1.Moving Up and Down in the Dom Inspector

  1. The Previe and the Dom Inspector both have Short Cuts that allow you to control height. [^⌘↑][^⌘↓]

2.How to Switch to Deep Detect Mode/Light Tweak Mode

  1. Deep Detect Mode [^⌘1]
  2. Light Tweak Mode [^⌘2]

3.Opening and Closing the Finder Menu

  1. [^⌘L]

7.Project Setting

1.CSS Setting

  1. Please select the Vender Prefix Property that you want to export.
  2. Please select the css property that you want to treat as a Vender Prefix in your project.

2.HTML Setting & Initialize Setting

You can reset and clean up your html code with Initializing Setting.
It helps rewriting the specific node which were rewritten by javasctipt on runtime when you save your html file. What you can change are node`s attribute and its child.


For example, You always want "child" to be saved into the html file as a default code. but Javascript awalys changes the code into other code which you don`t wnat to save into HTML.

<div id="container1">
<div id="child" style="opacity:0">Hello</div>
</div>

1.Snip your default code and fill the Title for snippet first. in this case, the title for the snippet is "child".

<div id="child">Hello</div>

2.Open the HTML setting, and write the code below, 3.Then, the container1`s child will always be <div id="child">Hello</div>if even "child" is removed or rewriten by javascript.

#container1{
contentName:child;
}

3.Then, the container1`s child will always be <div id="child">Hello</div>if even "child" is removed or rewriten by javascript.

This Reverse Compile can be used for other way like below,

#a-node-you-want-to-recover{
style:null;"the style attr will be clear when you save."
class:default-class-a,default-class-b;"the class`s value will be both 2 codes."
}

Sometimes you see the code like below which is added into dom document dinamicaly at runtime. and probably this is the code which is not necessary to save in html file.
<script type="text/javascript" async="" src="https://apis.google.com/js/platform.js"></script>

So Xpressive have to block saving those code. If you make new project, you`ll see those settings in Initialize Setting. They block saving the tag which is added onto dom document dinamicaly at runtime.

script[async]{
ignore:true;
}

script[id="twitter-wjs"]{
ignore:true;
}

body > iframe[id*="oauth"]{
ignore:true;
}

3.JS Setting

It formats the embeded javascript in the html file.
  1. Just check it on when you want to format your javascript.

Thanks for your visiting!

Xpressive is designed for the web desginers and web developers who use mac OS X.We will support them as they develop even better products today.

Requirements

Mac OSX 10.8 or Later.

Contact/Technical Support
Any Feedback is always welcome!

Produced by Modulay

Modulay is a Software Design Company located in Tokyo, Japan that focuses on UI/UX Design. We pride ourselves on creating products that maximize user friendliness.