Quick Code

Quick Code is ideal for the experienced user who wants to see in an instant all the properties applied to a block and prefers to edit via CSS or prefers a bivalent way of editing using CSS.

Quick Code is available from the Navigator.

Currently the Quick Code editor focuses on Design tab properties for all Cwicly blocks.

It is important not to make changes to the rule structure itself.

Edit using Quick Code

In the Editor, let's add a Section.

For the purposes of demonstration, we can add a Div to the Section.

Open the Navigator.

With the Div block selected, hover over the Quick Code icon to bring up the dropdown.

You can select one of two tabs, Quick Editor (default) and Custom CSS.

Quick Editor

This is where you can edit the CSS of a selected block or seamlessly access the Block Inspector directly from the Navigator to access a different way of editing.

For the sake of demonstration, let's add a background.

With the Div selected, in the Design tab, Background tab, set a Background colour, for instance Blue.

If you hover over over the Quick Code icon in the Navigator, you will see the code for the selected background colour.

You can adjust the Colour directly from the Quick Code colour picker without having to go to the Block Inspector. This saves time and work flow.

If the Block is selected, you can click on an element to be edited and the corresponding tab in the Block Inspector will open so that you can edit the element directly in the Block Inspector without having to locate the required tab.

So if you are in the Primary tab with the Div selected, if you click on "background-color" in the Quick Editor,

You will be brought directly to the Colour tab of the Background tab of the Design tab where you can edit a property ( for example, background) from the Block Inspector if desired.

Breakpoints

Quick Code allows you to change between Breakpoints directly from the Navigator. This allows you to modify a property with different breakpoints and see how this will affect your design.

For example, if you click Tablet in the Quick Editor, the editor changes to Tablet view.

And if you click Mobile view, the editor will change to Mobile view.

For example, in Tablet view, let's input a height of 12px.
You will see that the property has been directly registered in the Block Inspector.

And similarly, we can input a Height of 62px in the Desktop view.
By juggling effortlessly between breakpoints, you can see how changes in different properties will affect different breakpoints which makes adjusting responsiveness much faster.

You can also edit properties without having to change breakpoints.

Custom CSS

The Custom CSS tab allows you to improve your workflow as you can access the CSS code dropdown from either the Navigator or the Block Inspector.

To access Custom CSS, hover over a block and in the Quick Code window, select the Custom CSS tab.
This will open a CSS dropdown where you can add custom code or edit existing custom code.
This is the same CSS dropdown that you can find in the Custom CSS tab of the Advanced tab as below.