elm-css

既然html，js都可以用elm compile出來，那css可以嗎？ 當然是可以的，雖然大多數的人還是把css
另外寫，不過如果你要吃elm全餐的話, 也是有這種選項的，名稱就是 elm-css

可以直接來看github上的例子：

module MyCss exposing (main)

import Css exposing (..)
import Html
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css, href, src)
import Html.Styled.Events exposing (onClick)


{-| A logo image, with inline styles that change on hover.
-}
logo : Html msg
logo =
    img
        [ src "logo.png"
        , css
            [ display inlineBlock
            , padding (px 20)
            , border3 (px 5) solid (rgb 120 120 120)
            , hover
                [ borderColor theme.primary
                , borderRadius (px 10)
                ]
            ]
        ]
        []

-- more codes...

可以看到，elm-css把css放在 img [][]
img第一個parameter裡，也可以理解，因為第一個parameter是放html
的attribute，而css也是其中一個。

elm-bootstrap

那如果你不想寫css呢？想要直接用css framework?譬如是bootstrap？可以嗎？
可以喔，有一個架在bootstrap4上面的套件：elm-bootstrap。讓你可以直接在elm view 裡面使用bootstrap, 使用也很簡單，就像elm-css一樣，把elm-package.json 加入這個套件就可以使用了。

module Main exposing (..)

import Bootstrap.CDN as CDN
import Bootstrap.Grid as Grid


view : Model -> Html Msg
view model =
    Grid.container []         -- Responsive fixed width container
        [ CDN.stylesheet      -- Inlined Bootstrap CSS for use with reactor
        , navbar model        -- Interactive and responsive menu
        , mainContent model
        ]


-- ... etc

使用的規則也十分類似bootstrap，我們可以來看 doc，以alret messages為例子：

div []
    [ Alert.success [ text "This is a success message." ]
    , Alert.info [ text "Just a heads up info message." ]
    , Alert.warning [ text "Warning, you shouldn't be doing this." ]
    , Alert.danger [ text "Something bad happened." ]
    ]

你可以用 Alert.success, Alert.info, Alert.warning, Alert.danger等都和bootstrap類似，就可以直接在elm裡寫css，不需要再另外的檔案了。