diff --git a/.gitignore b/.gitignore
index 0b04f20..c4f2c85 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,4 +21,6 @@ shadow-cljs.edn
 goldly_bindings_generated.cljs
 .lsp
 .webly
-.clj-kondo
\ No newline at end of file
+.clj-kondo
+demo/node_modules/
+demo/target/
diff --git a/README.md b/README.md
index 46a5f45..69a3423 100644
--- a/README.md
+++ b/README.md
@@ -48,10 +48,10 @@
 # Demo
 
 ```
-clojure -X:goldly-build :profile "npm-install"
-clojure -X:goldly-build :profile "compile"
-clojure -X:goldly-run
-
+cd demo
+clojure -X:demo:npm-install"
+clojure -X:demo:compile
+clojure -X:demo
 ```
 
 Navigate your webbrowser to port 8080. 
diff --git a/demo/config.edn b/demo/config.edn
index eafa583..6200ea5 100644
--- a/demo/config.edn
+++ b/demo/config.edn
@@ -1,9 +1,11 @@
-{:goldly {;:lazy true 
-          :watch-cljs-dir ["src/demo/page"]
-          :routes {:app {"" demo.page.welcome/welcome-page
-                         "input" demo.page.input/input-page
-                         "description-list" demo.page.desclist/desclist-page
-                         "layout" demo.page.layout/layout-page
-                         "grid-layout" demo.page.gridlayout/grid-layout-page
-                         "spaces" demo.page.spaces/spaces-page
-                         }}}}
\ No newline at end of file
+{:goldly {:watch-cljs-dir ["src/demo/page"]
+          :routes {:app {} ; demo route are in demo/resources/Ext/app.edn
+                   :api {}}}
+ 
+ 
+  :reval {:collections {:ui-input [:cljs "notebook/"]
+                        ;:demo [:clj "demo/notebook/"]
+                        :demo-cljs [:cljs "demo/notebook/"]
+                       }}
+ 
+ }
\ No newline at end of file
diff --git a/demo/demo/page/spaces.cljs b/demo/demo/page/spaces.cljs
deleted file mode 100644
index e9796f9..0000000
--- a/demo/demo/page/spaces.cljs
+++ /dev/null
@@ -1,31 +0,0 @@
-(ns demo.page.spaces
-  (:require 
-    [spaces]))
-
-(defn spaces-1 []
-  [spaces/viewport
-   [spaces/left {:size "20%" :style "blue" :trackSize true}
-    [spaces/description "Left"]]
-   [spaces/fill {:style "green" :trackSize true}
-    [spaces/bottom {:size "20%" :style "red" :trackSize true}]
-    [spaces/right {:size "20%" :style "blue" :trackSize true}]]])
-
-(defn spaces-demo []
-  [spaces/viewport
-   [spaces/top-resizeable {:size 50} "top"]
-   [spaces/fill {:class "bg-green-500"}
-    [:div
-     [spaces/left-resizeable {:size 200} "left"]
-     [spaces/right-resizeable {:size 200}
-            ;"right"
-      [:div
-       [spaces/fill {:class "bg-green-500"} "fill"]
-       [spaces/bottom-resizeable {:size 50} "bottom"]]]
-     [spaces/fill {:class "bg-green-500"}
-           ;[spaces-1]
-      [:div.bg-red-300.w-full.h-full "filling"]]]]])
-
-(defn spaces-page [{:keys [route-params query-params handler] :as route}]
-  [spaces-demo])
-
-
diff --git a/demo/deps.edn b/demo/deps.edn
new file mode 100644
index 0000000..ae72ea1
--- /dev/null
+++ b/demo/deps.edn
@@ -0,0 +1,32 @@
+{:paths ["src"
+         "resources" ; goldly-ext, css
+         "target/node_modules" ; css from npm modules
+         ]
+ :deps
+ {org.clojure/clojure    {:mvn/version "1.11.1"}
+  ; goldly
+  org.pinkgorilla/goldly {:mvn/version "0.4.635"}
+  ; goldly extensions
+  org.pinkgorilla/ui-input {:local/root "../" :deps/manifest :deps}
+  org.pinkgorilla/ui-repl {:mvn/version "0.0.73"} ; reagent
+  org.pinkgorilla/devtools {:mvn/version "0.0.18"} ; devtools
+  }
+
+ :aliases
+ {:demo {:exec-fn modular.system/start!
+         :exec-args {:profile "jetty"
+                     :config ["webly/config.edn"
+                              "goldly/config.edn"
+                              "config.edn"]
+                     :services "goldly/services.edn"}}
+
+  :npm-install
+  {:exec-fn goldly.app.build/goldly-build
+   :exec-args {:profile "npm-install"}}
+
+  :compile
+  {:exec-fn goldly.app.build/goldly-build
+   :exec-args {:profile "compile2"}}}}
+
+
+ 
diff --git a/demo/resources/ext/app.edn b/demo/resources/ext/app.edn
new file mode 100644
index 0000000..3f11900
--- /dev/null
+++ b/demo/resources/ext/app.edn
@@ -0,0 +1,14 @@
+{:name "demo-app"
+ :cljs-routes {"" demo.page.welcome/welcome-page
+               "input" demo.page.input/input-page
+               "description-list" demo.page.desclist/desclist-page
+               "layout" demo.page.layout/layout-page
+               "grid-layout" demo.page.gridlayout/grid-layout-page
+               "spaces/" {"main" demo.page.spaces/spaces-page
+                          "layout-viewport-lrt"  demo.page.spaces/spaces-layout-lrt-viewport-page
+                          "layout-viewport-lrm"  demo.page.spaces/spaces-layout-lrm-viewport-page
+                          "layout-fixed-lrt"  demo.page.spaces/spaces-layout-lrt-fixed-page
+                          "layout-fixed-lrm"  demo.page.spaces/spaces-layout-lrm-fixed-page}}
+ 
+
+}
\ No newline at end of file
diff --git a/demo/demo/lib/debounce.cljs b/demo/src/demo/lib/debounce.cljs
similarity index 97%
rename from demo/demo/lib/debounce.cljs
rename to demo/src/demo/lib/debounce.cljs
index 10218a4..113b21d 100644
--- a/demo/demo/lib/debounce.cljs
+++ b/demo/src/demo/lib/debounce.cljs
@@ -1,8 +1,7 @@
 (ns demo.lib.debounce
- (:require
+  (:require
    [ui.debounce :refer [debounce]]))
 
-
 (defn save-input! [input & args]
   (js/console.log "debounce test: Saving input: " input))
 
diff --git a/demo/demo/lib/link.cljs b/demo/src/demo/lib/link.cljs
similarity index 92%
rename from demo/demo/lib/link.cljs
rename to demo/src/demo/lib/link.cljs
index ddc678d..71a09e3 100644
--- a/demo/demo/lib/link.cljs
+++ b/demo/src/demo/lib/link.cljs
@@ -1,6 +1,6 @@
 (ns demo.lib.link
   (:require
-    [re-frame.core :as rf]))
+   [re-frame.core :as rf]))
 
 (rf/dispatch [:css/set-theme-component :tailwind-full "light"])
 
