Merge pull request #103 from aeagle/release/v0.3

Release/v0.3

.gitignore

@@ -17,9 +17,11 @@
 .env.test.local
 .env.production.local
 
+debug.log*
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 **/.rpt2_cache
 **/.next
-**/storybook-static
+**/storybook-static
+.vscode

.storybook/preview-head.html

@@ -22,5 +22,9 @@
 
 	.spaces-resize-handle {
 		background-color: red !important;
+		opacity: 0.5;
+	}
+	.innerZoomElementWrapper .spaces-fullpage-layout {
+		position: absolute !important;
 	}
 </style>

README.md

@@ -2,13 +2,13 @@
 
 ![NPM](https://img.shields.io/npm/v/react-spaces.svg) ![Azure Pipelines](https://allan-eagle.visualstudio.com/All%20projects/_apis/build/status/aeagle.react-spaces?branchName=master)
 
-An easy to understand and nestable layout system, React Spaces allow you to divide a page or container into anchored, scrollable and resizable spaces enabling you to build desktop/mobile type user interfaces in the browser. 
+An easy to understand and nestable layout system, React Spaces allow you to divide a page or container into anchored, scrollable and resizable spaces enabling you to build desktop/mobile type user interfaces in the browser.
 
 Rather than a library of visual UI components, Spaces are intended to be the reusable foundational blocks for laying out a UI which responds neatly to view port resizes leaving you to fill them with whatever components you want.
 
-- No styling to achieve simple or complex layouts.
-- Spaces know how to behave in relation to each other and resize accordingly.
-- Spaces don't have any visual element to them (even padding or margins). You can fill them with whatever you want.
+-   No styling to achieve simple or complex layouts.
+-   Spaces know how to behave in relation to each other and resize accordingly.
+-   Spaces don't have any visual element to them (even padding or margins). You can fill them with whatever you want.
 
 **Version 0.2.0 release - read [release notes here](https://www.allaneagle.com/react-spaces/release-0.2.0).**
 
@@ -48,18 +48,20 @@ There are resizable versions of these components called **\<LeftResizable /\>**,
 
 A space which consumes any available area left in the parent container/space taking into account any anchored spaces on every side.
 
+**\<Positioned /\>**
+
+A space which can be absolutely placed within a parent space either by top, left, width and height or by top, left, right and bottom.
+
 **\<Layer /\>**
 
 Layers allow you to create layers within a parent space, for example:
 
 ```html
 <ViewPort>
-  <Layer zIndex="{0}">
-    <LeftResizable size="20%" /> // floating sidebar
-  </Layer>
-  <Layer zIndex="{1}">
-    <Fill />
-  </Layer>
+	<Layer zIndex="{0}"> <LeftResizable size="20%" /> // floating sidebar </Layer>
+	<Layer zIndex="{1}">
+		<Fill />
+	</Layer>
 </ViewPort>
 ```