From b7d12cf234ce3cf8a380eb5d50957316c1d3836c Mon Sep 17 00:00:00 2001 From: Benjamin Weber Date: Mon, 5 Oct 2026 11:05:22 +0200 Subject: [PATCH 1/7] Fix example: Missing -threaded compiler arg --- example/example.cabal | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/example.cabal b/example/example.cabal index 7c02a2f..24b5fb8 100644 --- a/example/example.cabal +++ b/example/example.cabal @@ -52,7 +52,7 @@ extra-doc-files: CHANGELOG.md -- extra-source-files: common warnings - ghc-options: -Wall + ghc-options: -Wall -threaded executable example -- Import common warning flags. From bcb2654fc2d325ba4acc8fc3d527e0ef60849da7 Mon Sep 17 00:00:00 2001 From: Benjamin Weber Date: Mon, 5 Oct 2026 22:18:36 +0200 Subject: [PATCH 2/7] Add flexbox tutorial to examples --- example/app/Main.hs | 91 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 91 insertions(+) diff --git a/example/app/Main.hs b/example/app/Main.hs index 671d46f..6bb1038 100644 --- a/example/app/Main.hs +++ b/example/app/Main.hs @@ -274,6 +274,95 @@ longContent = do row $ do tag "div" ~ bg Light . pad (XY 10 2) . fontSize 16 . textAlign AlignCenter $ text lang +flexTutorial :: Html () +flexTutorial = col ~ grow $ do + row ~ pad 10 . gap 30 $ do + col $ do + space + el "flex-direction: row" + flexDir row + col $ do + space + el "flex-direction: column" + flexDir col + col $ do + space + el "flex-wrap: wrap" + flexWrap' Wrap + col $ do + space + el "flex-wrap: wrap-reverse" + flexWrap' WrapReverse + row ~ pad 10 . gap 30 $ do + col ~ grow $ do + el "flex-grow" + flexGrow + row ~ pad 10 . gap 30 . grow $ do + col ~ pad 10 $ do + el "flex-start" + flexStart + col ~ pad 10 . grow $ do + el "flex-center" + flexCenter + col ~ pad 10 . grow $ do + el "flex-end" + flexEnd + col ~ pad 10 . grow $ do + el "space-between" + spaceBetween + col ~ pad 10 . grow $ do + el "space-around" + spaceAround + where + box x = el ~ border 1 . pad 10 $ x + flexDir dir = do + dir ~ border 1 . pad 30 $ do + do + box "one" + box "two" + box "three" + flexWrap' wrap = do + row ~ flexWrap wrap . border 1 . pad 10 $ do + box "one" + box "two" + box "three" + box "four" + box "five" + box "six" + box "seven" + box "eight" + box "nine" + box "ten" + box "eleven" + box "twelve" + flexGrow = do + row ~ border 1 . pad 30 $ do + do + box "one" + box ~ grow $ "two" + box "three" + r1 = row $ do + box ~ grow $ "one" + box ~ grow $ "two" + box "three" + r2 = row $ do + box "four" + box "five" + box ~ grow $ "six" + box "seven" + r3 = row $ do + box "eight" + box "nine" + flexStart = box ~ grow $ do + r1 >> r2 >> r3 + flexCenter = col ~ border 1 . pad 10 . grow $ do + space >> r1 >> r2 >> r3 >> space + flexEnd = col ~ border 1 . pad 10 . grow $ do + space >> r1 >> r2 >> r3 + spaceBetween = col ~ border 1 . pad 10 . grow $ do + r1 >> space >> r2 >> space >> r3 + spaceAround= col ~ border 1 . pad 10 . grow $ do + space >> r1 >> space >> r2 >> space >> r3 >> space -- rows = textAlign AlignCenter . border 1 . borderColor GrayLight @@ -288,6 +377,7 @@ examples = col ~ pad 20 . gap 15 $ do link "inputs" "Inputs" link "tooltips" "Tooltips" link "long-content" "Long Content" + link "flexTutorial" "Flex Tutorial" where link href = tag "a" @ att "href" href ~ color Primary @@ -304,6 +394,7 @@ app req respond = do ["inputs"] -> view inputs ["tooltips"] -> view tooltips ["long-content"] -> view longContent + ["flexTutorial"] -> view flexTutorial ["static", "reset.css"] -> reset _ -> notFound where From 021947b8602bdf723ce50e6cb0e35e9f9623b933 Mon Sep 17 00:00:00 2001 From: Benjamin Weber Date: Tue, 6 Oct 2026 15:40:27 +0200 Subject: [PATCH 3/7] extend flexbox tutorial; add pad & gap demo; move flexWrap from texts to layout --- example/app/Main.hs | 129 ++++++++++++++++++++++++-------------------- 1 file changed, 72 insertions(+), 57 deletions(-) diff --git a/example/app/Main.hs b/example/app/Main.hs index 6bb1038..fcc563e 100644 --- a/example/app/Main.hs +++ b/example/app/Main.hs @@ -229,18 +229,6 @@ texts = col ~ gap 10 . pad 20 $ do -- li (list Disc) "second" -- li (list None) "third" - el ~ bold $ "flexWrap" - row ~ gap 5 . width 200 . flexWrap WrapReverse $ do - el ~ border 1 . pad 5 $ "one" - el ~ border 1 . pad 5 $ "two" - el ~ border 1 . pad 5 $ "three" - el ~ border 1 . pad 5 $ "four" - el ~ border 1 . pad 5 $ "five" - el ~ border 1 . pad 5 $ "six" - el ~ border 1 . pad 5 $ "seven" - el ~ border 1 . pad 5 $ "eight" - el ~ border 1 . pad 5 $ "nine" - el ~ bold $ "White Space: text wrap" el ~ border 1 . width 200 . whiteSpace NoWrap . overflow Hidden $ text lorem el ~ border 1 . width 200 . whiteSpace Wrap $ text lorem @@ -274,45 +262,72 @@ longContent = do row $ do tag "div" ~ bg Light . pad (XY 10 2) . fontSize 16 . textAlign AlignCenter $ text lang -flexTutorial :: Html () -flexTutorial = col ~ grow $ do +layout :: Html () +layout = col ~ grow $ do row ~ pad 10 . gap 30 $ do col $ do - space - el "flex-direction: row" - flexDir row - col $ do - space - el "flex-direction: column" - flexDir col - col $ do - space - el "flex-wrap: wrap" - flexWrap' Wrap - col $ do - space - el "flex-wrap: wrap-reverse" - flexWrap' WrapReverse - row ~ pad 10 . gap 30 $ do - col ~ grow $ do - el "flex-grow" - flexGrow - row ~ pad 10 . gap 30 . grow $ do - col ~ pad 10 $ do - el "flex-start" - flexStart - col ~ pad 10 . grow $ do - el "flex-center" - flexCenter - col ~ pad 10 . grow $ do - el "flex-end" - flexEnd - col ~ pad 10 . grow $ do - el "space-between" - spaceBetween - col ~ pad 10 . grow $ do - el "space-around" - spaceAround + el ~ bold $ "spaces around & between elements" + row ~ gap 30 $ do + col ~ pad 10 . grow $ do + el "pad 20" + row ~ flexCol . border 1 . pad 20 . bg Warning $ do + el ~ border 1 . bg White $ "one" + el ~ border 1 . bg White $ "two" + el ~ border 1 . bg White $ "three" + col ~ pad 10 . grow $ do + el "gap 20" + row ~ flexCol . border 1 . gap 20 . bg Warning $ do + el ~ border 1 . bg White $ "one" + el ~ border 1 . bg White $ "two" + el ~ border 1 . bg White $ "three" + col ~ pad 10 . grow $ do + el "pad 20 . gap 20" + row ~ flexCol . border 1 . pad 20 . gap 20 . bg Warning $ do + el ~ border 1 . bg White $ "one" + el ~ border 1 . bg White $ "two" + el ~ border 1 . bg White $ "three" + -- inspired from: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ + col ~ pad 10 . gap 30 . grow $ do + el ~ bold $ "flexWrap" + row ~ pad 10 . gap 30 $ do + col $ do + space + el "flex-direction: row" + flexDir row + col $ do + space + el "flex-direction: column" + flexDir col + col $ do + space + el "flex-wrap: wrap" + flexWrap' Wrap + col $ do + space + el "flex-wrap: wrap-reverse" + flexWrap' WrapReverse + row ~ pad 10 . gap 30 $ do + col ~ grow $ do + el "flex-grow" + flexGrow + col ~ pad 10 . gap 30 . grow $ do + el ~ bold $ "vertical positioning by using `space`" + row ~ pad 10 . gap 30 . grow $ do + col ~ pad 10 $ do + el "flex-start" + flexStart + col ~ pad 10 . grow $ do + el "flex-center" + flexCenter + col ~ pad 10 . grow $ do + el "flex-end" + flexEnd + col ~ pad 10 . grow $ do + el "space-between" + spaceBetween + col ~ pad 10 . grow $ do + el "space-around" + spaceAround where box x = el ~ border 1 . pad 10 $ x flexDir dir = do @@ -353,16 +368,17 @@ flexTutorial = col ~ grow $ do r3 = row $ do box "eight" box "nine" + spaceYellow = el ~ bg Warning . grow $ space flexStart = box ~ grow $ do r1 >> r2 >> r3 flexCenter = col ~ border 1 . pad 10 . grow $ do - space >> r1 >> r2 >> r3 >> space + spaceYellow >> r1 >> r2 >> r3 >> spaceYellow flexEnd = col ~ border 1 . pad 10 . grow $ do - space >> r1 >> r2 >> r3 + spaceYellow >> r1 >> r2 >> r3 spaceBetween = col ~ border 1 . pad 10 . grow $ do - r1 >> space >> r2 >> space >> r3 - spaceAround= col ~ border 1 . pad 10 . grow $ do - space >> r1 >> space >> r2 >> space >> r3 >> space + r1 >> spaceYellow >> r2 >> spaceYellow >> r3 + spaceAround = col ~ border 1 . pad 10 . grow $ do + spaceYellow >> r1 >> spaceYellow >> r2 >> spaceYellow >> r3 >> spaceYellow -- rows = textAlign AlignCenter . border 1 . borderColor GrayLight @@ -377,11 +393,10 @@ examples = col ~ pad 20 . gap 15 $ do link "inputs" "Inputs" link "tooltips" "Tooltips" link "long-content" "Long Content" - link "flexTutorial" "Flex Tutorial" + link "layout" "Layout" where link href = tag "a" @ att "href" href ~ color Primary - app :: Application app req respond = do case pathInfo req of @@ -394,7 +409,7 @@ app req respond = do ["inputs"] -> view inputs ["tooltips"] -> view tooltips ["long-content"] -> view longContent - ["flexTutorial"] -> view flexTutorial + ["layout"] -> view layout ["static", "reset.css"] -> reset _ -> notFound where From 65e31d2fd467b9baafed3fd17dd74d26c612e998 Mon Sep 17 00:00:00 2001 From: Benjamin Weber Date: Tue, 6 Oct 2026 16:06:21 +0200 Subject: [PATCH 4/7] add text align to text example --- example/app/Main.hs | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/example/app/Main.hs b/example/app/Main.hs index fcc563e..4d5b281 100644 --- a/example/app/Main.hs +++ b/example/app/Main.hs @@ -238,6 +238,18 @@ texts = col ~ gap 10 . pad 20 $ do text "WOOT" text "BOOT" + el ~ bold $ "text align" + row ~ gap 30 . grow $ do + let c = text lorem + tAlign c AlignLeft "left" + tAlign c AlignCenter "center" + tAlign c AlignRight "right" + tAlign c AlignJustify "justify" + + where + tAlign c align t = col $ do + el t + el ~ pad 10 . textAlign align . border 1 $ c lorem :: Text lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." From a0de643fb6b3ff6f70ce6fcc18681e501896f0c7 Mon Sep 17 00:00:00 2001 From: Benjamin Weber Date: Tue, 6 Oct 2026 16:06:52 +0200 Subject: [PATCH 5/7] add whitespace text example --- example/app/Main.hs | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/example/app/Main.hs b/example/app/Main.hs index 4d5b281..e041c74 100644 --- a/example/app/Main.hs +++ b/example/app/Main.hs @@ -6,10 +6,13 @@ module Main where import Data.ByteString.Lazy (fromStrict) import Data.String.Interpolate (i) import Data.Text (Text) +import qualified Data.Text as T +import Data.List (intersperse) import Network.HTTP.Types (status200, status404) import Network.Wai import Network.Wai.Handler.Warp as Warp import Web.Atomic +import Web.Atomic.Html main :: IO () @@ -254,6 +257,35 @@ texts = col ~ gap 10 . pad 20 $ do lorem :: Text lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +whiteSpaceText :: Html () +whiteSpaceText = do + col $ do + el ~ bold $ "White Space: text wrap" + + row ~ gap 30 . pad 10 $ do + -- inspired from https://css-tricks.com/almanac/properties/w/whitespace/ + whiteSpaces Wrap "Wrap" + whiteSpaces PreWrap "PreWrap" + whiteSpaces PreLine "PreLine" + whiteSpaces BreakSpaces "BreakSpaces" + whiteSpaces NoWrap "NoWrap" + whiteSpaces Pre "Pre" + where + wSpace c align wrap t = col $ do + el t + el ~ pad 10 . textAlign align . whiteSpace wrap . border 1 . overflow Hidden $ c + intersperseWithSpace sp ts = Html () $ intersperse sp $ map Text ts + whiteSpaces algn algnT = col ~ width 100 . grow $ do + el algnT + col ~ pad 20 . gap 20 . border 1 $ do + let t sp = intersperseWithSpace (Raw sp) $ T.words lorem + wSpace (t " ") AlignLeft algn "[space]" + wSpace (t " ") AlignLeft algn " " + wSpace (t " ") AlignLeft algn " " + wSpace (t " ") AlignLeft algn " " + wSpace (t "‍") AlignLeft algn "‍" + wSpace (t "‍") AlignLeft algn "‍" + wSpace (t "‌") AlignLeft algn "‌" longContent :: Html () longContent = do @@ -402,6 +434,7 @@ examples = col ~ pad 20 . gap 15 $ do link "holygrail" "Holy Grail" link "stacks" "Stacks" link "text" "Text" + link "whitespace-text" "Whitespace Text" link "inputs" "Inputs" link "tooltips" "Tooltips" link "long-content" "Long Content" @@ -418,6 +451,7 @@ app req respond = do ["holygrail"] -> view holygrail ["stacks"] -> view stacks ["text"] -> view texts + ["whitespace-text"] -> view whiteSpaceText ["inputs"] -> view inputs ["tooltips"] -> view tooltips ["long-content"] -> view longContent From 04b3ea786c1c0e1766379decc53e0062916f3ad6 Mon Sep 17 00:00:00 2001 From: Benjamin Weber Date: Tue, 6 Oct 2026 16:08:51 +0200 Subject: [PATCH 6/7] remove whitespace example from text example in favor of dedicated whitespace --- example/app/Main.hs | 4 ---- 1 file changed, 4 deletions(-) diff --git a/example/app/Main.hs b/example/app/Main.hs index e041c74..d21ab5c 100644 --- a/example/app/Main.hs +++ b/example/app/Main.hs @@ -232,10 +232,6 @@ texts = col ~ gap 10 . pad 20 $ do -- li (list Disc) "second" -- li (list None) "third" - el ~ bold $ "White Space: text wrap" - el ~ border 1 . width 200 . whiteSpace NoWrap . overflow Hidden $ text lorem - el ~ border 1 . width 200 . whiteSpace Wrap $ text lorem - el ~ bold $ "css order" el ~ flexCol . flexRow $ do text "WOOT" From 26871c30c88e80c9b2049aa7bf0cc4be635b84eb Mon Sep 17 00:00:00 2001 From: Benjamin Weber Date: Tue, 6 Oct 2026 17:43:53 +0200 Subject: [PATCH 7/7] add text baseline alignment example --- example/app/Main.hs | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/example/app/Main.hs b/example/app/Main.hs index d21ab5c..11b82d2 100644 --- a/example/app/Main.hs +++ b/example/app/Main.hs @@ -207,6 +207,8 @@ stacks = col ~ grow $ do col ~ border 1 . popup (TR 5 5) $ "I AM AN ELEMENT" +alignToBaseline :: Styleable h => CSS h -> CSS h +alignToBaseline = utility "align-to-baseline" ["align-items" :. "baseline"] texts :: Html () texts = col ~ gap 10 . pad 20 $ do @@ -221,6 +223,22 @@ texts = col ~ gap 10 . pad 20 $ do el ~ underline $ "Underline Text" el ~ bold $ "Bold Text" + el ~ bold $ "text baseline alignment" + row ~ gap 20 $ do + col $ do + el "without baseline alignment" + row ~ border 1 . gap 10 . pad 10 $ do + el ~ fontSize 12 $ "small" + el ~ fontSize 50 $ "big" + el ~ fontSize 22 $ "middle" + + col $ do + el "with baseline alignment" + row ~ alignToBaseline . border 1 . gap 10 . pad 10 $ do + el ~ fontSize 12 $ "small" + el ~ fontSize 50 $ "big" + el ~ fontSize 22 $ "middle" + -- ol [] $ do -- let nums = list Decimal -- li nums "first"