atomic-css major refactor! Please Review. Fixes #17

[seanhess]

As mentioned in #20 - I have completely rewritten this library. It is now focused exclusively on implementing Atomic CSS. The "View" type with its ViewId reader context will be moved to hyperbole. This library could now be used with Blaze or another html combinator library if desired.

@kfigiela @Skyfold @benjaminweb @benjamin-thomas @tusharad - please review if you can!

New library: atomic-css

This libary will be named "atomic-css" instead of "web-view". The old package will be deprecated. There will be a Web.Hyperbole.View that builds on this libary to add the features it needs.

This will be explicity opt-in for Hyperbole. I changed my mind about ease-of-use. I think it will help to inform users that this functionality comes from this package.

import Web.Hyperbole
import Web.Atomic.CSS

New Interface

Instead of tags requiring a "Mod" argument, we have implemented two operators in the style of Blaze's (!). Attributes are applied with @, and Utility classes are applied with ~.

  el ~ bold . fontSize 32 $ "My page"
  el "no first argument required"
  input @ placeholder "Not Focused" ~ border 1 . pad 10 . bg White

This is what it used to be:

  el (bold . fontSize 32) "My page"
  el id "old version required a first argument or `el_`"
  input (placeholder "Not Focused" . border 1 . pad 10 . bg White)

These are completely separate, so while you can compose attributes with each other, you can't compose an attribute and a utility:

autofocus :: Attributable h => Attributes h -> Attributes h
autofocus = att "autofocus" ""

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

willNotCompile :: Html ()
willNotCompile = do
  tag "div" @ autofocus . bold $ "bad"
  tag "div" ~ autofocus . bold $ "bad"
  tag "div" @ hover autofocus $ "can't hover an attribute"
  
correct :: Html ()
correct = do
  tag "div" @ autofocus ~ bold $ "good"
  tag "div" ~ hover bold $ "good"

Built-in Html Monad

This library includes an Html monad, which makes this a functional rendering library. It does not export any HTML tag functions, leaving this to downstream libraries.

Override Styles, Fixes #17

CSS now automatically overrides any previously applied utilities that affect the same property. If you create a "component" that sets some styles, you can easily override anything without worrying about precedence:

myButton :: Text -> Html ()
myButton lbl = tag "button" ~ border 1 . bold . bg Gray (text lbl)

example :: Html ()
example = do
  myButton "one"
  myButton "thick border" ~ border 10
  myButton "different background" ~ bg Green

Easy Custom CSS

I started down this path after becoming annoyed at the difficulty writing css-only tooltips. These required custom selectors. The previous interface was confusing. Now, you can create custom css rules, and these will not be modified by hover, etc. The example below predicatably adds a "tooltips" class to the the parent, and shows the ".tooltip" child when you hover over anything inside it.

  showTooltips :: Styleable h => CSS h -> CSS h
  showTooltips =
    css
      "tooltips"
      ".tooltips:hover > .tooltip"
      ["visibility" :. "visible"]
      
   example :: Html ()
   example = do
      tag "div" ~ showTooltips $ do
        tag "div" ~ hide . cls "tooltip" $ "Show on hover"
        tag "div" "always shown"

It's also much easier to define your own utilities if any are missing or you need something custom:

  borderCollapse :: Styleable h => CSS h -> CSS h
  borderCollapse = utility "brd-cl" ["border-collapse" :. "collapse"]
  
  margin :: Styleable h => PxRem -> CSS h -> CSS h
  margin n = utility ("margin" -. n) ["margin" :. style n]

  appLogo :: Styleable h => CSS h -> CSS h
  appLogo =
    utility
      "logo"
      [ "background" :. "no-repeat center/90% url(/logo-robot.png)"
      , "color" :. "transparent"
      ]

[tusharad]

Thanks! I'll take a deeper into it but the new interface operator looks quite intuitive!

[seanhess]

Any and all comments welcome! I'd especially like to hear how you like the new interface. I'm open to hearing ideas about better operators if you can think of any.

Take a look at example/app/Main.hs to see a bunch of usage

https://github.com/seanhess/atomic-css/blob/atomic-css/example/app/Main.hs