[{"__symbolic":"module","version":3,"metadata":{"SkyFluidGridDemoComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-fluid-grid-demo","template":"<div class=\"highlight-columns\">\n  <sky-row>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"2\">\n      small=\"2\"\n    </sky-column>\n    <sky-column screenSmall=\"2\">\n      small=\"2\"\n    </sky-column>\n    <sky-column screenSmall=\"2\">\n      small=\"2\"\n    </sky-column>\n    <sky-column screenSmall=\"2\">\n      small=\"2\"\n    </sky-column>\n    <sky-column screenSmall=\"2\">\n      small=\"2\"\n    </sky-column>\n    <sky-column screenSmall=\"2\">\n      small=\"2\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"3\">\n      small=\"3\"\n    </sky-column>\n    <sky-column screenSmall=\"3\">\n      small=\"3\"\n    </sky-column>\n    <sky-column screenSmall=\"3\">\n      small=\"3\"\n    </sky-column>\n    <sky-column screenSmall=\"3\">\n      small=\"3\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"4\">\n      small=\"4\"\n    </sky-column>\n    <sky-column screenSmall=\"4\">\n      small=\"4\"\n    </sky-column>\n    <sky-column screenSmall=\"4\">\n      small=\"4\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"5\">\n      small=\"5\"\n    </sky-column>\n    <sky-column screenSmall=\"7\">\n      small=\"7\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"6\">\n      small=\"6\"\n    </sky-column>\n    <sky-column screenSmall=\"6\">\n      small=\"6\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"8\">\n      small=\"8\"\n    </sky-column>\n    <sky-column screenSmall=\"4\">\n      small=\"4\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"9\">\n      small=\"9\"\n    </sky-column>\n    <sky-column screenSmall=\"3\">\n      small=\"3\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"10\">\n      small=\"10\"\n    </sky-column>\n    <sky-column screenSmall=\"2\">\n      small=\"2\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"11\">\n      small=\"11\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenXSmall=\"6\" screenSmall=\"8\" screenMedium=\"9\" screenLarge=\"10\">\n        screenXSmall=\"6\" small=\"8\" medium=\"9\" large=\"10\"\n    </sky-column>\n    <sky-column screenXSmall=\"6\" screenSmall=\"4\" screenMedium=\"3\" screenLarge=\"2\">\n        screenXSmall=\"6\" small=\"4\" medium=\"3\" large=\"2\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row [reverseColumnOrder]=\"true\">\n    <sky-column screenSmall=\"4\">\n      First column\n    </sky-column>\n    <sky-column screenSmall=\"4\">\n      Second column\n    </sky-column>\n    <sky-column screenSmall=\"4\">\n      Third column\n    </sky-column>\n  </sky-row>\n</div>\n","styles":["\n  .highlight-columns .sky-column {\n    background-color: #97eced;\n    border: 1px solid #56e0e1;\n    overflow-wrap: break-word;\n  }\n  "]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"SkyFluidGridDemoComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-fluid-grid-demo","template":"<div class=\"highlight-columns\">\n  <sky-row>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"2\">\n      small=\"2\"\n    </sky-column>\n    <sky-column screenSmall=\"2\">\n      small=\"2\"\n    </sky-column>\n    <sky-column screenSmall=\"2\">\n      small=\"2\"\n    </sky-column>\n    <sky-column screenSmall=\"2\">\n      small=\"2\"\n    </sky-column>\n    <sky-column screenSmall=\"2\">\n      small=\"2\"\n    </sky-column>\n    <sky-column screenSmall=\"2\">\n      small=\"2\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"3\">\n      small=\"3\"\n    </sky-column>\n    <sky-column screenSmall=\"3\">\n      small=\"3\"\n    </sky-column>\n    <sky-column screenSmall=\"3\">\n      small=\"3\"\n    </sky-column>\n    <sky-column screenSmall=\"3\">\n      small=\"3\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"4\">\n      small=\"4\"\n    </sky-column>\n    <sky-column screenSmall=\"4\">\n      small=\"4\"\n    </sky-column>\n    <sky-column screenSmall=\"4\">\n      small=\"4\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"5\">\n      small=\"5\"\n    </sky-column>\n    <sky-column screenSmall=\"7\">\n      small=\"7\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"6\">\n      small=\"6\"\n    </sky-column>\n    <sky-column screenSmall=\"6\">\n      small=\"6\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"8\">\n      small=\"8\"\n    </sky-column>\n    <sky-column screenSmall=\"4\">\n      small=\"4\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"9\">\n      small=\"9\"\n    </sky-column>\n    <sky-column screenSmall=\"3\">\n      small=\"3\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"10\">\n      small=\"10\"\n    </sky-column>\n    <sky-column screenSmall=\"2\">\n      small=\"2\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenSmall=\"11\">\n      small=\"11\"\n    </sky-column>\n    <sky-column screenSmall=\"1\">\n      small=\"1\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row>\n    <sky-column screenXSmall=\"6\" screenSmall=\"8\" screenMedium=\"9\" screenLarge=\"10\">\n        screenXSmall=\"6\" small=\"8\" medium=\"9\" large=\"10\"\n    </sky-column>\n    <sky-column screenXSmall=\"6\" screenSmall=\"4\" screenMedium=\"3\" screenLarge=\"2\">\n        screenXSmall=\"6\" small=\"4\" medium=\"3\" large=\"2\"\n    </sky-column>\n  </sky-row>\n\n  <sky-row [reverseColumnOrder]=\"true\">\n    <sky-column screenSmall=\"4\">\n      First column\n    </sky-column>\n    <sky-column screenSmall=\"4\">\n      Second column\n    </sky-column>\n    <sky-column screenSmall=\"4\">\n      Third column\n    </sky-column>\n  </sky-row>\n</div>\n","styles":["\n  .highlight-columns .sky-column {\n    background-color: #97eced;\n    border: 1px solid #56e0e1;\n    overflow-wrap: break-word;\n  }\n  "]}]}]}}}]