Inline Styles

[ccorcos]

How hard would it be to translate GSS on the fly and translate them into inline styles for use with React?

Does GSS absolutely position everything and rerun anytime the window is resized?

[jamesdarvell]

From my experience, GSS listens for DOM changes and recalculates the layout when elements are added or removed. So when a React changes the DOM after an update, GSS would notice the change and recalculate the layout.

GSS does apply inline styles to each element in the layout. It uses absolute positioning. Specifically, it sets the top, left, width and height properties.

And yes, it does rerun whenever the window is resized.

It should be pretty easy to throw together a little demo on Codepen to see how they work together - and you can use Dev Tools to see what's going on in the DOM.

By the way, I'm not a contributor to this project, so if anyone who knows better wants to chime in, be my guest.

[ccorcos]

I see. Thanks for the reply.

My goal is more along the lines of compiling the GSS styles in the react render function so I can perform animations by adjusting the constraints and applying the inline styles myself...

On Dec 28, 2015, at 18:29, jamesdarvell [email protected] wrote:

From my experience, GSS listens for DOM changes and recalculates the layout when elements are added or removed. So when a React changes the DOM after an update, GSS would notice the change and recalculate the layout.

GSS does apply inline styles to each element in the layout. It uses absolute positioning. Specifically, it sets the top, left, width and height properties.

And yes, it does rerun whenever the window is resized.

It should be pretty easy to throw together a little demo on Codepen to see how they work together - and you can use Dev Tools to see what's going on in the DOM.

By the way, I'm not a contributor to this project, so if anyone who knows better wants to chime in, be my guest.

—
Reply to this email directly or view it on GitHub.

[jamesdarvell]

"Suggested variables" are the best solution if you want to change a number within a constraint. So, if you wanted to change div[width] == 20 to div[width] == 40, you could use a suggested variable for the width like this:

div[width] == $w

You can pass GSS the value for w in your code through 2 functions. The first is the constructor (var engine = new GSS(document, {w:20});). The suggested variable is passed in as a key-value pair on a plain Javascript object.

You can change the variable value later by calling engine.solve({w: 40}). You could insert this code into one of the lifecycle methods of your react component. So the code could look like this:

componentDidUpdate : function(){
  engine.solve({w: this.state.w})
}

Would that be appropriate for what you're trying to achieve?

[ccorcos]

Not quite, I was hoping to get a JSON object back describing the inline styles for that element. That way, I could use something like react-tween-state to animate to that value.