So I stumbled upon GSS after being frustrated while trying to do seemingly simple things in CSS again (-_-)
What is it?
It is an alternative to CSS which uses javascript for its implementation. It completely replaces browser's layout engine when you use it.
The way you define layout using GSS is interesting, in that it's fundamentally different. You see, instead of assigning properties and variables, you define "constraints" (or "relationships") between them.
So for example take a look at this javascript code:
var x = 10;
var y = x;
x += 10;
console.log(y); // outputs 10Because we copy the value of x into y, when we change x, y doesn't change. That's cool and useful in it's own way.
Now let's look at this GSS code:
// GSS
var_x == 10;
var_y == var_x;
var_x == ...... and actually we can't change x, because it's a math variable and that expression above is equivalent to x = y = 10 in your usual math notation. Normal imperative code such as x = x + 10 doesn't make any sense as a math equation, because it's unsolvable. x can't be equal to x + 10, duh.
Let's look at a better example:
// GSS
var_x == var_y;
var_x == #elem[width] / 2;
// #elem is a normal css-like selector
// and [width] is how you get properties from elements in GSSSo what do you think y equals to in this case?
It equals to #elem's width divided by 2!
Wait, what? But you didn't even define the variable!
Yes and no, I defined a constraint, which said that var_y should be equal to var_x. After that I defined another constraint to the value of var_x, which made it equated it to the width of #elem divided by two.
But how?
As you saw earlier, you can define multiple constraints for a single variable or element's property, and GSS tries to solve them all as a system of linear equations. This means that this system is constrained (get it? ok, i'll leave forever now...) to having equations of type y = mx + b. So basically you can do anything you want except multiply or divide one property by another or itself, which stops it being linear.
GSS uses "Cassowary JS" for it's constraint solving, which is based on a Cassowary algorithm for solving systems of constraints. What's cool about this algorithm is the fact it was optimized specifically for this task and you can expect great performance. Also Apple uses it pretty much for all their UI layouts since OS X Mountain Lion and iOS 6, they call it the "Auto Layout".
More
There's way more to it than I've shown, check out these links:
- GSS Documentation (definitely check out that)
- GSS "Hello, World!" Tutorial (get started quickly)
- Apple's Auto Layout Documentation (Auto Layout is different, but core principles and algorithms under the hood are the same, also a good read)
You can also find a bunch of tutorials on Apple's Auto Layout which go into best practices when building interfaces using constraints.
P.S.
Thanks for reading this wall of text! Let's make GSS more popular, it's really awesome imo!