               [p "Sure, use the shortcuts. But it is only by understanding triples that you become a power user of flexbox (or re-com layouts)."]
               [gap :size "10px"]]])
 
-(defn size-table
-  []
+
+(defn table-row
+  [size gsb description header?]
   (let [col1 "80px"
         col2 "130px"
-        col3 "500px"]
+        col3 "500px"
+        col3-style {:style {:width col3}}]
+  [h-box
+   :class (if header? "rc-div-table-header" "rc-div-table-row")
+   :children [[label :width col1 :label size]
+              [label :width col2 :label gsb]
+              (if header?
+                [label :width col3 :label description]
+                [:span col3-style description])]]))
+
+(defn size-table
+  []
     [v-box
      :children [[title :level :level2 :label ":size is flex"]
                 [p "Both " [:span.bold "v-box"] " and " [:span.bold "h-box"] " take a " [:span.bold ":size"] " parameter which "

                                        :href "http://i.stanford.edu/pub/cstr/reports/csl/tr/88/358/CSL-TR-88-358.pdf"
                                        :target "_blank"]
                                       ", and yet HTML5 only has a weak, half-arsed version?"]
                                      [p {:style {:width "250px"}} "Talk about regression."]]]]]
              [v-box
               :children [[title :level :level2 :label "Warning: Be All In"]
                          [p "Flexbox works via the interplay of styles present on a " [:span.bold "container"] " (parent) and its " [:span.bold "items"] " (children).

                [v-box
                 :class "rc-div-table"
                 :align-self :start
                 :children [[table-row
                             ":size"
                             "G S B"
                             "Description"
                             true]
                            [table-row
                             "initial"
                             "0 1 auto"
                             "Use the item's length. Never grow. Shrink if necessary.
                             Good for creating items with a natural maximum size, which can
                             shrink to some smaller size, typically given by min-width/height, if space becomes tight. "]
                            [table-row
                             "auto"
                             "1 1 auto"
                             "Use the item's length. Grow if necessary. Shrink (to min-size) if necessary.
                             Good for creating items that happily take as much
                             space as they are allowed, or can shrink as much as they are forced to.
                             If necessary, use min-width/height to provide limits."]
                            [table-row
                             "none"
                             "0 0 auto"
                             "Use the item's length. Never grow. Never shrink.
                             Good for creating rigid items that stick to their width/height if specified, otherwise their content size."]
                            [table-row
                             "100px"
                             "0 0 100px"
                             "Item is given a fixed length of 100px (in the flex direction).
                                                           Good for headers/footers of fixed size, or LHS nav columns."]

                            [table-row
                             "60"
                             "60 1 0px"
                             [:span "Set the item's default length to be 60 sibling-proportional units.
                                    Allow it to streach. And it can shrink to nothing."
                                    [:br]
                                    "Look back at the \"Sample Example\" up the
                                     top.  Notice that the \"content\" part has a :size of \"1\". Because the other child had a fixed
                                     size of 70px, the Content streaches to fill all available space. No other sibling is making claims for space, so \"1\" might as well be \"100%\"."]]
                            [table-row
                             "g s b"
                             "grow shrink basis"
                             "If none of the shortcut values above meet your needs,
                             you can always provide the triple yourself, to gain precise control. For example, the following item ..."]
                            [table-row
                             "1 0 auto"
                             "1 0 auto"
                             [:span "In this very app, the light grey part of the LHS nav has this " [:span.bold ":size"] ". The light
                             grey background colour must always strech to the bottom of the page, hence
                             the streach.  The basis comes from its child nav items, hence the auto.
                             But it can't go smaller than its children, hence shrink of 0."]]
                            ]]]])




(defn panel2
  []
  [v-box
   :gap "10px"
   :children [[panel-title "Layout"]
              [components-section]
              [example-section]
              [gap :size "10px"] [line]
              [flex-box-section]
              [gap :size "10px"] [line]
              [h-box
               :gap      "100px"
               :children [[key-style-section]
                          [size-table]]]

              [gap :size "20px"]]])


;; core holds a reference to panel, so need one level of indirection to get figwheel updates
