CSS classes in a separate module.

src/App/Container.purs

@@ -60,6 +60,7 @@ render :: forall m. MonadAff m => State -> H.ComponentHTML Action ChildSlots m
 render state
   = HH.div_ $
     [ render_nav
+    , Bulma.modal_domain_delete "blah.netlib.re"
     , render_header
     , render_auth_form
     , render_newdomain_interface

src/App/DomainListInterface.purs

@@ -14,6 +14,7 @@ module App.DomainListInterface where
 
 import Prelude (Unit, bind, discard, map, otherwise, pure, ($), (/=), (<<<), (<>))
 
+import CSSClasses as CSSClasses
 import Data.Array as A
 import Data.ArrayBuffer.Types (ArrayBuffer)
 import Data.Either (Either(..))
@@ -27,7 +28,6 @@ import Halogen.HTML.Events as HHE
 import Halogen.HTML.Properties as HP
 import Web.Event.Event as Event
 import Web.Event.Event (Event)
-
 import Bulma as Bulma
 
 import App.LogMessage
@@ -123,13 +123,13 @@ render { accepted_domains, my_domains, newDomainForm, wsUp }
         = [ HH.button
               [ HP.type_ HP.ButtonSubmit
               , HE.onClick \_ -> RemoveDomain domain
-              , HP.classes Bulma.class_button
+              , HP.classes CSSClasses.button
               ]
               [ HH.text "x" ]
           , HH.button
               [ HP.type_ HP.ButtonSubmit
               , HE.onClick \_ -> EnterDomain domain
-              , HP.classes Bulma.class_button
+              , HP.classes CSSClasses.button
               ]
               [ HH.text domain ]
           ]

src/Bulma.purs

@@ -9,6 +9,7 @@ import Halogen.HTML.Properties as HP
 import Halogen.HTML.Events as HE
 
 import Halogen.HTML.Properties.ARIA as ARIA
+import CSSClasses as C
 
 -- HTML PropName used with HP.prop
 import Halogen.HTML.Core (AttrName(..))
@@ -16,54 +17,28 @@ import Halogen.HTML.Core (AttrName(..))
 -- import Web.Event.Event (type_, Event, EventType(..))
 --import Web.UIEvent.MouseEvent (MouseEvent)
 
-class_columns  :: Array (HH.ClassName)
-class_columns  = [HH.ClassName "columns"  ]
-class_column   :: Array (HH.ClassName)
-class_column   = [HH.ClassName "column"   ]
-class_title    :: Array (HH.ClassName)
-class_title    = [HH.ClassName "title"    ]
-class_subtitle :: Array (HH.ClassName)
-class_subtitle = [HH.ClassName "subtitle" ]
-class_is5      :: Array (HH.ClassName)
-class_is5      = [HH.ClassName "is-5"     ]
-class_is4      :: Array (HH.ClassName)
-class_is4      = [HH.ClassName "is-4"     ]
-class_box      :: Array (HH.ClassName)
-class_box      = [HH.ClassName "box"      ]
-class_label    :: Array (HH.ClassName)
-class_label    = [HH.ClassName "label"    ]
-class_control  :: Array (HH.ClassName)
-class_control  = [HH.ClassName "control"  ]
-class_select   :: Array (HH.ClassName)
-class_select   = [HH.ClassName "select"   ]
-class_is_primary  :: Array (HH.ClassName)
-class_is_primary  = [HH.ClassName "is-primary"   ]
-class_is_light  :: Array (HH.ClassName)
-class_is_light  = [HH.ClassName "is-light"   ]
-
-
 columns :: forall (w :: Type) (i :: Type).
   Array (HH.ClassName) -> Array (HH.HTML w i) -> HH.HTML w i
-columns classes = HH.div [ HP.classes (class_columns <> classes) ]
+columns classes = HH.div [ HP.classes (C.columns <> classes) ]
 
 columns_ :: forall (w :: Type) (i :: Type). Array (HH.HTML w i) -> HH.HTML w i
 columns_ = columns []
 
 column :: forall (w :: Type) (i :: Type).
   Array (HH.ClassName) -> Array (HH.HTML w i) -> HH.HTML w i
-column classes = HH.div [ HP.classes (class_column <> classes) ]
+column classes = HH.div [ HP.classes (C.column <> classes) ]
 
 column_ :: forall (w :: Type) (i :: Type). Array (HH.HTML w i) -> HH.HTML w i
 column_ = column []
 
 h1 :: forall (w :: Type) (a :: Type). String -> HH.HTML w a
-h1 title = HH.h1 [ HP.classes (class_title) ] [ HH.text title ]
+h1 title = HH.h1 [ HP.classes (C.title) ] [ HH.text title ]
 
 h3 :: forall (w :: Type) (a :: Type). String -> HH.HTML w a
-h3 title = HH.h1 [ HP.classes (class_title <> class_is5) ] [ HH.text title ]
+h3 title = HH.h1 [ HP.classes (C.title <> C.is5) ] [ HH.text title ]
 
 --subtitle :: forall (w :: Type) (a :: Type). String -> HH.HTML w a
---subtitle title = HH.h2 [ HP.classes (class_subtitle <> class_is4) ] [ HH.text title ]
+--subtitle title = HH.h2 [ HP.classes (C.subtitle <> C.is4) ] [ HH.text title ]
 --
 --hdiv :: forall (w :: Type) (a :: Type). Array (HH.HTML w a) -> HH.HTML w a
 --hdiv = HH.div [ HP.classes [HH.ClassName "mt-5"] ]
@@ -132,8 +107,8 @@ input_email action email validity
 
 box_input_email :: forall w i. (String -> i) -> String -> Boolean -> HH.HTML w i
 box_input_email action email validity = HH.label [ ]
-  [ HH.label [HP.classes class_label ] [ HH.text "Email" ]
+  [ HH.label [HP.classes C.label ] [ HH.text "Email" ]
-  , HH.div [HP.classes class_control ] [ input_email action email validity ]
+  , HH.div [HP.classes C.control ] [ input_email action email validity ]
   ]
 
 input_password :: forall w i. (String -> i) -> String -> Boolean -> HH.HTML w i
@@ -149,8 +124,8 @@ input_password action password validity
 
 box_input_password :: forall w i. (String -> i) -> String -> Boolean -> HH.HTML w i
 box_input_password action password validity = HH.label [ ]
-  [ HH.label [HP.classes class_label ] [ HH.text "Password" ]
+  [ HH.label [HP.classes C.label ] [ HH.text "Password" ]
-  , HH.div [HP.classes class_control ] [ input_password action password validity ]
+  , HH.div [HP.classes C.control ] [ input_password action password validity ]
   ]
 
 
@@ -171,8 +146,8 @@ box_input_password action password validity = HH.label [ ]
 --
 --box_input_domain :: forall w i. (String -> i) -> String -> Boolean -> HH.HTML w i
 --box_input_domain action domain validity = HH.label [ ]
---  [ HH.label [HP.classes class_label ] [ HH.text "Domain" ]
+--  [ HH.label [HP.classes C.label ] [ HH.text "Domain" ]
---  , HH.div [HP.classes class_control ] [ input_domain action domain validity ]
+--  , HH.div [HP.classes C.control ] [ input_domain action domain validity ]
 --  ]
 --
 --input_ttl :: forall w i. (String -> i) -> String -> Boolean -> HH.HTML w i
@@ -187,8 +162,8 @@ box_input_password action password validity = HH.label [ ]
 --
 --box_input_ttl :: forall w i. (String -> i) -> String -> Boolean -> HH.HTML w i
 --box_input_ttl action value validity = HH.label [ ]
---  [ HH.label [HP.classes class_label ] [ HH.text "TTL" ]
+--  [ HH.label [HP.classes C.label ] [ HH.text "TTL" ]
---  , HH.div [HP.classes class_control ] [ input_ttl action value validity ]
+--  , HH.div [HP.classes C.control ] [ input_ttl action value validity ]
 --  ]
 --
 --
@@ -204,8 +179,8 @@ box_input_password action password validity = HH.label [ ]
 --
 --box_input_priority :: forall w i. (String -> i) -> String -> Boolean -> HH.HTML w i
 --box_input_priority action value validity = HH.label [ ]
---  [ HH.label [HP.classes class_label ] [ HH.text "Priority" ]
+--  [ HH.label [HP.classes C.label ] [ HH.text "Priority" ]
---  , HH.div [HP.classes class_control ] [ input_priority action value validity ]
+--  , HH.div [HP.classes C.control ] [ input_priority action value validity ]
 --  ]
 --
 --
@@ -220,8 +195,8 @@ box_input_password action password validity = HH.label [ ]
 --
 --box_input_value :: forall w i. (String -> i) -> String -> Boolean -> HH.HTML w i
 --box_input_value action value validity = HH.label [ ]
---  [ HH.label [HP.classes class_label ] [ HH.text "Value" ]
+--  [ HH.label [HP.classes C.label ] [ HH.text "Value" ]
---  , HH.div [HP.classes class_control ] [ input_value action value validity ]
+--  , HH.div [HP.classes C.control ] [ input_value action value validity ]
 --  ]
 --
 --
@@ -237,8 +212,8 @@ box_input_password action password validity = HH.label [ ]
 --
 --box_input_weight :: forall w i. (String -> i) -> String -> Boolean -> HH.HTML w i
 --box_input_weight action weight validity = HH.label [ ]
---  [ HH.label [HP.classes class_label ] [ HH.text "Weight" ]
+--  [ HH.label [HP.classes C.label ] [ HH.text "Weight" ]
---  , HH.div [HP.classes class_control ] [ input_weight action weight validity ]
+--  , HH.div [HP.classes C.control ] [ input_weight action weight validity ]
 --  ]
 --
 --
@@ -254,8 +229,8 @@ box_input_password action password validity = HH.label [ ]
 --
 --box_input_port :: forall w i. (String -> i) -> String -> Boolean -> HH.HTML w i
 --box_input_port action port validity = HH.label [ ]
---  [ HH.label [HP.classes class_label ] [ HH.text "Port" ]
+--  [ HH.label [HP.classes C.label ] [ HH.text "Port" ]
---  , HH.div [HP.classes class_control ] [ input_port action port validity ]
+--  , HH.div [HP.classes C.control ] [ input_port action port validity ]
 --  ]
 --
 --
@@ -317,75 +292,50 @@ render_input password placeholder action value validity cond
         false -> []
         true -> [ HP.type_ HP.InputPassword ]
 
-class_horizontal  :: Array (HH.ClassName)
-class_horizontal  = [HH.ClassName "is-horizontal"   ]
-class_normal  :: Array (HH.ClassName)
-class_normal  = [HH.ClassName "is-normal"   ]
-class_field  :: Array (HH.ClassName)
-class_field  = [HH.ClassName "field"   ]
-class_field_label  :: Array (HH.ClassName)
-class_field_label  = [HH.ClassName "field-label"   ]
-class_field_body  :: Array (HH.ClassName)
-class_field_body  = [HH.ClassName "field-body"   ]
-
 field_inner ispassword title placeholder action value validity cond
   = div_field
       [ div_field_label title
       , div_field_content $ render_input ispassword placeholder action value validity cond
       ]
   where
-    div_field = HH.div [ HP.classes (class_field <> class_horizontal) ]
+    div_field = HH.div [ HP.classes (C.field <> C.horizontal) ]
     div_field_label title
-      = HH.div [ HP.classes (class_field_label <> class_normal) ]
+      = HH.div [ HP.classes (C.field_label <> C.normal) ]
-               [HH.label [ HP.classes class_label ] [ HH.text title ]]
+               [HH.label [ HP.classes C.label ] [ HH.text title ]]
     div_field_content content
-      = HH.div [HP.classes class_field_body]
+      = HH.div [HP.classes C.field_body]
-          [ HH.div [HP.classes class_field ]
+          [ HH.div [HP.classes C.field ]
-              [ HH.div [HP.classes class_control ] [ content ]
+              [ HH.div [HP.classes C.control ] [ content ]
               ]
           ]
 
 box_input    = field_inner false
 box_password = field_inner true
 
-class_has_addons :: Array (HH.ClassName)
+section_medium = HH.section [ HP.classes (C.section <> C.medium) ]
-class_has_addons = [HH.ClassName "has-addons"]
 
-class_section  :: Array (HH.ClassName)
+field classes = HH.div [ HP.classes (C.field <> classes) ]
-class_section  = [HH.ClassName "section"]
-class_medium  :: Array (HH.ClassName)
-class_medium  = [HH.ClassName "is-medium"]
-
-section_medium = HH.section [ HP.classes (class_section <> class_medium) ]
-
-field classes = HH.div [ HP.classes (class_field <> classes) ]
-
-class_input  :: Array (HH.ClassName)
-class_input  = [HH.ClassName "input"   ]
-
-class_button  :: Array (HH.ClassName)
-class_button  = [HH.ClassName "button"   ]
 
 new_domain_field inputaction text selectaction accepted_domains
-  = field class_has_addons
+  = field C.has_addons
       [ HH.p
-          [ HP.classes class_control ]
+          [ HP.classes C.control ]
           [ HH.input $
               [ HE.onValueInput inputaction
               , HP.placeholder "www"
               , HP.value text
               , HP.type_ HP.InputText
-              , HP.classes (class_is_primary <> class_input)
+              , HP.classes (C.is_primary <> C.input)
               ]
           ]
       , HH.p
-          [ HP.classes class_control ]
+          [ HP.classes C.control ]
           [ select selectaction $ map option accepted_domains ]
       , HH.p
-          [ HP.classes class_control ]
+          [ HP.classes C.control ]
           [ HH.button
               [ HP.type_ HP.ButtonSubmit
-              , HP.classes class_button
+              , HP.classes C.button
               ]
               [ HH.text "add a new domain!" ]
           ]
@@ -413,8 +363,8 @@ new_domain_field inputaction text selectaction accepted_domains
 
 --box_button action value validity cond
 --  = HH.label [ ]
---      [ HH.label [HP.classes class_label ] [ HH.text title ]
+--      [ HH.label [HP.classes C.label ] [ HH.text title ]
---      , HH.div [HP.classes class_control ]
+--      , HH.div [HP.classes C.control ]
 --          [ render_input ispassword placeholder action value validity cond ]
 --      ]
 
@@ -422,31 +372,22 @@ p :: forall w i. String -> HH.HTML w i
 p str = HH.p_ [ HH.text str ]
 
 box :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
-box = HH.div [HP.classes class_box]
+box = HH.div [HP.classes C.box]
 
 option :: forall w i. String -> HH.HTML w i
 option value = HH.option_ [HH.text value]
 
 select :: forall w i. HH.Node DHI.HTMLselect w i
 select action options
-  = HH.div [ HP.classes (class_select <> class_is_primary) ]
+  = HH.div [ HP.classes (C.select <> C.is_primary) ]
            [ HH.select action options]
 
-class_hero  :: Array (HH.ClassName)
-class_hero  = [HH.ClassName "hero" ]
-class_hero_body  :: Array (HH.ClassName)
-class_hero_body  = [HH.ClassName "hero-body" ]
-class_is_info  :: Array (HH.ClassName)
-class_is_info  = [HH.ClassName "is-info" ]
-class_is_small  :: Array (HH.ClassName)
-class_is_small  = [HH.ClassName "is-small" ]
-
 hero :: forall w i. String -> String -> HH.HTML w i
 hero title subtitle
-  = HH.section [ HP.classes (class_hero <> class_is_info <> class_is_small) ]
+  = HH.section [ HP.classes (C.hero <> C.is_info <> C.is_small) ]
-      [ HH.div [ HP.classes class_hero_body ]
+      [ HH.div [ HP.classes C.hero_body ]
-          [ HH.p [ HP.classes class_title ] [ HH.text title ]
+          [ HH.p [ HP.classes C.title ] [ HH.text title ]
-          , HH.p [ HP.classes class_subtitle ] [ HH.text subtitle ]
+          , HH.p [ HP.classes C.subtitle ] [ HH.text subtitle ]
           ]
       ]
 
@@ -464,85 +405,96 @@ header = hero
 --  </div>
 --</section>
 
-class_container  :: Array (HH.ClassName)
-class_container  = [HH.ClassName "container" ]
-
 container :: forall w i. Array (HH.HTML w i) -> HH.HTML w i
-container = HH.div [HP.classes (class_container <> class_is_info)]
+container = HH.div [HP.classes (C.container <> C.is_info)]
-
-class_navbar :: Array (HH.ClassName)
-class_navbar = [HH.ClassName "navbar"]
-class_navbar_brand :: Array (HH.ClassName)
-class_navbar_brand = [HH.ClassName "navbar-brand"]
-class_navbar_burger :: Array (HH.ClassName)
-class_navbar_burger = [HH.ClassName "navbar-burger"]
-class_navbar_item :: Array (HH.ClassName)
-class_navbar_item = [HH.ClassName "navbar-item"]
-class_navbar_menu :: Array (HH.ClassName)
-class_navbar_menu = [HH.ClassName "navbar-menu"]
-class_navbar_start :: Array (HH.ClassName)
-class_navbar_start = [HH.ClassName "navbar-start"]
-class_navbar_end :: Array (HH.ClassName)
-class_navbar_end = [HH.ClassName "navbar-end"]
-class_navbar_link :: Array (HH.ClassName)
-class_navbar_link = [HH.ClassName "navbar-link"]
-class_navbar_dropdown :: Array (HH.ClassName)
-class_navbar_dropdown = [HH.ClassName "navbar-dropdown"]
-class_navbar_divider :: Array (HH.ClassName)
-class_navbar_divider = [HH.ClassName "navbar-divider"]
 
 data_target :: forall r i. String -> HP.IProp r i
 data_target = HP.attr (AttrName "data-target")
 
-class_has_dropdown :: Array (HH.ClassName)
+modal_domain_delete :: forall w i. String -> HH.HTML w i
-class_has_dropdown = [HH.ClassName "has-dropdown"]
+modal_domain_delete domain =
+  modal
+    [ modal_background
+    , modal_card [modal_header, modal_body]
+    , modal_foot [modal_delete_button, modal_cancel_button]
+    ]
+    where
+      modal = HH.div [HP.classes (C.modal <> C.is_active)]
+      modal_background = HH.div [HP.classes C.modal_background] []
+      modal_card = HH.div [HP.classes C.modal_card]
+      modal_header = HH.header [HP.classes C.modal_card_head]
+        [ HH.p [HP.classes C.modal_card_title] [HH.text "Deleting a domain"]
+        --, HH.button [HP.classes C.delete, ARIA.label "close"] []
+        ]
+      modal_body = HH.section [HP.classes C.modal_card_body] [ warning_message ]
+      modal_foot = HH.div [HP.classes C.modal_card_foot]
+      modal_delete_button = HH.button [HP.classes (C.button <> C.is_success)] [HH.text "Delete the domain."]
+      modal_cancel_button = HH.button [HP.classes C.button]                       [HH.text "Cancel"]
+      warning_message
+        = HH.p [] [ HH.text $ "You are about to delete your domain '"
+                              <> domain
+                              <> "'. Are you sure you want to do this? This is "
+                  , HH.strong_ [ HH.text "irreversible" ]
+                  , HH.text "."
+                  ]
+--<div class="modal">
+--  <div class="modal-background"></div>
+--  <div class="modal-card">
+--    <header class="modal-card-head">
+--      <p class="modal-card-title">Modal title</p>
+--      <button class="delete" aria-label="close"></button>
+--    </header>
+--    <section class="modal-card-body">
+--      <!-- Content ... -->
+--    </section>
+--    <footer class="modal-card-foot">
+--      <button class="button is-success">Save changes</button>
+--      <button class="button">Cancel</button>
+--    </footer>
+--  </div>
+--</div>
 
-class_is_hoverable :: Array (HH.ClassName)
-class_is_hoverable = [HH.ClassName "is-hoverable"]
-
-class_buttons :: Array (HH.ClassName)
-class_buttons = [HH.ClassName "buttons"]
 
 --netlibre_navbar ::
 netlibre_navbar =
-  HH.nav [HP.classes class_navbar, ARIA.label "main navigation", ARIA.role "navigation" ]
+  HH.nav [HP.classes C.navbar, ARIA.label "main navigation", ARIA.role "navigation" ]
-  [ HH.div [HP.classes class_navbar_brand]
+  [ HH.div [HP.classes C.navbar_brand]
-      [ HH.a [HP.classes class_navbar_item, HP.href "/"]
+      [ HH.a [HP.classes C.navbar_item, HP.href "/"]
              [HH.img [HP.src "/logo.jpeg", HP.width 112, HP.height 28]]
-      , HH.a [HP.classes class_navbar_burger, ARIA.label "menu", ARIA.expanded "false", data_target "navbarBasicExample" ]
+      , HH.a [HP.classes C.navbar_burger, ARIA.label "menu", ARIA.expanded "false", data_target "navbarExample" ]
              [ HH.span [ARIA.hidden "true"] []
              , HH.span [ARIA.hidden "true"] []
              , HH.span [ARIA.hidden "true"] []
              ]
       ]
-  , HH.div [HP.id "navbarBasicExample", HP.classes class_navbar_menu]
+  , HH.div [HP.id "navbarExample", HP.classes C.navbar_menu]
-           [ HH.div [HP.classes class_navbar_start]
+           [ HH.div [HP.classes C.navbar_start]
-                    [ HH.a [HP.classes class_navbar_item]
+                    [ HH.a [HP.classes C.navbar_item]
                            [HH.text "Home"]
-                    , HH.a [HP.classes class_navbar_item]
+                    , HH.a [HP.classes C.navbar_item]
                            [HH.text "My Domains"]
-                    , HH.div [HP.classes (class_navbar_item <> class_has_dropdown <> class_is_hoverable)]
+                    , HH.div [HP.classes (C.navbar_item <> C.has_dropdown <> C.is_hoverable)]
-                             [ HH.a [HP.classes class_navbar_link]
+                             [ HH.a [HP.classes C.navbar_link]
                                     [HH.text "List of something"]
-                             , HH.div [HP.classes class_navbar_dropdown]
+                             , HH.div [HP.classes C.navbar_dropdown]
-                                      [ HH.a [HP.classes class_navbar_item]
+                                      [ HH.a [HP.classes C.navbar_item]
                                              [HH.text "something 1"]
-                                      , HH.a [HP.classes class_navbar_item]
+                                      , HH.a [HP.classes C.navbar_item]
                                              [HH.text "something 2"]
-                                      , HH.a [HP.classes class_navbar_item]
+                                      , HH.a [HP.classes C.navbar_item]
                                              [HH.text "something 3"]
-                                      , HH.hr [HP.classes class_navbar_divider]
+                                      , HH.hr [HP.classes C.navbar_divider]
-                                      , HH.a [HP.classes class_navbar_item]
+                                      , HH.a [HP.classes C.navbar_item]
                                              [HH.text "something 4"]
                                       ]
                              ]
                     ]
-           , HH.div [HP.classes class_navbar_end]
+           , HH.div [HP.classes C.navbar_end]
-               [ HH.div [HP.classes class_navbar_item]
+               [ HH.div [HP.classes C.navbar_item]
-                   [ HH.div [HP.classes class_buttons]
+                   [ HH.div [HP.classes C.buttons]
-                       [ HH.a [HP.classes (class_button <> class_is_primary)]
+                       [ HH.a [HP.classes (C.button <> C.is_primary)]
                               [HH.strong [] [HH.text "SIGN UP NOW"]]
-                       , HH.a [HP.classes (class_button <> class_is_light)]
+                       , HH.a [HP.classes (C.button <> C.is_light)]
                               [HH.text "STUFF"]
                        ]
                    ]

src/CSSClasses.purs

@@ -0,0 +1,104 @@
+module CSSClasses where
+
+import Halogen.HTML as HH
+
+box :: Array (HH.ClassName)
+box = [HH.ClassName "box"]
+button :: Array (HH.ClassName)
+button = [HH.ClassName "button"]
+buttons :: Array (HH.ClassName)
+buttons = [HH.ClassName "buttons"]
+column :: Array (HH.ClassName)
+column = [HH.ClassName "column"]
+columns :: Array (HH.ClassName)
+columns = [HH.ClassName "columns"]
+container :: Array (HH.ClassName)
+container = [HH.ClassName "container"]
+control :: Array (HH.ClassName)
+control = [HH.ClassName "control"]
+delete :: Array (HH.ClassName)
+delete = [HH.ClassName "delete"]
+field :: Array (HH.ClassName)
+field = [HH.ClassName "field"]
+field_body :: Array (HH.ClassName)
+field_body = [HH.ClassName "field-body"]
+field_label :: Array (HH.ClassName)
+field_label = [HH.ClassName "field-label"]
+has_addons :: Array (HH.ClassName)
+has_addons = [HH.ClassName "has-addons"]
+has_dropdown :: Array (HH.ClassName)
+has_dropdown = [HH.ClassName "has-dropdown"]
+hero :: Array (HH.ClassName)
+hero = [HH.ClassName "hero"]
+hero_body :: Array (HH.ClassName)
+hero_body = [HH.ClassName "hero-body"]
+horizontal :: Array (HH.ClassName)
+horizontal = [HH.ClassName "is-horizontal"]
+input :: Array (HH.ClassName)
+input = [HH.ClassName "input"]
+is4 :: Array (HH.ClassName)
+is4 = [HH.ClassName "is-4"]
+is5 :: Array (HH.ClassName)
+is5 = [HH.ClassName "is-5"]
+is_active :: Array (HH.ClassName)
+is_active = [HH.ClassName "is-active"]
+is_hoverable :: Array (HH.ClassName)
+is_hoverable = [HH.ClassName "is-hoverable"]
+is_info :: Array (HH.ClassName)
+is_info = [HH.ClassName "is-info"]
+is_light :: Array (HH.ClassName)
+is_light = [HH.ClassName "is-light"]
+is_primary :: Array (HH.ClassName)
+is_primary = [HH.ClassName "is-primary"]
+is_small :: Array (HH.ClassName)
+is_small = [HH.ClassName "is-small"]
+is_success :: Array (HH.ClassName)
+is_success = [HH.ClassName "is-success"]
+label :: Array (HH.ClassName)
+label = [HH.ClassName "label"]
+medium :: Array (HH.ClassName)
+medium = [HH.ClassName "is-medium"]
+modal :: Array (HH.ClassName)
+modal = [HH.ClassName "modal"]
+modal_background :: Array (HH.ClassName)
+modal_background = [HH.ClassName "modal-background"]
+modal_card :: Array (HH.ClassName)
+modal_card = [HH.ClassName "modal-card"]
+modal_card_body :: Array (HH.ClassName)
+modal_card_body = [HH.ClassName "modal-card-body"]
+modal_card_foot :: Array (HH.ClassName)
+modal_card_foot = [HH.ClassName "modal-card-foot"]
+modal_card_head :: Array (HH.ClassName)
+modal_card_head = [HH.ClassName "modal-card-head"]
+modal_card_title :: Array (HH.ClassName)
+modal_card_title = [HH.ClassName "modal-card-title"]
+navbar :: Array (HH.ClassName)
+navbar = [HH.ClassName "navbar"]
+navbar_brand :: Array (HH.ClassName)
+navbar_brand = [HH.ClassName "navbar-brand"]
+navbar_burger :: Array (HH.ClassName)
+navbar_burger = [HH.ClassName "navbar-burger"]
+navbar_divider :: Array (HH.ClassName)
+navbar_divider = [HH.ClassName "navbar-divider"]
+navbar_dropdown :: Array (HH.ClassName)
+navbar_dropdown = [HH.ClassName "navbar-dropdown"]
+navbar_end :: Array (HH.ClassName)
+navbar_end = [HH.ClassName "navbar-end"]
+navbar_item :: Array (HH.ClassName)
+navbar_item = [HH.ClassName "navbar-item"]
+navbar_link :: Array (HH.ClassName)
+navbar_link = [HH.ClassName "navbar-link"]
+navbar_menu :: Array (HH.ClassName)
+navbar_menu = [HH.ClassName "navbar-menu"]
+navbar_start :: Array (HH.ClassName)
+navbar_start = [HH.ClassName "navbar-start"]
+normal :: Array (HH.ClassName)
+normal = [HH.ClassName "is-normal"]
+section :: Array (HH.ClassName)
+section = [HH.ClassName "section"]
+select :: Array (HH.ClassName)
+select = [HH.ClassName "select"]
+subtitle :: Array (HH.ClassName)
+subtitle = [HH.ClassName "subtitle"]
+title :: Array (HH.ClassName)
+title = [HH.ClassName "title"]