Halogen CSS - various formatting for tags

Help
#1

Hi

I am trying to play with the CSS and HH.Value_ pattern from @JordanMartinez learn-halogen using the adding CSS as blueprint

How do I use fontFamily and textColor?

Initially I tried to as [HH.span.. [CSS.style ] ]

staticHtmlWithPropsAndCss :: StaticHTML
staticHtmlWithPropsAndCss =
  HH.div
    [ HP.id_ "top-div", CSS.style $ backgroundColor tomato ]
    [ HH.div
      [ HP.class_ $ ClassName "special-div" ]
        [ HH.span
          [ HP.classes [ ClassName "class1", ClassName "class2", ClassName "class3" ]
          , CSS.style do
              fontSize $ px 20.0
              -- fontFamily ["monospace", "white"] ["sansSerif"]
              backgroundColor orchid
          ]
        [ HH.text "This is text in a span!" ]
        ]
      ]
    , HH.button
      [ HP.type_ ButtonButton ]
      [ HH.text "You can click me, but I don't do anything." ]
    ]

How do I specify span into an h1?

For example this html

staticHtmlWithPropsAndCss :: StaticHTML
staticHtmlWithPropsAndCss =
  HH.div
    [ HP.id_ "top-div", CSS.style $ backgroundColor tomato ]
    [ HH.div
      [ HP.class_ $ ClassName "special-div" ]
      [HH.h1
        , CSS.style do
          fontFamily ["monospace", "white"] ["sansSerif"]
          textColor white
        [ HH.span
          [ HP.classes [ ClassName "class1", ClassName "class2", ClassName "class3" ]
          , CSS.style do
              fontSize $ px 20.0
              -- fontStyle $ monospace
              -- fontFamily ["monospace", "white"] ["sansSerif"]
              backgroundColor orchid
              -- textColor white
          ]
        [ HH.text "This is text in a span!" ]
        ]
      ]
    , HH.button
      [ HP.type_ ButtonButton ]
      [ HH.text "You can click me, but I don't do anything." ]
    ]

What I am trying to do is something like this

<html>

  <head>
    <style>
      .button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }

    </style>
  </head>

  <body>
    <div id="top-div">
      <div class="special-div">
        <h1 style="color:blue; font-family:courier">
          <span class="class1 class2 class3" style="background-color:orchid; color:white; 
           font-size:50%; font-family:verdana; 
           text-align:center;">This is text in a span!</span>This is the h1 text!</h1>
        <div>
          <button class="button" type="button">You can click me, but I don't do anything</button>
        </div>
      </div>
    </div>
  </body>

</html>

As a workaround I can add <style> .button { to the html in static-html folder, but wonder if there’s a proper halogen way…

   , HH.button
      [ HP.type_ ButtonButton
      , HP.class_ $ ClassName "button" 
      ]
      [ HH.text "You can click me, but I don't do anything." ]
    ]

And

Thanks!

#2

The CSS stuff you’re using here isn’t a halogen specific thing, purescript-halogen-css just provides a style attribute that accepts a value from purescript-css. So I think the question you’re asking is "How do I write a style tag to the document head using purescript-css?

#3

How I see! That makes sense!
I was thinking wither that or add old plain cos to the generated html as a workaround. Looking at real world halogen it seems that’s the approach, @thomashoneyman?

#4

Just checking I understood the question :+1:

You could use purescript-css to render CSS still, but inserting it into the <head> would be done by manipulating the DOM directly using the purescript-web libraries.

That might make a nice (small) library actually. I don’t think this needs the benefits of the vdom, etc. since you wouldn’t need to be rendering it repeatedly with modifications. But just having something to manage the insertion for you, accumulate styles so you don’t have to define them all in once place, and so on.

#5

Real World Halogen just uses external stylesheets, so there’s no halogen-css or anything, just class names in the class property on the HTML elements.

You may find this discussion helpful:

It talks about different approaches to CSS in Halogen, including a library by @paulyoung that allows you to write styles to the <style> tag.

3 Likes
#6

@thomashoneyman yes I saw there a external css linked by lookignthrough the repo eventually :slight_smile: makes sense!