factored overflow, whiteSpace, instead of clip & scroll. Docs

asdf

Author: seanhess

README.md

@@ -3,74 +3,86 @@ Atomic CSS
 
 [![Hackage](https://img.shields.io/hackage/v/atomic-css.svg)][hackage]
 
-Type-safe HTML and CSS with intuitive layout and composable styles. Inspired by Tailwindcss and Elm-UI
+Type-safe, composable CSS utility functions. Inspired by Tailwindcss and Elm-UI
+
 
 ### Write Haskell instead of CSS
 
-Type-safe utility functions to generate styled HTML.
+Style your html with composable CSS utility functions:
 
 ```haskell
-myPage = col (gap 10) $ do
-  el (bold . fontSize 32) "My page"
-  button (border 1) "Click Me"
+el ~ bold . pad 8 $ "Hello World"
+```
+
+This renders as the following HTML with embedded CSS utility classes:
+
+```html
+<style type='text/css'>
+.bold { font-weight:bold }
+.p-8 { padding:0.500rem }
+</style>
+
+<div class='bold p-8'>Hello World</div>
 ```
 
-Leverage the full power of Haskell functions for reuse, instead of relying on CSS.
+Instead of relying on the fickle cascade, factor and compose styles with the full power of Haskell functions!
 
 ```haskell
 header = bold
 h1 = header . fontSize 32
 h2 = header . fontSize 24
-page = gap 10
+page = flexCol . gap 10 . pad 10
 
-myPage = col page $ do
-  el h1 "My Page"
-  ...
+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/utility-first)
+This approach is inspired by Tailwindcss' [Utility Classes](https://tailwindcss.com/docs/styling-with-utility-classes)
+
 
-### Intuitive Layouts
+### Intuitive Flexbox Layouts
 
-Easily create layouts with `row`, `col`, `grow`, and `space`
+Create complex layouts with `row`, `col`, `grow`, and `space`
 
 ```haskell
-holygrail :: View c ()
-holygrail = layout id $ do
-  row section "Top Bar"
-  row grow $ do
-    col section "Left Sidebar"
-    col (section . grow) "Main Content"
-    col section "Right Sidebar"
-  row section "Bottom Bar"
-  where section = 'border' 1
+holygrail = do
+  col ~ grow $ do
+    row "Top Bar"
+    row ~ grow $ do
+      col "Left Sidebar"
+      col ~ grow $ "Main Content"
+      col "Right Sidebar"
+    row "Bottom Bar"
 ```
 
-### Embedded CSS
-
-Views track which styles are used in any child node, and automatically embed all CSS when rendered. 
-
-    >>> renderText $ el bold "Hello"
-    
-    <style type='text/css'>.bold { font-weight:bold }</style>
-    <div class='bold'>Hello</div>
-
-
 ### Stateful Styles
 
-We can apply styles when certain states apply. For example, to change the background on hover:
+We can apply utilities when certain states apply. For example, to change the background on hover:
 
 ```haskell
-button (bg Primary . hover (bg PrimaryLight)) "Hover Me"
+button ~ bg Primary . hover (bg PrimaryLight) $ "Hover Me"
 ```
 
 Media states allow us to create responsive designs
 
 ```haskell
-el (width 100 . media (MinWidth 800) (width 400))
+el ~ width 100 . media (MinWidth 800) (width 400) $ do
   "Big if window > 800"
 ```
 
+
+### Embedded CSS
+
+Only the utilities used in a given html fragment are rendered:
+
+    >>> renderText $ el ~ bold $ "Hello"
+    
+    <style type='text/css'>.bold { font-weight:bold }</style>
+    <div class='bold'>Hello</div>
+
+
 ### Try Example Project with Nix
 
 If you want to get a feel for atomic-css without cloning the project run `nix run github:seanhess/atomic-css` to run the example webserver locally

atomic-css.cabal

@@ -6,8 +6,8 @@ cabal-version: 2.2
 
 name:           atomic-css
 version:        0.1.0
-synopsis:       Type-safe Atomic CSS with intuitive layouts and composable css utility classes. Inspired by Tailwindcss and Elm-UI
-description:    Type-safe Atomic CSS with intuitive layouts and composable css utility classes. Inspired by Tailwindcss and Elm-UI . See documentation for the @Web.Atomic@ module below
+synopsis:       Type-safe, composable CSS utility functions. Inspired by Tailwindcss and Elm-UI
+description:    Type-safe, composable CSS utility functions. Inspired by Tailwindcss and Elm-UI . See documentation for the @Web.Atomic@ module below
 category:       Web
 homepage:       https://github.com/seanhess/atomic-css
 bug-reports:    https://github.com/seanhess/atomic-css/issues
@@ -20,7 +20,7 @@ tested-with:
     GHC == 9.8.2
   , GHC == 9.6.6
 extra-source-files:
-    embed/preflight.css
+    embed/reset.css
 extra-doc-files:
     README.md
     CHANGELOG.md
@@ -41,6 +41,7 @@ library
       Web.Atomic.CSS.Text
       Web.Atomic.CSS.Transition
       Web.Atomic.Html
+      Web.Atomic.Html.Tag
       Web.Atomic.Render
       Web.Atomic.Types
       Web.Atomic.Types.Attributable

example/app/Main.hs

@@ -18,18 +18,6 @@ main = do
   Warp.run 3010 app
 
 
-col :: Html () -> Html ()
-col = tag "div" ~ flexCol
-
-
-row :: Html () -> Html ()
-row = tag "div" ~ flexRow
-
-
-space :: Html ()
-space = tag "div" ~ grow $ none
-
-
 nav :: Html () -> Html ()
 nav = tag "nav"
 
@@ -73,38 +61,41 @@ buttons = col ~ gap 10 . pad 20 $ do
 
 inputs :: Html ()
 inputs = do
-  col ~ fillViewport . pad 20 . gap 10 $ do
+  col ~ grow . pad 20 . gap 10 $ do
     el ~ bold $ "INPUT"
     input @ placeholder "Not Focused" ~ border 1 . pad 10 . bg White
     input @ placeholder "Should Focus" @ autofocus ~ border 1 . pad 10 . bg White
 
 
 responsive :: Html ()
 responsive = do
-  col ~ fillViewport . big flexRow $ do
-    nav ~ gap 10 . pad 20 . bg Primary . color White . small topbar . big sidebar $ do
-      el ~ bold $ "SIDEBAR"
-      el "One"
-      el "Two"
-      el "Three"
-
-    col ~ scroll . grow . pad 20 . gap 20 . bg White $ do
-      el ~ bold . fontSize 24 $ "Make the window smaller"
-      el "This demonstrates how to create a responsive design. Resize the window under 800px wide and the nav bar will switch to a top bar"
-
-      col ~ color Gray . gap 20 $ do
-        el $ text lorem
-        el $ text lorem
-        el $ text lorem
-        el $ text lorem
-        el $ text lorem
-        el $ text lorem
-        el $ text lorem
+  nav ~ pad 20 . gap 10 . bg Primary . color White . menu $ do
+    el ~ bold $ "MENU"
+    el "One"
+    el "Two"
+    el "Three"
+
+  col ~ content . grow . pad 20 . gap 20 . bg White $ do
+    el ~ bold . fontSize 24 $ "Make the window smaller"
+    el "This demonstrates how to create a responsive design. Resize the window under 800px wide and the nav bar will switch to a top bar"
+
+    col ~ color Gray . gap 20 $ do
+      el $ text lorem
+      el $ text lorem
+      el $ text lorem
+      el $ text lorem
+      el $ text lorem
+      el $ text lorem
+      el $ text lorem
  where
-  -- oh no@ the @ operator converts everythign to attributes@
-  -- and I need them to be CSS only@
-  sidebar = width 250 <> flexCol
-  topbar = height 100 <> flexRow
+  menuWidth = 250
+  menuHeight = 70
+
+  menu = big sidebar . small topbar
+  sidebar = width menuWidth . position Fixed . flexCol . top 0 . bottom 0 . left 0
+  topbar = height menuHeight . position Fixed . flexRow . top 0 . left 0 . right 0
+
+  content = big (margin (L menuWidth)) . small (margin (T menuHeight))
 
   big :: (Styleable c) => (CSS c -> CSS c) -> (CSS c -> CSS c)
   big = media (MinWidth 800)
@@ -114,7 +105,7 @@ responsive = do
 
 
 holygrail :: Html ()
-holygrail = col ~ fillViewport $ do
+holygrail = col ~ grow $ do
   row ~ bg Primary $ "Top Bar"
   row ~ grow $ do
     col ~ bg Secondary $ "Left Sidebar"
@@ -137,7 +128,7 @@ tooltips = do
   viewItemRow item = do
     col ~ stack . showTooltips . hover (color red) . pointer $ do
       el ~ border 1 . bg White $ text item
-      el ~ cls "tooltip" . popup (TR 10 10) . zIndex 1 . hidden $ do
+      el ~ cls "tooltip" . popup (TR 10 10) . zIndex 1 . visibility Hidden $ do
         col ~ border 2 . gap 5 . bg White . pad 5 $ do
           el ~ bold $ "ITEM DETAILS"
           el $ text item
@@ -147,13 +138,13 @@ tooltips = do
     css
       "tooltips"
       ".tooltips:hover > .tooltip"
-      (declarations visible)
+      (declarations $ visibility Visible)
 
   red = HexColor "#F00"
 
 
 stacks :: Html ()
-stacks = col ~ fillViewport $ do
+stacks = col ~ grow $ do
   row ~ bg Primary . bold . pad 10 . color White $ "Stacks"
   col ~ pad 10 . gap 10 $ do
     el "Stacks put contents on top of each other"
@@ -250,9 +241,9 @@ texts = col ~ gap 10 . pad 20 $ do
     el ~ border 1 . pad 5 $ "eight"
     el ~ border 1 . pad 5 $ "nine"
 
-  el ~ bold $ "textWrap"
-  el ~ border 1 . width 200 . textWrap NoWrap $ text lorem
-  el ~ border 1 . width 200 . textWrap Wrap $ text lorem
+  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

package.yaml

@@ -1,6 +1,7 @@
 name:               atomic-css
 version:            0.1.0
-synopsis:           Type-safe Atomic CSS with intuitive layouts and composable css utility classes. Inspired by Tailwindcss and Elm-UI
+synopsis:           Type-safe, composable CSS utility functions. Inspired by Tailwindcss and Elm-UI
+
 homepage:           https://github.com/seanhess/atomic-css
 github:             seanhess/atomic-css
 license:            BSD-3-Clause
@@ -9,7 +10,7 @@ author:             Sean Hess
 maintainer:         seanhess@gmail.com
 category:           Web
 description:
-  Type-safe Atomic CSS with intuitive layouts and composable css utility classes. Inspired by Tailwindcss and Elm-UI
+  Type-safe, composable CSS utility functions. Inspired by Tailwindcss and Elm-UI
   .
   See documentation for the @Web.Atomic@ module below
 
@@ -18,7 +19,7 @@ extra-doc-files:
   - CHANGELOG.md
 
 extra-source-files:
-  - embed/preflight.css
+  - embed/reset.css
 
 language: GHC2021
 

src/Web/Atomic.hs

@@ -6,10 +6,10 @@ Maintainer:  Sean Hess <seanhess@gmail.com>
 Stability:   experimental
 Portability: portable
 
-Type-safe Atomic CSS with intuitive layouts and composable css utility classes. Inspired by Tailwindcss and Elm-UI
+Type-safe, composable CSS utility functions. Inspired by Tailwindcss and Elm-UI
 -}
 module Web.Atomic
-  ( -- * How to use this library
+  ( -- * Haskell functions instead of classes
     -- $use
     module Web.Atomic.Types
 
@@ -24,6 +24,12 @@ module Web.Atomic
   , tag
   , none
   , raw
+  , text
+
+  -- ** Layout
+  , module Web.Atomic.Html.Tag
+
+  -- ** Rendering
   , renderText
   , renderLazyText
   , renderLazyByteString
@@ -33,13 +39,13 @@ import Web.Atomic.CSS
 import Web.Atomic.Html
 import Web.Atomic.Render
 import Web.Atomic.Types
+import Web.Atomic.Html.Tag
 
 
 -- TODO: update readme
--- TODO: decide on a tagline / synopsis and put it everywhere
 
 {- $html
-We also provide an Html Monad and combinator library with basic functions to generate html and add attributes with the `(@)` operator
+Atomic-css also provides an Html Monad and combinator library with basic functions to generate html and add attributes with the `(@)` operator
 -}
 
 
@@ -56,27 +62,28 @@ pad px = utility ("pad" -. px) ["padding" :. 'style' px]
 example = el ~ bold . pad 10 $ "Padded and bold"
 @
 
-See Web.Atomic.CSS for a full list of utilities provided by this library
+Web.Atomic.CSS contains many useful utilities:
 -}
 
 
 {- $use
 
-Create stylish html using composable haskell functions:
+Style your html with composable CSS utility functions:
 
 @
-'el' ~ 'bold' $ "Hello World"
+'el' ~ 'bold' . 'pad' 8 $ "Hello World"
 @
 
-This renders as the following HTML with embedded CSS definitions
+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'>Hello World</div>
+> <div class='bold p-8'>Hello World</div>
 
-Instead of relying on the fickle cascade, factor and compose styles with the full power of Haskell functions!
+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
@@ -86,8 +93,7 @@ Instead of relying on the fickle cascade, factor and compose styles with the ful
 > example = el ~ page $ do
 >   el ~ h1 $ "My Page"
 >   el ~ h2 $ "Introduction"
->   el "lorem ipsum yada yada yada"
->   ...
+>   el "lorem ipsum..."
 
 This approach is inspired by Tailwindcss' [Utility Classes](https://tailwindcss.com/docs/styling-with-utility-classes)
 -}