Instance Styles

Instance styles are any styling visually generated by Clutch at the ID level for an element.

The generated CSS can be seen by hovering the instance (target) icon.

& represents the current selector - in this case that would be the element ID.

Right click on the instance icon to see its context menu:

From here the styles can be copied so they can be pasted on another element (at the ID or class level). If the target element is already styled, the properties will get merged. In case of any conflicts, the source styling will trump over the target elementโ€™s styles.

It is possible to copy the styles of a class to an ID by right-clicking the class, copying, right-clicking the instance and pasting. Using keyboard (Ctrl+C or Cmd+C) will copy and paste the class.

Convert to class option can be used to move all the styles to a custom class. Clutch will automatically provide a class name. This can be changed by double clicking the new class name.