Skip to content

Instantly share code, notes, and snippets.

@mdgriffith
Last active August 18, 2017 16:52
Show Gist options
  • Save mdgriffith/fe444b460f9e1a93b857193d05cc9c47 to your computer and use it in GitHub Desktop.
Save mdgriffith/fe444b460f9e1a93b857193d05cc9c47 to your computer and use it in GitHub Desktop.
{-
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
{- 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment