GSS Hangs using VFL

I had "mostly working layout". I've tried to convert it (slowly) to VFL, but I'm finding just using one VFL statement is causing the browser (Firefox, Safari & Chrome to hang).

The HTML file and the .GSS file are below.

---spike.html----

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/gss" href="spike.gss"/>

</head>
<body>
    <script src="https://s3-us-west-2.amazonaws.com/cdn.thegrid.io/gss/v2.0.0/v2.0.0/gss.js"></script>
    <script type="text/javascript">window.engine = new GSS(document, {"players": 3, "handSize": 5})</script>
    <div id="handArea">

        <div id="hand_1" class="hand">
            <div class="card">
            </div>
            <div class="card">
            </div>
            <div class="card">
            </div>
            <div class="card">

            </div>
        </div>
        <div id="hand_2" class="hand">
            <div class="card">
            </div>
            <div class="card">
            </div>
            <div class="card">
            </div>
            <div class="card">
            </div>
        </div>
    </div>
</body>
</html>

spike.gss

#handArea {
    top: == 30;
    width: == .hand[width];
    bottom: == .hand:last[bottom] + 20;
    left: == 20;
}


#handArea {
    background-color: #aaffaa;
    border: solid 3px red;
}

.hand {
    bottom: == .card[bottom];
}

.card {
    width: >= 100;
    width: <= 150;
    height: == &[width] * 1.4;
    background-color: #aaaaaa;
    border: solid 2px black;
}

@h |(.hand .card)...| in(.hand) gap(30);

@dcorbin

@dcorbin I took the liberty of formatting your comment so that it displays properly in GitHub.

I created a CodePen using that same markup and GSS, and it doesn't hang.

Can you confirm that you're still having issues? If so it might be something to do with loading external stylesheets (in the CodePen I'm using a style tag).

I also forked that original CodePen and tried as best as I could to port everything to VFL (bearing in mind that I'm not sure what your intentions are here).

You can find that here.

Nope. It still hangs.

What I want to do is have 2 rows of 4 (much like the structure of the .html is). Well, in the long run, those numbers aren't fixed, but for that spike that was the goal. Logically, a .hand is one "view element". I want to write rules that describe the children of .hand relative to .hand. And then have other rules that describe the relationship of .hands (and other elements). Essentially modeling a "rich" UI where you have a classes representing different views in a hierarchy.

I just updated the second CodePen to display 2 rows.

Navigation Menu

Repository navigation

GSS Hangs using VFL #182

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

GSS Hangs using VFL #182

Description

Activity

paulyoung commented on Apr 20, 2015

dcorbin commented on Apr 20, 2015

paulyoung commented on Apr 20, 2015

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions