Wrapping CSS Layout in Elm

csslayout.elm

type alias Bounds = {
  left : Float,
  right : Float,
  top : Float,
  bottom : Float
}

bounds : Bounds
bounds = Bounds 0 0 0 0

type FlexDirection = Row | Column

type FlexAlignment = FlexStart    |
                     Center       |
                     FlexEnd      |
                     Stretch      |
                     SpaceBetween |
                     SpaceAround

type PositionType = Relative | Absolute

type alias Style = {
  dimensions : {
    width : Float,
    height : Float
  },
  position : Bounds,
  margin : Bounds,
  padding : Bounds,
  borderWidth : Bounds,
  flexDirection : FlexDirection,
  justifyContent : FlexAlignment,
  alignItems : FlexAlignment,
  alignSelf : FlexAlignment,
  flex : Float,
  positionType : PositionType
}

style : Style 
style = {
  dimensions = {
    width = 100,
    height = 100
  },
  position = bounds,
  margin = bounds,
  padding = bounds,
  borderWidth = bounds,
  flexDirection = Column,
  justifyContent = SpaceAround,
  alignItems = Stretch,
  alignSelf = Stretch,
  flex = 1,
  positionType = Relative
}