- distinguish between Length and LenghTemplate (valid length is gap vs. valid lengths in gird-template-columns!)

- improve example

Author: clojj

TODO.md

@@ -1,24 +1,20 @@
+- complete https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout
 
-see https://codepen.io/clojj/pen/pmwWvL?&editable=true
+    see https://codepen.io/clojj/pen/pmwWvL?&editable=true
 
-spec for sizes
--
+- using `units (fr 1)` instead of just `fr 1` is a bit unfortunate, but it enforces CSS Grid validity
 
-`Each parameter can be a <length>, a <percentage>, a <flex> value, or one of the keyword values max-content, min-content, or auto.`
+- validate templates ? `Result Error err Ok template` as type ?
 
-`Some properties allow negative <length>s, while others do not.`
+- 'bad' templates can be defined, if the areas column- or row-length differs from any grid-template-rows/columns 
 
-see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
+- 'bad' templates can be defined, if the areas are do not shape a rectangle
 
-rename or remove module `CssGrid`
--
+- implement spec for sizes
 
-parameterize by fixed responsive 'profile' ("best-practices" media-queries) ?
--
+    `Each parameter can be a <length>, a <percentage>, a <flex> value, or one of the keyword values max-content, min-content, or auto.`
 
-test invalid templates.. add some validations ?
--
+    `Some properties allow negative <length>s, while others do not.`
 
-- 'bad' templates can be defined, if the areas column- or row-length differs from any grid-template-rows/columns 
+- parameterize by fixed responsive 'profile' ("best-practices" media-queries) ?
 
-- 'bad' templates can be defined, if the areas are do not shape a rectangle

examples/src/Simple.elm renamed to examples/src/InnerView.elm

@@ -1,11 +1,11 @@
-module Simple exposing (simpleTemplateBig, viewSimple)
+module InnerView exposing (simpleTemplateBig, viewInner)
 
 import Areas exposing (cont, contLeft, contRight, foot, head, navi)
 import Css as Css
 import Css.Media as Media exposing (only, screen)
 import CssGrid.Areas exposing (GridArea, gridAreaElement)
 import CssGrid.Simple exposing (ResponsiveTemplate, SimpleTemplate, simpleContainer, simpleTemplate)
-import CssGrid.Sizes exposing (fr, gap, px)
+import CssGrid.Sizes exposing (fr, gap, px, units)
 import Html.Styled exposing (Html, div, p, text)
 import Html.Styled.Attributes exposing (css)
 
@@ -18,7 +18,7 @@ simpleTemplateBig =
         , [ foot, foot, foot ]
         ]
         (gap (px 3))
-        [ fr 1, fr 1, fr 1 ]
+        [ units (fr 1), units (fr 1), units (fr 1) ]
 
 
 simpleTemplateSmall : SimpleTemplate
@@ -45,15 +45,15 @@ smallScreenTemplate =
     ( [ only screen [ Media.maxWidth (Css.px 400) ] ], simpleTemplateSmall )
 
 
-viewSimple : () -> Html.Styled.Html msg
-viewSimple _ =
+viewInner : () -> Html.Styled.Html msg
+viewInner _ =
     simpleContainer [ bigScreenTemplate, smallScreenTemplate ]
         []
         [ gridAreaElement head (panel <| text "head")
         , gridAreaElement navi (panel <| text "navi")
-        , gridAreaElement contLeft (panel <| p [] [text "left"])
-        , gridAreaElement cont (panel <| p [] [text "cont"])
-        , gridAreaElement contRight (panel <| p [] [text "right"])
+        , gridAreaElement contLeft (panel <| p [] [ text "left" ])
+        , gridAreaElement cont (panel <| p [] [ text "cont" ])
+        , gridAreaElement contRight (panel <| p [] [ text "right" ])
         , gridAreaElement foot (panel <| text "foot")
         ]
 

examples/src/Main.elm

@@ -13,14 +13,13 @@ import CssGrid.Sizes exposing (..)
 import Html
 import Html.Styled exposing (Attribute, Html, div, fromUnstyled, text, toUnstyled)
 import Html.Styled.Attributes exposing (css)
-import Simple exposing (viewSimple)
+import InnerView exposing (viewInner)
 
 
 type alias Model =
     ()
 
 
-
 initialModel : Model
 initialModel =
     ()
@@ -37,19 +36,22 @@ view model =
         []
         [ gridAreaElement head1 (testPanel "header ")
         , gridAreaElement navi1 (testPanel "nav ")
-        , gridAreaElement cont1 [ fromUnstyled CDN.stylesheet, bootstrapPanel, viewSimple model ]
+        , gridAreaElement contLeft1 (testPanel "contLeft ")
+        , gridAreaElement cont1 [ fromUnstyled CDN.stylesheet, bootstrapPanel, viewInner model ]
+        , gridAreaElement contRight1 (testPanel "contRight ")
         , gridAreaElement foot1 (testPanel "footer ")
         ]
 
