Future.elm

{-

      Inline Style Definitions


   Style classes would be calculated as a hash of the style properties.  Styles are bubbled up into a stylesheet.


-}


type Element
    = Element (List Attribute) Element
    | Row (List Attribute) (List Element)


type Attribute
    = StyleProperty
    | Attr


render : Element -> Html

StyleElementsOverview.elm

{- Style Elements Brief Architecture Sketch

-}


module Main exposing (..)


type alias StyleSheet =
    List Style


type Style class
    = Style
        { class : class
        , props : List Property
        }


type Property
    = Prop



-- The classname renderer used to render the styles in the stylesheet, and to create a classname lookup that used by the Elements to find their classname.


className (Style { class, properties }) =
    toString class ++ "-" ++ murmur3Hash (toString properties)



-- And now the elements


type Element style
    = Element style (List Attribute) (Element style)
    | Row style (List Attribute) (List (Element style))



-- Render pipleline


{-| First, the elements are passed to an adjustment pipeline which will

        - insert intermediate divs that are needed
        - bubble up elements tagged as `screen` so they can be rendered at the top of the DOM hierarchy as position:fixed.

-}
adjust : Element style -> Element style


{-| The Elements are then converted into Html.

  - the style value is rendered as a class
  - layout attributes such `center`, and `moveRight` are rendered as inline styles
    (This split of having both inline and class/stylesheet styles was done due to convenience of implementation, not due to speed or anything else)
  - At the top, the stylesheet is rendered into a <style>

-}
render : StyleSheet -> Element style -> Html