diff --git a/demo/demo/page/desclist.cljs b/demo/src/demo/page/desclist.cljs
similarity index 96%
rename from demo/demo/page/desclist.cljs
rename to demo/src/demo/page/desclist.cljs
index 0fc4792..2474ab7 100644
--- a/demo/demo/page/desclist.cljs
+++ b/demo/src/demo/page/desclist.cljs
@@ -1,5 +1,5 @@
 (ns demo.page.desclist
-  (:require 
+  (:require
    [container]))
 
 (defn desclist-page [{:keys [route-params query-params handler] :as route}]
diff --git a/demo/demo/page/gridlayout.cljs b/demo/src/demo/page/gridlayout.cljs
similarity index 99%
rename from demo/demo/page/gridlayout.cljs
rename to demo/src/demo/page/gridlayout.cljs
index 3e6778f..959bfeb 100644
--- a/demo/demo/page/gridlayout.cljs
+++ b/demo/src/demo/page/gridlayout.cljs
@@ -2,7 +2,6 @@
   (:require
    [ui.gridlayout :refer [gridlayout]]))
 
-
 (defn grid-layout-page [{:keys [route-params query-params handler] :as route}]
   [:div.bg-green-300 {:style {:width 1000
                               :height 600}}
diff --git a/demo/demo/page/input.cljs b/demo/src/demo/page/input.cljs
similarity index 97%
rename from demo/demo/page/input.cljs
rename to demo/src/demo/page/input.cljs
index 10fb5d9..a129158 100644
--- a/demo/demo/page/input.cljs
+++ b/demo/src/demo/page/input.cljs
@@ -1,13 +1,11 @@
 (ns demo.page.input
-  (:require 
+  (:require
    [reagent.core :as r]
    [input]
    [input2]
    [container]
    [demo.lib.link :refer [link-href]]
-   [demo.lib.debounce :refer [save-input-debounced!]]
-   
-   ))
+   [demo.lib.debounce :refer [save-input-debounced!]]))
 
 (defn input-page [{:keys [route-params query-params handler] :as route}]
   (let [*state (r/atom {:name "Someone Special"
diff --git a/demo/demo/page/layout.cljs b/demo/src/demo/page/layout.cljs
similarity index 86%
rename from demo/demo/page/layout.cljs
rename to demo/src/demo/page/layout.cljs
index 325791a..7b6bec8 100644
--- a/demo/demo/page/layout.cljs
+++ b/demo/src/demo/page/layout.cljs
@@ -3,7 +3,6 @@
    [ui.webly :refer [dialog notify]]
    [ui.popover :refer [popover tooltip]]))
 
-
 (defn my-dialog []
   [:div
    {:style {:background-color "white"
@@ -28,11 +27,11 @@
                 :title  "oranges"
                 :content "Lets make orange juice"}]]
     [popover {:color "green"
-                        :placement "right"
-                        :button-text "trees-r"}
+              :placement "right"
+              :button-text "trees-r"}
      [tooltip {:color "green"
-                         :title  "tree"
-                         :content "How many trees are in a forest?"}]]]
+               :title  "tree"
+               :content "How many trees are in a forest?"}]]]
 
 ;[:h2.mt-5 "Tabs"]
    #_[:div
