Skip to content

Instantly share code, notes, and snippets.

@ronanyeah
Created December 29, 2016 18:34
Show Gist options
  • Save ronanyeah/feb9d063baa34bb3f1f2740855aa1106 to your computer and use it in GitHub Desktop.
Save ronanyeah/feb9d063baa34bb3f1f2740855aa1106 to your computer and use it in GitHub Desktop.
Load external CSS in Elm
{--
You *can* load an external CSS file in Elm, but currently,
in Pure Elm that means adding a style element to the body instead of the head.
It does cause a flash of unstyled content, so I think it's only useful
for testing in Reactor.
--}
import Html exposing (..)
import Html.Attributes exposing (..)
stylesheet =
let
tag = "link"
attrs =
[ attribute "rel" "stylesheet"
, attribute "property" "stylesheet"
, attribute "href" "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
]
children = []
in
node tag attrs children
main =
let
inner = div [id "inner", class "container"] [h1 [class "text-center"] [text "hello flash of unstyled content"]]
hero = div [id "hero", class "jumbotron"] [inner]
in
div [id "outer"] [stylesheet, hero]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment