You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/09/19 12:33:21 UTC
[royale-asjs] branch develop updated: Improve layouts and examples
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 84d3127 Improve layouts and examples
84d3127 is described below
commit 84d31273b3d78c0fa1524faf32cc9041b0d383c7
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Sep 19 14:33:13 2018 +0200
Improve layouts and examples
---
.../src/main/resources/jewel-example-styles.css | 3 +-
.../src/main/royale/GridPlayGround.mxml | 38 +++---
.../src/main/royale/LayoutsPlayGround.mxml | 141 ++++++++++++++++++++-
.../projects/Jewel/src/main/resources/defaults.css | 8 +-
.../royale/jewel/beads/layouts/BasicLayout.as | 12 +-
.../royale/jewel/beads/layouts/GridCellLayout.as | 17 ---
.../royale/jewel/beads/layouts/TableLayout.as | 18 +--
.../Jewel/src/main/sass/components/_alert.sass | 6 +-
.../Jewel/src/main/sass/components/_layout.sass | 6 +-
9 files changed, 173 insertions(+), 76 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 3e7d8d1..5b748ed 100644
--- a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
@@ -58,7 +58,7 @@
}
.wrapper {
- /* outline: 0px dashed navy; */
+ outline: 1px dashed navy;
}
.box {
@@ -66,7 +66,6 @@
border-radius: 3px;
padding: 12px;
color: white;
- /* outline: 1px dashed navy; */
}
.jewel.item.string
diff --git a/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
index 7f51f78..60bc54f 100644
--- a/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/GridPlayGround.mxml
@@ -37,7 +37,7 @@ limitations under the License.
<html:H3 text="Grids"/>
<j:CheckBox text="Turn Gap on/off" change="useGap = !useGap;" selected="true"/>
- <j:Grid className="wrapper" gap="{useGap}">
+ <j:Grid gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="1"
tabletNumerator="1" tabletDenominator="1"
phoneNumerator="1" phoneDenominator="1">
@@ -45,7 +45,7 @@ limitations under the License.
</j:GridCell>
</j:Grid>
- <j:Grid className="wrapper" gap="{useGap}">
+ <j:Grid gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="2"
tabletNumerator="1" tabletDenominator="2"
phoneNumerator="1" phoneDenominator="2">
@@ -58,7 +58,7 @@ limitations under the License.
</j:GridCell>
</j:Grid>
- <j:Grid className="wrapper" gap="{useGap}">
+ <j:Grid gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="3"
tabletNumerator="1" tabletDenominator="3"
phoneNumerator="1" phoneDenominator="3">
@@ -76,7 +76,7 @@ limitations under the License.
</j:GridCell>
</j:Grid>
- <j:Grid className="wrapper" gap="{useGap}">
+ <j:Grid gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="4"
tabletNumerator="1" tabletDenominator="2"
phoneNumerator="1" phoneDenominator="1">
@@ -98,7 +98,7 @@ limitations under the License.
<html:Div className="box" text="4"/>
</j:GridCell>
</j:Grid>
- <j:Grid className="wrapper" gap="{useGap}">
+ <j:Grid gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="5"
tabletNumerator="1" tabletDenominator="3"
phoneNumerator="1" phoneDenominator="2">
@@ -126,7 +126,7 @@ limitations under the License.
</j:GridCell>
</j:Grid>
- <j:Grid className="wrapper" gap="{useGap}">
+ <j:Grid gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="6"
tabletNumerator="1" tabletDenominator="3"
phoneNumerator="1" phoneDenominator="2">
@@ -160,7 +160,7 @@ limitations under the License.
</j:Grid>
- <j:Grid className="wrapper" gap="{useGap}">
+ <j:Grid gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="7"
tabletNumerator="1" tabletDenominator="4"
phoneNumerator="1" phoneDenominator="3">
@@ -199,7 +199,7 @@ limitations under the License.
</j:Grid>
- <j:Grid className="wrapper" gap="{useGap}">
+ <j:Grid gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="8"
tabletNumerator="1" tabletDenominator="4"
phoneNumerator="1" phoneDenominator="2">
@@ -242,7 +242,7 @@ limitations under the License.
</j:GridCell>
</j:Grid>
- <j:Grid className="wrapper" gap="{useGap}">
+ <j:Grid gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="9"
tabletNumerator="1" tabletDenominator="4"
phoneNumerator="1" phoneDenominator="2">
@@ -290,7 +290,7 @@ limitations under the License.
</j:GridCell>
</j:Grid>
- <j:Grid className="wrapper" gap="{useGap}">
+ <j:Grid gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="10"
tabletNumerator="1" tabletDenominator="5"
phoneNumerator="1" phoneDenominator="4">
@@ -343,7 +343,7 @@ limitations under the License.
</j:GridCell>
</j:Grid>
- <j:Grid className="wrapper" gap="{useGap}">
+ <j:Grid gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="11"
tabletNumerator="1" tabletDenominator="5"
phoneNumerator="1" phoneDenominator="4">
@@ -401,7 +401,7 @@ limitations under the License.
</j:GridCell>
</j:Grid>
- <j:Grid id="g" className="wrapper" gap="{useGap}">
+ <j:Grid id="g" gap="{useGap}">
<j:GridCell desktopNumerator="1" desktopDenominator="12"
tabletNumerator="1" tabletDenominator="6"
phoneNumerator="1" phoneDenominator="4">
@@ -466,7 +466,7 @@ limitations under the License.
<html:H3 text="Grids Responsive Visibility"/>
- <j:Grid className="wrapper" gap="true">
+ <j:Grid gap="true">
<j:GridCell desktopNumerator="1" desktopDenominator="2"
tabletNumerator="1" tabletDenominator="2"
phoneNumerator="1" phoneDenominator="2">
@@ -480,7 +480,7 @@ limitations under the License.
</j:GridCell>
</j:Grid>
- <j:Grid className="wrapper" gap="true">
+ <j:Grid gap="true">
<j:GridCell desktopNumerator="1" desktopDenominator="3"
tabletNumerator="1" tabletDenominator="3"
phoneNumerator="1" phoneDenominator="3"
@@ -500,7 +500,7 @@ limitations under the License.
</j:GridCell>
</j:Grid>
- <j:Grid className="wrapper" gap="true">
+ <j:Grid gap="true">
<j:GridCell desktopNumerator="1" desktopDenominator="4"
tabletNumerator="1" tabletDenominator="2"
phoneNumerator="1" phoneDenominator="1">
@@ -528,7 +528,7 @@ limitations under the License.
<html:H4 text=" itemsTop"/>
- <j:Grid className="wrapper" gap="true" itemsVerticalAlign="itemsTop">
+ <j:Grid gap="true" itemsVerticalAlign="itemsTop">
<j:GridCell desktopNumerator="1" desktopDenominator="3"
tabletNumerator="1" tabletDenominator="3"
phoneNumerator="1" phoneDenominator="3">
@@ -548,7 +548,7 @@ limitations under the License.
<html:H4 text=" itemsBottom"/>
- <j:Grid className="wrapper" gap="true" itemsVerticalAlign="itemsBottom">
+ <j:Grid gap="true" itemsVerticalAlign="itemsBottom">
<j:GridCell desktopNumerator="1" desktopDenominator="3"
tabletNumerator="1" tabletDenominator="3"
phoneNumerator="1" phoneDenominator="3">
@@ -568,7 +568,7 @@ limitations under the License.
<html:H4 text=" itemsCentered"/>
- <j:Grid className="wrapper" gap="true" itemsVerticalAlign="itemsCentered">
+ <j:Grid gap="true" itemsVerticalAlign="itemsCentered">
<j:GridCell desktopNumerator="1" desktopDenominator="3"
tabletNumerator="1" tabletDenominator="3"
phoneNumerator="1" phoneDenominator="3">
@@ -588,7 +588,7 @@ limitations under the License.
<html:H4 text=" itemsSameHeight"/>
- <j:Grid className="wrapper" gap="true" itemsVerticalAlign="itemsSameHeight" height="200">
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight" height="200">
<j:GridCell desktopNumerator="1" desktopDenominator="3"
tabletNumerator="1" tabletDenominator="3"
phoneNumerator="1" phoneDenominator="3">
diff --git a/examples/royale/JewelExample/src/main/royale/LayoutsPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/LayoutsPlayGround.mxml
index 66b9726..a9413e1 100644
--- a/examples/royale/JewelExample/src/main/royale/LayoutsPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/LayoutsPlayGround.mxml
@@ -40,43 +40,170 @@ limitations under the License.
tabletNumerator="1" tabletDenominator="3"
phoneNumerator="1" phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel Group"/>
+ <html:H3 text="Jewel BasicLayout (width200, height:200px)"/>
- <j:Group>
+ <j:Group width="200" height="200" className="wrapper">
+ <j:Button text="Origin" emphasis="primary"/>
+ <j:Button text="x:30,y:30" emphasis="secondary" x="30" y="30"/>
+ <j:Button text="x:60,y:60" emphasis="emphasized" x="60" y="60"/>
+ <j:Button text="bottom/right" style="bottom:0;right:0"/>
+ </j:Group>
+
+ </j:Card>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H4 text="Jewel HorizontalLayout"/>
+
+ <j:HGroup id="hg" gap="3" className="wrapper">
+ <j:Button text="X" emphasis="primary"/>
+ <j:Button text="Y" emphasis="secondary"/>
+ <j:Button text="Z" emphasis="emphasized"/>
+ <j:Button text="0" />
+ </j:HGroup>
+
+ <j:Slider width="200" value="3" minimum="0" maximum="10" valueChange="hg.gap = event.target.value"/>
+ </j:Card>
+ </j:GridCell>
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H4 text="Jewel VerticalLayout"/>
+
+ <j:VGroup id="vg" gap="3" className="wrapper">
+ <j:Button text="X" emphasis="primary"/>
+ <j:Button text="Y" emphasis="secondary"/>
+ <j:Button text="Z" emphasis="emphasized"/>
+ <j:Button text="0"/>
+ </j:VGroup>
+
+ <j:Slider width="200" value="3" minimum="0" maximum="10" valueChange="vg.gap = event.target.value"/>
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel HorizontalCenteredLayout (width200, height:200px)"/>
+
+ <j:Group width="200" height="200" className="wrapper">
+ <j:beads>
+ <j:HorizontalCenteredLayout id="hcl" gap="3"/>
+ </j:beads>
<j:Button text="X" emphasis="primary"/>
<j:Button text="Y" emphasis="secondary"/>
<j:Button text="Z" emphasis="emphasized"/>
+ <j:Button text="0" />
</j:Group>
+ <j:Slider width="200" value="3" minimum="0" maximum="10" valueChange="hcl.gap = event.target.value"/>
+
</j:Card>
</j:GridCell>
+
<j:GridCell desktopNumerator="1" desktopDenominator="3"
tabletNumerator="1" tabletDenominator="3"
phoneNumerator="1" phoneDenominator="1">
<j:Card>
+ <html:H3 text="Jewel VerticalCenteredLayout (width200, height:200px)"/>
+
+ <j:Group width="200" height="200" className="wrapper">
+ <j:beads>
+ <j:VerticalCenteredLayout id="vcl" gap="3"/>
+ </j:beads>
+ <j:Button text="X" emphasis="primary"/>
+ <j:Button text="Y" emphasis="secondary"/>
+ <j:Button text="Z" emphasis="emphasized"/>
+ <j:Button text="0" />
+ </j:Group>
+
+ <j:Slider width="200" value="3" minimum="0" maximum="10" valueChange="vcl.gap = event.target.value"/>
+
+ </j:Card>
+ </j:GridCell>
+ </j:Grid>
+
+ <j:Grid gap="true" itemsVerticalAlign="itemsSameHeight">
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel HorizontalFlowLayout"/>
+
+ <j:Group className="wrapper">
+ <j:beads>
+ <j:HorizontalFlowLayout id="hfl" gap="3"/>
+ </j:beads>
+ <j:Button text="X" emphasis="primary" width="60"/>
+ <j:Button text="Y" emphasis="secondary" width="60"/>
+ <j:Button text="Z" emphasis="emphasized" width="60"/>
+ <j:Button text="0" width="60"/>
+ </j:Group>
+
+ <j:Slider width="200" value="3" minimum="0" maximum="10" valueChange="hfl.gap = event.target.value"/>
+
+ </j:Card>
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
+ <html:H3 text="Jewel VerticalFlowLayout"/>
+
+ <j:Group className="wrapper" height="200">
+ <j:beads>
+ <j:VerticalFlowLayout id="vfl" gap="3"/>
+ </j:beads>
+ <j:Button text="X" emphasis="primary" width="60"/>
+ <j:Button text="Y" emphasis="secondary" width="60"/>
+ <j:Button text="Z" emphasis="emphasized" width="60"/>
+ <j:Button text="0" width="60"/>
+ </j:Group>
+
+ <j:Slider width="200" value="3" minimum="0" maximum="10" valueChange="vfl.gap = event.target.value"/>
+
+ </j:Card>
+ </j:GridCell>
+
+ <!-- <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ tabletNumerator="1" tabletDenominator="3"
+ phoneNumerator="1" phoneDenominator="1">
+ <j:Card>
<html:H4 text="Jewel HGroup"/>
- <j:HGroup>
+ <j:HGroup id="hg" gap="3">
<j:Button text="X" emphasis="primary"/>
<j:Button text="Y" emphasis="secondary"/>
<j:Button text="Z" emphasis="emphasized"/>
+ <j:Button text="0" />
</j:HGroup>
+ <j:Slider width="200" value="3" minimum="0" maximum="10" valueChange="hg.gap = event.target.value"/>
</j:Card>
- </j:GridCell>
- <j:GridCell desktopNumerator="1" desktopDenominator="3"
+ </j:GridCell> -->
+
+ <!-- <j:GridCell desktopNumerator="1" desktopDenominator="3"
tabletNumerator="1" tabletDenominator="3"
phoneNumerator="1" phoneDenominator="1">
<j:Card>
<html:H4 text="Jewel VGroup"/>
- <j:VGroup>
+ <j:VGroup id="vg" gap="3">
<j:Button text="X" emphasis="primary"/>
<j:Button text="Y" emphasis="secondary"/>
<j:Button text="Z" emphasis="emphasized"/>
+ <j:Button text="0"/>
</j:VGroup>
+
+ <j:Slider width="200" value="3" minimum="0" maximum="10" valueChange="vg.gap = event.target.value"/>
</j:Card>
- </j:GridCell>
+ </j:GridCell> -->
</j:Grid>
</j:SectionContent>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 996dba9..35a34c5 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -148,6 +148,7 @@ j|Form {
height: 50px;
}
.jewel.alert .content {
+ position: absolute;
top: 50px;
bottom: 50px;
width: 100%;
@@ -157,7 +158,6 @@ j|Form {
white-space: normal;
}
.jewel.alert .jewel.controlbar {
- position: absolute;
bottom: 0;
height: 50px;
}
@@ -168,6 +168,7 @@ j|Form {
}
}
j|Alert {
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.AlertModel");
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController");
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView");
@@ -768,7 +769,10 @@ j|Label {
overflow: auto;
}
-.layout.absolute > * {
+.layout.basic {
+ position: relative;
+}
+.layout.basic > * {
position: absolute;
}
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 3d1c67f..e475078 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
@@ -55,7 +55,7 @@ package org.apache.royale.jewel.beads.layouts
/**
* @royalesuppresspublicvarwarning
*/
- public static const LAYOUT_TYPE_NAMES:String = "layout absolute";
+ public static const LAYOUT_TYPE_NAMES:String = "layout basic";
/**
* Add class selectors when the component is addedToParent
@@ -76,9 +76,9 @@ package org.apache.royale.jewel.beads.layouts
if (hostClassList.contains("layout"))
hostClassList.remove("layout");
hostClassList.add("layout");
- if(hostClassList.contains("absolute"))
- hostClassList.remove("absolute");
- hostClassList.add("absolute");
+ if(hostClassList.contains("basic"))
+ hostClassList.remove("basic");
+ hostClassList.add("basic");
}
}
@@ -211,11 +211,11 @@ package org.apache.royale.jewel.beads.layouts
* display: flex;
* }
*
- * .layout.absolute {
+ * .layout.basic {
* position: relative;
* }
*
- * .layout.absolute > * {
+ * .layout.basic > * {
* position: 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
index c2b4f26..439968a 100644
--- 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
@@ -617,23 +617,6 @@ package org.apache.royale.jewel.beads.layouts
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/TableLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TableLayout.as
index c1c1f41..fb2efa7 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TableLayout.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/TableLayout.as
@@ -202,23 +202,7 @@ package org.apache.royale.jewel.beads.layouts
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/sass/components/_alert.sass b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
index 493f9a1..8e46acf 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_alert.sass
@@ -86,7 +86,7 @@ $alert-footer-height: 50px
// background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 14 14' version='1.1' xmlns='http://www.w3.org/2000/svg'><g transform='translate(-829, -278)'><g fill='#777777' transform='translate(825, 274)'><path d='M15.9921875,18 C15.8133104,18 11,13.05896 11,13.05896 C11,13.05896 6.20438984,18 6.0255127,18 C5.84663556,18 4,16.2295363 4,16.0506592 C4,15.871782 9.07348633,11 9.07348633,11 C9.07348633,11 4,6.21037128 4,6.03149414 C4,5.852617 5.84663556,4.05688477 6.0255127,4 [...]
.content
- // position: absolute
+ position: absolute
// padding: $alert-padding
top: $alert-header-height
bottom: $alert-footer-height
@@ -105,7 +105,7 @@ $alert-footer-height: 50px
.jewel.controlbar
// padding: 0px $alert-padding $alert-padding $alert-padding
- position: absolute
+ // position: absolute
bottom: 0
height: $alert-footer-height
@@ -130,7 +130,7 @@ $alert-footer-height: 50px
min-width: $alert-min-width + 100
j|Alert
- // IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.BasicLayout")
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout")
IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.AlertModel")
IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.AlertController")
IBeadView: ClassReference("org.apache.royale.jewel.beads.views.AlertView")
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
index feebb8a..13e6dbf 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_layout.sass
@@ -33,9 +33,9 @@ $gap-size: 10px !default
&.scroll
overflow: auto
-// Absolute
-.layout.absolute
- // position: absolute
+// Basic
+.layout.basic
+ position: relative
> *
position: absolute