The idea for this tool is to allow moving and resizing elements in the page, via drag and drop.
Graphic editors like Adobe Photoshop usually allow this kind of transformation via tools that look like this:
I can see 2 major use cases:
- making subtle tweaks to certain dimensions of an existing layout,
- or creating a mockup/demo from scratch, where the visual result is the goal, not the way the CSS is defined.
In this case, it's important that the tool doesn't mess with the stylesheets too much, and that it only modifies the properties that are set and respects their units.
This would be useful for making changes to things like:
- top, left, bottom, right,
- width, height,
- margin, padding, border dimensions,
- column width, etc.
Instead of altering numerical values inside the rule-view, this visual tool could be used.
A proposal for the interaction could be that the tool is triggered from the rule-view itself, with icon buttons next to properties that can be edited. Clicking on one of those would display the tool ready to be used to alter this given property, in whatever parent rule it is.
Consider the example of a column based layout with many elements sharing the same css class:float:left;width:25%;. The tool would provide a nice visual alternative to entering numbers in the rule-view.
As said earlier, we want to respect the structure of the stylesheet as much as possible, and so here, the width property would be changed inside the rule it is defined in, therefore, impacting all elements matched by the rule.
However, there are UX challenges to coming up with a practicle UI for this use case. Consider what happens when changing the width of an element that's absolutely positioned to the right (e.g. position:absolute;right:50px;width:200px;).
With a photoshop-like transform tool, dragging the bottom-right handle towards the right would make the element wider to the right, but in our case, the element would instead expand in the opposite direction, towards the left, as illustrated below:
As proposed before, if the main way to activate this is in the rule-view, maybe the thing you drag could be in the rule-view too, like a slider you drag horizontally only. The way, the interaction would be predicable: move left to make the number smaller, and right to make it bigger. And only display the Geometry overlay on the element while dragging the slider.
The following screen capture shows how the tool could look while modifying distances in the rule-view:
A tool like this could unlock some pretty interesting use cases, where all you want is create a visual mockup, demo or experiment but don't really care about what the CSS looks like in the end. Maybe you already have an existing site you want to re-design and you want to do it experiment with some ideas in the browser directly.
In this mode, there is no reasons to lock edition of certain properties because they are not defined in the stylesheet already. This means that in the earlier right-positioned element example, dragging the handle towards the right would actually make the element wider to the right, and so would change both the right and width properties at the same time. This is what Adobe Edge Reflow does, as illustrated below:
Consider an element that has no css-defined height (auto) but has text content in it, making it, say, 50px high.
Now, using the tool by dragging one of the bottom handles towards the bottom until the element is 100px high would actually have to create a new property in the element's style: min-height:100px.
This is what Adobe Edge Reflow does in this case too:
In this mode, it seems more natural that the CSS changes made by the tool are only made on the element being transformed, but there could be a setting allowing users to apply those changes to all elements that have the same css class for instance.
- Adobe Edge Reflow: desktop tool for creating responsive design web pages.
- Macaw: desktop tool for creating web pages too.
- ...