{"action":"created","comment":{"url":"https://api.github.com/repos/gss/gss.github.io/pulls/comments/23973726","id":23973726,"diff_hunk":"@@ -300,34 +301,144 @@\n \n {% highlight css %}\n /* VFL */\n-@horizontal [#flexibleButton(>= 70, <= 100))];\n+@h (#flexibleButton(>= 70, <= 100)));\n \n /* Equivalent CCSS */\n #flexibleButton[width] >= 70;\n #flexibleButton[width] <= 100;\n {% endhighlight %}\n \n-<img class=\"vfl-small-img\" src=\"../../assets/images/vfl/completeLayout.png\" width=\"315\" height=\"27\" alt=\"CompleteLayout\">\n+\n+## VFL Selectors\n+All previous example of VFL expressions use basic [selectors](/guides/selectors). But you can also use combinators in VFL expression\n+like this:\n \n {% highlight css %}\n-/* VFL */\n-@horizontal |-24-[#find]-[#findNext]-[#findField(>=30)]-24-| in(#popup);\n+@v | (.featured > article ~ .title) | in(#elm > .class .class2\"_fallout\")\n+{% endhighlight %}\n+\n+<a name=\"vflsplats\"></a>\n+## VFL Splat\n+When a selector in your VFL expression finds more than one element, due to [plural binding](/guides/selectors/#pluralbinding),\n+if the number of element within each selectors expression are not equal, then some elements will not be constraint.\n+<a href=\"http://codepen.io/cbchouinard/pen/vEJqbG\" target=\"_blank\">Live example.</a>\n+\n+In this example, the last two `article` elements will not be constrained since there's no `section` element to bind to.\n+As you can see in the CCSS generated constraints, the elements are pluraly binded.\n+\n+{% highlight css %}\n+\n+<section></section>\n+<article></article>\n+<article></article>\n+<article></article>\n+<footer></footer>\n+\n+<style type=\"text/gss\">\n+\n+  /* the last two articles will not be constraints because of plural binding */\n+  @h |-(section)-(article)-(footer)-| in(::window);\n+\n+  /* this generates the following CCSS */\n+  ::window[left] + [hgap] == section[left];\n+  section[right] + [hgap] == article[left]; /* plural binding */\n+  article[right] + [hgap] == footer[left]; /* plural binding */\n+  footer[right] + [hgap] == ::window[right];\n+\n+</style>\n+\n+{% endhighlight %}\n+\n+If the number of selected elements matches, the position of the elements within each collection of selected\n+elements will overlap since you're basically constraining the whole collection to the same values. <a href=\"http://codepen.io/cbchouinard/pen/yyodWx\" target=\"_blank\">Live example.</a>\n+\n+{% highlight html %}\n+\n+<section></section>\n+<section></section>\n+<section></section>\n+<article></article>\n+<article></article>\n+<article></article>\n+<footer></footer>\n+\n+<style type=\"text/gss\">\n+\n+/* the 3 sections will overlap over each other as the 3 articles. */\n+@h |-(section)-(article)-(footer)-| in(::window);\n+\n+</style>\n+\n+{% endhighlight %}\n+\n+Splats will iterate over the collection of selected elements and position elements\n+next to each other. <a href=\"http://codepen.io/cbchouinard/pen/ogerrX\" target=\"_blank\">Live example.</a>\n+\n+{% highlight css %}\n+\n+<section></section>\n+<section></section>\n+<article></article>\n+<article></article>\n+<article></article>\n+<div></div>\n+<div></div>\n+\n+<style type=\"text/gss\">\n+\n+/* elements are not 'pluraly' binded */\n+@h |-(section)-10-...-(article)-20-...-(div)...-| in(::window);\n+\n+</style>\n \n-/* Equivalent CCSS */\n-#popup[left] + 24 == #find[left];\n-#find[right] + [hgap] == #findNext[left];\n-#findField[width] >= 30;\n-#findNext[right] + [hgap] == #findField[left];\n-#findField[right] + 24 == #popup[right];\n {% endhighlight %}\n \n+In the previous example, the two `section` will be positioned next to each other with a gap of 10px. The\n+three articles will be positioned next to each other with a gap of 20px. Finally the two div will be right next to each\n+other without any gap.\n+\n+<a name=\"virtuals\"></a>\n+## Virtual with VFL\n+[Virtuals](/guides/constraints) can be created and/or positionned using VFL expressions.\n \n+You can position virtual as any other elements :\n \n-<h2>VFL Chains</h2>\n+{% highlight css %}\n \n-Chains are a powerful mechanism to take each element within an VFL alignment (excluding a containment element & points) and construct a chained constraint statement against a property of each element.  \n+/* horizontally align two virtuals with a gap of 10px between each","path":"guides/_posts/2014-01-5-vfl.html","position":441,"original_position":441,"commit_id":"6c554d06ee3c9a05a367b8cec905032a285779d5","original_commit_id":"6c554d06ee3c9a05a367b8cec905032a285779d5","user":{"login":"paulyoung","id":84700,"avatar_url":"https://avatars.githubusercontent.com/u/84700?v=3","gravatar_id":"","url":"https://api.github.com/users/paulyoung","html_url":"https://github.com/paulyoung","followers_url":"https://api.github.com/users/paulyoung/followers","following_url":"https://api.github.com/users/paulyoung/following{/other_user}","gists_url":"https://api.github.com/users/paulyoung/gists{/gist_id}","starred_url":"https://api.github.com/users/paulyoung/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/paulyoung/subscriptions","organizations_url":"https://api.github.com/users/paulyoung/orgs","repos_url":"https://api.github.com/users/paulyoung/repos","events_url":"https://api.github.com/users/paulyoung/events{/privacy}","received_events_url":"https://api.github.com/users/paulyoung/received_events","type":"User","site_admin":false},"body":"No closing `*/`","created_at":"2015-02-03T00:44:58Z","updated_at":"2015-02-03T00:44:58Z","html_url":"https://github.com/gss/gss.github.io/pull/16#discussion_r23973726","pull_request_url":"https://api.github.com/repos/gss/gss.github.io/pulls/16","_links":{"self":{"href":"https://api.github.com/repos/gss/gss.github.io/pulls/comments/23973726"},"html":{"href":"https://github.com/gss/gss.github.io/pull/16#discussion_r23973726"},"pull_request":{"href":"https://api.github.com/repos/gss/gss.github.io/pulls/16"}}},"pull_request":{"url":"https://api.github.com/repos/gss/gss.github.io/pulls/16","id":28454908,"html_url":"https://github.com/gss/gss.github.io/pull/16","diff_url":"https://github.com/gss/gss.github.io/pull/16.diff","patch_url":"https://github.com/gss/gss.github.io/pull/16.patch","issue_url":"https://api.github.com/repos/gss/gss.github.io/issues/16","number":16,"state":"open","locked":false,"title":"GSS 2.0 documentation","user":{"login":"cbchouinard","id":1385004,"avatar_url":"https://avatars.githubusercontent.com/u/1385004?v=3","gravatar_id":"","url":"https://api.github.com/users/cbchouinard","html_url":"https://github.com/cbchouinard","followers_url":"https://api.github.com/users/cbchouinard/followers","following_url":"https://api.github.com/users/cbchouinard/following{/other_user}","gists_url":"https://api.github.com/users/cbchouinard/gists{/gist_id}","starred_url":"https://api.github.com/users/cbchouinard/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cbchouinard/subscriptions","organizations_url":"https://api.github.com/users/cbchouinard/orgs","repos_url":"https://api.github.com/users/cbchouinard/repos","events_url":"https://api.github.com/users/cbchouinard/events{/privacy}","received_events_url":"https://api.github.com/users/cbchouinard/received_events","type":"User","site_admin":false},"body":"I think at this stage we have enough docs to get people up and running with GSS. \r\n\r\nI'll had more docs in the next weeks for more advance usage scenarios. I'll also add some more complete examples and tutorials. \r\n\r\nI would like to have your comments before publishing. I'll fix the merging conflicts tomorrow.\r\n\r\nThanks!","created_at":"2015-02-02T09:39:44Z","updated_at":"2015-02-03T00:44:58Z","closed_at":null,"merged_at":null,"merge_commit_sha":null,"assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/gss/gss.github.io/pulls/16/commits","review_comments_url":"https://api.github.com/repos/gss/gss.github.io/pulls/16/comments","review_comment_url":"https://api.github.com/repos/gss/gss.github.io/pulls/comments/{number}","comments_url":"https://api.github.com/repos/gss/gss.github.io/issues/16/comments","statuses_url":"https://api.github.com/repos/gss/gss.github.io/statuses/6c554d06ee3c9a05a367b8cec905032a285779d5","head":{"label":"gss:gss-documentation","ref":"gss-documentation","sha":"6c554d06ee3c9a05a367b8cec905032a285779d5","user":{"login":"gss","id":4575574,"avatar_url":"https://avatars.githubusercontent.com/u/4575574?v=3","gravatar_id":"","url":"https://api.github.com/users/gss","html_url":"https://github.com/gss","followers_url":"https://api.github.com/users/gss/followers","following_url":"https://api.github.com/users/gss/following{/other_user}","gists_url":"https://api.github.com/users/gss/gists{/gist_id}","starred_url":"https://api.github.com/users/gss/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gss/subscriptions","organizations_url":"https://api.github.com/users/gss/orgs","repos_url":"https://api.github.com/users/gss/repos","events_url":"https://api.github.com/users/gss/events{/privacy}","received_events_url":"https://api.github.com/users/gss/received_events","type":"Organization","site_admin":false},"repo":{"id":16349817,"name":"gss.github.io","full_name":"gss/gss.github.io","owner":{"login":"gss","id":4575574,"avatar_url":"https://avatars.githubusercontent.com/u/4575574?v=3","gravatar_id":"","url":"https://api.github.com/users/gss","html_url":"https://github.com/gss","followers_url":"https://api.github.com/users/gss/followers","following_url":"https://api.github.com/users/gss/following{/other_user}","gists_url":"https://api.github.com/users/gss/gists{/gist_id}","starred_url":"https://api.github.com/users/gss/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gss/subscriptions","organizations_url":"https://api.github.com/users/gss/orgs","repos_url":"https://api.github.com/users/gss/repos","events_url":"https://api.github.com/users/gss/events{/privacy}","received_events_url":"https://api.github.com/users/gss/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/gss/gss.github.io","description":"GSS website","fork":false,"url":"https://api.github.com/repos/gss/gss.github.io","forks_url":"https://api.github.com/repos/gss/gss.github.io/forks","keys_url":"https://api.github.com/repos/gss/gss.github.io/keys{/key_id}","collaborators_url":"https://api.github.com/repos/gss/gss.github.io/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/gss/gss.github.io/teams","hooks_url":"https://api.github.com/repos/gss/gss.github.io/hooks","issue_events_url":"https://api.github.com/repos/gss/gss.github.io/issues/events{/number}","events_url":"https://api.github.com/repos/gss/gss.github.io/events","assignees_url":"https://api.github.com/repos/gss/gss.github.io/assignees{/user}","branches_url":"https://api.github.com/repos/gss/gss.github.io/branches{/branch}","tags_url":"https://api.github.com/repos/gss/gss.github.io/tags","blobs_url":"https://api.github.com/repos/gss/gss.github.io/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/gss/gss.github.io/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/gss/gss.github.io/git/refs{/sha}","trees_url":"https://api.github.com/repos/gss/gss.github.io/git/trees{/sha}","statuses_url":"https://api.github.com/repos/gss/gss.github.io/statuses/{sha}","languages_url":"https://api.github.com/repos/gss/gss.github.io/languages","stargazers_url":"https://api.github.com/repos/gss/gss.github.io/stargazers","contributors_url":"https://api.github.com/repos/gss/gss.github.io/contributors","subscribers_url":"https://api.github.com/repos/gss/gss.github.io/subscribers","subscription_url":"https://api.github.com/repos/gss/gss.github.io/subscription","commits_url":"https://api.github.com/repos/gss/gss.github.io/commits{/sha}","git_commits_url":"https://api.github.com/repos/gss/gss.github.io/git/commits{/sha}","comments_url":"https://api.github.com/repos/gss/gss.github.io/comments{/number}","issue_comment_url":"https://api.github.com/repos/gss/gss.github.io/issues/comments/{number}","contents_url":"https://api.github.com/repos/gss/gss.github.io/contents/{+path}","compare_url":"https://api.github.com/repos/gss/gss.github.io/compare/{base}...{head}","merges_url":"https://api.github.com/repos/gss/gss.github.io/merges","archive_url":"https://api.github.com/repos/gss/gss.github.io/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/gss/gss.github.io/downloads","issues_url":"https://api.github.com/repos/gss/gss.github.io/issues{/number}","pulls_url":"https://api.github.com/repos/gss/gss.github.io/pulls{/number}","milestones_url":"https://api.github.com/repos/gss/gss.github.io/milestones{/number}","notifications_url":"https://api.github.com/repos/gss/gss.github.io/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/gss/gss.github.io/labels{/name}","releases_url":"https://api.github.com/repos/gss/gss.github.io/releases{/id}","created_at":"2014-01-29T16:00:06Z","updated_at":"2015-02-01T21:09:49Z","pushed_at":"2015-02-02T20:06:18Z","git_url":"git://github.com/gss/gss.github.io.git","ssh_url":"git@github.com:gss/gss.github.io.git","clone_url":"https://github.com/gss/gss.github.io.git","svn_url":"https://github.com/gss/gss.github.io","homepage":"http://gridstylesheets.org/","size":34666,"stargazers_count":63,"watchers_count":63,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":15,"mirror_url":null,"open_issues_count":2,"forks":15,"open_issues":2,"watchers":63,"default_branch":"master"}},"base":{"label":"gss:master","ref":"master","sha":"3ac2b12bbae1f554aedfbc6d68f9a6d5184da132","user":{"login":"gss","id":4575574,"avatar_url":"https://avatars.githubusercontent.com/u/4575574?v=3","gravatar_id":"","url":"https://api.github.com/users/gss","html_url":"https://github.com/gss","followers_url":"https://api.github.com/users/gss/followers","following_url":"https://api.github.com/users/gss/following{/other_user}","gists_url":"https://api.github.com/users/gss/gists{/gist_id}","starred_url":"https://api.github.com/users/gss/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gss/subscriptions","organizations_url":"https://api.github.com/users/gss/orgs","repos_url":"https://api.github.com/users/gss/repos","events_url":"https://api.github.com/users/gss/events{/privacy}","received_events_url":"https://api.github.com/users/gss/received_events","type":"Organization","site_admin":false},"repo":{"id":16349817,"name":"gss.github.io","full_name":"gss/gss.github.io","owner":{"login":"gss","id":4575574,"avatar_url":"https://avatars.githubusercontent.com/u/4575574?v=3","gravatar_id":"","url":"https://api.github.com/users/gss","html_url":"https://github.com/gss","followers_url":"https://api.github.com/users/gss/followers","following_url":"https://api.github.com/users/gss/following{/other_user}","gists_url":"https://api.github.com/users/gss/gists{/gist_id}","starred_url":"https://api.github.com/users/gss/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gss/subscriptions","organizations_url":"https://api.github.com/users/gss/orgs","repos_url":"https://api.github.com/users/gss/repos","events_url":"https://api.github.com/users/gss/events{/privacy}","received_events_url":"https://api.github.com/users/gss/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/gss/gss.github.io","description":"GSS website","fork":false,"url":"https://api.github.com/repos/gss/gss.github.io","forks_url":"https://api.github.com/repos/gss/gss.github.io/forks","keys_url":"https://api.github.com/repos/gss/gss.github.io/keys{/key_id}","collaborators_url":"https://api.github.com/repos/gss/gss.github.io/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/gss/gss.github.io/teams","hooks_url":"https://api.github.com/repos/gss/gss.github.io/hooks","issue_events_url":"https://api.github.com/repos/gss/gss.github.io/issues/events{/number}","events_url":"https://api.github.com/repos/gss/gss.github.io/events","assignees_url":"https://api.github.com/repos/gss/gss.github.io/assignees{/user}","branches_url":"https://api.github.com/repos/gss/gss.github.io/branches{/branch}","tags_url":"https://api.github.com/repos/gss/gss.github.io/tags","blobs_url":"https://api.github.com/repos/gss/gss.github.io/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/gss/gss.github.io/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/gss/gss.github.io/git/refs{/sha}","trees_url":"https://api.github.com/repos/gss/gss.github.io/git/trees{/sha}","statuses_url":"https://api.github.com/repos/gss/gss.github.io/statuses/{sha}","languages_url":"https://api.github.com/repos/gss/gss.github.io/languages","stargazers_url":"https://api.github.com/repos/gss/gss.github.io/stargazers","contributors_url":"https://api.github.com/repos/gss/gss.github.io/contributors","subscribers_url":"https://api.github.com/repos/gss/gss.github.io/subscribers","subscription_url":"https://api.github.com/repos/gss/gss.github.io/subscription","commits_url":"https://api.github.com/repos/gss/gss.github.io/commits{/sha}","git_commits_url":"https://api.github.com/repos/gss/gss.github.io/git/commits{/sha}","comments_url":"https://api.github.com/repos/gss/gss.github.io/comments{/number}","issue_comment_url":"https://api.github.com/repos/gss/gss.github.io/issues/comments/{number}","contents_url":"https://api.github.com/repos/gss/gss.github.io/contents/{+path}","compare_url":"https://api.github.com/repos/gss/gss.github.io/compare/{base}...{head}","merges_url":"https://api.github.com/repos/gss/gss.github.io/merges","archive_url":"https://api.github.com/repos/gss/gss.github.io/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/gss/gss.github.io/downloads","issues_url":"https://api.github.com/repos/gss/gss.github.io/issues{/number}","pulls_url":"https://api.github.com/repos/gss/gss.github.io/pulls{/number}","milestones_url":"https://api.github.com/repos/gss/gss.github.io/milestones{/number}","notifications_url":"https://api.github.com/repos/gss/gss.github.io/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/gss/gss.github.io/labels{/name}","releases_url":"https://api.github.com/repos/gss/gss.github.io/releases{/id}","created_at":"2014-01-29T16:00:06Z","updated_at":"2015-02-01T21:09:49Z","pushed_at":"2015-02-02T20:06:18Z","git_url":"git://github.com/gss/gss.github.io.git","ssh_url":"git@github.com:gss/gss.github.io.git","clone_url":"https://github.com/gss/gss.github.io.git","svn_url":"https://github.com/gss/gss.github.io","homepage":"http://gridstylesheets.org/","size":34666,"stargazers_count":63,"watchers_count":63,"language":"CSS","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":15,"mirror_url":null,"open_issues_count":2,"forks":15,"open_issues":2,"watchers":63,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/gss/gss.github.io/pulls/16"},"html":{"href":"https://github.com/gss/gss.github.io/pull/16"},"issue":{"href":"https://api.github.com/repos/gss/gss.github.io/issues/16"},"comments":{"href":"https://api.github.com/repos/gss/gss.github.io/issues/16/comments"},"review_comments":{"href":"https://api.github.com/repos/gss/gss.github.io/pulls/16/comments"},"review_comment":{"href":"https://api.github.com/repos/gss/gss.github.io/pulls/comments/{number}"},"commits":{"href":"https://api.github.com/repos/gss/gss.github.io/pulls/16/commits"},"statuses":{"href":"https://api.github.com/repos/gss/gss.github.io/statuses/6c554d06ee3c9a05a367b8cec905032a285779d5"}}}}