                 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 h-box and v-box, which lay out their children horizontally and vertically respectively."]
+               [: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

               :children [[left-column]
                          [right-column]]]
              [line]
              [flex-property]]])

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

                             :class "rc-div-table-row"
                             :children [[label :width col1 :label "g s b"]
                                        [label :width col2 :label "grow shrink basis"]
                                        [:span {:style {:width col3}} "If none of the above common valaues above meet your needs, this gives you precise control."]]]]]]]))


(defn the-key-style
  []
  [v-box
   :children [[title :level :level2 :label "The Key Style"]
              [paragraphs
               [:p "In the Flexbox world, there are two parties in any layout - " [:span.bold "containers"] " and their child " [:span.bold "items"] "."]
               [:p "While the tutorials walk you through the menagerie of flexbox related styles, we've found that one style more than any other is
                 critical to getting what you want: the " [:span.bold "flex"] " style of the children."]
               [:p "When we're having a bad day with layouts, 90% of the time it is because we didn't get the flex style of a child right."]]
              [title :level :level2 :label "flex=??"]
              [paragraphs
               [:p "The tutorials tell you that the " [:span.bold "flex"] " style can be single values like " [:span.bold "none"] "  and " [:span.bold "auto"] ".
                 But realise that every single time, flex resolves to a triple of sub-values:"]
               [:ul
                [:li [:span [:span.bold "grow"]   " - Integer which determines how an item grows in size if there is extra container space to distribute. 0 for no growing."]]
                [:li [:span [:span.bold "shrink"] " - Integer which determines how an item shrinks in size if container space is reduced. 0 for no shrinking."]]
                [:li [:span [:span.bold "basis"]  " - The default size of an item before any necessary growing or shrinking. Can be
                  values like 60% or 100px. It can also be " [:span.bold "auto"] " which means to use the natural size of the item (or its further children)"]]]

               [:p "So even if you provide a single value like " [:span.bold "flex=\"none\""]  ",
                 what you are really providing is " [:span.bold "flex=\"0 0 auto\""] ". It always resolves to a triple. If you get this point, you are half way there."]

               [:p "Confusion reigns a bit because you can do this " [:span.bold "flex=\"auto\""]  ",
                 which resolves to " [:span.bold "flex=\"1 1 auto\""] ".  Eh?  My \"auto\" begates another \"auto\". Breeding like rabits."]
               [:p "Determines the value for the 'flex' attribute (which has grow, shrink and basis), based on the :size parameter."]
               [:p.bold "IMPORTANT: The term 'size' means width of the item in the case of flex-direction 'row' OR height of the item in the case of flex-direction 'column'."]
               [:p "Flex property explanation:"]
               ]
              [:p "Supported values:"]

              [gap :size "20px"]
              [paragraphs
               [:p "If number of words is not 1 or 3, an exception is thrown."]
               [:p "Reference: http://www.w3.org/TR/css3-flexbox/#flexibility"]
               [:p "Diagram:   http://www.w3.org/TR/css3-flexbox/#flex-container"]
                 [:p "Regex101 testing: ^(initial|auto|none)|(\\d+)(px|%|em)|(\\d+)\\w(\\d+)\\w(.*) - remove double backslashes"]]]])



