Looking into this idea a bit further.
So the ultimate styler program needs to do this :
- read in a theme file
- discover the visual components in the theme
- and populate them for use
- have a canvas where these components can be dropped on
- and can be manipulated qua size and position
- and have a preview for how it looks in real life
Basically this is an exercise in elevating css to its maximum capabilites, without using js (pascal) or html at all in the styling process.
A first draft of such a program :
The demo theme file contains components for buttons and images, and thus these are displayed on top.
These can be dragged onto the canvas and positioned at will. The coordinates are displayed on the right, either in absolute or relative values.
The preview icon on the canvas opens up a new live browser window.
So far so good.
The huge number of atomic css properties per visual component (280) now has been subdivided in 3 chunks :
A- those css properties to do with visual design : x (left), y (top), width and height
These are displayed on the right
B- those css properties which are part of the theme file for this component
so if for instance the theme file has a line like this: "theme01.buttons.generic.fontWeight: bold", then this will result in a modifier on the screen, where 'bold' can be changed. <to do>
C- the remainder of the 280 css properties (280 minus A minus B).
Those are either not important, have passable default values or are only seldomly important for styling of the particular component. <to do>
Using components ultimately translates into html.
Taking this example :
<img class="img" id="Component38" src="images/buttons.jpg" name="button"
style="visibility: visible; display: inline-block; position: absolute; overflow: auto;
left: 350px; top: 10px; width: 82px; height: 34px; cursor: pointer;">
Styling through css results in modifying the style attribute (.. style="visibility: etc...)
Still debating whether the other attributes should be part of the styling process.
In the demo above for instance I've assigned the 'src' attribute of images to a random unsplash picture, instead of making it directly editable. Its not a css property after all.
Demo here (alpha version)
(make all position values 'relative' prior to previewing in browser window, or you'll see a tiny version)