Bulma CSS class won't apply to element in Obelisk project

Question

I am trying to build a basic Haskell app with Obelisk and Bulma CSS.

This is my modified version of the Frontend.hs:

frontend :: Frontend (R FrontendRoute)
frontend = Frontend
  { _frontend_head = do
      el "title" $ text "The App Name"
      elAttr "link" ("href" =: static @"bulma.css" <> "type" =: "text/css" <> "rel" =: "stylesheet") blank
  , _frontend_body = do
      el "h1" $ text "Welcome to the app!"
      el "p" $ text $ T.pack commonStuff
      el "button is-primary" $ text "Put In Work"
      el "button is-link" $ text "My Profile"

      -- `prerender` and `prerender_` let you choose a widget to run on the server
      -- during prerendering and a different widget to run on the client with
      -- JavaScript. The following will generate a `blank` widget on the server and
      -- print "Hello, World!" on the client.
      prerender_ blank $ liftJSM $ void $ eval ("console.log('Hello, World!')" :: T.Text)

      -- elAttr "img" ("src" =: static @"victory.jpg") blank
      -- el "div" $ do
      --   exampleConfig <- getConfig "common/example"
      --   case exampleConfig of
      --     Nothing -> text "No config file found in config/common/example"
      --     Just s -> text $ T.decodeUtf8 s
      return ()
  }

My bulma.css file is exactly this file that I have cloned and dropped into my project (in the "static" directory): https://github.com/jgthms/bulma/blob/master/css/bulma.css

I do not understand why the "button is-primary" and "button is-link" parts are not applying correctly.

Other parts of bulma.css seem to be applying, as the fonts of the text are from bulma.css.

What is wrong with the argument I am giving to el?

Answer 1

The first argument to el is just the element name. If you want to add a class to it, look at elClass.