Skip to content

Add flexbox tutorial showing how to realise vertical placements of elements #33

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
seanhess merged 7 commits into from
Nov 4, 2026
Merged

Add flexbox tutorial showing how to realise vertical placements of elements #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b7d12cf
Fix example: Missing -threaded compiler arg
benjaminweb Oct 5, 2026
bcb2654
Add flexbox tutorial to examples
benjaminweb Oct 5, 2026
021947b
extend flexbox tutorial; add pad & gap demo; move flexWrap from texts…
benjaminweb Oct 6, 2026
65e31d2
add text align to text example
benjaminweb Oct 6, 2026
a0de643
add whitespace text example
benjaminweb Oct 6, 2026
04b3ea7
remove whitespace example from text example in favor of dedicated whi…
benjaminweb Oct 6, 2026
26871c3
add text baseline alignment example
benjaminweb Oct 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
200 changes: 183 additions & 17 deletions example/app/Main.hs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ()
Expand Down Expand Up @@ -204,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
Expand All @@ -218,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"
Expand All @@ -229,31 +250,56 @@ 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

el ~ bold $ "css order"
el ~ flexCol . flexRow $ 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."

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
Expand All @@ -274,6 +320,123 @@ longContent = do
row $ do
tag "div" ~ bg Light . pad (XY 10 2) . fontSize 16 . textAlign AlignCenter $ text lang

layout :: Html ()
layout = col ~ grow $ do
row ~ pad 10 . gap 30 $ do
col $ do
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
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"
spaceYellow = el ~ bg Warning . grow $ space
flexStart = box ~ grow $ do
r1 >> r2 >> r3
flexCenter = col ~ border 1 . pad 10 . grow $ do
spaceYellow >> r1 >> r2 >> r3 >> spaceYellow
flexEnd = col ~ border 1 . pad 10 . grow $ do
spaceYellow >> r1 >> r2 >> r3
spaceBetween = col ~ border 1 . pad 10 . grow $ do
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

Expand All @@ -285,13 +448,14 @@ 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"
link "layout" "Layout"
where
link href = tag "a" @ att "href" href ~ color Primary


app :: Application
app req respond = do
case pathInfo req of
Expand All @@ -301,9 +465,11 @@ 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
["layout"] -> view layout
["static", "reset.css"] -> reset
_ -> notFound
where
Expand Down
2 changes: 1 addition & 1 deletion example/example.cabal
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Loading