Atomic.hs

{- |
Module:      Web.Atomic
Copyright:   (c) 2023 Sean Hess
License:     BSD3
Maintainer:  Sean Hess <seanhess@gmail.com>
Stability:   experimental
Portability: portable

Type-safe, composable CSS utility functions. Inspired by Tailwindcss and Elm-UI
-}
module Web.Atomic
  ( -- * Haskell functions instead of classes
    -- $use
    module Web.Atomic.Types

    -- ** Atomic CSS
    -- $css
  , module Web.Atomic.CSS

    -- ** Html Monad
    -- $html
  , Html
  , el
  , tag
  , tag'
  , none
  , raw
  , text

    -- ** Layout
  , module Web.Atomic.Html.Tag

    -- ** Rendering
  , renderText
  , renderLazyText
  , renderLazyByteString
  ) where

import Web.Atomic.CSS
import Web.Atomic.Html
import Web.Atomic.Html.Tag
import Web.Atomic.Render
import Web.Atomic.Types


-- TODO: update readme

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


{- $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](https://github.com/seanhess/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:
-}


{- $use

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](https://tailwindcss.com/docs/styling-with-utility-classes)
-}