royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] branch develop updated: jewel CSS based layout classes. mostly working, but still need to see final shape of some things in the works: * New GridLayout and GridCellLayout and its components (Grid and GridCell) * Responsive CSS Layout for Grid * VerticalLayout and HorizontalLayout refactor to *only CSS* * HGroup and VGroup for Jewel updated to CSS layouts * Updated Jewel Example to use this changes (still need some refactor on blog examples)
Date Mon, 18 Jun 2018 23:23:24 GMT
This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new c1e88f5  jewel CSS based layout classes. mostly working, but still need to see final shape of some things in the works: * New GridLayout and GridCellLayout and its components (Grid and GridCell) * Responsive CSS Layout for Grid * VerticalLayout and HorizontalLayout refactor to *only CSS* * HGroup and VGroup for Jewel updated to CSS layouts * Updated Jewel Example to use this changes (still need some refactor on blog examples)
c1e88f5 is described below

commit c1e88f54b55a72ac9bd868633309cd8c96fd8c0e
Author: Carlos Rovira <carlosrovira@apache.org>
AuthorDate: Tue Jun 19 01:23:19 2018 +0200

    jewel CSS based layout classes. mostly working, but still need to see final shape of some things in the works:
    * New GridLayout and GridCellLayout and its components (Grid and GridCell)
    * Responsive CSS Layout for Grid
    * VerticalLayout and HorizontalLayout refactor to *only CSS*
    * HGroup and VGroup for Jewel updated to CSS layouts
    * Updated Jewel Example to use this changes (still need some refactor on blog examples)
---
 .../src/main/resources/jewel-example-styles.css    |    4 +-
 .../royale/JewelExample/src/main/royale/App.mxml   |    2 +-
 .../src/main/royale/DropDownListPlayGround.mxml    |    2 +-
 .../JewelExample/src/main/royale/MainContent.mxml  |   38 +-
 .../src/main/royale/TextInputPlayGround.mxml       |    4 +-
 .../projects/Jewel/src/main/resources/defaults.css | 2093 +++++++++++++++++++-
 .../Jewel/src/main/resources/jewel-manifest.xml    |    3 +-
 .../main/royale/org/apache/royale/jewel/Card.as    |   63 +-
 .../main/royale/org/apache/royale/jewel/Cell.as    |   51 -
 .../main/royale/org/apache/royale/jewel/Grid.as    |   37 +-
 .../royale/org/apache/royale/jewel/GridCell.as     |  268 +++
 .../main/royale/org/apache/royale/jewel/Group.as   |   24 +
 .../main/royale/org/apache/royale/jewel/HGroup.as  |   59 +
 .../main/royale/org/apache/royale/jewel/VGroup.as  |   59 +
 .../royale/jewel/beads/layouts/BasicLayout.as      |   21 +-
 .../royale/jewel/beads/layouts/GridCellLayout.as   |  426 ++++
 .../royale/jewel/beads/layouts/GridLayout.as       |   84 +-
 .../royale/jewel/beads/layouts/HorizontalLayout.as |  165 +-
 .../jewel/beads/layouts/SimpleHorizontalLayout.as  |   26 +-
 .../jewel/beads/layouts/SimpleVerticalLayout.as    |   23 +-
 .../royale/jewel/beads/layouts/VerticalLayout.as   |  212 +-
 .../projects/Jewel/src/main/sass/_global.sass      |    2 +-
 .../Jewel/src/main/sass/components/_layout.sass    |   90 +-
 .../JewelTheme/src/main/resources/defaults.css     |    6 +-
 .../themes/JewelTheme/src/main/sass/_global.sass   |    4 +-
 .../src/main/sass/components-primary/_card.sass    |    2 +-
 26 files changed, 3416 insertions(+), 352 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
index f9a01eb..2c23b0e 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
@@ -21,4 +21,6 @@
 
 @namespace "http://www.w3.org/1999/xhtml";
 
-	
\ No newline at end of file
+.royale {
+    padding: 20px;
+}
\ No newline at end of file
diff --git a/examples/royale/JewelExample/src/main/royale/App.mxml b/examples/royale/JewelExample/src/main/royale/App.mxml
index c318cb1..7b6b8aa 100644
--- a/examples/royale/JewelExample/src/main/royale/App.mxml
+++ b/examples/royale/JewelExample/src/main/royale/App.mxml
@@ -32,7 +32,7 @@
 	<j:initialView>
 		<j:View>
 			<j:beads>
-				<j:VerticalLayout gap="10"/>
+				<j:VerticalLayout gap="3"/>
 			</j:beads>
 			<html:H1 text="Apache Royale Jewel UI Set Theme Showcase"/>
 			<local:MainContent/>
diff --git a/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
index 08f5b75..8377576 100644
--- a/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/DropDownListPlayGround.mxml
@@ -40,7 +40,7 @@ limitations under the License.
 	</fx:Script>
 
 	<j:beads>
-		<j:HorizontalLayout gap="10"/>
+		<j:HorizontalLayout gap="3"/>
 		<js:ViewDataBinding />
 	</j:beads>
 	
diff --git a/examples/royale/JewelExample/src/main/royale/MainContent.mxml b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
index 2d71575..5e2e9f8 100644
--- a/examples/royale/JewelExample/src/main/royale/MainContent.mxml
+++ b/examples/royale/JewelExample/src/main/royale/MainContent.mxml
@@ -17,46 +17,30 @@ See the License for the specific language governing permissions and
 limitations under the License.
 
 -->
-<j:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
+<j:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:j="library://ns.apache.org/royale/jewel"
-         xmlns:local="*">
+         xmlns:local="*" gap="3">
     
-    <j:beads>
-        <j:HorizontalLayout gap="10"/>
-    </j:beads>
-
-    <j:Group>
-        <j:beads>
-            <j:VerticalLayout gap="10"/>
-        </j:beads>
+    <j:VGroup gap="3">
         <local:LabelPlayGround/>
         <local:ButtonPlayGround/>
-    </j:Group>
+    </j:VGroup>
 
-     <j:Group>
-        <j:beads>
-            <j:VerticalLayout gap="10"/>
-        </j:beads>
+     <j:VGroup gap="3">
         <local:TextInputPlayGround/>
         <local:CheckBoxPlayGround/>
         <local:RadioButtonPlayGround/>
-    </j:Group>
+    </j:VGroup>
 
-    <j:Group>
-        <j:beads>
-            <j:VerticalLayout gap="10"/>
-        </j:beads>
+    <j:VGroup gap="3">
         <local:SliderPlayGround/>
         <local:ListPlayGround/>
-    </j:Group>
+    </j:VGroup>
     
-    <j:Group>
-        <j:beads>
-            <j:VerticalLayout gap="10"/>
-        </j:beads>
+    <j:VGroup gap="3">
         <local:AlertPlayGround/>
         <local:HeadingsAndText/>
         <local:DropDownListPlayGround/>
-    </j:Group>
+    </j:VGroup>
     
-</j:Group>
+</j:HGroup>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
index 2d64568..3284130 100644
--- a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -26,7 +26,7 @@ limitations under the License.
 
 	<j:Group>
 		<j:beads>
-			<j:HorizontalLayout gap="10"/>
+			<j:HorizontalLayout gap="3"/>
 		</j:beads>
 		<j:Button text="Check it!" emphasis="primary"/>
 		<j:TextInput text="A TextInput"/>
@@ -34,7 +34,7 @@ limitations under the License.
 
 	<j:Group>
 		<j:beads>
