====== Elm0.19でbulmaを利用する ======

方法はいろいろあります。

2つの方法について、以下に記載させていただきました。[[http://i-doctor.sakura.ne.jp/font/?p=36580|こちら]]の、create-elm-appのpublic/index.htmlにbulmaとFontAwesome5のCDNを記載する方法がお勧めです。

http://i-doctor.sakura.ne.jp/font/?p=36404
Elm0.19でCSSフレームワーク”bulma”を試してみる（１）（surprisetalk/elm-bulma packageの利用）
2019年3月24日

http://i-doctor.sakura.ne.jp/font/?p=36426
Elm0.19でCSSフレームワーク”bulma”を試してみる（２）（create-elm-appでelmアプリを作成）
2019年3月24日

http://i-doctor.sakura.ne.jp/font/?p=36580
create-elm-appでbulmaとfontawesome5を試してみる
2019年3月28日

ほとんど同じですが、もう少し簡単な方法を以下に記載させていただきました。

===== 開発環境 =====
Windows 10 Pro
Chrome
VisualStudioCode 1.32.3
git version 2.20.1.windows.1
nvm 1.1.7
node 10.2.0
npm 6.4.1
elm 0.19.0
elm-format 0.8.1
VisualStudioCodeの拡張機能でelmをインストールして、settings.jsonに以下のようにelmを設定
<code>
    "[elm]": {
        "editor.formatOnSave": true
    },
</code>
===== src/Main.elmをmain.jsにコンパイルしてindex.htmlに読み込む =====
元のソースコードは、https://superhahnah.com/elm-flags/ を写経させていただきました。
詳細は以下をご覧ください：http://i-doctor.sakura.ne.jp/font/?p=37457

おおまかな流れ

  -アプリ作成用フォルダを作成（例：C:/elm/elm-flag/）
  -"%%elm init%%"でelm.jsonを作成
  -index.htmlの作成(ここにbulmaとFontAwesome5を読み込む)
  -src/Main.elmの作成
  -"%%elm make src/Main.elm --output=main.js%%"でsrc/Main.elmをmain.jsにコンパイル
  -index.htmlをChromeで開く。

index.htmlとsrc/Main.elm
<html>
<script src="https://gist.github.com/adash333/d85ae4f075cfc387a8f2febe05b0f75a.js"></script>
</html>

{{:00.cssフレームワークbulma用テンプレート:pasted:20190504-143930.png}}

DEMOサイト：https://adash333.github.io/elm-bulma-flag/


===== リンク =====