diff --git a/demo/src/demo/page/spaces.cljs b/demo/src/demo/page/spaces.cljs
new file mode 100644
index 0000000..6c8eab1
--- /dev/null
+++ b/demo/src/demo/page/spaces.cljs
@@ -0,0 +1,71 @@
+(ns demo.page.spaces
+  (:require
+   [spaces.core :as spaces]
+   [spaces.layout.screen :as layout-viewport]
+   [spaces.layout.fixed :as layout-fixed]
+   [demo.lib.link :refer [link-href]]))
+
+(defn nav-layout []
+  [:<>
+   [link-href "/spaces/main" "goto spaces/main"]
+   [link-href "/spaces/layout-viewport-lrt" "goto spaces/layout-viewport-lrt"]
+   [link-href "/spaces/layout-viewport-lrm" "goto spaces/layout-viewport-lrm"]
+   [link-href "/spaces/layout-fixed-lrt" "goto spaces/layout-fixed-lrt"]
+   [link-href "/spaces/layout-fixed-lrm" "goto spaces/layout-fixed-lrm"]])
+
+(defn spaces-1 []
+  [spaces/viewport
+   [spaces/left {:size "20%" :style "blue" :trackSize true}
+    [spaces/description "Left"]]
+   [spaces/fill {:style "green" :trackSize true}
+    [spaces/bottom {:size "20%" :style "red" :trackSize true}]
+    [spaces/right {:size "20%" :style "blue" :trackSize true}]]])
+
+(defn spaces-page [_]
+  [spaces/viewport
+   [spaces/top-resizeable {:size 50} [:div "top" [nav-layout]]]
+   [spaces/fill {:class "bg-green-500"}
+    [:div
+     [spaces/left-resizeable {:size 200} "left"]
+     [spaces/right-resizeable {:size 200}
+              ;"right"
+      [:div
+       [spaces/fill {:class "bg-blue-500"} "fill"]
+       [spaces/bottom-resizeable {:size 50 :class "bg-gray-300"} "bottom"]]]
+     [spaces/fill {:class "bg-green-500"}
+             ;[spaces-1]
+      [:div.bg-red-300.w-full.h-full "filling"]]]]])
+
+;; spaces layout viewport
+
+(defn spaces-layout-lrt-viewport-page [_]
+  [:div.bg-red-200
+   [layout-viewport/screen-left-right-top {:left [:div.bg-green-300.w-full.h-full "left"]
+                                           :right [:div.bg-blue-300.w-full.h-full "right"]
+                                           :top [:div.bg-gray-200.w-full.h-full "top"
+                                                 [nav-layout]]}]])
+
+(defn spaces-layout-lrm-viewport-page [_]
+  [layout-viewport/screen-left-right-middle {:left [:div.bg-green-300.w-full.h-full "left"]
+                                             :right [:div.bg-blue-300.w-full.h-full "right"]
+                                             :middle [:div.bg-gray-200.w-full.h-full "middle"
+                                                      [nav-layout]]}])
+
+;; spaces layout fixed
+
+(defn spaces-layout-lrt-fixed-page [_]
+  [:div.bg-blue-200 {:style {:width "100vw" :height "100vh"}}
+   [layout-fixed/left-right-top {:left [:div.bg-green-300.w-full.h-full "left"]
+                                 :right [:div.bg-blue-300.w-full.h-full "right"]
+                                 :top [:div.bg-gray-200.w-full.h-full "top"
+                                       [nav-layout]]}]])
+
+(defn spaces-layout-lrm-fixed-page [_]
+  [:div.bg-blue-200 {:style {:width "100vw" :height "100vh"}}
+   [layout-fixed/left-right-middle {:left [:div.bg-green-300.w-full.h-full "left"]
+                                    :right [:div.bg-blue-300.w-full.h-full "right"]
+                                    :middle [:div.bg-gray-200.w-full.h-full "middle"
+                                             [nav-layout]]}]])
+
+
+
diff --git a/demo/demo/page/welcome.cljs b/demo/src/demo/page/welcome.cljs
similarity index 62%
rename from demo/demo/page/welcome.cljs
rename to demo/src/demo/page/welcome.cljs
index 23db4c2..bd9553b 100644
--- a/demo/demo/page/welcome.cljs
+++ b/demo/src/demo/page/welcome.cljs
@@ -1,10 +1,10 @@
 (ns demo.page.welcome
-  (:require 
-     [reagent.core :as r]
-     [re-frame.core :as rf]
-     [input]
-     [ui.rnd :refer [rnd]]
-     [demo.lib.debounce :refer [save-input-debounced!]]))
+  (:require
+   [reagent.core :as r]
+   [re-frame.core :as rf]
+   [input]
+   [ui.rnd :refer [rnd]]
+   [demo.lib.debounce :refer [save-input-debounced!]]))
 
 (rf/dispatch [:css/set-theme-component :tailwind-full "light"])
 (rf/dispatch [:css/set-theme-component :tailwind-girouette false])
