Neat

Main module for elm-neat-layout.

Core

type View padding msg

Html alternative that has type level padding.

toPage : View NoPadding msg -> List (Html msg)

Call this function only once on root view function. Make sure that your own CSS is partially overwritten by following CSS.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
[data-elm-neat-layout~=flex]{
    display:-ms-flexbox;
    display:flex
}

Constructors and Modifiers for View

lift :

(List (Attribute msg) -> List (Html msg) -> Html msg)

-> List (Mixin msg)

-> List (View p msg)

-> View p msg

Lift Html nodes into View.

import Html exposing (div)
import Mixin exposing (Mixin)
import Neat exposing (View)
import Neat.Padding as Padding exposing (NoPadding)


view1 : View NoPadding msg
view1 =
    Neat.div
        []
        [ Neat.text "view1"
        ]


view2 : View NoPadding msg
view2 =
    Neat.div
        []
        [ Neat.text "view2"
        ]


composed : View NoPadding msg
composed =
    lift div
        [ Mixin.class "parent"
        ]
        [ view1
        , view2
        ]

none : View p a

View version of Html.text "".

empty : View NoPadding a

An alias for div [] [].

emptyNode :

(List (Attribute msg) -> List (Html msg) -> Html msg)

-> View NoPadding msg

An alias for \node -> lift node [] [].

setMixin : Mixin msg -> View NoPadding msg -> View NoPadding msg

setMixins : List (Mixin msg) -> View NoPadding msg -> View NoPadding msg

setAttribute : Attribute msg -> View NoPadding msg -> View NoPadding msg

setAttributes : List (Attribute msg) -> View NoPadding msg -> View NoPadding msg

setLayout : Layout msg -> View p msg -> View p msg

Alternatives to Html nodes

div : List (Mixin msg) -> List (View p msg) -> View p msg

View version of Html.div.

text : String -> View NoPadding msg

View version of \str -> Html.div [] [ Html.text str ].

Keyed

keyed :

String

-> List (Mixin msg)

-> List ( String, View p msg )

-> View p msg

Primitive

type NoPadding

Primitive type representing no padding on a view.

Custom paddings

You can introduce custom paddings by just declaring their types and IsPadding values.

type MyPadding
    = MyPadding


myPadding : IsPadding MyPadding
myPadding =
    IsPadding
        { rem = 0.6
        }

type IsPadding p

= IsPadding { rem : Float }

Information about your custom paddings.

rem : padding width in units of rem

Convert between paddings

fromNoPadding : IsPadding p -> View NoPadding msg -> View p msg

expand : IsPadding p1 -> IsPadding p2 -> View p1 msg -> View p2 msg

Expand padding from p1 to p2. The width of p2 is supposed to be greater than p1.

setBoundary : IsPadding p -> View p msg -> View NoPadding msg

Set boundary to convert into NoPadding.

Unsafe functions

These can break neat paddings, so use them carefully.

unsafeFromHtml : Html msg -> View p msg

Lower level functions for performance optimization

These are lower level functions, so all you need would be Neat.Layout.Row.optimized and Neat.Layout.Column.optimized.

Do not worry even if you cannot understand how to use these functions.

optimized :

(x -> String)

-> (x -> Html (Protected p msg))

-> String

-> List (Mixin msg)

-> List x

-> View p msg

v1 : View p msg
v1 =
    Debug.todo "v1"


v2 : View p msg
v2 =
    Debug.todo "v2"


child : Int -> View p msg
child _ =
    Debug.todo "child"


child_ : Int -> Html (Protected p msg)
child_ =
    toProtected << child


v : List Int -> View p msg
v =
    optimized
        String.fromInt
        (lazy child_)
        "div"
        []

toProtected : View p a -> Html (Protected p a)

This is supposed to be used in order to make Html.Lazy.lazyN work. See optimized for real usage.

type Protected p a

arowM/elm-neat-layout/1.0.1

Neat

Core

Constructors and Modifiers for View

Alternatives to Html nodes

Keyed

Primitive

Custom paddings

Convert between paddings

Unsafe functions

Lower level functions for performance optimization

Modules