diff --git a/tutorials/elm-ui/README.md b/tutorials/elm-ui/README.md index fd4bc4f..6adb2be 100644 --- a/tutorials/elm-ui/README.md +++ b/tutorials/elm-ui/README.md @@ -59,9 +59,9 @@ In this case I have attempted to apply a `Float` of 2.5 to the `Border.rounded` The same thing goes if I attempt to pass a `String` to `Border.rounded` e.g: `"2px"` ![image](https://user-images.githubusercontent.com/194400/70662334-ec498980-1c5d-11ea-9336-56f30db80270.png) We get a type mismatch and know _exactly_ what needs to be fixed -in order for our view to compile. +for our view to compile. -If you make a typo in your layout/style it's won't compile: +If you make a typo in your layout/style it won't compile: ![elm-ui-paddign-error](https://user-images.githubusercontent.com/194400/70667023-caed9b00-1c67-11ea-8396-0bf47d87a7d0.png) @@ -328,7 +328,9 @@ the next `myElelement` is wrapped in a container `el` (`
`) and given an attribute of `centerX` to ensure that it is centered _horizontally_ in the middle of the page. The third `myElement` is also wrapped in an `el` -and given the +which has the `alignRight` attribute, +which as it's name suggests, +aligns the element to right of the parent element. @@ -350,16 +352,38 @@ myElement = (text "stylish!") ``` +**`el`** is a general purpose "container" element +that is used to apply styles/properties +to the child elements it contains. +In this case the **`el`** +has a list with the following attributes: +```elm +[ Background.color (rgb255 75 192 169) +, Font.color (rgb255 255 255 255) +, Border.rounded 10 +, padding 30 +] +``` ++ `Background.color (rgb255 75 192 169)` - Apply a **`teal`** background color +to the `el`. ++ `Font.color (rgb255 255 255 255)` - use a **`white`** font color. ++ `Border.rounded 10` - round the borders of all four corners of the `el`. ++ `padding 30` - apply a padding between the outside of the `el` and the `text`. +> If _anything_ is unclear about this initial example of using `elm-ui`, +please +[_ask_ questions](https://github.com/dwyl/learn-elm/issues) +so that we can clarify for _everyone_ reading. -



+#### A Note on Long `import` lines -A quick note on long import lines: -if you attempt to split the `import Element` declaration into two lines: +You may have noticed that the import line for the `Element` module +is rather long, and the more `elm-ui` features you use the longer it will get! +If you attempt to split the `import Element` declaration into two lines: ```elm import Element exposing (Element, alignRight, centerX, centerY, el, fill) import Element exposing (padding, rgb255, row, spacing, text, width) @@ -441,40 +465,6 @@ because it's the method recommended/used by Evan. > See "Using Modules" section at the end of: https://guide.elm-lang.org/webapps/modules.html - - -```elm -rowOfStuff : Element msg -rowOfStuff = - row - [ E.width E.fill - , E.centerY - , E.paddingXY 42 10 - , Background.color (E.rgb255 215 219 218) - ] - [ myElement - , el [ E.centerX ] myElement - , el [ E.alignRight ] myElement - ] -``` - - -