@@ -22,16 +22,16 @@
 
 (defn info-box []
   [rnd {:bounds "window"
-                  :scale 0.7
-                  :default {:width 200
-                            :height 200
-                            :x 200
-                            :y 100}
-                  :style {:display "flex"
+        :scale 0.7
+        :default {:width 200
+                  :height 200
+                  :x 200
+                  :y 100}
+        :style {:display "flex"
                        ;:alignItems "center"
-                          :justifyContent "center"
-                          :border "solid 1px #ddd"
-                          :background "#f0f0f0"}}
+                :justifyContent "center"
+                :border "solid 1px #ddd"
+                :background "#f0f0f0"}}
     ;[:h1 "asdf"]
    [info-content]])
 
@@ -41,9 +41,9 @@
    [:h1 "ui-input demos"]
 
    [:a {:href "input"} [:p "input"]]
-   [:a {:href "layout"} [:p "layout"]]
+   [:a {:href "/spaces/main"} [:p "layout"]]
    [:a {:href "description-list"} [:p "Description List"]]
    [:a {:href "grid-layout"} [:p "Grid Layout"]]
-   [:a {:href "spaces"} [:p "Spaces Layout"]]])
+   [:a {:href "spaces/main"} [:p "Spaces Layout"]]])
 
 
diff --git a/demo/src/notebook/spaces.cljs b/demo/src/notebook/spaces.cljs
new file mode 100644
index 0000000..90f671b
--- /dev/null
+++ b/demo/src/notebook/spaces.cljs
@@ -0,0 +1,17 @@
+(ns notebook.spaces
+  (:require
+   [spaces.layout.screen :as layout-viewport]
+   [spaces.layout.fixed :as layout-fixed]))
+
+(pr-str
+ (layout-viewport/screen-left-right-middle
+  {:left [:div.bg-green-300.w-full.h-full "left"]
+   :right [:div.bg-blue-300.w-full.h-full "right"]
+   :middle [:div.bg-gray-200.w-full.h-full "middle"]}))
+
+(pr-str
+ (layout-fixed/left-right-middle
+  {:left [:div.bg-green-300.w-full.h-full "left"]
+   :right [:div.bg-blue-300.w-full.h-full "right"]
+   :middle [:div.bg-gray-200.w-full.h-full "middle"]}))
+
diff --git a/deps.edn b/deps.edn
index fd2e5e1..9cf725c 100644
--- a/deps.edn
+++ b/deps.edn
@@ -38,33 +38,19 @@
   {:main-opts ["-m" "garamond.main"]
    :extra-deps {com.workframe/garamond {:mvn/version "0.4.0"}}}
 
