diff --git a/src/Element.elm b/src/Element.elm index 6786604..69c4fe8 100644 --- a/src/Element.elm +++ b/src/Element.elm @@ -27,41 +27,43 @@ module Element exposing {-| -## Basic Elements +# Basic Elements @docs Element, none, text, el -## Rows and Columns +# Rows and Columns -Rows and columns are the most common layouts. +When we want more than one child on an element, we want to be _specific_ about how they will be layed out. + +So, the common ways to do that would be `row` and `column`. @docs row, wrappedRow, column -## Text Layout +# Text Layout -Text needs it's own layout primitives. +Text layout needs some specific considerations. @docs paragraph, textColumn -## Data Table +# Data Table @docs Column, table, IndexedColumn, indexedTable -## Size +# Size @docs Attribute, width, height, Length, px, shrink, fill, fillPortion, maximum, minimum -## Debugging +# Debugging @docs explain -## Padding and Spacing +# Padding and Spacing There's no concept of margin in `style-elements`, instead we have padding and spacing. @@ -79,12 +81,15 @@ Here's what we can expect: ![Three boxes spaced 7 pixels apart. There's a 10 pixel distance from the edge of the parent to the boxes.](https://mdgriffith.gitbooks.io/style-elements/content/assets/spacing-400.png) +**Note** `spacing` set on a `paragraph`, will set the pixel spacing between lines. + + @docs padding, paddingXY, paddingEach @docs spacing, spacingXY, spaceEvenly -## Alignment +# Alignment Alignment can be used to align an `Element` within another `Element`. @@ -313,19 +318,18 @@ toRgb (Internal.Rgba r g b a) = } -{-| The basic building block of your layout. Here we create a +{-| The basic building block of your layout. - import Element - - view = - Element.el [] (Element.text "Hello!") + howdy : Element msg + howdy = + Element.el [] (Element.text "Howdy!") -} type alias Element msg = Internal.Element msg -{-| Standard attribute which cannot be a decoration. +{-| An attribute that can be attached to an `Element` -} type alias Attribute msg = Internal.Attribute () msg @@ -534,7 +538,7 @@ forceHover = Internal.HoverOption Internal.ForceHover -{-| Nothing to see here! +{-| When you want to render exactly nothing. -} none : Element msg none = @@ -559,16 +563,15 @@ You can think of an `el` as a `div`, but it can only hae one child. If you want multiple children, you'll need to use something like `row` or `column` - import Color exposing (blue, darkBlue) - import Element exposing (Element) + import Element exposing (Element, rgb) import Element.Background as Background import Element.Border as Border myElement : Element msg myElement = Element.el - [ Background.color blue - , Border.color darkBlue + [ Background.color (rgb 0 0.5 0) + , Border.color (rgb 0 0.7 0) ] (Element.text "You've made a stylish element!") @@ -585,8 +588,7 @@ el attrs child = (Internal.Unkeyed [ child ]) -{-| If you want a row of elements, use `row`! --} +{-| -} row : List (Attribute msg) -> List (Element msg) -> Element msg row attrs children = Internal.element @@ -618,7 +620,8 @@ column attrs children = (Internal.Unkeyed children) -{-| -} +{-| Same as `row`, but will wrap if it takes up too much horizontal space. +-} wrappedRow : List (Attribute msg) -> List (Element msg) -> Element msg wrappedRow attrs children = let @@ -1004,6 +1007,8 @@ Which will look something like ![A paragraph where the first letter is twice the height of the others](https://mdgriffith.gitbooks.io/style-elements/content/assets/Screen%20Shot%202017-08-25%20at%209.41.52%20PM.png) +**Note** `spacing` on a paragraph will set the pixel spacing between lines. + -} paragraph : List (Attribute msg) -> List (Element msg) -> Element msg paragraph attrs children = @@ -1156,6 +1161,11 @@ newTabLink attrs { url, label } = {-| A link to download a file. + +**Note** If you're using `Browser.application`, then this won't be enough to actually trigger a file download due to how `Browser.Navigation` works. + +[Here's a description of what needs to happen](https://github.com/elm/html/issues/175). + -} download : List (Attribute msg) diff --git a/src/Element/Font.elm b/src/Element/Font.elm index 353415d..a3f3664 100644 --- a/src/Element/Font.elm +++ b/src/Element/Font.elm @@ -1,46 +1,21 @@ -module Element.Font - exposing - ( Font - , alignLeft - , alignRight - , bold - , center - , color - , external - , extraBold - , extraLight - , family - , glow - , hairline - , heavy - , italic - , justify - , letterSpacing - , light - , medium - , monospace - , regular - , sansSerif - , semiBold - , serif - , shadow - , size - , strike - , typeface - , underline - , unitalicized - , wordSpacing - ) +module Element.Font exposing + ( color, size + , family, Font, typeface, serif, sansSerif, monospace + , external + , alignLeft, alignRight, center, justify, letterSpacing, wordSpacing + , underline, strike, italic, unitalicized + , heavy, extraBold, bold, semiBold, medium, regular, light, extraLight, hairline + , glow, shadow + ) {-| - import Color exposing (blue) import Element import Element.Font as Font view = Element.el - [ Font.color blue + [ Font.color (Element.rgb 0 0 1) , Font.size 18 , Font.family [ Font.typeface "Open Sans" @@ -49,7 +24,9 @@ module Element.Font ] (Element.text "Woohoo, I'm stylish text") -**Note**: `Font.color`, `Font.size`, and `Font.family` are inherited, meaning you can set them at the top of your view and all subsequent nodes will have that value. +**Note:** `Font.color`, `Font.size`, and `Font.family` are inherited, meaning you can set them at the top of your view and all subsequent nodes will have that value. + +**Other Note:** If you're looking for something like `line-height`, it's handled by `Element.spacing` on a `paragraph`. @docs color, size diff --git a/src/Element/Input.elm b/src/Element/Input.elm index 969abde..5f19529 100644 --- a/src/Element/Input.elm +++ b/src/Element/Input.elm @@ -40,7 +40,12 @@ module Element.Input ## Text Input -@docs text, Placeholder, placeholder, username, newPassword, currentPassword, email, search, spellChecked +@docs text, Placeholder, placeholder, + + +We can also give a hint about what type of content our text field contains. This will allow things like autofill to work correctly. + +@docs username, newPassword, currentPassword, email, search, spellChecked ## Multiline Text @@ -144,7 +149,7 @@ The `onPress` handler will be fired either `onClick` or when the element is focu import Element.Input as Input Input.button [] - { onPress = Just ClickMsg + { onPress = ClickMsg , label = text "My Button" } @@ -911,7 +916,9 @@ text = } -{-| -} +{-| If spell checking is available, this input will be spellchecked. + +-} spellChecked : List (Attribute msg) -> diff --git a/src/Element/Region.elm b/src/Element/Region.elm index 8591dda..2dbe6e1 100644 --- a/src/Element/Region.elm +++ b/src/Element/Region.elm @@ -1,16 +1,12 @@ -module Element.Region - exposing - ( announce - , announceUrgently - , aside - , description - , footer - , heading - , mainContent - , navigation - ) +module Element.Region exposing + ( mainContent, navigation, heading, aside, footer + , description + , announce, announceUrgently + ) -{-| This module is meant to make accessibility easy! They're sign posts that accessibility software like screen readers can use to navigate your app. +{-| This module is meant to make accessibility easy! + +These are sign posts that accessibility software like screen readers can use to navigate your app. All you have to do is add them to elements in your app where you see fit.