+
 simpleTemplateBig : SimpleTemplate
 simpleTemplateBig =
     simpleTemplate
-        [ [ head1, navi1, navi1 ]
+        [ [ head1, navi1, contRight1 ]
         , [ contLeft1, cont1, contRight1 ]
         , [ foot1, foot1, foot1 ]
         ]
-        (gap (px 3))
-        [ fr 1, fr 1, fr 1 ]
+        (gap (px 10))
+        [ auto, units (fr 1), auto ]
 
 
 simpleTemplateSmall : SimpleTemplate

src/CssGrid/Simple.elm

@@ -3,7 +3,7 @@ module CssGrid.Simple exposing (ResponsiveTemplate, SimpleTemplate, simpleContai
 import Css exposing (Style, property)
 import Css.Media exposing (MediaQuery, withMedia)
 import CssGrid.Areas as Areas exposing (Areas, GridAreaElement, gridAreaElementArea, gridAreaElementChildren)
-import CssGrid.Sizes exposing (Gap, Length, gapToString, lengthToString)
+import CssGrid.Sizes exposing (Gap, Length, LengthTemplate, gapToString, lengthTemplateToString)
 import Html.Styled exposing (Attribute, Html, div)
 import Html.Styled.Attributes exposing (css)
 
@@ -29,10 +29,10 @@ See also this [common layout](https://developer.mozilla.org/en-US/docs/Web/CSS/C
 
 -}
 type SimpleTemplate
-    = SimpleTemplate Areas Gap (List Length)
+    = SimpleTemplate Areas Gap (List LengthTemplate)
 
 
-simpleTemplate : Areas -> Gap -> List Length -> SimpleTemplate
+simpleTemplate : Areas -> Gap -> List LengthTemplate -> SimpleTemplate
 simpleTemplate areas gap columnFractions =
     SimpleTemplate areas gap columnFractions
 
@@ -63,7 +63,7 @@ simpleTemplateToStyle (SimpleTemplate areas gap cols) =
             List.map (\gridAreas -> String.join " " (List.map Areas.toString gridAreas)) areas
 
         colSizes =
-            String.join " " (List.map lengthToString cols)
+            String.join " " (List.map lengthTemplateToString cols)
 
         templateCols =
             case cols of

src/CssGrid/Sizes.elm

@@ -1,28 +1,4 @@
-module CssGrid.Sizes exposing (Auto, Gap, Length, MinMax, fr, gap, gapToString, lengthToString, minmax, minmaxToString, px)
-
--- minmax(min, max)
-
-
-type MinMax
-    = MinMax Length Length
-
-
-minmax : Length -> Length -> MinMax
-minmax min max =
-    MinMax min max
-
-
-minmaxToString : MinMax -> String
-minmaxToString (MinMax min max) =
-    "minmax(" ++ lengthToString min ++ ", " ++ lengthToString max ++ ")"
-
-
-{-| auto
--}
-type Auto
-    = Auto
-
-
+module CssGrid.Sizes exposing (Gap, Length, LengthTemplate, auto, fr, gap, gapToString, lengthTemplateToString, lengthToString, minmax, px, units)
 
 -- TODO type <percentage>
 
@@ -32,16 +8,16 @@ type Length
     | Px Int
 
 
-px : Int -> Length
-px length =
-    Px length
-
-
 fr : Float -> Length
 fr length =
     Fr length
 
 
+px : Int -> Length
+px length =
+    Px length
+
+
 lengthToString : Length -> String
 lengthToString length =
     case length of
@@ -52,13 +28,47 @@ lengthToString length =
             String.fromInt int ++ "px"
 
 
+type LengthTemplate
+    = Units Length
+    | Auto
+    | MinMax Length Length
+
+
+units : Length -> LengthTemplate
+units =
+    Units
+
+
+auto : LengthTemplate
+auto =
+    Auto
+
+
+minmax : Length -> Length -> LengthTemplate
+minmax min max =
+    MinMax min max
+
+
+lengthTemplateToString : LengthTemplate -> String
+lengthTemplateToString length =
+    case length of
+        Units lengthUnits ->
+            lengthToString lengthUnits
+
+        Auto ->
+            "auto"
+
+        MinMax min max ->
+            "minmax(" ++ lengthToString min ++ ", " ++ lengthToString max ++ ")"
+
+
 type Gap
     = Gap Length
 
 
 gapToString : Gap -> String
-gapToString (Gap value) =
-    lengthToString value
+gapToString (Gap length) =
+    lengthToString length
 
 
 gap : Length -> Gap