Engine In Action

Stas Lisetsky  —  1 week, 6 days ago [Edited 13 minutes later]

Just a quick update. Working on the css engine. Actually it is rather an interpretation of the css spec, than implementation.
I wrote the first version of it long ago. And now when I have UI working, most interaction logic is there, the tree manipulations work etc. - it takes very littele to make huge things work. It's like magic. 'Oh, I want this and that feature', and boom - it works.

This is what I'm working on now. This is a next mini-project that is used to test the features we want + will be used to show off these features once I'm done with it. And the project is - we want a video of making Cascade site with Cascade.

I made a quick recording of how the engine works now. Please nevermind the horrible state of the UI, it does what it has to do for now, but I did not do a beauty-pass yet. Plus text fields occasionally... and it's not a shader bug on the picker - just gif artifacts... anyways. The video.

Now just to decipher what's going on in there:

We add a text box. And then we remove the icons from the tree - the size parameter (box shrinks to contents size), postioning parameters (box stops being 'absolutely' positioned and becomes a part of the 'inline flow'. Then we remove the color.
We rename the dev to "a" - it's a link now.
Then we go to it's properties and add margin-right of 20px
Then see how the positioning parameter re-appeared in the tree? It now has this margin parameter. We take it and put it ito a new class that we call "menu-item". The tag name in the tree is just a text box. You can type as many classes as you want and the objects on the canvas will instantaneously update according to whatever rules there are in those classes.
Now we duplicate the link, and we go to the styles window again - we now can select the menu-item class. And when we edit the class's margin-right, it affects all the links with the class.

So yeah, pretty basic stuff, but I love-love-love this feeling where systems you wrote start to come together. And wait until you see the whole demo - it's going to be cool (I hope). See ya next time!
Log in to comment