-  ; demo ui
+  ; ci
 
-  :goldly-build ; goldly compile (show reval in goldly, but with up to date reval!)
+  :goldly-build ; ci only
   {:extra-paths ["target/webly" ; to include the sci-bindings info
-                 "demo"]
-   :extra-deps {org.pinkgorilla/goldly {:mvn/version "0.4.619"}
-                org.pinkgorilla/ui-repl {:mvn/version "0.0.72"} ; reagent
+                 "demo/src"
+                 "demo/resources"]
+   :extra-deps {org.pinkgorilla/goldly {:mvn/version "0.4.635"}
                 }
    :exec-fn goldly.app.build/goldly-build
    :exec-args {:profile "npm-install"
                :config  ["webly/config.edn" "goldly/config.edn" "demo/config.edn"]}}
 
-
-  :goldly-run ; goldly compile (show reval in goldly, but with up to date reval!)
-  {:extra-paths ["target/webly" ; to include the sci-bindings info
-                 "node_modules"
-                 "demo"]
-   :extra-deps {org.pinkgorilla/goldly {:mvn/version "0.4.619"}
-                org.pinkgorilla/ui-repl {:mvn/version "0.0.72"} ; reagent atoms in cljs
-                }
-   :exec-fn modular.system/start!
-   :exec-args {:profile "jetty"
-               :services "goldly/services.edn"
-               :config  ["webly/config.edn" "goldly/config.edn" "demo/config.edn"]}}
-
-
-
+   ; for demo see README.md or go to "demo" folder and run aliases there.
 
 ;
   }}