-			<j:HorizontalLayout gap="10"/>
+			<j:HorizontalLayout gap="3"/>
 		</j:beads>
 		<j:TextInput>
 			<j:beads>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 7ad6402..0bca95d 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -34,6 +34,7 @@ button, input, textarea {
 
 j|View {
   IBeadView: ClassReference("org.apache.royale.core.beads.GroupView");
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout");
 }
 
 j|Group {
@@ -240,15 +241,13 @@ j|Label {
 }
 
 /* Absolute */
-.layout.absolute {
-  position: relative;
-}
 .layout.absolute > * {
   position: absolute;
 }
 
 .layout {
   display: flex;
+  position: relative;
 }
 
 /* Horizontal */
@@ -256,143 +255,2043 @@ j|Label {
   flex-flow: row nowrap;
   align-items: flex-start;
 }
-
-/* Vertical */
-.layout.vertical {
-  flex-flow: column nowrap;
-  align-items: flex-start;
+.layout.horizontal.gap-1x3px > *:first-child {
+  margin: 0px;
 }
-
-.layout.horizontal.space {
-  justify-content: space-between;
+.layout.horizontal.gap-1x3px > * {
+  margin: 0px 0px 0px 3px;
 }
-
-/* Grid */
-.layout.grid {
-  flex-wrap: wrap;
+.layout.horizontal.gap-2x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid > * {
-  flex: 1;
+.layout.horizontal.gap-2x3px > * {
+  margin: 0px 0px 0px 6px;
 }
-.layout.grid.gap-1dp {
-  margin: -1em 0 1em -1em;
+.layout.horizontal.gap-3x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid.gap-1dp > * {
-  padding: 1em 0 0 1em;
+.layout.horizontal.gap-3x3px > * {
+  margin: 0px 0px 0px 9px;
 }
-.layout.grid.gap-2dp {
-  margin: -2em 0 2em -2em;
+.layout.horizontal.gap-4x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid.gap-2dp > * {
-  padding: 2em 0 0 2em;
+.layout.horizontal.gap-4x3px > * {
+  margin: 0px 0px 0px 12px;
 }
-.layout.grid.gap-3dp {
-  margin: -3em 0 3em -3em;
+.layout.horizontal.gap-5x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid.gap-3dp > * {
-  padding: 3em 0 0 3em;
+.layout.horizontal.gap-5x3px > * {
+  margin: 0px 0px 0px 15px;
 }
-.layout.grid.gap-4dp {
-  margin: -4em 0 4em -4em;
+.layout.horizontal.gap-6x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid.gap-4dp > * {
-  padding: 4em 0 0 4em;
+.layout.horizontal.gap-6x3px > * {
+  margin: 0px 0px 0px 18px;
 }
-.layout.grid.gap-5dp {
-  margin: -5em 0 5em -5em;
+.layout.horizontal.gap-7x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid.gap-5dp > * {
-  padding: 5em 0 0 5em;
+.layout.horizontal.gap-7x3px > * {
+  margin: 0px 0px 0px 21px;
 }
-.layout.grid.gap-6dp {
-  margin: -6em 0 6em -6em;
+.layout.horizontal.gap-8x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid.gap-6dp > * {
-  padding: 6em 0 0 6em;
+.layout.horizontal.gap-8x3px > * {
+  margin: 0px 0px 0px 24px;
 }
-.layout.grid.gap-7dp {
-  margin: -7em 0 7em -7em;
+.layout.horizontal.gap-9x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid.gap-7dp > * {
-  padding: 7em 0 0 7em;
+.layout.horizontal.gap-9x3px > * {
+  margin: 0px 0px 0px 27px;
 }
-.layout.grid.gap-8dp {
-  margin: -8em 0 8em -8em;
+.layout.horizontal.gap-10x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid.gap-8dp > * {
-  padding: 8em 0 0 8em;
+.layout.horizontal.gap-10x3px > * {
+  margin: 0px 0px 0px 30px;
 }
-.layout.grid.gap-9dp {
-  margin: -9em 0 9em -9em;
+
+/* Vertical */
+.layout.vertical {
+  flex-flow: column nowrap;
+  align-items: flex-start;
+}
+.layout.vertical.gap-1x3px > *:first-child {
+  margin: 0px;
+}
+.layout.vertical.gap-1x3px > * {
+  margin: 3px 0px 0px;
+}
+.layout.vertical.gap-2x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid.gap-9dp > * {
-  padding: 9em 0 0 9em;
+.layout.vertical.gap-2x3px > * {
+  margin: 6px 0px 0px;
 }
-.layout.grid.gap-10dp {
-  margin: -10em 0 10em -10em;
+.layout.vertical.gap-3x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid.gap-10dp > * {
-  padding: 10em 0 0 10em;
+.layout.vertical.gap-3x3px > * {
+  margin: 9px 0px 0px;
 }
-.layout.grid.gap-11dp {
-  margin: -11em 0 11em -11em;
+.layout.vertical.gap-4x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid.gap-11dp > * {
-  padding: 11em 0 0 11em;
+.layout.vertical.gap-4x3px > * {
+  margin: 12px 0px 0px;
 }
-.layout.grid.gap-12dp {
-  margin: -12em 0 12em -12em;
+.layout.vertical.gap-5x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid.gap-12dp > * {
-  padding: 12em 0 0 12em;
+.layout.vertical.gap-5x3px > * {
+  margin: 15px 0px 0px;
 }
-.layout.grid.gap-13dp {
-  margin: -13em 0 13em -13em;
+.layout.vertical.gap-6x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid.gap-13dp > * {
-  padding: 13em 0 0 13em;
+.layout.vertical.gap-6x3px > * {
+  margin: 18px 0px 0px;
 }
-.layout.grid.gap-14dp {
-  margin: -14em 0 14em -14em;
+.layout.vertical.gap-7x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid.gap-14dp > * {
-  padding: 14em 0 0 14em;
+.layout.vertical.gap-7x3px > * {
+  margin: 21px 0px 0px;
 }
-.layout.grid.gap-15dp {
-  margin: -15em 0 15em -15em;
+.layout.vertical.gap-8x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid.gap-15dp > * {
-  padding: 15em 0 0 15em;
+.layout.vertical.gap-8x3px > * {
+  margin: 24px 0px 0px;
 }
-.layout.grid.gap-16dp {
-  margin: -16em 0 16em -16em;
+.layout.vertical.gap-9x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid.gap-16dp > * {
-  padding: 16em 0 0 16em;
+.layout.vertical.gap-9x3px > * {
+  margin: 27px 0px 0px;
 }
-.layout.grid.gap-17dp {
-  margin: -17em 0 17em -17em;
+.layout.vertical.gap-10x3px > *:first-child {
+  margin: 0px;
 }
-.layout.grid.gap-17dp > * {
-  padding: 17em 0 0 17em;
+.layout.vertical.gap-10x3px > * {
+  margin: 30px 0px 0px;
+}
+
+/* Vertical */
+.layout.tile {
+  flex-flow: row wrap;
+  align-items: flex-start;
+}
+
+.layout.horizontal.space {
+  justify-content: space-between;
 }
-.layout.grid.gap-18dp {
-  margin: -18em 0 18em -18em;
+
+/* Grid */
+.layout.grid {
+  flex-flow: row wrap;
+  align-items: stretch;
+  width: 100%;
 }
-.layout.grid.gap-18dp > * {
-  padding: 18em 0 0 18em;
+.layout.grid > * {
+  max-width: 100%;
+  width: 100%;
 }
-.layout.grid.gap-19dp {
-  margin: -19em 0 19em -19em;
+.layout.grid.gap > .cell {
+  margin: 5px;
 }
-.layout.grid.gap-19dp > * {
-  padding: 19em 0 0 19em;
+@media (min-width: 0px) {
+  .layout.grid.gap .phone-col-1-1 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .phone-col-1-2 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .phone-col-2-2 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .phone-col-1-3 {
+    width: calc(33.3333333333% - 10px);
+  }
+  .layout.grid.gap .phone-col-2-3 {
+    width: calc(66.6666666667% - 10px);
+  }
+  .layout.grid.gap .phone-col-3-3 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .phone-col-1-4 {
+    width: calc(25% - 10px);
+  }
+  .layout.grid.gap .phone-col-2-4 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .phone-col-3-4 {
+    width: calc(75% - 10px);
+  }
+  .layout.grid.gap .phone-col-4-4 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .phone-col-1-5 {
+    width: calc(20% - 10px);
+  }
+  .layout.grid.gap .phone-col-2-5 {
+    width: calc(40% - 10px);
+  }
+  .layout.grid.gap .phone-col-3-5 {
+    width: calc(60% - 10px);
+  }
+  .layout.grid.gap .phone-col-4-5 {
+    width: calc(80% - 10px);
+  }
+  .layout.grid.gap .phone-col-5-5 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .phone-col-1-6 {
+    width: calc(16.6666666667% - 10px);
+  }
+  .layout.grid.gap .phone-col-2-6 {
+    width: calc(33.3333333333% - 10px);
+  }
+  .layout.grid.gap .phone-col-3-6 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .phone-col-4-6 {
+    width: calc(66.6666666667% - 10px);
+  }
+  .layout.grid.gap .phone-col-5-6 {
+    width: calc(83.3333333333% - 10px);
+  }
+  .layout.grid.gap .phone-col-6-6 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .phone-col-1-7 {
+    width: calc(14.2857142857% - 10px);
+  }
+  .layout.grid.gap .phone-col-2-7 {
+    width: calc(28.5714285714% - 10px);
+  }
+  .layout.grid.gap .phone-col-3-7 {
+    width: calc(42.8571428571% - 10px);
+  }
+  .layout.grid.gap .phone-col-4-7 {
+    width: calc(57.1428571429% - 10px);
+  }
+  .layout.grid.gap .phone-col-5-7 {
+    width: calc(71.4285714286% - 10px);
+  }
+  .layout.grid.gap .phone-col-6-7 {
+    width: calc(85.7142857143% - 10px);
+  }
+  .layout.grid.gap .phone-col-7-7 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .phone-col-1-8 {
+    width: calc(12.5% - 10px);
+  }
+  .layout.grid.gap .phone-col-2-8 {
+    width: calc(25% - 10px);
+  }
+  .layout.grid.gap .phone-col-3-8 {
+    width: calc(37.5% - 10px);
+  }
+  .layout.grid.gap .phone-col-4-8 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .phone-col-5-8 {
+    width: calc(62.5% - 10px);
+  }
+  .layout.grid.gap .phone-col-6-8 {
+    width: calc(75% - 10px);
+  }
+  .layout.grid.gap .phone-col-7-8 {
+    width: calc(87.5% - 10px);
+  }
+  .layout.grid.gap .phone-col-8-8 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .phone-col-1-9 {
+    width: calc(11.1111111111% - 10px);
+  }
+  .layout.grid.gap .phone-col-2-9 {
+    width: calc(22.2222222222% - 10px);
+  }
+  .layout.grid.gap .phone-col-3-9 {
+    width: calc(33.3333333333% - 10px);
+  }
+  .layout.grid.gap .phone-col-4-9 {
+    width: calc(44.4444444444% - 10px);
+  }
+  .layout.grid.gap .phone-col-5-9 {
+    width: calc(55.5555555556% - 10px);
+  }
+  .layout.grid.gap .phone-col-6-9 {
+    width: calc(66.6666666667% - 10px);
+  }
+  .layout.grid.gap .phone-col-7-9 {
+    width: calc(77.7777777778% - 10px);
+  }
+  .layout.grid.gap .phone-col-8-9 {
+    width: calc(88.8888888889% - 10px);
+  }
+  .layout.grid.gap .phone-col-9-9 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .phone-col-1-10 {
+    width: calc(10% - 10px);
+  }
+  .layout.grid.gap .phone-col-2-10 {
+    width: calc(20% - 10px);
+  }
+  .layout.grid.gap .phone-col-3-10 {
+    width: calc(30% - 10px);
+  }
+  .layout.grid.gap .phone-col-4-10 {
+    width: calc(40% - 10px);
+  }
+  .layout.grid.gap .phone-col-5-10 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .phone-col-6-10 {
+    width: calc(60% - 10px);
+  }
+  .layout.grid.gap .phone-col-7-10 {
+    width: calc(70% - 10px);
+  }
+  .layout.grid.gap .phone-col-8-10 {
+    width: calc(80% - 10px);
+  }
+  .layout.grid.gap .phone-col-9-10 {
+    width: calc(90% - 10px);
+  }
+  .layout.grid.gap .phone-col-10-10 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .phone-col-1-11 {
+    width: calc(9.0909090909% - 10px);
+  }
+  .layout.grid.gap .phone-col-2-11 {
+    width: calc(18.1818181818% - 10px);
+  }
+  .layout.grid.gap .phone-col-3-11 {
+    width: calc(27.2727272727% - 10px);
+  }
+  .layout.grid.gap .phone-col-4-11 {
+    width: calc(36.3636363636% - 10px);
+  }
+  .layout.grid.gap .phone-col-5-11 {
+    width: calc(45.4545454545% - 10px);
+  }
+  .layout.grid.gap .phone-col-6-11 {
+    width: calc(54.5454545455% - 10px);
+  }
+  .layout.grid.gap .phone-col-7-11 {
+    width: calc(63.6363636364% - 10px);
+  }
+  .layout.grid.gap .phone-col-8-11 {
+    width: calc(72.7272727273% - 10px);
+  }
+  .layout.grid.gap .phone-col-9-11 {
+    width: calc(81.8181818182% - 10px);
+  }
+  .layout.grid.gap .phone-col-10-11 {
+    width: calc(90.9090909091% - 10px);
+  }
+  .layout.grid.gap .phone-col-11-11 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .phone-col-1-12 {
+    width: calc(8.3333333333% - 10px);
+  }
+  .layout.grid.gap .phone-col-2-12 {
+    width: calc(16.6666666667% - 10px);
+  }
+  .layout.grid.gap .phone-col-3-12 {
+    width: calc(25% - 10px);
+  }
+  .layout.grid.gap .phone-col-4-12 {
+    width: calc(33.3333333333% - 10px);
+  }
+  .layout.grid.gap .phone-col-5-12 {
+    width: calc(41.6666666667% - 10px);
+  }
+  .layout.grid.gap .phone-col-6-12 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .phone-col-7-12 {
+    width: calc(58.3333333333% - 10px);
+  }
+  .layout.grid.gap .phone-col-8-12 {
+    width: calc(66.6666666667% - 10px);
+  }
+  .layout.grid.gap .phone-col-9-12 {
+    width: calc(75% - 10px);
+  }
+  .layout.grid.gap .phone-col-10-12 {
+    width: calc(83.3333333333% - 10px);
+  }
+  .layout.grid.gap .phone-col-11-12 {
+    width: calc(91.6666666667% - 10px);
+  }
+  .layout.grid.gap .phone-col-12-12 {
+    width: calc(100% - 10px);
+  }
 }
-.layout.grid.gap-20dp {
-  margin: -20em 0 20em -20em;
+@media (min-width: 768px) {
+  .layout.grid.gap .tablet-col-1-1 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .tablet-col-1-2 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .tablet-col-2-2 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .tablet-col-1-3 {
+    width: calc(33.3333333333% - 10px);
+  }
+  .layout.grid.gap .tablet-col-2-3 {
+    width: calc(66.6666666667% - 10px);
+  }
+  .layout.grid.gap .tablet-col-3-3 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .tablet-col-1-4 {
+    width: calc(25% - 10px);
+  }
+  .layout.grid.gap .tablet-col-2-4 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .tablet-col-3-4 {
+    width: calc(75% - 10px);
+  }
+  .layout.grid.gap .tablet-col-4-4 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .tablet-col-1-5 {
+    width: calc(20% - 10px);
+  }
+  .layout.grid.gap .tablet-col-2-5 {
+    width: calc(40% - 10px);
+  }
+  .layout.grid.gap .tablet-col-3-5 {
+    width: calc(60% - 10px);
+  }
+  .layout.grid.gap .tablet-col-4-5 {
+    width: calc(80% - 10px);
+  }
+  .layout.grid.gap .tablet-col-5-5 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .tablet-col-1-6 {
+    width: calc(16.6666666667% - 10px);
+  }
+  .layout.grid.gap .tablet-col-2-6 {
+    width: calc(33.3333333333% - 10px);
+  }
+  .layout.grid.gap .tablet-col-3-6 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .tablet-col-4-6 {
+    width: calc(66.6666666667% - 10px);
+  }
+  .layout.grid.gap .tablet-col-5-6 {
+    width: calc(83.3333333333% - 10px);
+  }
+  .layout.grid.gap .tablet-col-6-6 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .tablet-col-1-7 {
+    width: calc(14.2857142857% - 10px);
+  }
+  .layout.grid.gap .tablet-col-2-7 {
+    width: calc(28.5714285714% - 10px);
+  }
+  .layout.grid.gap .tablet-col-3-7 {
+    width: calc(42.8571428571% - 10px);
+  }
+  .layout.grid.gap .tablet-col-4-7 {
+    width: calc(57.1428571429% - 10px);
+  }
+  .layout.grid.gap .tablet-col-5-7 {
+    width: calc(71.4285714286% - 10px);
+  }
+  .layout.grid.gap .tablet-col-6-7 {
+    width: calc(85.7142857143% - 10px);
+  }
+  .layout.grid.gap .tablet-col-7-7 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .tablet-col-1-8 {
+    width: calc(12.5% - 10px);
+  }
+  .layout.grid.gap .tablet-col-2-8 {
+    width: calc(25% - 10px);
+  }
+  .layout.grid.gap .tablet-col-3-8 {
+    width: calc(37.5% - 10px);
+  }
+  .layout.grid.gap .tablet-col-4-8 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .tablet-col-5-8 {
+    width: calc(62.5% - 10px);
+  }
+  .layout.grid.gap .tablet-col-6-8 {
+    width: calc(75% - 10px);
+  }
+  .layout.grid.gap .tablet-col-7-8 {
+    width: calc(87.5% - 10px);
+  }
+  .layout.grid.gap .tablet-col-8-8 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .tablet-col-1-9 {
+    width: calc(11.1111111111% - 10px);
+  }
+  .layout.grid.gap .tablet-col-2-9 {
+    width: calc(22.2222222222% - 10px);
+  }
+  .layout.grid.gap .tablet-col-3-9 {
+    width: calc(33.3333333333% - 10px);
+  }
+  .layout.grid.gap .tablet-col-4-9 {
+    width: calc(44.4444444444% - 10px);
+  }
+  .layout.grid.gap .tablet-col-5-9 {
+    width: calc(55.5555555556% - 10px);
+  }
+  .layout.grid.gap .tablet-col-6-9 {
+    width: calc(66.6666666667% - 10px);
+  }
+  .layout.grid.gap .tablet-col-7-9 {
+    width: calc(77.7777777778% - 10px);
+  }
+  .layout.grid.gap .tablet-col-8-9 {
+    width: calc(88.8888888889% - 10px);
+  }
+  .layout.grid.gap .tablet-col-9-9 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .tablet-col-1-10 {
+    width: calc(10% - 10px);
+  }
+  .layout.grid.gap .tablet-col-2-10 {
+    width: calc(20% - 10px);
+  }
+  .layout.grid.gap .tablet-col-3-10 {
+    width: calc(30% - 10px);
+  }
+  .layout.grid.gap .tablet-col-4-10 {
+    width: calc(40% - 10px);
+  }
+  .layout.grid.gap .tablet-col-5-10 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .tablet-col-6-10 {
+    width: calc(60% - 10px);
+  }
+  .layout.grid.gap .tablet-col-7-10 {
+    width: calc(70% - 10px);
+  }
+  .layout.grid.gap .tablet-col-8-10 {
+    width: calc(80% - 10px);
+  }
+  .layout.grid.gap .tablet-col-9-10 {
+    width: calc(90% - 10px);
+  }
+  .layout.grid.gap .tablet-col-10-10 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .tablet-col-1-11 {
+    width: calc(9.0909090909% - 10px);
+  }
+  .layout.grid.gap .tablet-col-2-11 {
+    width: calc(18.1818181818% - 10px);
+  }
+  .layout.grid.gap .tablet-col-3-11 {
+    width: calc(27.2727272727% - 10px);
+  }
+  .layout.grid.gap .tablet-col-4-11 {
+    width: calc(36.3636363636% - 10px);
+  }
+  .layout.grid.gap .tablet-col-5-11 {
+    width: calc(45.4545454545% - 10px);
+  }
+  .layout.grid.gap .tablet-col-6-11 {
+    width: calc(54.5454545455% - 10px);
+  }
+  .layout.grid.gap .tablet-col-7-11 {
+    width: calc(63.6363636364% - 10px);
+  }
+  .layout.grid.gap .tablet-col-8-11 {
+    width: calc(72.7272727273% - 10px);
+  }
+  .layout.grid.gap .tablet-col-9-11 {
+    width: calc(81.8181818182% - 10px);
+  }
+  .layout.grid.gap .tablet-col-10-11 {
+    width: calc(90.9090909091% - 10px);
+  }
+  .layout.grid.gap .tablet-col-11-11 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .tablet-col-1-12 {
+    width: calc(8.3333333333% - 10px);
+  }
+  .layout.grid.gap .tablet-col-2-12 {
+    width: calc(16.6666666667% - 10px);
+  }
+  .layout.grid.gap .tablet-col-3-12 {
+    width: calc(25% - 10px);
+  }
+  .layout.grid.gap .tablet-col-4-12 {
+    width: calc(33.3333333333% - 10px);
+  }
+  .layout.grid.gap .tablet-col-5-12 {
+    width: calc(41.6666666667% - 10px);
+  }
+  .layout.grid.gap .tablet-col-6-12 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .tablet-col-7-12 {
+    width: calc(58.3333333333% - 10px);
+  }
+  .layout.grid.gap .tablet-col-8-12 {
+    width: calc(66.6666666667% - 10px);
+  }
+  .layout.grid.gap .tablet-col-9-12 {
+    width: calc(75% - 10px);
+  }
+  .layout.grid.gap .tablet-col-10-12 {
+    width: calc(83.3333333333% - 10px);
+  }
+  .layout.grid.gap .tablet-col-11-12 {
+    width: calc(91.6666666667% - 10px);
+  }
+  .layout.grid.gap .tablet-col-12-12 {
+    width: calc(100% - 10px);
+  }
 }
-.layout.grid.gap-20dp > * {
-  padding: 20em 0 0 20em;
+@media (min-width: 992px) {
+  .layout.grid.gap .desktop-col-1-1 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .desktop-col-1-2 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .desktop-col-2-2 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .desktop-col-1-3 {
+    width: calc(33.3333333333% - 10px);
+  }
+  .layout.grid.gap .desktop-col-2-3 {
+    width: calc(66.6666666667% - 10px);
+  }
+  .layout.grid.gap .desktop-col-3-3 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .desktop-col-1-4 {
+    width: calc(25% - 10px);
+  }
+  .layout.grid.gap .desktop-col-2-4 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .desktop-col-3-4 {
+    width: calc(75% - 10px);
+  }
+  .layout.grid.gap .desktop-col-4-4 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .desktop-col-1-5 {
+    width: calc(20% - 10px);
+  }
+  .layout.grid.gap .desktop-col-2-5 {
+    width: calc(40% - 10px);
+  }
+  .layout.grid.gap .desktop-col-3-5 {
+    width: calc(60% - 10px);
+  }
+  .layout.grid.gap .desktop-col-4-5 {
+    width: calc(80% - 10px);
+  }
+  .layout.grid.gap .desktop-col-5-5 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .desktop-col-1-6 {
+    width: calc(16.6666666667% - 10px);
+  }
+  .layout.grid.gap .desktop-col-2-6 {
+    width: calc(33.3333333333% - 10px);
+  }
+  .layout.grid.gap .desktop-col-3-6 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .desktop-col-4-6 {
+    width: calc(66.6666666667% - 10px);
+  }
+  .layout.grid.gap .desktop-col-5-6 {
+    width: calc(83.3333333333% - 10px);
+  }
+  .layout.grid.gap .desktop-col-6-6 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .desktop-col-1-7 {
+    width: calc(14.2857142857% - 10px);
+  }
+  .layout.grid.gap .desktop-col-2-7 {
+    width: calc(28.5714285714% - 10px);
+  }
+  .layout.grid.gap .desktop-col-3-7 {
+    width: calc(42.8571428571% - 10px);
+  }
+  .layout.grid.gap .desktop-col-4-7 {
+    width: calc(57.1428571429% - 10px);
+  }
+  .layout.grid.gap .desktop-col-5-7 {
+    width: calc(71.4285714286% - 10px);
+  }
+  .layout.grid.gap .desktop-col-6-7 {
+    width: calc(85.7142857143% - 10px);
+  }
+  .layout.grid.gap .desktop-col-7-7 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .desktop-col-1-8 {
+    width: calc(12.5% - 10px);
+  }
+  .layout.grid.gap .desktop-col-2-8 {
+    width: calc(25% - 10px);
+  }
+  .layout.grid.gap .desktop-col-3-8 {
+    width: calc(37.5% - 10px);
+  }
+  .layout.grid.gap .desktop-col-4-8 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .desktop-col-5-8 {
+    width: calc(62.5% - 10px);
+  }
+  .layout.grid.gap .desktop-col-6-8 {
+    width: calc(75% - 10px);
+  }
+  .layout.grid.gap .desktop-col-7-8 {
+    width: calc(87.5% - 10px);
+  }
+  .layout.grid.gap .desktop-col-8-8 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .desktop-col-1-9 {
+    width: calc(11.1111111111% - 10px);
+  }
+  .layout.grid.gap .desktop-col-2-9 {
+    width: calc(22.2222222222% - 10px);
+  }
+  .layout.grid.gap .desktop-col-3-9 {
+    width: calc(33.3333333333% - 10px);
+  }
+  .layout.grid.gap .desktop-col-4-9 {
+    width: calc(44.4444444444% - 10px);
+  }
+  .layout.grid.gap .desktop-col-5-9 {
+    width: calc(55.5555555556% - 10px);
+  }
+  .layout.grid.gap .desktop-col-6-9 {
+    width: calc(66.6666666667% - 10px);
+  }
+  .layout.grid.gap .desktop-col-7-9 {
+    width: calc(77.7777777778% - 10px);
+  }
+  .layout.grid.gap .desktop-col-8-9 {
+    width: calc(88.8888888889% - 10px);
+  }
+  .layout.grid.gap .desktop-col-9-9 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .desktop-col-1-10 {
+    width: calc(10% - 10px);
+  }
+  .layout.grid.gap .desktop-col-2-10 {
+    width: calc(20% - 10px);
+  }
+  .layout.grid.gap .desktop-col-3-10 {
+    width: calc(30% - 10px);
+  }
+  .layout.grid.gap .desktop-col-4-10 {
+    width: calc(40% - 10px);
+  }
+  .layout.grid.gap .desktop-col-5-10 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .desktop-col-6-10 {
+    width: calc(60% - 10px);
+  }
+  .layout.grid.gap .desktop-col-7-10 {
+    width: calc(70% - 10px);
+  }
+  .layout.grid.gap .desktop-col-8-10 {
+    width: calc(80% - 10px);
+  }
+  .layout.grid.gap .desktop-col-9-10 {
+    width: calc(90% - 10px);
+  }
+  .layout.grid.gap .desktop-col-10-10 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .desktop-col-1-11 {
+    width: calc(9.0909090909% - 10px);
+  }
+  .layout.grid.gap .desktop-col-2-11 {
+    width: calc(18.1818181818% - 10px);
+  }
+  .layout.grid.gap .desktop-col-3-11 {
+    width: calc(27.2727272727% - 10px);
+  }
+  .layout.grid.gap .desktop-col-4-11 {
+    width: calc(36.3636363636% - 10px);
+  }
+  .layout.grid.gap .desktop-col-5-11 {
+    width: calc(45.4545454545% - 10px);
+  }
+  .layout.grid.gap .desktop-col-6-11 {
+    width: calc(54.5454545455% - 10px);
+  }
+  .layout.grid.gap .desktop-col-7-11 {
+    width: calc(63.6363636364% - 10px);
+  }
+  .layout.grid.gap .desktop-col-8-11 {
+    width: calc(72.7272727273% - 10px);
+  }
+  .layout.grid.gap .desktop-col-9-11 {
+    width: calc(81.8181818182% - 10px);
+  }
+  .layout.grid.gap .desktop-col-10-11 {
+    width: calc(90.9090909091% - 10px);
+  }
+  .layout.grid.gap .desktop-col-11-11 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .desktop-col-1-12 {
+    width: calc(8.3333333333% - 10px);
+  }
+  .layout.grid.gap .desktop-col-2-12 {
+    width: calc(16.6666666667% - 10px);
+  }
+  .layout.grid.gap .desktop-col-3-12 {
+    width: calc(25% - 10px);
+  }
+  .layout.grid.gap .desktop-col-4-12 {
+    width: calc(33.3333333333% - 10px);
+  }
+  .layout.grid.gap .desktop-col-5-12 {
+    width: calc(41.6666666667% - 10px);
+  }
+  .layout.grid.gap .desktop-col-6-12 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .desktop-col-7-12 {
+    width: calc(58.3333333333% - 10px);
+  }
+  .layout.grid.gap .desktop-col-8-12 {
+    width: calc(66.6666666667% - 10px);
+  }
+  .layout.grid.gap .desktop-col-9-12 {
+    width: calc(75% - 10px);
+  }
+  .layout.grid.gap .desktop-col-10-12 {
+    width: calc(83.3333333333% - 10px);
+  }
+  .layout.grid.gap .desktop-col-11-12 {
+    width: calc(91.6666666667% - 10px);
+  }
+  .layout.grid.gap .desktop-col-12-12 {
+    width: calc(100% - 10px);
+  }
+}
+@media (min-width: 1200px) {
+  .layout.grid.gap .lg-col-1-1 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .lg-col-1-2 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .lg-col-2-2 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .lg-col-1-3 {
+    width: calc(33.3333333333% - 10px);
+  }
+  .layout.grid.gap .lg-col-2-3 {
+    width: calc(66.6666666667% - 10px);
+  }
+  .layout.grid.gap .lg-col-3-3 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .lg-col-1-4 {
+    width: calc(25% - 10px);
+  }
+  .layout.grid.gap .lg-col-2-4 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .lg-col-3-4 {
+    width: calc(75% - 10px);
+  }
+  .layout.grid.gap .lg-col-4-4 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .lg-col-1-5 {
+    width: calc(20% - 10px);
+  }
+  .layout.grid.gap .lg-col-2-5 {
+    width: calc(40% - 10px);
+  }
+  .layout.grid.gap .lg-col-3-5 {
+    width: calc(60% - 10px);
+  }
+  .layout.grid.gap .lg-col-4-5 {
+    width: calc(80% - 10px);
+  }
+  .layout.grid.gap .lg-col-5-5 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .lg-col-1-6 {
+    width: calc(16.6666666667% - 10px);
+  }
+  .layout.grid.gap .lg-col-2-6 {
+    width: calc(33.3333333333% - 10px);
+  }
+  .layout.grid.gap .lg-col-3-6 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .lg-col-4-6 {
+    width: calc(66.6666666667% - 10px);
+  }
+  .layout.grid.gap .lg-col-5-6 {
+    width: calc(83.3333333333% - 10px);
+  }
+  .layout.grid.gap .lg-col-6-6 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .lg-col-1-7 {
+    width: calc(14.2857142857% - 10px);
+  }
+  .layout.grid.gap .lg-col-2-7 {
+    width: calc(28.5714285714% - 10px);
+  }
+  .layout.grid.gap .lg-col-3-7 {
+    width: calc(42.8571428571% - 10px);
+  }
+  .layout.grid.gap .lg-col-4-7 {
+    width: calc(57.1428571429% - 10px);
+  }
+  .layout.grid.gap .lg-col-5-7 {
+    width: calc(71.4285714286% - 10px);
+  }
+  .layout.grid.gap .lg-col-6-7 {
+    width: calc(85.7142857143% - 10px);
+  }
+  .layout.grid.gap .lg-col-7-7 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .lg-col-1-8 {
+    width: calc(12.5% - 10px);
+  }
+  .layout.grid.gap .lg-col-2-8 {
+    width: calc(25% - 10px);
+  }
+  .layout.grid.gap .lg-col-3-8 {
+    width: calc(37.5% - 10px);
+  }
+  .layout.grid.gap .lg-col-4-8 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .lg-col-5-8 {
+    width: calc(62.5% - 10px);
+  }
+  .layout.grid.gap .lg-col-6-8 {
+    width: calc(75% - 10px);
+  }
+  .layout.grid.gap .lg-col-7-8 {
+    width: calc(87.5% - 10px);
+  }
+  .layout.grid.gap .lg-col-8-8 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .lg-col-1-9 {
+    width: calc(11.1111111111% - 10px);
+  }
+  .layout.grid.gap .lg-col-2-9 {
+    width: calc(22.2222222222% - 10px);
+  }
+  .layout.grid.gap .lg-col-3-9 {
+    width: calc(33.3333333333% - 10px);
+  }
+  .layout.grid.gap .lg-col-4-9 {
+    width: calc(44.4444444444% - 10px);
+  }
+  .layout.grid.gap .lg-col-5-9 {
+    width: calc(55.5555555556% - 10px);
+  }
+  .layout.grid.gap .lg-col-6-9 {
+    width: calc(66.6666666667% - 10px);
+  }
+  .layout.grid.gap .lg-col-7-9 {
+    width: calc(77.7777777778% - 10px);
+  }
+  .layout.grid.gap .lg-col-8-9 {
+    width: calc(88.8888888889% - 10px);
+  }
+  .layout.grid.gap .lg-col-9-9 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .lg-col-1-10 {
+    width: calc(10% - 10px);
+  }
+  .layout.grid.gap .lg-col-2-10 {
+    width: calc(20% - 10px);
+  }
+  .layout.grid.gap .lg-col-3-10 {
+    width: calc(30% - 10px);
+  }
+  .layout.grid.gap .lg-col-4-10 {
+    width: calc(40% - 10px);
+  }
+  .layout.grid.gap .lg-col-5-10 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .lg-col-6-10 {
+    width: calc(60% - 10px);
+  }
+  .layout.grid.gap .lg-col-7-10 {
+    width: calc(70% - 10px);
+  }
+  .layout.grid.gap .lg-col-8-10 {
+    width: calc(80% - 10px);
+  }
+  .layout.grid.gap .lg-col-9-10 {
+    width: calc(90% - 10px);
+  }
+  .layout.grid.gap .lg-col-10-10 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .lg-col-1-11 {
+    width: calc(9.0909090909% - 10px);
+  }
+  .layout.grid.gap .lg-col-2-11 {
+    width: calc(18.1818181818% - 10px);
+  }
+  .layout.grid.gap .lg-col-3-11 {
+    width: calc(27.2727272727% - 10px);
+  }
+  .layout.grid.gap .lg-col-4-11 {
+    width: calc(36.3636363636% - 10px);
+  }
+  .layout.grid.gap .lg-col-5-11 {
+    width: calc(45.4545454545% - 10px);
+  }
+  .layout.grid.gap .lg-col-6-11 {
+    width: calc(54.5454545455% - 10px);
+  }
+  .layout.grid.gap .lg-col-7-11 {
+    width: calc(63.6363636364% - 10px);
+  }
+  .layout.grid.gap .lg-col-8-11 {
+    width: calc(72.7272727273% - 10px);
+  }
+  .layout.grid.gap .lg-col-9-11 {
+    width: calc(81.8181818182% - 10px);
+  }
+  .layout.grid.gap .lg-col-10-11 {
+    width: calc(90.9090909091% - 10px);
+  }
+  .layout.grid.gap .lg-col-11-11 {
+    width: calc(100% - 10px);
+  }
+  .layout.grid.gap .lg-col-1-12 {
+    width: calc(8.3333333333% - 10px);
+  }
+  .layout.grid.gap .lg-col-2-12 {
+    width: calc(16.6666666667% - 10px);
+  }
+  .layout.grid.gap .lg-col-3-12 {
+    width: calc(25% - 10px);
+  }
+  .layout.grid.gap .lg-col-4-12 {
+    width: calc(33.3333333333% - 10px);
+  }
+  .layout.grid.gap .lg-col-5-12 {
+    width: calc(41.6666666667% - 10px);
+  }
+  .layout.grid.gap .lg-col-6-12 {
+    width: calc(50% - 10px);
+  }
+  .layout.grid.gap .lg-col-7-12 {
+    width: calc(58.3333333333% - 10px);
+  }
+  .layout.grid.gap .lg-col-8-12 {
+    width: calc(66.6666666667% - 10px);
+  }
+  .layout.grid.gap .lg-col-9-12 {
+    width: calc(75% - 10px);
+  }
+  .layout.grid.gap .lg-col-10-12 {
+    width: calc(83.3333333333% - 10px);
+  }
+  .layout.grid.gap .lg-col-11-12 {
+    width: calc(91.6666666667% - 10px);
+  }
+  .layout.grid.gap .lg-col-12-12 {
+    width: calc(100% - 10px);
+  }
+}
+@media (min-width: 0px) {
+  .layout.grid .phone-col-1-1 {
+    width: 100%;
+  }
+  .layout.grid .phone-col-1-2 {
+    width: 50%;
+  }
+  .layout.grid .phone-col-2-2 {
+    width: 100%;
+  }
+  .layout.grid .phone-col-1-3 {
+    width: 33.3333333333%;
+  }
+  .layout.grid .phone-col-2-3 {
+    width: 66.6666666667%;
+  }
+  .layout.grid .phone-col-3-3 {
+    width: 100%;
+  }
+  .layout.grid .phone-col-1-4 {
+    width: 25%;
+  }
+  .layout.grid .phone-col-2-4 {
+    width: 50%;
+  }
+  .layout.grid .phone-col-3-4 {
+    width: 75%;
+  }
+  .layout.grid .phone-col-4-4 {
+    width: 100%;
+  }
+  .layout.grid .phone-col-1-5 {
+    width: 20%;
+  }
+  .layout.grid .phone-col-2-5 {
+    width: 40%;
+  }
+  .layout.grid .phone-col-3-5 {
+    width: 60%;
+  }
+  .layout.grid .phone-col-4-5 {
+    width: 80%;
+  }
+  .layout.grid .phone-col-5-5 {
+    width: 100%;
+  }
+  .layout.grid .phone-col-1-6 {
+    width: 16.6666666667%;
+  }
+  .layout.grid .phone-col-2-6 {
+    width: 33.3333333333%;
+  }
+  .layout.grid .phone-col-3-6 {
+    width: 50%;
+  }
+  .layout.grid .phone-col-4-6 {
+    width: 66.6666666667%;
+  }
+  .layout.grid .phone-col-5-6 {
+    width: 83.3333333333%;
+  }
+  .layout.grid .phone-col-6-6 {
+    width: 100%;
+  }
+  .layout.grid .phone-col-1-7 {
+    width: 14.2857142857%;
+  }
+  .layout.grid .phone-col-2-7 {
+    width: 28.5714285714%;
+  }
+  .layout.grid .phone-col-3-7 {
+    width: 42.8571428571%;
+  }
+  .layout.grid .phone-col-4-7 {
+    width: 57.1428571429%;
+  }
+  .layout.grid .phone-col-5-7 {
+    width: 71.4285714286%;
+  }
+  .layout.grid .phone-col-6-7 {
+    width: 85.7142857143%;
+  }
+  .layout.grid .phone-col-7-7 {
+    width: 100%;
+  }
+  .layout.grid .phone-col-1-8 {
+    width: 12.5%;
+  }
+  .layout.grid .phone-col-2-8 {
+    width: 25%;
+  }
+  .layout.grid .phone-col-3-8 {
+    width: 37.5%;
+  }
+  .layout.grid .phone-col-4-8 {
+    width: 50%;
+  }
+  .layout.grid .phone-col-5-8 {
+    width: 62.5%;
+  }
+  .layout.grid .phone-col-6-8 {
+    width: 75%;
+  }
+  .layout.grid .phone-col-7-8 {
+    width: 87.5%;
+  }
+  .layout.grid .phone-col-8-8 {
+    width: 100%;
+  }
+  .layout.grid .phone-col-1-9 {
+    width: 11.1111111111%;
+  }
+  .layout.grid .phone-col-2-9 {
+    width: 22.2222222222%;
+  }
+  .layout.grid .phone-col-3-9 {
+    width: 33.3333333333%;
+  }
+  .layout.grid .phone-col-4-9 {
+    width: 44.4444444444%;
+  }
+  .layout.grid .phone-col-5-9 {
+    width: 55.5555555556%;
+  }
+  .layout.grid .phone-col-6-9 {
+    width: 66.6666666667%;
+  }
+  .layout.grid .phone-col-7-9 {
+    width: 77.7777777778%;
+  }
+  .layout.grid .phone-col-8-9 {
+    width: 88.8888888889%;
+  }
+  .layout.grid .phone-col-9-9 {
+    width: 100%;
+  }
+  .layout.grid .phone-col-1-10 {
+    width: 10%;
+  }
+  .layout.grid .phone-col-2-10 {
+    width: 20%;
+  }
+  .layout.grid .phone-col-3-10 {
+    width: 30%;
+  }
+  .layout.grid .phone-col-4-10 {
+    width: 40%;
+  }
+  .layout.grid .phone-col-5-10 {
+    width: 50%;
+  }
+  .layout.grid .phone-col-6-10 {
+    width: 60%;
+  }
+  .layout.grid .phone-col-7-10 {
+    width: 70%;
+  }
+  .layout.grid .phone-col-8-10 {
+    width: 80%;
+  }
+  .layout.grid .phone-col-9-10 {
+    width: 90%;
+  }
+  .layout.grid .phone-col-10-10 {
+    width: 100%;
+  }
+  .layout.grid .phone-col-1-11 {
+    width: 9.0909090909%;
+  }
+  .layout.grid .phone-col-2-11 {
+    width: 18.1818181818%;
+  }
+  .layout.grid .phone-col-3-11 {
+    width: 27.2727272727%;
+  }
+  .layout.grid .phone-col-4-11 {
+    width: 36.3636363636%;
+  }
+  .layout.grid .phone-col-5-11 {
+    width: 45.4545454545%;
+  }
+  .layout.grid .phone-col-6-11 {
+    width: 54.5454545455%;
+  }
+  .layout.grid .phone-col-7-11 {
+    width: 63.6363636364%;
+  }
+  .layout.grid .phone-col-8-11 {
+    width: 72.7272727273%;
+  }
+  .layout.grid .phone-col-9-11 {
+    width: 81.8181818182%;
+  }
+  .layout.grid .phone-col-10-11 {
+    width: 90.9090909091%;
+  }
+  .layout.grid .phone-col-11-11 {
+    width: 100%;
+  }
+  .layout.grid .phone-col-1-12 {
+    width: 8.3333333333%;
+  }
+  .layout.grid .phone-col-2-12 {
+    width: 16.6666666667%;
+  }
+  .layout.grid .phone-col-3-12 {
+    width: 25%;
+  }
+  .layout.grid .phone-col-4-12 {
+    width: 33.3333333333%;
+  }
+  .layout.grid .phone-col-5-12 {
+    width: 41.6666666667%;
+  }
+  .layout.grid .phone-col-6-12 {
+    width: 50%;
+  }
+  .layout.grid .phone-col-7-12 {
+    width: 58.3333333333%;
+  }
+  .layout.grid .phone-col-8-12 {
+    width: 66.6666666667%;
+  }
+  .layout.grid .phone-col-9-12 {
+    width: 75%;
+  }
+  .layout.grid .phone-col-10-12 {
+    width: 83.3333333333%;
+  }
+  .layout.grid .phone-col-11-12 {
+    width: 91.6666666667%;
+  }
+  .layout.grid .phone-col-12-12 {
+    width: 100%;
+  }
+}
+@media (min-width: 768px) {
+  .layout.grid .tablet-col-1-1 {
+    width: 100%;
+  }
+  .layout.grid .tablet-col-1-2 {
+    width: 50%;
+  }
+  .layout.grid .tablet-col-2-2 {
+    width: 100%;
+  }
+  .layout.grid .tablet-col-1-3 {
+    width: 33.3333333333%;
+  }
+  .layout.grid .tablet-col-2-3 {
+    width: 66.6666666667%;
+  }
+  .layout.grid .tablet-col-3-3 {
+    width: 100%;
+  }
+  .layout.grid .tablet-col-1-4 {
+    width: 25%;
+  }
+  .layout.grid .tablet-col-2-4 {
+    width: 50%;
+  }
+  .layout.grid .tablet-col-3-4 {
+    width: 75%;
+  }
+  .layout.grid .tablet-col-4-4 {
+    width: 100%;
+  }
+  .layout.grid .tablet-col-1-5 {
+    width: 20%;
+  }
+  .layout.grid .tablet-col-2-5 {
+    width: 40%;
+  }
+  .layout.grid .tablet-col-3-5 {
+    width: 60%;
+  }
+  .layout.grid .tablet-col-4-5 {
+    width: 80%;
+  }
+  .layout.grid .tablet-col-5-5 {
+    width: 100%;
+  }
+  .layout.grid .tablet-col-1-6 {
+    width: 16.6666666667%;
+  }
+  .layout.grid .tablet-col-2-6 {
+    width: 33.3333333333%;
+  }
+  .layout.grid .tablet-col-3-6 {
+    width: 50%;
+  }
+  .layout.grid .tablet-col-4-6 {
+    width: 66.6666666667%;
+  }
+  .layout.grid .tablet-col-5-6 {
+    width: 83.3333333333%;
+  }
+  .layout.grid .tablet-col-6-6 {
+    width: 100%;
+  }
+  .layout.grid .tablet-col-1-7 {
+    width: 14.2857142857%;
+  }
+  .layout.grid .tablet-col-2-7 {
+    width: 28.5714285714%;
+  }
+  .layout.grid .tablet-col-3-7 {
+    width: 42.8571428571%;
+  }
+  .layout.grid .tablet-col-4-7 {
+    width: 57.1428571429%;
+  }
+  .layout.grid .tablet-col-5-7 {
+    width: 71.4285714286%;
+  }
+  .layout.grid .tablet-col-6-7 {
+    width: 85.7142857143%;
+  }
+  .layout.grid .tablet-col-7-7 {
+    width: 100%;
+  }
+  .layout.grid .tablet-col-1-8 {
+    width: 12.5%;
+  }
+  .layout.grid .tablet-col-2-8 {
+    width: 25%;
+  }
+  .layout.grid .tablet-col-3-8 {
+    width: 37.5%;
+  }
+  .layout.grid .tablet-col-4-8 {
+    width: 50%;
+  }
+  .layout.grid .tablet-col-5-8 {
+    width: 62.5%;
+  }
+  .layout.grid .tablet-col-6-8 {
+    width: 75%;
+  }
+  .layout.grid .tablet-col-7-8 {
+    width: 87.5%;
+  }
+  .layout.grid .tablet-col-8-8 {
+    width: 100%;
+  }
+  .layout.grid .tablet-col-1-9 {
+    width: 11.1111111111%;
+  }
+  .layout.grid .tablet-col-2-9 {
+    width: 22.2222222222%;
+  }
+  .layout.grid .tablet-col-3-9 {
+    width: 33.3333333333%;
+  }
+  .layout.grid .tablet-col-4-9 {
+    width: 44.4444444444%;
+  }
+  .layout.grid .tablet-col-5-9 {
+    width: 55.5555555556%;
+  }
+  .layout.grid .tablet-col-6-9 {
+    width: 66.6666666667%;
+  }
+  .layout.grid .tablet-col-7-9 {
+    width: 77.7777777778%;
+  }
+  .layout.grid .tablet-col-8-9 {
+    width: 88.8888888889%;
+  }
+  .layout.grid .tablet-col-9-9 {
+    width: 100%;
+  }
+  .layout.grid .tablet-col-1-10 {
+    width: 10%;
+  }
+  .layout.grid .tablet-col-2-10 {
+    width: 20%;
+  }
+  .layout.grid .tablet-col-3-10 {
+    width: 30%;
+  }
+  .layout.grid .tablet-col-4-10 {
+    width: 40%;
+  }
+  .layout.grid .tablet-col-5-10 {
+    width: 50%;
+  }
+  .layout.grid .tablet-col-6-10 {
+    width: 60%;
+  }
+  .layout.grid .tablet-col-7-10 {
+    width: 70%;
+  }
+  .layout.grid .tablet-col-8-10 {
+    width: 80%;
+  }
+  .layout.grid .tablet-col-9-10 {
+    width: 90%;
+  }
+  .layout.grid .tablet-col-10-10 {
+    width: 100%;
+  }
+  .layout.grid .tablet-col-1-11 {
+    width: 9.0909090909%;
+  }
+  .layout.grid .tablet-col-2-11 {
+    width: 18.1818181818%;
+  }
+  .layout.grid .tablet-col-3-11 {
+    width: 27.2727272727%;
+  }
+  .layout.grid .tablet-col-4-11 {
+    width: 36.3636363636%;
+  }
+  .layout.grid .tablet-col-5-11 {
+    width: 45.4545454545%;
+  }
+  .layout.grid .tablet-col-6-11 {
+    width: 54.5454545455%;
+  }
+  .layout.grid .tablet-col-7-11 {
+    width: 63.6363636364%;
+  }
+  .layout.grid .tablet-col-8-11 {
+    width: 72.7272727273%;
+  }
+  .layout.grid .tablet-col-9-11 {
+    width: 81.8181818182%;
+  }
+  .layout.grid .tablet-col-10-11 {
+    width: 90.9090909091%;
+  }
+  .layout.grid .tablet-col-11-11 {
+    width: 100%;
+  }
+  .layout.grid .tablet-col-1-12 {
+    width: 8.3333333333%;
+  }
+  .layout.grid .tablet-col-2-12 {
+    width: 16.6666666667%;
+  }
+  .layout.grid .tablet-col-3-12 {
+    width: 25%;
+  }
+  .layout.grid .tablet-col-4-12 {
+    width: 33.3333333333%;
+  }
+  .layout.grid .tablet-col-5-12 {
+    width: 41.6666666667%;
+  }
+  .layout.grid .tablet-col-6-12 {
+    width: 50%;
+  }
+  .layout.grid .tablet-col-7-12 {
+    width: 58.3333333333%;
+  }
+  .layout.grid .tablet-col-8-12 {
+    width: 66.6666666667%;
+  }
+  .layout.grid .tablet-col-9-12 {
+    width: 75%;
+  }
+  .layout.grid .tablet-col-10-12 {
+    width: 83.3333333333%;
+  }
+  .layout.grid .tablet-col-11-12 {
+    width: 91.6666666667%;
+  }
+  .layout.grid .tablet-col-12-12 {
+    width: 100%;
+  }
+}
+@media (min-width: 992px) {
+  .layout.grid .desktop-col-1-1 {
+    width: 100%;
+  }
+  .layout.grid .desktop-col-1-2 {
+    width: 50%;
+  }
+  .layout.grid .desktop-col-2-2 {
+    width: 100%;
+  }
+  .layout.grid .desktop-col-1-3 {
+    width: 33.3333333333%;
+  }
+  .layout.grid .desktop-col-2-3 {
+    width: 66.6666666667%;
+  }
+  .layout.grid .desktop-col-3-3 {
+    width: 100%;
+  }
+  .layout.grid .desktop-col-1-4 {
+    width: 25%;
+  }
+  .layout.grid .desktop-col-2-4 {
+    width: 50%;
+  }
+  .layout.grid .desktop-col-3-4 {
+    width: 75%;
+  }
+  .layout.grid .desktop-col-4-4 {
+    width: 100%;
+  }
+  .layout.grid .desktop-col-1-5 {
+    width: 20%;
+  }
+  .layout.grid .desktop-col-2-5 {
+    width: 40%;
+  }
+  .layout.grid .desktop-col-3-5 {
+    width: 60%;
+  }
+  .layout.grid .desktop-col-4-5 {
+    width: 80%;
+  }
+  .layout.grid .desktop-col-5-5 {
+    width: 100%;
+  }
+  .layout.grid .desktop-col-1-6 {
+    width: 16.6666666667%;
+  }
+  .layout.grid .desktop-col-2-6 {
+    width: 33.3333333333%;
+  }
+  .layout.grid .desktop-col-3-6 {
+    width: 50%;
+  }
+  .layout.grid .desktop-col-4-6 {
+    width: 66.6666666667%;
+  }
+  .layout.grid .desktop-col-5-6 {
+    width: 83.3333333333%;
+  }
+  .layout.grid .desktop-col-6-6 {
+    width: 100%;
+  }
+  .layout.grid .desktop-col-1-7 {
+    width: 14.2857142857%;
+  }
+  .layout.grid .desktop-col-2-7 {
+    width: 28.5714285714%;
+  }
+  .layout.grid .desktop-col-3-7 {
+    width: 42.8571428571%;
+  }
+  .layout.grid .desktop-col-4-7 {
+    width: 57.1428571429%;
+  }
+  .layout.grid .desktop-col-5-7 {
+    width: 71.4285714286%;
+  }
+  .layout.grid .desktop-col-6-7 {
+    width: 85.7142857143%;
+  }
+  .layout.grid .desktop-col-7-7 {
+    width: 100%;
+  }
+  .layout.grid .desktop-col-1-8 {
+    width: 12.5%;
+  }
+  .layout.grid .desktop-col-2-8 {
+    width: 25%;
+  }
+  .layout.grid .desktop-col-3-8 {
+    width: 37.5%;
+  }
+  .layout.grid .desktop-col-4-8 {
+    width: 50%;
+  }
+  .layout.grid .desktop-col-5-8 {
+    width: 62.5%;
+  }
+  .layout.grid .desktop-col-6-8 {
+    width: 75%;
+  }
+  .layout.grid .desktop-col-7-8 {
+    width: 87.5%;
+  }
+  .layout.grid .desktop-col-8-8 {
+    width: 100%;
+  }
+  .layout.grid .desktop-col-1-9 {
+    width: 11.1111111111%;
+  }
+  .layout.grid .desktop-col-2-9 {
+    width: 22.2222222222%;
+  }
+  .layout.grid .desktop-col-3-9 {
+    width: 33.3333333333%;
+  }
+  .layout.grid .desktop-col-4-9 {
+    width: 44.4444444444%;
+  }
+  .layout.grid .desktop-col-5-9 {
+    width: 55.5555555556%;
+  }
+  .layout.grid .desktop-col-6-9 {
+    width: 66.6666666667%;
+  }
+  .layout.grid .desktop-col-7-9 {
+    width: 77.7777777778%;
+  }
+  .layout.grid .desktop-col-8-9 {
+    width: 88.8888888889%;
+  }
+  .layout.grid .desktop-col-9-9 {
+    width: 100%;
+  }
+  .layout.grid .desktop-col-1-10 {
+    width: 10%;
+  }
+  .layout.grid .desktop-col-2-10 {
+    width: 20%;
+  }
+  .layout.grid .desktop-col-3-10 {
+    width: 30%;
+  }
+  .layout.grid .desktop-col-4-10 {
+    width: 40%;
+  }
+  .layout.grid .desktop-col-5-10 {
+    width: 50%;
+  }
+  .layout.grid .desktop-col-6-10 {
+    width: 60%;
+  }
+  .layout.grid .desktop-col-7-10 {
+    width: 70%;
+  }
+  .layout.grid .desktop-col-8-10 {
+    width: 80%;
+  }
+  .layout.grid .desktop-col-9-10 {
+    width: 90%;
+  }
+  .layout.grid .desktop-col-10-10 {
+    width: 100%;
+  }
+  .layout.grid .desktop-col-1-11 {
+    width: 9.0909090909%;
+  }
+  .layout.grid .desktop-col-2-11 {
+    width: 18.1818181818%;
+  }
+  .layout.grid .desktop-col-3-11 {
+    width: 27.2727272727%;
+  }
+  .layout.grid .desktop-col-4-11 {
+    width: 36.3636363636%;
+  }
+  .layout.grid .desktop-col-5-11 {
+    width: 45.4545454545%;
+  }
+  .layout.grid .desktop-col-6-11 {
+    width: 54.5454545455%;
+  }
+  .layout.grid .desktop-col-7-11 {
+    width: 63.6363636364%;
+  }
+  .layout.grid .desktop-col-8-11 {
+    width: 72.7272727273%;
+  }
+  .layout.grid .desktop-col-9-11 {
+    width: 81.8181818182%;
+  }
+  .layout.grid .desktop-col-10-11 {
+    width: 90.9090909091%;
+  }
+  .layout.grid .desktop-col-11-11 {
+    width: 100%;
+  }
+  .layout.grid .desktop-col-1-12 {
+    width: 8.3333333333%;
+  }
+  .layout.grid .desktop-col-2-12 {
+    width: 16.6666666667%;
+  }
+  .layout.grid .desktop-col-3-12 {
+    width: 25%;
+  }
+  .layout.grid .desktop-col-4-12 {
+    width: 33.3333333333%;
+  }
+  .layout.grid .desktop-col-5-12 {
+    width: 41.6666666667%;
+  }
+  .layout.grid .desktop-col-6-12 {
+    width: 50%;
+  }
+  .layout.grid .desktop-col-7-12 {
+    width: 58.3333333333%;
+  }
+  .layout.grid .desktop-col-8-12 {
+    width: 66.6666666667%;
+  }
+  .layout.grid .desktop-col-9-12 {
+    width: 75%;
+  }
+  .layout.grid .desktop-col-10-12 {
+    width: 83.3333333333%;
+  }
+  .layout.grid .desktop-col-11-12 {
+    width: 91.6666666667%;
+  }
+  .layout.grid .desktop-col-12-12 {
+    width: 100%;
+  }
+}
+@media (min-width: 1200px) {
+  .layout.grid .lg-col-1-1 {
+    width: 100%;
+  }
+  .layout.grid .lg-col-1-2 {
+    width: 50%;
+  }
+  .layout.grid .lg-col-2-2 {
+    width: 100%;
+  }
+  .layout.grid .lg-col-1-3 {
+    width: 33.3333333333%;
+  }
+  .layout.grid .lg-col-2-3 {
+    width: 66.6666666667%;
+  }
+  .layout.grid .lg-col-3-3 {
+    width: 100%;
+  }
+  .layout.grid .lg-col-1-4 {
+    width: 25%;
+  }
+  .layout.grid .lg-col-2-4 {
+    width: 50%;
+  }
+  .layout.grid .lg-col-3-4 {
+    width: 75%;
+  }
+  .layout.grid .lg-col-4-4 {
+    width: 100%;
+  }
+  .layout.grid .lg-col-1-5 {
+    width: 20%;
+  }
+  .layout.grid .lg-col-2-5 {
+    width: 40%;
+  }
+  .layout.grid .lg-col-3-5 {
+    width: 60%;
+  }
+  .layout.grid .lg-col-4-5 {
+    width: 80%;
+  }
+  .layout.grid .lg-col-5-5 {
+    width: 100%;
+  }
+  .layout.grid .lg-col-1-6 {
+    width: 16.6666666667%;
+  }
+  .layout.grid .lg-col-2-6 {
+    width: 33.3333333333%;
+  }
+  .layout.grid .lg-col-3-6 {
+    width: 50%;
+  }
+  .layout.grid .lg-col-4-6 {
+    width: 66.6666666667%;
+  }
+  .layout.grid .lg-col-5-6 {
+    width: 83.3333333333%;
+  }
+  .layout.grid .lg-col-6-6 {
+    width: 100%;
+  }
+  .layout.grid .lg-col-1-7 {
+    width: 14.2857142857%;
+  }
+  .layout.grid .lg-col-2-7 {
+    width: 28.5714285714%;
+  }
+  .layout.grid .lg-col-3-7 {
+    width: 42.8571428571%;
+  }
+  .layout.grid .lg-col-4-7 {
+    width: 57.1428571429%;
+  }
+  .layout.grid .lg-col-5-7 {
+    width: 71.4285714286%;
+  }
+  .layout.grid .lg-col-6-7 {
+    width: 85.7142857143%;
+  }
+  .layout.grid .lg-col-7-7 {
+    width: 100%;
+  }
+  .layout.grid .lg-col-1-8 {
+    width: 12.5%;
+  }
+  .layout.grid .lg-col-2-8 {
+    width: 25%;
+  }
+  .layout.grid .lg-col-3-8 {
+    width: 37.5%;
+  }
+  .layout.grid .lg-col-4-8 {
+    width: 50%;
+  }
+  .layout.grid .lg-col-5-8 {
+    width: 62.5%;
+  }
+  .layout.grid .lg-col-6-8 {
+    width: 75%;
+  }
+  .layout.grid .lg-col-7-8 {
+    width: 87.5%;
+  }
+  .layout.grid .lg-col-8-8 {
+    width: 100%;
+  }
+  .layout.grid .lg-col-1-9 {
+    width: 11.1111111111%;
+  }
+  .layout.grid .lg-col-2-9 {
+    width: 22.2222222222%;
+  }
+  .layout.grid .lg-col-3-9 {
+    width: 33.3333333333%;
+  }
+  .layout.grid .lg-col-4-9 {
+    width: 44.4444444444%;
+  }
+  .layout.grid .lg-col-5-9 {
+    width: 55.5555555556%;
+  }
+  .layout.grid .lg-col-6-9 {
+    width: 66.6666666667%;
+  }
+  .layout.grid .lg-col-7-9 {
+    width: 77.7777777778%;
+  }
+  .layout.grid .lg-col-8-9 {
+    width: 88.8888888889%;
+  }
+  .layout.grid .lg-col-9-9 {
+    width: 100%;
+  }
+  .layout.grid .lg-col-1-10 {
+    width: 10%;
+  }
+  .layout.grid .lg-col-2-10 {
+    width: 20%;
+  }
+  .layout.grid .lg-col-3-10 {
+    width: 30%;
+  }
+  .layout.grid .lg-col-4-10 {
+    width: 40%;
+  }
+  .layout.grid .lg-col-5-10 {
+    width: 50%;
+  }
+  .layout.grid .lg-col-6-10 {
+    width: 60%;
+  }
+  .layout.grid .lg-col-7-10 {
+    width: 70%;
+  }
+  .layout.grid .lg-col-8-10 {
+    width: 80%;
+  }
+  .layout.grid .lg-col-9-10 {
+    width: 90%;
+  }
+  .layout.grid .lg-col-10-10 {
+    width: 100%;
+  }
+  .layout.grid .lg-col-1-11 {
+    width: 9.0909090909%;
+  }
+  .layout.grid .lg-col-2-11 {
+    width: 18.1818181818%;
+  }
+  .layout.grid .lg-col-3-11 {
+    width: 27.2727272727%;
+  }
+  .layout.grid .lg-col-4-11 {
+    width: 36.3636363636%;
+  }
+  .layout.grid .lg-col-5-11 {
+    width: 45.4545454545%;
+  }
+  .layout.grid .lg-col-6-11 {
+    width: 54.5454545455%;
+  }
+  .layout.grid .lg-col-7-11 {
+    width: 63.6363636364%;
+  }
+  .layout.grid .lg-col-8-11 {
+    width: 72.7272727273%;
+  }
+  .layout.grid .lg-col-9-11 {
+    width: 81.8181818182%;
+  }
+  .layout.grid .lg-col-10-11 {
+    width: 90.9090909091%;
+  }
+  .layout.grid .lg-col-11-11 {
+    width: 100%;
+  }
+  .layout.grid .lg-col-1-12 {
+    width: 8.3333333333%;
+  }
+  .layout.grid .lg-col-2-12 {
+    width: 16.6666666667%;
+  }
+  .layout.grid .lg-col-3-12 {
+    width: 25%;
+  }
+  .layout.grid .lg-col-4-12 {
+    width: 33.3333333333%;
+  }
+  .layout.grid .lg-col-5-12 {
+    width: 41.6666666667%;
+  }
+  .layout.grid .lg-col-6-12 {
+    width: 50%;
+  }
+  .layout.grid .lg-col-7-12 {
+    width: 58.3333333333%;
+  }
+  .layout.grid .lg-col-8-12 {
+    width: 66.6666666667%;
+  }
+  .layout.grid .lg-col-9-12 {
+    width: 75%;
+  }
+  .layout.grid .lg-col-10-12 {
+    width: 83.3333333333%;
+  }
+  .layout.grid .lg-col-11-12 {
+    width: 91.6666666667%;
+  }
+  .layout.grid .lg-col-12-12 {
+    width: 100%;
+  }
 }
 
 .jewel.list {
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index cc3d635..0eed546 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -28,7 +28,7 @@
     <component id="VGroup" class="org.apache.royale.jewel.VGroup"/>
     <component id="Container" class="org.apache.royale.jewel.Container"/>
     <component id="Grid" class="org.apache.royale.jewel.Grid"/>
-    <component id="Cell" class="org.apache.royale.jewel.Cell"/>
+    <component id="GridCell" class="org.apache.royale.jewel.GridCell"/>
 
     <component id="Button" class="org.apache.royale.jewel.Button"/>
     <component id="Label" class="org.apache.royale.jewel.Label"/>
@@ -60,6 +60,7 @@
     <component id="VerticalLayout" class="org.apache.royale.jewel.beads.layouts.VerticalLayout"/>
     <component id="TileLayout" class="org.apache.royale.jewel.beads.layouts.TileLayout"/>
     <component id="GridLayout" class="org.apache.royale.jewel.beads.layouts.GridLayout"/>
+    <component id="GridCellLayout" class="org.apache.royale.jewel.beads.layouts.GridCellLayout"/>
     
     <component id="HorizontalLayoutSpaceBetween" class="org.apache.royale.jewel.beads.layouts.HorizontalLayoutSpaceBetween"/>
     
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as
index be4b16f..d671eb7 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Card.as
@@ -46,7 +46,26 @@ package org.apache.royale.jewel
             typeNames = "jewel card";
 		}
 
-		protected var _shadow:Number = 0;
+        // public function get gap():Boolean
+        // {
+        //     return layout.gap;
+        // }
+
+        // public function set gap(value:Boolean):void
+        // {
+		// 	typeNames = StringUtil.removeWord(typeNames, " gap");
+		// 	typeNames += " gap";
+
+		// 	COMPILE::JS
+        //     {
+		// 		if (parent)
+        //         	setClassName(computeFinalClassNames()); 
+		// 	}
+
+		// 	layout.gap = value;
+        // }
+
+		//protected var _shadow:Number = 0;
         /**
 		 *  A boolean flag to activate "shadow-Xdp" effect selector.
 		 *  Assigns variable shadow depths (0, 2, 3, 4, 6, 8, or 16) to card
@@ -56,29 +75,29 @@ package org.apache.royale.jewel
 		 *  @playerversion AIR 2.6
 		 *  @productversion Royale 0.9.3
 		 */
-        public function get shadow():Number
-        {
-            return _shadow;
-        }
+        // public function get shadow():Number
+        // {
+        //     return _shadow;
+        // }
 
-        public function set shadow(value:Number):void
-        {
-			if (_shadow != value)
-            {
-                COMPILE::JS
-                {
-                    if (value == 2 || value == 3 || value == 4 || value == 6 || value == 8 || value == 16)
-                    {
-                        var classVal:String = "shadow-" + _shadow + "dp";
-                        classSelectorList.remove(classVal);
+        // public function set shadow(value:Number):void
+        // {
+		// 	if (_shadow != value)
+        //     {
+        //         COMPILE::JS
+        //         {
+        //             if (value == 2 || value == 3 || value == 4 || value == 6 || value == 8 || value == 16)
+        //             {
+        //                 var classVal:String = "shadow-" + _shadow + "dp";
+        //                 classSelectorList.remove(classVal);
 
-                        classVal = "shadow-" + value + "dp";
-						classSelectorList.add(classVal);
+        //                 classVal = "shadow-" + value + "dp";
+		// 				classSelectorList.add(classVal);
 
-                        _shadow = value;
-                    }
-                }
-            }
-        }
+        //                 _shadow = value;
+        //             }
+        //         }
+        //     }
+        // }
 	}
 }
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Cell.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Cell.as
deleted file mode 100644
index f7010aa..0000000
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Cell.as
+++ /dev/null
@@ -1,51 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You under the Apache License, Version 2.0
-//  (the "License"); you may not use this file except in compliance with
-//  the License.  You may obtain a copy of the License at
-//
-//      http://www.apache.org/licenses/LICENSE-2.0
-//
-//  Unless required by applicable law or agreed to in writing, software
-//  distributed under the License is distributed on an "AS IS" BASIS,
-//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//  See the License for the specific language governing permissions and
-//  limitations under the License.
-//
-////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.jewel
-{
-	import org.apache.royale.jewel.Group;
-	import org.apache.royale.core.IBeadLayout;
-	import org.apache.royale.jewel.beads.layouts.GridLayout;
-
-	/**
-	 *  The Cell class is the inmediate container in a Grid Layout
-	 *  to host grid cell content.
-	 *  
-	 *  @langversion 3.0
-	 *  @playerversion Flash 10.2
-	 *  @playerversion AIR 2.6
-	 *  @productversion Royale 0.9.3
-	 */
-	public class Cell extends Group
-	{
-		/**
-		 *  constructor.
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.3
-		 */
-		public function Cell()
-		{
-			super();
-
-            typeNames = "jewel cell";
-		}
-	}
-}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as
index 308fd4b..bb9199d 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Grid.as
@@ -18,9 +18,8 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel
 {
-	import org.apache.royale.jewel.Group;
-	import org.apache.royale.core.IBeadLayout;
 	import org.apache.royale.jewel.beads.layouts.GridLayout;
+	import org.apache.royale.utils.StringUtil;
 
 	/**
 	 *  The Grid class is a container that uses Grid Layout.
@@ -46,7 +45,7 @@ package org.apache.royale.jewel
 		{
 			super();
 
-            typeNames = "jewel";
+			typeNames = "jewel " + GridLayout.LAYOUT_TYPE_NAMES;
 
 			layout = new GridLayout();
 			addBead(layout);
@@ -64,14 +63,42 @@ package org.apache.royale.jewel
 		 *  @playerversion AIR 2.6
 		 *  @productversion Royale 0.9.3
 		 */
-        public function get gap():Number
+        public function get gap():Boolean
         {
             return layout.gap;
         }
 
-        public function set gap(value:Number):void
+        public function set gap(value:Boolean):void
         {
+			typeNames = StringUtil.removeWord(typeNames, " gap");
+			typeNames += " gap";
+
+			COMPILE::JS
+            {
+				if (parent)
+                	setClassName(computeFinalClassNames()); 
+			}
+
 			layout.gap = value;
         }
+        // public function get gap():Number
+        // {
+        //     return layout.gap;
+        // }
+
+        // public function set gap(value:Number):void
+        // {
+		// 	typeNames = StringUtil.removeWord(typeNames, " gap-" + layout.gap + "dp");
+		// 	if(value != 0)
+		// 		typeNames += " gap-" + value + "dp";
+
+		// 	COMPILE::JS
+        //     {
+		// 		if (parent)
+        //         	setClassName(computeFinalClassNames()); 
+		// 	}
+
+		// 	layout.gap = value;
+        // }
 	}
 }
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/GridCell.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/GridCell.as
new file mode 100644
index 0000000..f0766e5
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/GridCell.as
@@ -0,0 +1,268 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel
+{
+	import org.apache.royale.jewel.beads.layouts.GridCellLayout;
+	import org.apache.royale.utils.StringUtil;
+
+	/**
+	 *  The GridCell class is the inmediate container in a Grid Layout
+	 *  to host grid cell content.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.3
+	 */
+	public class GridCell extends Group
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function GridCell()
+		{
+			super();
+
+            typeNames = "jewel " + GridCellLayout.LAYOUT_TYPE_NAMES;
+
+			layout = new GridCellLayout();
+			addBead(layout);
+		}
+
+		protected var layout:GridCellLayout;
+
+		/**
+		 *  The X Number for "desktop-col-X-Y" effect selector.
+		 *  Sets the desktop numerator for the X/Y fraction that indicates the cell's size in
+		 * 	desktop screen. Needs to be set in conjunction with desktop denominator
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get desktopNumerator():Number
+        {
+            return layout.desktopNumerator;
+        }
+
+		public function set desktopNumerator(value:Number):void
+        {
+			COMPILE::JS
+            {
+				setFractionForScreen(GridCellLayout.DESKTOP, value, layout.desktopDenominator);
+			
+				if (parent)
+                	setClassName(computeFinalClassNames()); 
+			}
+
+			layout.desktopNumerator = value;
+		}
+
+		/**
+		 *  The Y Number for "desktop-col-X-Y" effect selector.
+		 *  Sets the desktop denominator for the X/Y fraction that indicates the cell's size in
+		 *  desktop screen. Needs to be set in conjunction with desktop denominator
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get desktopDenominator():Number
+        {
+            return layout.desktopDenominator;
+        }
+
+		public function set desktopDenominator(value:Number):void
+        {
+			COMPILE::JS
+            {
+				setFractionForScreen(GridCellLayout.DESKTOP, layout.desktopNumerator, value);
+			
+				if (parent)
+                	setClassName(computeFinalClassNames()); 
+			}
+
+			layout.desktopDenominator = value;
+		}
+
+		/**
+		 *  The X Number for "tablet-col-X-Y" effect selector.
+		 *  Sets the tablet numerator for the X/Y fraction that indicates the cell's size in
+		 * 	tablet screen. Needs to be set in conjunction with tablet denominator
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get tabletNumerator():Number
+        {
+            return layout.tabletNumerator;
+        }
+
+		public function set tabletNumerator(value:Number):void
+        {
+			COMPILE::JS
+            {
+				setFractionForScreen(GridCellLayout.TABLET, value, layout.tabletDenominator);
+			
+				if (parent)
+                	setClassName(computeFinalClassNames()); 
+			}
+
+			layout.tabletNumerator = value;
+		}
+
+		/**
+		 *  The Y Number for "tablet-col-X-Y" effect selector.
+		 *  Sets the tablet denominator for the X/Y fraction that indicates the cell's size in
+		 *  tablet screen. Needs to be set in conjunction with tablet denominator
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get tabletDenominator():Number
+        {
+            return layout.tabletDenominator;
+        }
+
+		public function set tabletDenominator(value:Number):void
+        {
+			COMPILE::JS
+            {
+				setFractionForScreen(GridCellLayout.TABLET, layout.tabletNumerator, value);
+			
+				if (parent)
+                	setClassName(computeFinalClassNames()); 
+			}
+
+			layout.tabletDenominator = value;
+		}
+
+		/**
+		 *  The X Number for "phone-col-X-Y" effect selector.
+		 *  Sets the phone numerator for the X/Y fraction that indicates the cell's size in
+		 * 	phone screen. Needs to be set in conjunction with phone denominator
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get phoneNumerator():Number
+        {
+            return layout.phoneNumerator;
+        }
+
+		public function set phoneNumerator(value:Number):void
+        {
+			COMPILE::JS
+            {
+				setFractionForScreen(GridCellLayout.PHONE, value, layout.phoneDenominator);
+			
+				if (parent)
+                	setClassName(computeFinalClassNames()); 
+			}
+
+			layout.phoneNumerator = value;
+		}
+
+		/**
+		 *  The Y Number for "phone-col-X-Y" effect selector.
+		 *  Sets the phone denominator for the X/Y fraction that indicates the cell's size in
+		 *  phone screen. Needs to be set in conjunction with phone denominator
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get phoneDenominator():Number
+        {
+            return layout.phoneDenominator;
+        }
+
+		public function set phoneDenominator(value:Number):void
+        {
+			COMPILE::JS
+            {
+				setFractionForScreen(GridCellLayout.PHONE, layout.phoneNumerator, value);
+			
+				if (parent)
+                	setClassName(computeFinalClassNames()); 
+			}
+
+			layout.phoneDenominator = value;
+		}
+
+		COMPILE::JS
+		private function setFractionForScreen(screen:String, num:Number, den:Number):void
+		{
+			if(num && den)
+			{
+				if (num <= 0 || num > GridCellLayout.MAX_COLUMNS)
+					throw new Error(screen + " numerator must be between 1 and " + GridCellLayout.MAX_COLUMNS);
+				if (den <= 0 || den > GridCellLayout.MAX_COLUMNS)
+					throw new Error(screen + " denominator must be between 1 and " + GridCellLayout.MAX_COLUMNS);
+				
+				typeNames = StringUtil.removeWord(typeNames, " " + screen + "-col-" + layout.desktopNumerator + "-" + layout.desktopDenominator);
+				typeNames += " " + screen + "-col-" + num + "-" + den;
+			}
+        }
+
+		/**
+		 *  Assigns variable gap to grid from 1 to 20
+		 *  Activate "gap-Xdp" effect selector to set a numeric gap 
+		 *  between grid cells
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        // public function get gap():Number
+        // {
+        //     return layout.gap;
+        // }
+
+        // public function set gap(value:Number):void
+        // {
+		// 	typeNames = StringUtil.removeWord(typeNames, " gap-" + layout.gap + "dp");
+		// 	if(value != 0)
+		// 		typeNames += " gap-" + value + "dp";
+
+		// 	COMPILE::JS
+        //     {
+		// 		if (parent)
+        //         	setClassName(computeFinalClassNames()); 
+		// 	}
+
+		// 	layout.gap = value;
+        // }
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as
index c488cda..f273ada 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Group.as
@@ -58,5 +58,29 @@ package org.apache.royale.jewel
         {
             classSelectorList.addNames(value);
         }
+
+        public function addClass(name:String):void
+        {
+            COMPILE::JS
+            {
+            classSelectorList.add(name);
+            }
+        }
+
+        public function removeClass(name:String):void
+        {
+            COMPILE::JS
+            {
+            classSelectorList.remove(name);
+            }
+        }
+
+        public function toggleClass(name:String, value:Boolean):void
+        {
+            COMPILE::JS
+            {
+            classSelectorList.toggle(name, value);
+            }
+        }
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HGroup.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HGroup.as
index 557bf80..f14cd2e 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HGroup.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/HGroup.as
@@ -18,6 +18,9 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel
 {
+    import org.apache.royale.jewel.beads.layouts.HorizontalLayout;
+    import org.apache.royale.utils.StringUtil;
+
     /**
      *  This Group subclass uses HorizontalLayout as its default layout.
      *
@@ -41,6 +44,62 @@ package org.apache.royale.jewel
 		public function HGroup()
 		{
 			super();
+
+			typeNames = "jewel " + HorizontalLayout.LAYOUT_TYPE_NAMES;
+
+			layout = new HorizontalLayout();
+			addBead(layout);
 		}
+
+        protected var layout:HorizontalLayout;
+
+        // public function get gap():Boolean
+        // {
+        //     return layout.gap;
+        // }
+
+        // public function set gap(value:Boolean):void
+        // {
+		// 	typeNames = StringUtil.removeWord(typeNames, " gap");
+		// 	typeNames += " gap";
+
+		// 	COMPILE::JS
+        //     {
+		// 		if (parent)
+        //         	setClassName(computeFinalClassNames()); 
+		// 	}
+
+		// 	layout.gap = value;
+        // }
+        
+        /**
+		 *  Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
+		 *  Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
+		 *  i.e: gap-2x3px will result in a gap of 6px
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get gap():Number
+        {
+            return layout.gap;
+        }
+
+        public function set gap(value:Number):void
+        {
+			typeNames = StringUtil.removeWord(typeNames, " gap-" + layout.gap + "x" + HorizontalLayout.GAP_STEP + "px");
+			if(value != 0)
+				typeNames += " gap-" + value + "x" + HorizontalLayout.GAP_STEP + "px";
+
+			COMPILE::JS
+            {
+				if (parent)
+                	setClassName(computeFinalClassNames()); 
+			}
+
+			layout.gap = value;
+        }
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as
index 0a5e119..7ee63b7 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/VGroup.as
@@ -18,6 +18,9 @@
 ////////////////////////////////////////////////////////////////////////////////
 package org.apache.royale.jewel
 {
+    import org.apache.royale.jewel.beads.layouts.VerticalLayout;
+    import org.apache.royale.utils.StringUtil;
+
     /**
      *  This Group subclass uses VerticalLayout as its default layout.
      *
@@ -41,6 +44,62 @@ package org.apache.royale.jewel
 		public function VGroup()
 		{
 			super();
+
+			typeNames = "jewel " + VerticalLayout.LAYOUT_TYPE_NAMES;
+
+			layout = new VerticalLayout();
+			addBead(layout);
 		}
+
+        protected var layout:VerticalLayout;
+
+        // public function get gap():Boolean
+        // {
+        //     return layout.gap;
+        // }
+
+        // public function set gap(value:Boolean):void
+        // {
+		// 	typeNames = StringUtil.removeWord(typeNames, " gap");
+		// 	typeNames += " gap";
+
+		// 	COMPILE::JS
+        //     {
+		// 		if (parent)
+        //         	setClassName(computeFinalClassNames()); 
+		// 	}
+
+		// 	layout.gap = value;
+        // }
+
+        /**
+		 *  Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
+		 *  Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
+		 *  i.e: gap-2x3px will result in a gap of 6px
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get gap():Number
+        {
+            return layout.gap;
+        }
+
+        public function set gap(value:Number):void
+        {
+			typeNames = StringUtil.removeWord(typeNames, " gap-" + layout.gap + "x" + VerticalLayout.GAP_STEP + "px");
+			if(value != 0)
+				typeNames += " gap-" + value + "x" + VerticalLayout.GAP_STEP + "px";
+
+			COMPILE::JS
+            {
+				if (parent)
+                	setClassName(computeFinalClassNames()); 
+			}
+
+			layout.gap = value;
+        }
 	}
 }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as
index b029e65..5971ffb 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/BasicLayout.as
@@ -56,6 +56,17 @@ package org.apache.royale.jewel.beads.layouts
 		}
 
 		/**
+		 * @royalesuppresspublicvarwarning
+		 */
+		public static const LAYOUT_TYPE_NAMES:String = "layout absolute";
+
+		COMPILE::JS
+		private var hostComponent:UIBase;
+
+		COMPILE::JS
+		protected var hostClassList:DOMTokenList;
+
+		/**
 		 *  @copy org.apache.royale.core.IBead#strand
 		 *  
 		 *  @langversion 3.0
@@ -69,8 +80,14 @@ package org.apache.royale.jewel.beads.layouts
 
 			COMPILE::JS
 			{
-				var contentView:UIBase = layoutView as UIBase;
-				contentView.className = contentView.className ? contentView.className + " layout absolute" : "layout absolute";
+				hostComponent = host as UIBase;
+				hostClassList = hostComponent.positioner.classList;
+				if (hostClassList.contains("layout"))
+					hostClassList.remove("layout");
+				hostClassList.add("layout");
+				if(hostClassList.contains("absolute"))
+					hostClassList.remove("absolute");
+				hostClassList.add("absolute");
 			}
 		}
 
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridCellLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridCellLayout.as
new file mode 100644
index 0000000..578f329
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridCellLayout.as
@@ -0,0 +1,426 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.jewel.beads.layouts
+{
+	import org.apache.royale.core.LayoutBase;
+	import org.apache.royale.core.IBeadLayout;
+	import org.apache.royale.core.ILayoutChild;
+	import org.apache.royale.core.ILayoutView;
+	import org.apache.royale.core.IUIBase;
+	import org.apache.royale.core.IStrand;
+
+	COMPILE::JS {
+    	import org.apache.royale.core.UIBase;
+    }
+
+    /**
+     *  The GridCellLayout class is the layout used for childrens in a Grid
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.3
+     */
+	public class GridCellLayout extends LayoutBase implements IBeadLayout
+	{
+		public static const MAX_COLUMNS:Number = 12;
+		public static const PHONE:String = "phone";
+		public static const TABLET:String = "tablet";
+		public static const DESKTOP:String = "desktop";
+
+        /**
+         *  Constructor.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.3
+         */
+		public function GridCellLayout()
+		{
+			super();
+		}
+
+		/**
+		 * @royalesuppresspublicvarwarning
+		 */
+		public static const LAYOUT_TYPE_NAMES:String = "cell";
+
+		COMPILE::JS
+		private var hostComponent:UIBase;
+
+		COMPILE::JS
+		protected var hostClassList:DOMTokenList;
+
+		/**
+		 *  @copy org.apache.royale.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+
+			COMPILE::JS
+			{
+				hostComponent = host as UIBase;
+				hostClassList = hostComponent.positioner.classList;
+				
+				setFractionForScreen(DESKTOP, _desktopNumerator, _desktopDenominator);
+				setFractionForScreen(TABLET, _tabletNumerator, _tabletDenominator);
+				setFractionForScreen(PHONE, _phoneNumerator, _phoneDenominator);
+			}
+		}
+
+		private var _desktopNumerator:Number;
+		/**
+		 *  The X Number for "desktop-col-X-Y" effect selector.
+		 *  Sets the desktop numerator for the X/Y fraction that indicates the cell's size in
+		 * 	desktop screen. Needs to be set in conjunction with desktop denominator
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get desktopNumerator():Number
+        {
+            return _desktopNumerator;
+        }
+
+        public function set desktopNumerator(value:Number):void
+        {
+			if (_desktopNumerator != value)
+            {
+                COMPILE::JS
+                {
+					if(hostComponent)
+						setFractionForScreen(DESKTOP, value, _desktopDenominator);
+					_desktopNumerator = value;
+				}
+			}
+		}
+
+		private var _desktopDenominator:Number;
+		/**
+		 *  The Y Number for "desktop-col-X-Y" effect selector.
+		 *  Sets the desktop denominator for the X/Y fraction that indicates the cell's size in
+		 *  desktop screen. Needs to be set in conjunction with desktop denominator
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get desktopDenominator():Number
+        {
+            return _desktopDenominator;
+        }
+
+        public function set desktopDenominator(value:Number):void
+        {
+			if (_desktopDenominator != value)
+            {
+                COMPILE::JS
+                {
+					if(hostComponent)
+						setFractionForScreen(DESKTOP, _desktopNumerator, value);
+					_desktopDenominator = value;
+				}
+			}
+		}
+
+		private var _tabletNumerator:Number;
+		/**
+		 *  The X Number for "tablet-col-X-Y" effect selector.
+		 *  Sets the tablet numerator for the X/Y fraction that indicates the cell's size in
+		 * 	tablet screen. Needs to be set in conjunction with tablet denominator
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get tabletNumerator():Number
+        {
+            return _tabletNumerator;
+        }
+
+        public function set tabletNumerator(value:Number):void
+        {
+			if (_tabletNumerator != value)
+            {
+                COMPILE::JS
+                {
+					if(hostComponent)
+						setFractionForScreen(TABLET, value, _tabletDenominator);
+					_tabletNumerator = value;
+				}
+			}
+		}
+
+		private var _tabletDenominator:Number;
+		/**
+		 *  The Y Number for "tablet-col-X-Y" effect selector.
+		 *  Sets the tablet denominator for the X/Y fraction that indicates the cell's size in
+		 *  tablet screen. Needs to be set in conjunction with tablet denominator
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get tabletDenominator():Number
+        {
+            return _tabletDenominator;
+        }
+
+        public function set tabletDenominator(value:Number):void
+        {
+			if (_tabletDenominator != value)
+            {
+                COMPILE::JS
+                {
+					if(hostComponent)
+						setFractionForScreen(TABLET, _tabletNumerator, value);
+					_tabletDenominator = value;
+				}
+			}
+		}
+
+		private var _phoneNumerator:Number;
+		/**
+		 *  The X Number for "phone-col-X-Y" effect selector.
+		 *  Sets the phone numerator for the X/Y fraction that indicates the cell's size in
+		 * 	phone screen. Needs to be set in conjunction with phone denominator
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get phoneNumerator():Number
+        {
+            return _phoneNumerator;
+        }
+
+        public function set phoneNumerator(value:Number):void
+        {
+			if (_phoneNumerator != value)
+            {
+                COMPILE::JS
+                {
+					if(hostComponent)
+						setFractionForScreen(PHONE, value, _phoneDenominator);
+					_phoneNumerator = value;
+				}
+			}
+		}
+
+		private var _phoneDenominator:Number;
+		/**
+		 *  The Y Number for "phone-col-X-Y" effect selector.
+		 *  Sets the phone denominator for the X/Y fraction that indicates the cell's size in
+		 *  phone screen. Needs to be set in conjunction with phone denominator
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+        public function get phoneDenominator():Number
+        {
+            return _phoneDenominator;
+        }
+
+        public function set phoneDenominator(value:Number):void
+        {
+			if (_phoneDenominator != value)
+            {
+                COMPILE::JS
+                {
+					if(hostComponent)
+						setFractionForScreen(PHONE, _phoneNumerator, value);
+					_phoneDenominator = value;
+				}
+			}
+		}
+
+		COMPILE::JS
+		private function setFractionForScreen(screen:String, num:Number, den:Number):void
+		{
+			if(num && den)
+			{
+				if (num <= 0 || num > MAX_COLUMNS)
+					throw new Error(screen + " numerator must be between 1 and " + MAX_COLUMNS);
+				if (den <= 0 || den > MAX_COLUMNS)
+					throw new Error(screen + " denominator must be between 1 and " + MAX_COLUMNS);
+				
+				if (hostClassList.contains(screen + "-col-" + _desktopNumerator + "-" + _desktopDenominator))
+					hostClassList.remove(screen + "-col-" + _desktopNumerator + "-" + _desktopDenominator);
+				hostClassList.add(screen + "-col-" + num + "-" + den);
+			}
+        }
+
+        /**
+         * @copy org.apache.royale.core.IBeadLayout#layout
+		 * @royaleignorecoercion org.apache.royale.core.UIBase
+         */
+		override public function layout():Boolean
+		{
+            COMPILE::SWF
+            {
+				var contentView:ILayoutView = layoutView;
+
+				var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent();
+				var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent();
+
+				var w:Number = hostWidthSizedToContent ? 0 : contentView.width;
+				var h:Number = hostHeightSizedToContent ? 0 : contentView.height;
+
+				var n:int = contentView.numElements;
+
+                for (var i:int = 0; i < n; i++)
+                {
+                    var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+					if (child == null || !child.visible) continue;
+
+					var positions:Object = childPositions(child);
+					var margins:Object = childMargins(child, contentView.width, contentView.height);
+                    var ww:Number = w;
+                    var hh:Number = h;
+
+                    var ilc:ILayoutChild = child as ILayoutChild;
+
+					// set the top edge of the child
+                    if (!isNaN(positions.left))
+                    {
+                        if (ilc)
+                            ilc.setX(positions.left+margins.left);
+                        else
+                            child.x = positions.left+margins.left;
+                        ww -= positions.left + margins.left;
+                    }
+
+					// set the left edge of the child
+                    if (!isNaN(positions.top))
+                    {
+                        if (ilc)
+                            ilc.setY(positions.top+margins.top);
+                        else
+                            child.y = positions.top+margins.top;
+                        hh -= positions.top + margins.top;
+                    }
+
+					// set the right edge of the child
+					if (!isNaN(positions.right))
+					{
+						if (!hostWidthSizedToContent)
+						{
+							if (!isNaN(positions.left))
+							{
+								if (ilc)
+									ilc.setWidth(ww - positions.right - margins.right, false);
+								else
+									child.width = ww - positions.right - margins.right;
+							}
+							else
+							{
+								if (ilc)
+								{
+									ilc.setX( w - positions.right - margins.left - child.width - margins.right);
+								}
+								else
+								{
+									child.x = w - positions.right - margins.left - child.width - margins.right;
+								}
+							}
+						}
+					}
+					else if (ilc != null && !isNaN(ilc.percentWidth) && !hostWidthSizedToContent)
+					{
+						ilc.setWidth((ww - margins.right - margins.left) * ilc.percentWidth/100, false);
+					}
+
+					// set the bottm edge of the child
+					if (!isNaN(positions.bottom))
+					{
+						if (!hostHeightSizedToContent)
+						{
+							if (!isNaN(positions.top))
+							{
+								if (ilc)
+									ilc.setHeight(hh - positions.bottom - margins.bottom, false);
+								else
+									child.height = hh - positions.bottom - margins.bottom;
+							}
+							else
+							{
+								if (ilc)
+									ilc.setY( h - positions.bottom - child.height - margins.bottom);
+								else
+									child.y = h - positions.bottom - child.height - margins.bottom;
+							}
+						}
+					}
+					else if (ilc != null && !isNaN(ilc.percentHeight) && !hostHeightSizedToContent)
+					{
+						ilc.setHeight((hh - margins.top - margins.bottom) * ilc.percentHeight/100, false);
+					}
+					
+					if (margins.auto)
+					{
+						if (ilc)
+							ilc.setX( (w - child.width) / 2);
+						else
+							child.x = (w - child.width) / 2;
+					}
+                }
+
+                return true;
+
+            }
+
+            COMPILE::JS
+            {
+				/** 
+				 *  This Layout uses the following CSS rules
+				 *  no code needed in JS for layout
+				 * 
+				 *  .layout {
+				 *		display: flex;
+				 *	}
+				 *
+				 *	.layout.absolute {
+				 *		position: relative;
+				 *	}
+				 *  
+				 *	.layout.absolute > * {
+		         *      position: absolute  
+				 *  }
+				 */
+
+                return true;
+            }
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as
index 848f15f..6f323f8 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/GridLayout.as
@@ -20,11 +20,7 @@ package org.apache.royale.jewel.beads.layouts
 {
 	import org.apache.royale.core.LayoutBase;
 	import org.apache.royale.core.IBeadLayout;
-	import org.apache.royale.core.ILayoutChild;
-	import org.apache.royale.core.ILayoutView;
-	import org.apache.royale.core.IUIBase;
 	import org.apache.royale.core.IStrand;
-	import org.apache.royale.utils.StringUtil;
 	import org.apache.royale.core.IParentIUIBase;
 
 	COMPILE::JS {
@@ -56,9 +52,17 @@ package org.apache.royale.jewel.beads.layouts
 			super();
 		}
 
+		/**
+		 * @royalesuppresspublicvarwarning
+		 */
+		public static const LAYOUT_TYPE_NAMES:String = "layout grid";
+
 		COMPILE::JS
 		private var hostComponent:UIBase;
 
+		COMPILE::JS
+		protected var hostClassList:DOMTokenList;
+
 		/**
 		 *  @copy org.apache.royale.core.IBead#strand
 		 *  
@@ -75,14 +79,20 @@ package org.apache.royale.jewel.beads.layouts
 
 			COMPILE::JS
 			{
-				hostComponent = layoutView as UIBase;
-				hostComponent.className = hostComponent.className ? hostComponent.className + " layout grid" : "layout grid";
+				hostComponent = host as UIBase;
+				hostClassList = hostComponent.positioner.classList;
+				if (hostClassList.contains("layout"))
+					hostClassList.remove("layout");
+				hostClassList.add("layout");
+				if(hostClassList.contains("grid"))
+					hostClassList.remove("grid");
+				hostClassList.add("grid");
 
 				setGap(_gap);
 			}
 		}
 
-		protected var _gap:Number = 0;
+		private var _gap:Boolean;
 		/**
 		 *  Assigns variable gap to grid from 1 to 20
 		 *  Activate "gap-Xdp" effect selector to set a numeric gap 
@@ -93,7 +103,7 @@ package org.apache.royale.jewel.beads.layouts
 		 *  @playerversion AIR 2.6
 		 *  @productversion Royale 0.9.3
 		 */
-		public function get gap():Number
+		public function get gap():Boolean
         {
             return _gap;
         }
@@ -101,7 +111,7 @@ package org.apache.royale.jewel.beads.layouts
 		/**
 		 *  @private
 		 */
-		public function set gap(value:Number):void
+		public function set gap(value:Boolean):void
 		{
 			if (_gap != value)
             {
@@ -116,17 +126,55 @@ package org.apache.royale.jewel.beads.layouts
 		}
 
 		COMPILE::JS
-		private function setGap(value:Number):void
+		private function setGap(value:Boolean):void
 		{
-			if (value >= 0 && value <= 20)
-			{
-				hostComponent.className = StringUtil.removeWord(hostComponent.className, " gap-" + _gap + "dp");
-				hostComponent.className += " gap-" + value + "dp";
-				// hostComponent.positioner.classList.remove("gap-" + _gap + "dp");
-				// hostComponent.positioner.classList.add("gap-" + value + "dp");
-			} else
-				throw new Error("Grid gap needs to be between 0 and 20");
+			hostClassList.toggle("gap", value);
 		}
+		// protected var _gap:Number = 0;
+		// /**
+		//  *  Assigns variable gap to grid from 1 to 20
+		//  *  Activate "gap-Xdp" effect selector to set a numeric gap 
+		//  *  between grid cells
+		//  *
+		//  *  @langversion 3.0
+		//  *  @playerversion Flash 10.2
+		//  *  @playerversion AIR 2.6
+		//  *  @productversion Royale 0.9.3
+		//  */
+		// public function get gap():Number
+        // {
+        //     return _gap;
+        // }
+
+		// /**
+		//  *  @private
+		//  */
+		// public function set gap(value:Number):void
+		// {
+		// 	if (_gap != value)
+        //     {
+		// 		COMPILE::JS
+		// 		{
+		// 			if(hostComponent)
+		// 				setGap(value);
+					
+		// 			_gap = value;
+		// 		}
+        //     }
+		// }
+
+		// COMPILE::JS
+		// private function setGap(value:Number):void
+		// {
+		// 	if (value >= 0 && value <= 20)
+		// 	{
+		// 		if (hostClassList.contains("gap-" + _gap + "dp"))
+		// 			hostClassList.remove("gap-" + _gap + "dp");
+		// 		if(value != 0)
+		// 			hostClassList.add("gap-" + value + "dp");
+		// 	} else
+		// 		throw new Error("Grid gap needs to be between 0 and 20");
+		// }
 
         /**
          * @copy org.apache.royale.core.IBeadLayout#layout
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
index f6418d2..824b7be 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
@@ -28,8 +28,11 @@ package org.apache.royale.jewel.beads.layouts
 	import org.apache.royale.core.IUIBase;
     import org.apache.royale.core.layout.EdgeData;
 	import org.apache.royale.core.ValuesManager;
-	import org.apache.royale.core.layout.ILayoutStyleProperties;
 	import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.utils.css.addDynamicSelector;
+	import org.apache.royale.utils.StringUtil;
+	import org.apache.royale.core.layout.ILayoutStyleProperties;
 
 	COMPILE::JS {
         import org.apache.royale.core.WrappedHTMLElement;
@@ -46,7 +49,7 @@ package org.apache.royale.jewel.beads.layouts
      *  @playerversion AIR 2.6
      *  @productversion Royale 0.9.3
      */
-	public class HorizontalLayout extends LayoutBase implements IBeadLayout, ILayoutStyleProperties
+	public class HorizontalLayout extends SimpleHorizontalLayout implements ILayoutStyleProperties
 	{
         /**
          *  Constructor.
@@ -62,6 +65,32 @@ package org.apache.royale.jewel.beads.layouts
 		}
 
 		/**
+		 * @royalesuppresspublicvarwarning
+		 */
+		public static const LAYOUT_TYPE_NAMES:String = "layout horizontal";
+
+		/**
+		 *  @copy org.apache.royale.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 *  @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+		 *  @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+
+			COMPILE::JS
+			{
+				applyStyleToLayout(hostComponent, "gap");
+				setGap(_gap);
+			}
+		}
+
+		/**
 		 *  @private
 		 */
 		private var _paddingTop:Number = 0;
@@ -165,34 +194,49 @@ package org.apache.royale.jewel.beads.layouts
 			_paddingLeft = value;
 		}
 
-		/**
-		 *  @private
-		 */
 		private var gapInitialized:Boolean;
-		public static const GAP_STYLE:String = "gap"
-		private var _gap:Number = 0;
-
+		// private var _gap:Boolean;
 		/**
-		 *  The gap between items.
+		 *  Assigns variable gap to grid from 1 to 20
+		 *  Activate "gap-Xdp" effect selector to set a numeric gap 
+		 *  between grid cells
 		 *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
 		 *  @productversion Royale 0.9.3
 		 */
-		public function get gap():Number
-		{
-			return _gap;
-		}
-
-		/**
-		 *  @private
-		 */
-		public function set gap(value:Number):void
-		{
-			_gap = value;
-			gapInitialized = true;
-		}
+		// public function get gap():Boolean
+        // {
+        //     return _gap;
+        // }
+
+		// /**
+		//  *  @private
+		//  */
+		// public function set gap(value:Boolean):void
+		// {
+		// 	if (_gap != value)
+        //     {
+		// 		COMPILE::JS
+		// 		{
+		// 			if(hostComponent)
+		// 				setGap(value);
+					
+		// 			_gap = value;
+		// 			gapInitialized = true;
+		// 		}
+        //     }
+		// }
+
+		// COMPILE::JS
+		// private function setGap(value:Boolean):void
+		// {
+		// 	if (value)
+		// 		hostClassList.add("gap");
+		// 	else
+		// 		hostClassList.remove("gap");
+		// }
 
 		/**
 		 *  Get the component layout style and apply to if exists
@@ -202,11 +246,11 @@ package org.apache.royale.jewel.beads.layouts
 		 * 
 		 *  @see org.apache.royale.core.layout.ILayoutStyleProperties#applyStyleToLayout(component:IUIBase, cssProperty:String):void
 		 * 
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.3
-		 */
+ 		 *  @langversion 3.0
+ 		 *  @playerversion Flash 10.2
+ 		 *  @playerversion AIR 2.6
+ 		 *  @productversion Royale 0.9.3
+ 		 */
 		public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
 		{	
 			var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
@@ -214,11 +258,9 @@ package org.apache.royale.jewel.beads.layouts
 			{
 				switch(cssProperty)
 				{
-					case GAP_STYLE:
+					case "gap":
 						if(!gapInitialized)
-						{
 							gap = Number(cssValue);
-						}
 						break;
 					default:
 						break;
@@ -226,6 +268,58 @@ package org.apache.royale.jewel.beads.layouts
 			}
 		}
 
+		// number of gap styles available in CSS @see $gaps variable in _layout.sass
+		public static const GAPS:Number = 10;
+		// gap step size in each gap style rule in CSS @see $gap-step variable in _layout.sass
+		public static const GAP_STEP:Number = 3;
+
+		protected var _gap:Number = 0;
+		/**
+		 *  Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
+		 *  Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
+		 *  i.e: gap-2x3px will result in a gap of 6px
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function get gap():Number
+        {
+            return _gap;
+        }
+
+		/**
+		 *  @private
+		 */
+		public function set gap(value:Number):void
+		{
+			if (_gap != value)
+            {
+				COMPILE::JS
+				{
+					if(hostComponent)
+						setGap(value);
+					
+					_gap = value;
+					gapInitialized = true;
+				}
+            }
+		}
+
+		COMPILE::JS
+		private function setGap(value:Number):void
+		{
+			if (value >= 0 && value <= GAPS*GAP_STEP)
+			{
+				if (hostClassList.contains("gap-" + _gap + "x" + GAP_STEP + "px"))
+					hostClassList.remove("gap-" + _gap + "x" + GAP_STEP + "px");
+				if(value != 0)
+					hostClassList.add("gap-" + value + "x" + GAP_STEP + "px");
+			} else
+				throw new Error("Gap needs to be between 0 and " + GAPS*GAP_STEP);
+		}
+		
         /**
          * @copy org.apache.royale.core.IBeadLayout#layout
          * @royaleignorecoercion org.apache.royale.core.ILayoutHost
@@ -312,14 +406,9 @@ package org.apache.royale.jewel.beads.layouts
             }
             COMPILE::JS
             {
-                var contentView:IParentIUIBase = layoutView as IParentIUIBase;
-				var c:UIBase = (contentView as UIBase);
-				c.element.classList.add("layout");
-				c.element.classList.add("horizontal");
-
-				applyStyleToLayout(c, "gap");
+				//applyStyleToLayout(c, "gap");
 
-				var children:Array = contentView.internalChildren();
+				/*var children:Array = contentView.internalChildren();
 				var i:int;
 				var n:int = children.length;
 				for (i = 0; i < n; i++)
@@ -344,7 +433,7 @@ package org.apache.royale.jewel.beads.layouts
 					{
 						child.style.marginLeft = _gap + 'px';
 					}					
-				}
+				}*/
 
                 return true;
             }
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleHorizontalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleHorizontalLayout.as
index 77fac92..e0130ce 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleHorizontalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleHorizontalLayout.as
@@ -28,7 +28,8 @@ package org.apache.royale.jewel.beads.layouts
 	import org.apache.royale.core.ValuesManager;
 	import org.apache.royale.core.IStrand;
 
-	COMPILE::JS {
+	COMPILE::JS 
+	{
 		import org.apache.royale.core.UIBase;
 	}
 
@@ -59,12 +60,25 @@ package org.apache.royale.jewel.beads.layouts
 		}
 
 		/**
+		 * @royalesuppresspublicvarwarning
+		 */
+		public static const LAYOUT_TYPE_NAMES:String = "layout horizontal";
+
+		COMPILE::JS
+		protected var hostComponent:UIBase;
+
+		COMPILE::JS
+		protected var hostClassList:DOMTokenList;
+
+		/**
 		 *  @copy org.apache.royale.core.IBead#strand
 		 *  
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
 		 *  @productversion Royale 0.9.3
+		 *  @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+		 *  @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
 		 */
 		override public function set strand(value:IStrand):void
 		{
@@ -72,8 +86,14 @@ package org.apache.royale.jewel.beads.layouts
 
 			COMPILE::JS
 			{
-				var contentView:UIBase = layoutView as UIBase;
-				contentView.className = contentView.className ? contentView.className + " layout horizontal" : "layout horizontal";
+				hostComponent = host as UIBase;
+				hostClassList = hostComponent.positioner.classList;
+				if (hostClassList.contains("layout"))
+					hostClassList.remove("layout");
+				hostClassList.add("layout");
+				if(hostClassList.contains("horizontal"))
+					hostClassList.remove("horizontal");
+				hostClassList.add("horizontal");
 			}
 		}
 
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleVerticalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleVerticalLayout.as
index 171b46d..9786f20 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleVerticalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/SimpleVerticalLayout.as
@@ -60,12 +60,25 @@ package org.apache.royale.jewel.beads.layouts
 		}
 
 		/**
+		 * @royalesuppresspublicvarwarning
+		 */
+		public static const LAYOUT_TYPE_NAMES:String = "layout vertical";
+
+		COMPILE::JS
+		protected var hostComponent:UIBase;
+
+		COMPILE::JS
+		protected var hostClassList:DOMTokenList;
+
+		/**
 		 *  @copy org.apache.royale.core.IBead#strand
 		 *  
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
 		 *  @productversion Royale 0.9.3
+		 *  @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+		 *  @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
 		 */
 		override public function set strand(value:IStrand):void
 		{
@@ -73,8 +86,14 @@ package org.apache.royale.jewel.beads.layouts
 
 			COMPILE::JS
 			{
-				var contentView:UIBase = layoutView as UIBase;
-				contentView.className = contentView.className ? contentView.className + " layout vertical" : "layout vertical";
+				hostComponent = host as UIBase;
+				hostClassList = hostComponent.positioner.classList;
+				if (hostClassList.contains("layout"))
+					hostClassList.remove("layout");
+				hostClassList.add("layout");
+				if(hostClassList.contains("vertical"))
+					hostClassList.remove("vertical");
+				hostClassList.add("vertical");
 			}
 		}
 
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
index 24d3e82..5d15d74 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
@@ -28,8 +28,11 @@ package org.apache.royale.jewel.beads.layouts
 	import org.apache.royale.core.IUIBase;
     import org.apache.royale.core.layout.EdgeData;
 	import org.apache.royale.core.ValuesManager;
-	import org.apache.royale.core.layout.ILayoutStyleProperties;
 	import org.apache.royale.events.Event;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.utils.StringUtil;
+	import org.apache.royale.core.layout.ILayoutStyleProperties;
+
 
 	COMPILE::JS
 	{
@@ -47,7 +50,7 @@ package org.apache.royale.jewel.beads.layouts
 	 *  @playerversion AIR 2.6
 	 *  @productversion Royale 0.9.3
 	 */
-	public class VerticalLayout extends LayoutBase implements IBeadLayout, ILayoutStyleProperties
+	public class VerticalLayout extends SimpleVerticalLayout implements ILayoutStyleProperties
 	{
 		/**
 		 *  Constructor.
@@ -63,6 +66,32 @@ package org.apache.royale.jewel.beads.layouts
 		}
 
 		/**
+		 * @royalesuppresspublicvarwarning
+		 */
+		public static const LAYOUT_TYPE_NAMES:String = "layout vertical";
+
+		/**
+		 *  @copy org.apache.royale.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 *  @royaleignorecoercion org.apache.royale.core.IParentIUIBase
+		 *  @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+
+			COMPILE::JS
+			{
+				applyStyleToLayout(hostComponent, "gap");
+				setGap(_gap);
+			}
+		}
+
+		/**
 		 *  @private
 		 */
 		private var _paddingTop:Number = 0;
@@ -166,35 +195,49 @@ package org.apache.royale.jewel.beads.layouts
 			_paddingLeft = value;
 		}
 
-		/**
-		 *  @private
-		 */
 		private var gapInitialized:Boolean;
-		public static const GAP_STYLE:String = "gap"
-		private var _gap:Number = 0;
-
-		// [Bindable(event="gapChanged")]
+		// private var _gap:Boolean;
 		/**
-		 *  The gap between items.
+		 *  Assigns variable gap to grid from 1 to 20
+		 *  Activate "gap-Xdp" effect selector to set a numeric gap 
+		 *  between grid cells
 		 *
 		 *  @langversion 3.0
 		 *  @playerversion Flash 10.2
 		 *  @playerversion AIR 2.6
 		 *  @productversion Royale 0.9.3
 		 */
-		public function get gap():Number
-		{
-			return _gap;
-		}
+		// public function get gap():Boolean
+        // {
+        //     return _gap;
+        // }
 
 		/**
 		 *  @private
 		 */
-		public function set gap(value:Number):void
-		{
-			_gap = value;
-			gapInitialized = true;
-		}
+		// public function set gap(value:Boolean):void
+		// {
+		// 	if (_gap != value)
+        //     {
+		// 		COMPILE::JS
+		// 		{
+		// 			if(hostComponent)
+		// 				setGap(value);
+					
+		// 			_gap = value;
+		// 			gapInitialized = true;
+		// 		}
+        //     }
+		// }
+
+		// COMPILE::JS
+		// private function setGap(value:Boolean):void
+		// {
+		// 	if (value)
+		// 		hostClassList.add("gap");
+		// 	else
+		// 		hostClassList.remove("gap");
+		// }
 
 		/**
 		 *  Get the component layout style and apply to if exists
@@ -204,11 +247,11 @@ package org.apache.royale.jewel.beads.layouts
 		 * 
 		 *  @see org.apache.royale.core.layout.ILayoutStyleProperties#applyStyleToLayout(component:IUIBase, cssProperty:String):void
 		 * 
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.3
-		 */
+ 		 *  @langversion 3.0
+ 		 *  @playerversion Flash 10.2
+ 		 *  @playerversion AIR 2.6
+ 		 *  @productversion Royale 0.9.3
+ 		 */
 		public function applyStyleToLayout(component:IUIBase, cssProperty:String):void
 		{	
 			var cssValue:* = ValuesManager.valuesImpl.getValue(component, cssProperty);
@@ -216,11 +259,9 @@ package org.apache.royale.jewel.beads.layouts
 			{
 				switch(cssProperty)
 				{
-					case GAP_STYLE:
+					case "gap":
 						if(!gapInitialized)
-						{
 							gap = Number(cssValue);
-						}
 						break;
 					default:
 						break;
@@ -228,6 +269,59 @@ package org.apache.royale.jewel.beads.layouts
 			}
 		}
 
+
+		// number of gap styles available in CSS @see $gaps variable in _layout.sass
+		public static const GAPS:Number = 10;
+		// gap step size in each gap style rule in CSS @see $gap-step variable in _layout.sass
+		public static const GAP_STEP:Number = 3;
+
+		protected var _gap:Number = 0;
+		/**
+		 *  Assigns variable gap in steps of GAP_STEP. You have available GAPS*GAP_STEP gap styles
+		 *  Activate "gap-{X}x{GAP_STEP}px" effect selector to set a numeric gap between elements.
+		 *  i.e: gap-2x3px will result in a gap of 6px
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function get gap():Number
+        {
+            return _gap;
+        }
+
+		/**
+		 *  @private
+		 */
+		public function set gap(value:Number):void
+		{
+			if (_gap != value)
+            {
+				COMPILE::JS
+				{
+					if(hostComponent)
+						setGap(value);
+					
+					_gap = value;
+					gapInitialized = true;
+				}
+            }
+		}
+
+		COMPILE::JS
+		private function setGap(value:Number):void
+		{
+			if (value >= 0 && value <= GAPS*GAP_STEP)
+			{
+				if (hostClassList.contains("gap-" + _gap + "x" + GAP_STEP + "px"))
+					hostClassList.remove("gap-" + _gap + "x" + GAP_STEP + "px");
+				if(value != 0)
+					hostClassList.add("gap-" + value + "x" + GAP_STEP + "px");
+			} else
+				throw new Error("Gap needs to be between 0 and " + GAPS*GAP_STEP);
+		}
+
 		/**
 		 *  Layout children vertically
 		 *
@@ -317,41 +411,41 @@ package org.apache.royale.jewel.beads.layouts
 			}
 			COMPILE::JS
 			{
-				var contentView:IParentIUIBase = layoutView as IParentIUIBase;
-				var c:UIBase = (contentView as UIBase);
-				c.element.classList.add("layout");
-				c.element.classList.add("vertical");
+				// var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+				// var c:UIBase = (contentView as UIBase);
+				// c.element.classList.add("layout");
+				// c.element.classList.add("vertical");
 
-				applyStyleToLayout(c, "gap");
+				//applyStyleToLayout(c, "gap");
 				
-				var children:Array = contentView.internalChildren();
-				var i:int;
-				var n:int = children.length;
-				for (i = 0; i < n; i++)
-				{
-					var child:WrappedHTMLElement = children[i];
-
-					if(i == 0)
-					{
-						child.style.marginTop = _paddingTop + 'px';
-					}
-					else
-					{
-						child.style.marginTop = _gap + 'px';
-					}
-					child.style.marginRight = _paddingRight + 'px';
-					if(i === (n - 1))
-					{
-						child.style.marginBottom = _paddingBottom + 'px';
-					}
-					else
-					{
-						child.style.marginBottom = '0px';
-					}
-					child.style.marginLeft = _paddingLeft + 'px';
+				// var children:Array = contentView.internalChildren();
+				// var i:int;
+				// var n:int = children.length;
+				// for (i = 0; i < n; i++)
+				// {
+				// 	var child:WrappedHTMLElement = children[i];
+
+				// 	if(i == 0)
+				// 	{
+				// 		child.style.marginTop = _paddingTop + 'px';
+				// 	}
+				// 	else
+				// 	{
+				// 		child.style.marginTop = _gap + 'px';
+				// 	}
+				// 	child.style.marginRight = _paddingRight + 'px';
+				// 	if(i === (n - 1))
+				// 	{
+				// 		child.style.marginBottom = _paddingBottom + 'px';
+				// 	}
+				// 	else
+				// 	{
+				// 		child.style.marginBottom = '0px';
+				// 	}
+				// 	child.style.marginLeft = _paddingLeft + 'px';
 					
-					child.royale_wrapper.dispatchEvent('sizeChanged');
-				}
+				// 	child.royale_wrapper.dispatchEvent('sizeChanged');
+				// }
 
 				return true;
 			}
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
index aa1458f..d98214e 100644
--- a/frameworks/projects/Jewel/src/main/sass/_global.sass
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -37,7 +37,7 @@ button, input, textarea
 
 j|View
 	IBeadView: ClassReference("org.apache.royale.core.beads.GroupView")
-	//IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
+	IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
 
 j|Group
 	IBeadView: ClassReference("org.apache.royale.core.beads.GroupView")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index beede65..c97870d 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -17,44 +17,104 @@
 //
 ////////////////////////////////////////////////////////////////////////////////
 
+// Jewel Layouts
+
+// Layouts variables
+$gaps: 10
+$gap-step: 3
+$gap: 0px
+
 /* Absolute */
 .layout.absolute
-	position: relative
 	> *
 		position: absolute
-		//width: 100%
 
 .layout
 	display: flex
+	position: relative
 
 /* Horizontal */
 .layout.horizontal
 	flex-flow: row nowrap
 	align-items: flex-start
 	
-//.layout.horizontal.gap
-//	justify-content: space-between
+	@for $i from 1 through $gaps
+		&.gap-#{$i}x#{$gap-step}px
+			> *:first-child
+				margin: 0px
+			> *
+				margin: 0px 0px 0px ($gap + $i * $gap-step)
 
 /* Vertical */	
 .layout.vertical
 	flex-flow: column nowrap
 	align-items: flex-start
 	
-//.layout.vertical.gap
-//	justify-content: space-between
+	@for $i from 1 through $gaps
+		&.gap-#{$i}x#{$gap-step}px
+			> *:first-child
+				margin: 0px
+			> *
+				margin: ($gap + $i * $gap-step) 0px 0px
+
+/* Vertical */	
+.layout.tile
+	flex-flow: row wrap
+	align-items: flex-start
+	
+	// this not compile******
+	// &.gap
+	// 	> *:first-child
+	// 		margin: 0px
+	// 	> *:nth-child(-n+3)
+	// 		margin: 0px 0px 0px $gap-size
+	// 	> *:nth-child(3n)
+	// 		margin: $gap-size 0px 0px
+	// 	> *
+	// 		margin: $gap-size 0px 0px $gap-size
 
 .layout.horizontal.space
 	justify-content: space-between
 
 /* Grid */
-$gut: 0em
+$phone: 0px
+$tablet: 768px
+$desktop: 992px
+$widescreen: 1200px
+$grid-columns: 12 !default
+$gap-size: 10px !default
+
+
+$devices: (phone: $phone, tablet: $tablet) !default
+$computers: (desktop: $desktop, lg: $widescreen) !default
+$sizes: map-merge($devices, $computers)
+$size-names: map-keys($sizes)
+
 .layout.grid
-	flex-wrap: wrap
+	flex-flow: row wrap
+	align-items: stretch
+	width: 100%
+	
 	> *
-		flex: 1
-		// max-width: 100%
-	@for $i from 1 through 20
-		&.gap-#{$i}dp
-			margin: $gut - $i 0 $gut + $i $gut - $i
-			> *
-				padding: $gut + $i 0 0 $gut + $i
+		max-width: 100%
+		width: 100%
+	
+	&.gap
+		
+		> .cell
+			margin: $gap-size / 2
+	
+		@each $size in $size-names
+			@media (min-width: map-get($sizes, $size))
+				@for $i from 1 through $grid-columns
+					@for $j from 1 through $i
+						.#{$size}-col-#{$j}-#{$i}
+							width: calc(#{percentage($j / $i)} - #{$gap-size})
+							
+	@each $size in $size-names
+		@media (min-width: map-get($sizes, $size))
+			@for $i from 1 through $grid-columns
+				@for $j from 1 through $i
+					.#{$size}-col-#{$j}-#{$i}
+						width: percentage($j / $i)
+		
diff --git a/frameworks/themes/JewelTheme/src/main/resources/defaults.css b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
index 22f5a20..29bab45 100644
--- a/frameworks/themes/JewelTheme/src/main/resources/defaults.css
+++ b/frameworks/themes/JewelTheme/src/main/resources/defaults.css
@@ -20,8 +20,8 @@ j|Application {
   background: white;
   font-family: "Lato", sans-serif;
   color: #808080;
-  padding: 10px;
-  margin: 10px;
+  padding: 0px;
+  margin: 0px;
 }
 
 h1 {
@@ -193,7 +193,7 @@ div {
 }
 
 j|Card {
-  gap: 10;
+  gap: 3;
 }
 
 .jewel.checkbox input + span::before {
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
index d57d574..02b0eee 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/_global.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -25,8 +25,8 @@ j|Application
 	font:
 		family: $font-stack
 	color: $default-font-color
-	padding: 10px
-	margin: 10px
+	padding: 0px
+	margin: 0px
 
 h1
 	font-size: 2em
diff --git a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
index 0fe5f97..fd1cd6c 100644
--- a/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
+++ b/frameworks/themes/JewelTheme/src/main/sass/components-primary/_card.sass
@@ -38,4 +38,4 @@
     padding: 20px
 
 j|Card
-    gap: 10
+    gap: 3


Mime
View raw message