diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md
index a313773..0c2141d 100644
--- a/tutorials/elm-ui/README.md
+++ b/tutorials/elm-ui/README.md
@@ -1,4 +1,4 @@
-# `elm-ui` a Language for Layout and Interface
+# `elm-ui` a Language for _Reliable_ Layout and Interface
## _Why?_ 🤷 ... 😢 🌧 `|>` 😍🌈
@@ -31,6 +31,16 @@ https://github.com/mdgriffith/elm-ui
+ Elm Package:
https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest
+Matthew Griffith described it eloquently in his Elm Conf talk
+"Building a Toolkit for Design":
+
+[![elm-ui-tookit-for-design](https://user-images.githubusercontent.com/194400/70571846-7c240080-1b96-11ea-9dd2-cacae7110b54.png)](https://youtu.be/Ie-gqwSHQr0)
+https://youtu.be/Ie-gqwSHQr0
+
+> "_It's all right there.
+There's no other place you have to go to modify this thing_."
+
+
`elm-ui` is to `HTML` and `CSS`
what `elm` is to `JavaScript`,
a way of making designing web applications fun again!
@@ -38,7 +48,8 @@ a way of making designing web applications fun again!
that your layout and styles work as expected.
You will see _helpful_ compiler errors/warnings
if you attempt to make a _breaking_ change to UI!
-e.g:
+
+Consider the following examples:
In this case I have attempted to apply a `Float` of 2.5 to the `Border.rounded` (`border-radius`) property:
![image](https://user-images.githubusercontent.com/194400/70662062-69283380-1c5d-11ea-8d90-1d4f72d67ec6.png)
@@ -48,18 +59,13 @@ The same thing goes if I attempt to pass a `String` to `Border.rounded` e.g: `"2
We get a type mismatch and know _exactly_ what needs to be fixed
in order for our view to compile.
+If you make a typo in your layout/style it's won't compile:
-Matthew Griffith described it eloquently in his Elm Conf talk
-"Building a Toolkit for Design":
+![elm-ui-paddign-error](https://user-images.githubusercontent.com/194400/70667023-caed9b00-1c67-11ea-8396-0bf47d87a7d0.png)
-[![elm-ui-tookit-for-design](https://user-images.githubusercontent.com/194400/70571846-7c240080-1b96-11ea-9dd2-cacae7110b54.png)](https://youtu.be/Ie-gqwSHQr0)
-https://youtu.be/Ie-gqwSHQr0
-
-> "_It's all right there.
-There's no other place you have to go to modify this thing_."
-## _How?_
+## _How?_ 📝
In a new directory, initialise your `elm` workflow with the following command:
```sh
@@ -85,7 +91,7 @@ Next _type_ (_or copy-paste_) the following code into the `src/Main.elm` file:
```elm
module Main exposing (main)
-import Element exposing (Element, alignRight, centerX, centerY, el, fill, rgb255, row, spacing, text, width)
+import Element exposing (Element, alignRight, centerX, centerY, el, fill, padding, rgb255, row, spacing, text, width)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
@@ -114,9 +120,13 @@ myElement =
, padding 30
]
(text "stylish!")
-
```
+> This is the canonical example in the docs:
+https://github.com/mdgriffith/elm-ui
+If you are unable to run the code on your `localhost`
+try the Ellie version: https://ellie-app.com/3f2n4J5RnT3a1
+
In your terminal run:
```
@@ -174,7 +184,7 @@ https://github.com/lucamug/style-framework
-## _Why NOT Just Use CSS_?
+## _Why NOT Just Use CSS_? 🤷
People who are learning `CSS`
diff --git a/tutorials/elm-ui/src/Main.elm b/tutorials/elm-ui/src/Main.elm
index 77398e7..f096357 100644
--- a/tutorials/elm-ui/src/Main.elm
+++ b/tutorials/elm-ui/src/Main.elm
@@ -1,6 +1,6 @@
module Main exposing (main)
-import Element exposing (Element, alignRight, centerX, centerY, el, fill, rgb255, row, spacing, text, width)
+import Element exposing (Element, alignRight, centerX, centerY, el, fill, padding, rgb255, row, spacing, text, width)
import Element.Background as Background
import Element.Border as Border
import Element.Font as Font
@@ -26,6 +26,6 @@ myElement =
[ Background.color (rgb255 75 192 169)
, Font.color (rgb255 255 255 255)
, Border.rounded 10
- , padding 30
+ , paddign 30
]
(text "stylish!")