Copyright	(c) 2023 Sean Hess
License	BSD3
Maintainer	Sean Hess <seanhess@gmail.com>
Stability	experimental
Portability	portable
Safe Haskell	None
Language	GHC2021

Web.Atomic

Contents

Haskell functions instead of classes

Description

Type-safe, composable CSS utility functions. Inspired by Tailwindcss and Elm-UI

Synopsis

module Web.Atomic.Types
module Web.Atomic.CSS
data Html a
el :: Html () -> Html ()
tag :: Text -> Html () -> Html ()
none :: Html ()
raw :: Text -> Html ()
text :: Text -> Html ()
module Web.Atomic.Html.Tag
renderText :: Html () -> Text
renderLazyText :: Html () -> Text
renderLazyByteString :: Html () -> ByteString

Haskell functions instead of classes

Style your html with composable CSS utility functions:

el ~ bold . pad 8 $ "Hello World"

This renders as the following HTML with embedded CSS utility classes:

<style type='text/css'>
.bold { font-weight:bold }
.p-8 { padding:0.500rem }
</style>

<div class='bold p-8'>Hello World</div>

Instead of relying on the fickle cascade for code reuse, factor and compose styles with the full power of Haskell functions!

header = bold
h1 = header . fontSize 32
h2 = header . fontSize 24
page = flexCol . gap 10 . pad 10

example = el ~ page $ do
  el ~ h1 $ "My Page"
  el ~ h2 $ "Introduction"
  el "lorem ipsum..."

This approach is inspired by Tailwindcss' Utility Classes

module Web.Atomic.Types

Atomic CSS

The main purpose of atomic-css is to provide CSS Utilities and the (~) operator to style HTML. These utilities can be used by any combinator library. See Hyperbole

bold :: Styleable h => CSS h -> CSS h
bold = utility "bold" ["font-weight" :. "bold"]

pad :: Styleable h => PxRem -> CSS h -> CSS h
pad px = utility ("pad" -. px) ["padding" :. style px]

example = el ~ bold . pad 10 $ "Padded and bold"

Web.Atomic.CSS contains many useful utilities:

module Web.Atomic.CSS

Html Monad

Atomic-css also provides an Html Monad and combinator library with basic functions to generate html and add attributes with the (@) operator

data Html a Source #

Html monad

import Web.Atomic

example = do
  el ~ pad 10 $ do
    el ~ fontSize 24 . bold $ "My Links"
    a @ href "hoogle.haskell.org" ~ link $ "Hoogle"
    a @ href "hackage.haskell.org" ~ link $ "Hackage"

link = underline . color Primary
a = tag "a"
href = att "href"