                         [box :size \"100%\" :child \"Content\"]]
             [box :child \"Footer\"]]]"]
                [gap :size "15px"]
-               [:p "the result looks like this..."]
-               ;[gap :size "10px"]
+               [:p "results in:"]
 
                [v-box
                 :gap      "1px"

            [re-demo.utils :refer [panel-title component-title paragraphs]]))


(defn left-column
  []
  [v-box
   :children [[title :level :level2 :label "Components"]
              [paragraphs
               [:p "Re-com comes with a flexible set of layout components. In general, these
                components are not themselves visible."]
               [:p "Instead, their purpose is to arrange other components."]
               [title :level :level2 :label "Two Boxes"]
               [:p "The two key components are " [:span.bold "h-box"] " and " [:span.bold "v-box"] ", which lay out
               their children horizontally and vertically respectively."]
               [:p "They are mutually composable, and can be arbitrarily nested to create complex arrangements."]
               [:p "Here's example code showing them nesting..."]]
               [:pre
                {:style {:width "460px"}}
"[v-box

                  :href "http://www.sketchingwithcss.com/samplechapter/cheatsheet.html"
                  :target "_blank"]]]

               [title :level :level2 :label "Be All In"]
               [:p "Flexbox works via the interplay of styles present on a " [:span.bold "container"] " (parent) and its " [:span.bold "items"] " (children).
               In any interesting layout, many DOM elements sit in a tree, acting as both a container for the level below, and an item for the level above."]
               [:p "If block-level elements (divs?) are present in this tree, they
               can break the flex style interplay up and down the DOM hierarchy, and cause a variety of layout issues."]
               [:p [:span.bold "As a result, we have found Flexbox use to be quite viral."] " Once you start using it, you
               end up using it everywhere - right up and down the DOM tree."]
               [:p "So, we recommend you go 100% all-in on using h-box and v-box. If you do, everything should \"just work\"."]
               [:p "So, never mint your own container " [:span.bold "[:div]"] " or "  [:span.bold "[:span]"] " unless
               you also  give them the correct flex styles, which is arduous and error prone."]

               ]]])


(defn size-table
  []
  (let [col1 "75px"
        col2 "130px"
        col3 "500px"]
    [v-box
     :children [[title :level :level2 :label "The :size Parameter (aka flex)"]
                [paragraphs
                 [:p "Both " [:span.bold "v-box"] " and " [:span.bold "h-box"] " have a parameter called " [:span.bold ":size"] ".
                 This parameter is the equivalent of the style " [:span.bold "flex"] " talked about to the left."]]
                [gap :size "10px"]
                [:p "Possible values:"]
                [v-box
                 :class "rc-div-table"
                 :align-self :start
                 :children [[h-box
                             :class "rc-div-table-header"
                             :children [[label :width col1 :label ":size"]
                                        [label :width col2 :label "G S B"]
                                        [label :width col3 :label "Description"]]]
                            [h-box
                             :class "rc-div-table-row"
                             :children [[label :width col1 :label "initial"]
                                        [label :width col2 :label "0 1 auto"]
                                        [:span {:style {:width col3}} "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. "]]]
                            [h-box
                             :class "rc-div-table-row"
                             :children [[label :width col1 :label "auto"]
                                        [label :width col2 :label "1 1 auto"]
                                        [:span {:style {:width col3}} "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."]]]
                            [h-box
                             :class "rc-div-table-row"
                             :children [[label :width col1 :label "none"]
                                        [label :width col2 :label "0 0 auto"]
                                        [:span {:style {:width col3}} "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."]]]
                            [h-box
                             :class "rc-div-table-row"
                             :children [[label :width col1 :label "100px"]
                                        [label :width col2 :label "0 0 100px"]
                                        [:span {:style {:width col3}} "Item is given a fixed 100px (in the flex direction).
                                                                      Good for fixed headers/footers and side bars of an exact size."]]]
                            [h-box
                             :class "rc-div-table-row"
