Neat

Main module for elm-neat-layout.

Core

type alias View gap msg =

View gap msg

A gap-sensible Html msg alternative.

type alias Boundary msg =

Boundary msg

A bounded View without gap.

Convert to/from View by setGap/setBoundary.

Render

render : Renderer -> Boundary msg -> Html msg

Render the View into Html so that it spreads across the screen.

type alias Renderer =

Renderer

Settings for rendering View.

defaultRenderer : Renderer

base size: 1rem

setBaseSizeInRem : Float -> Renderer -> Renderer

Set the base size in rem.

Represents the font-size of the root element (typically <html>).

All gap sizes are determined relative to this value.

Handle conditions

when : Bool -> (a -> a) -> a -> a

Apply a modifier only when a condition is met.

unless : Bool -> (a -> a) -> a -> a

Apply a modifier unless a condition is met.

withMaybe : Maybe a -> (a -> b -> b) -> b -> b

Apply a modifier only if the given value is Just.

Custom gaps

You can use custom gaps just by declaring new types and IsGap values for them.

import Neat exposing (IsGap)


type ButtonGroup
    = ButtonGroup Never


buttonGroup : IsGap ButtonGroup
buttonGroup =
    IsGap
        { horizontal = 0.6
        , vertical = 0.6
        }

type alias IsGap p =

IsGap p

Information about your custom gaps.

horizontal : horizontal gap relative to base size
vertical : vertical gap relative to base size

e.g., If the base size is 2rem, IsGap { horizontal = 1.2, vertical = 2 } becomes gap with "2.4rem" horizontally and "4rem" vertically.

customGap : Gap -> IsGap p

type alias Gap =

{ horizontal : Float

, vertical : Float

}

arowM/elm-neat-layout/4.0.2

Neat

Core

Render

Handle conditions

Custom gaps

Modules