diff --git a/resources/ext/ui-spaces.edn b/resources/ext/ui-spaces.edn
index 51ca5eb..ac8e9e1 100644
--- a/resources/ext/ui-spaces.edn
+++ b/resources/ext/ui-spaces.edn
@@ -1,27 +1,56 @@
 {:name "ui-spaces"
  ; build
  :lazy-sci true
- :cljs-namespace [pinkgorilla.layout.spaces]
- :cljs-ns-bindings {'spaces {;; top-level-spaces
-                             'viewport pinkgorilla.layout.spaces/viewport
-                             'fixed pinkgorilla.layout.spaces/fixed
+ :cljs-namespace [spaces.core
+                  spaces.layout.fixed
+                  spaces.layout.screen]
+ :cljs-ns-bindings {'spaces {;; top-level-spaces                             ;; spaces is depreciated. use spaces.core
+                             'viewport spaces.core/viewport
+                             'fixed spaces.core/fixed
+                                                 ;; anchored-spaces
+                             'left spaces.core/left
+                             'right spaces.core/right
+                             'top spaces.core/top
+                             'bottom spaces.core/bottom
+                             'left-resizeable spaces.core/left-resizeable
+                             'right-resizeable spaces.core/right-resizeable
+                             'top-resizeable spaces.core/top-resizeable
+                             'bottom-resizeable spaces.core/bottom-resizeable
+                                                 ;; other
+                             'fill spaces.core/fill
+                             'positioned spaces.core/positioned
+                             'layer spaces.core/layer
+                             'centered spaces.core/centered
+                             'centered-vertically spaces.core/centered-vertically
+                                                 ;; helper
+                             'description spaces.core/description}
+                    'spaces.core {;; top-level-spaces
+                                  'viewport spaces.core/viewport
+                                  'fixed spaces.core/fixed
                              ;; anchored-spaces
-                             'left pinkgorilla.layout.spaces/left
-                             'right pinkgorilla.layout.spaces/right
-                             'top pinkgorilla.layout.spaces/top
-                             'bottom pinkgorilla.layout.spaces/bottom
-                             'left-resizeable pinkgorilla.layout.spaces/left-resizeable
-                             'right-resizeable pinkgorilla.layout.spaces/right-resizeable
-                             'top-resizeable pinkgorilla.layout.spaces/top-resizeable
-                             'bottom-resizeable pinkgorilla.layout.spaces/bottom-resizeable
+                                  'left spaces.core/left
+                                  'right spaces.core/right
+                                  'top spaces.core/top
+                                  'bottom spaces.core/bottom
+                                  'left-resizeable spaces.core/left-resizeable
+                                  'right-resizeable spaces.core/right-resizeable
+                                  'top-resizeable spaces.core/top-resizeable
+                                  'bottom-resizeable spaces.core/bottom-resizeable
                              ;; other
-                             'fill pinkgorilla.layout.spaces/fill
-                             'positioned pinkgorilla.layout.spaces/positioned
-                             'layer pinkgorilla.layout.spaces/layer
-                             'centered pinkgorilla.layout.spaces/centered
-                             'centered-vertically pinkgorilla.layout.spaces/centered-vertically
+                                  'fill spaces.core/fill
+                                  'positioned spaces.core/positioned
+                                  'layer spaces.core/layer
+                                  'centered spaces.core/centered
+                                  'centered-vertically spaces.core/centered-vertically
                              ;; helper
-                             'description pinkgorilla.layout.spaces/description}}
+                                  'description spaces.core/description}
+                    'spaces.layout.screen {'screen-main-top spaces.layout.screen/screen-main-top
+                                           'screen-left-right-top spaces.layout.screen/screen-left-right-top
+                                           'screen-left-right-middle spaces.layout.screen/screen-left-right-middle}
+                    'spaces.layout.fixed {'main-top spaces.layout.fixed/main-top
+                                          'left-right-top spaces.layout.fixed/left-right-top
+                                          'left-right-middle spaces.layout.fixed/left-right-middle}}
+
  :theme {:available  {:spaces {true ["react-spaces/dist/server.css"
                                      "spaces/gorilla.css"]}}
          :current {:spaces true}}}
diff --git a/resources/public/spaces/gorilla.css b/resources/public/spaces/gorilla.css
index e3c31be..259e619 100644
--- a/resources/public/spaces/gorilla.css
+++ b/resources/public/spaces/gorilla.css
@@ -1,19 +1,28 @@
 
 
-/* 
+ 
+.spaces-fullpage-layout {
+    position: absolute !important;
+}
+
+.spaces-fixedsize-layout {
+    position: relative !important;
+}
+
+
+
 .spaces-resize-handle {
-    background-color: red !important;
-    opacity: 0.5;
+    /*background-color: red !important;*/
+    opacity: 0.3;
+    /*border: 3px dotted black;*/
+    /*background-image: radial-gradient(#ff8a00, #e52e71);*/
+    background-image: radial-gradient(#212121 20%, #3d4144 20%);
+    background-position: 0 0;
 }
 
-*/
 
 .spaces-resize-handle:hover {
     background-color: blue !important;
-    opacity: 0.5;
-}
-
-.spaces-fullpage-layout {
-    position: absolute !important;
+    opacity: 0.7;
+    background-image: radial-gradient(#103ae3, #0e136b);
 }
-
diff --git a/src/pinkgorilla/debounce.cljs b/src/pinkgorilla/debounce.cljs
index 77726e4..2198da9 100644
--- a/src/pinkgorilla/debounce.cljs
+++ b/src/pinkgorilla/debounce.cljs
@@ -15,6 +15,6 @@
 
 (defn debounce [f interval]
   (let [d (goog.functions.debounce f interval)]
-    (info "debonced fn with interval: " interval)
+    (info "debounced fn with interval: " interval)
     d))
 
diff --git a/src/pinkgorilla/layout/spaces.cljs b/src/spaces/core.cljs
similarity index 87%
rename from src/pinkgorilla/layout/spaces.cljs
rename to src/spaces/core.cljs
index cf5bd33..005c30b 100644
--- a/src/pinkgorilla/layout/spaces.cljs
+++ b/src/spaces/core.cljs
@@ -1,4 +1,4 @@
-(ns pinkgorilla.layout.spaces
+(ns spaces.core
   (:require
    ["react-spaces" :as spaces]))
 
@@ -6,10 +6,15 @@
   (fn [opts & [child]]
     [:> c opts child]))
 
+(defn wrap-many [c]
+  (fn [& args]
+    (into [:> c]
+          args)))
+
 ;; top-level-spaces: Used at the top level of all other spaces.
 
-(def viewport (wrap spaces/ViewPort))
-(def fixed (wrap spaces/Fixed))
+(def viewport (wrap-many spaces/ViewPort))
+(def fixed (wrap-many spaces/Fixed))
 
 ;; anchored-spaces:  can be used within the top-level-spaces
 
diff --git a/src/spaces/layout/fixed.cljs b/src/spaces/layout/fixed.cljs
new file mode 100644
index 0000000..70b260e
--- /dev/null
+++ b/src/spaces/layout/fixed.cljs
@@ -0,0 +1,36 @@
+(ns spaces.layout.fixed
+  (:require
+   [spaces.core :as spaces]))
+
+(defn main-top [{:keys [top main top-size height width]
+                 :or {top-size 50
+                      height "100%"
+                      width "100%"}}]
+  ;(println "layout-fixed mt ...")
+  [spaces/fixed {:height height :width width}
+   [spaces/top-resizeable {:size top-size} top]
+   [spaces/fill {:scrollable false}
+    main]])
+
+(defn left-right-top [{:keys [top left right top-px left-size height width]
+                       :or {top-px 50
+                            left-size "50%"
+                            height "100%"
+                            width "100%"}}]
+  ;(println "layout-fixed lrt ...")
+  [spaces/fixed {:height height :width width}
+   [spaces/top-resizeable {:size top-px} top]
+   [spaces/fill
+    [spaces/left-resizeable {:size left-size :scrollable false} left]
+    [spaces/fill {:scrollable false} right]]])
+
+(defn left-right-middle [{:keys [left right middle left-size right-size height width]
+                          :or {left-size "25%"
+                               right-size "25%"
+                               height "100%"
+                               width "100%"}}]
+  ;(println "layout-fixed lrm ...")
+  [spaces/fixed {:height height :width width}
+   [spaces/left-resizeable {:size left-size} left]
+   [spaces/right-resizeable {:size right-size} right]
+   [spaces/fill {:scrollable false} middle]])
diff --git a/src/spaces/layout/screen.cljs b/src/spaces/layout/screen.cljs
new file mode 100644
index 0000000..a9e7e10
--- /dev/null
+++ b/src/spaces/layout/screen.cljs
@@ -0,0 +1,30 @@
+(ns spaces.layout.screen
+  (:require
+   [spaces.core :as spaces]))
+
+(defn screen-main-top [{:keys [top main top-size]
+                        :or {top-size 50}}]
+  ;(println "layout-viewport mt ...")
+  [spaces/viewport
+   [spaces/top-resizeable {:size top-size} top]
+   [spaces/fill {:scrollable false}
+    main]])
+
+(defn screen-left-right-top [{:keys [top left right top-size left-size]
+                              :or {top-size 50
+                                   left-size "50%"}}]
+  ;(println "layout-viewport lrt ...")
+  [spaces/viewport
+   [spaces/top-resizeable {:size top-size} top]
+   [spaces/fill
+    [spaces/left-resizeable {:size left-size :scrollable false} left]
+    [spaces/fill {:scrollable false} right]]])
+
+(defn screen-left-right-middle [{:keys [left right middle left-size right-size]
+                                 :or {left-size "25%"
+                                      right-size "25%"}}]
+   ;(println "layout-viewport lrm ...")
+  [spaces/viewport
+   [spaces/left-resizeable {:size left-size} left]
+   [spaces/right-resizeable {:size right-size} right]
+   [spaces/fill {:scrollable false} middle]])