lucamug / style-framework / Framework

Demo

This file (Framework.elm) is used to generate the Living Style Guides.

The idea is to have a living version of the Style Guide that stays always updated without manual intervention.

For more info about the idea, see [this post](https://medium.com/

Overwrite variables

import Dict

configuration : Dict.Dict String String
configuration =
    Dict.fromList [ ( "primary", "#909" ) ]

ALso add module FrameworkConfiguration exposing (configuration) at the very top. In this example we are replacing the primary color with#909.

Change the automatically-generated-styleguide

view : Framework.Model -> Html.Html Framework.Msg
view model =
    Framework.view
        { model
            | conf = initConf
        }

initConf : Framework.Conf msg
initConf =
    let
        confData =
            Framework.initConf
    in
    { confData
        | title = text "New Title"
        , subTitle = "New Subtitle"
    }

Add completely new features

view : Framework.Model -> Html.Html Framework.Msg
view model =
    Framework.view
        { model
            | introspections = introspections
        }

introspections : List ( Framework.Introspection, Bool )
introspections =
    [ ( Color.introspection, True )
    , ( Logo.introspection, True )
    , ( Icon.introspection, True )
    ]
        ++ Framework.introspections

You can combine the latest two points with

view : Framework.Model -> Html.Html Framework.Msg
view model =
    Framework.view
        { model
            | conf = initConf
            | introspections = introspections
        }

If you believe that your new feature is something that everybody should have please add it to the package and contribute to the opensource!

For any issue or to get in touch with the authors, refer to the github page.

Types


type alias Conf msg =
{ grey3 : Element.Color
, grey9 : Element.Color
, greyB : Element.Color
, greyD : Element.Color
, greyF : Element.Color
, titleLeftSide : Element msg
, title : Element msg
, subTitle : String
, version : String
, introduction : Element msg
, mainPadding : Basics.Int
, password : String
, forkMe : Element.Attribute msg
, hostnamesWithoutPassword : String -> Basics.Bool 
}

Configuration


type alias Flags =
{ width : Basics.Int
, height : Basics.Int
, locationHref : String 
}


type alias Model =
{ maybeUrl : Maybe Url
, maybeWindowSize : Maybe WindowSize
, modelStyleElementsInput : StyleElementsInput.Model
, modelFormField : FormField.Model
, modelFormFieldWithPattern : FormFieldWithPattern.Model
, modelCards : Card.Model
, introspections : List ( Introspection
, Basics.Bool )
, password : String
, conf : Conf Msg
, key : Browser.Navigation.Key 
}


type Msg
    = MsgToggleSection String
    | MsgOpenAllSections
    | MsgCloseAllSections
    | MsgChangeWindowSize Basics.Int Basics.Int
    | MsgStyleElementsInput StyleElementsInput.Msg
    | MsgFormField FormField.Msg
    | MsgFormFieldWithPattern FormFieldWithPattern.Msg
    | MsgCards Card.Msg
    | MsgChangePassword String
    | MsgNoOp
    | LinkClicked Browser.UrlRequest
    | UrlChanged Url

Functions

init : Flags -> Url -> Browser.Navigation.Key -> ( Model, Platform.Cmd.Cmd Msg )

initCmd : Flags -> Url -> Browser.Navigation.Key -> Platform.Cmd.Cmd Msg

initConf : Conf msg

initModel : Flags -> Url -> Browser.Navigation.Key -> Model

subscriptions : Model -> Platform.Sub.Sub Msg

update : Msg -> Model -> ( Model, Platform.Cmd.Cmd Msg )

view : Model -> Html Msg

viewPage : Maybe WindowSize -> Model -> Element Msg

This create the entire page of Element type. If you are working with elm-ui this is the way to go, so you can customize your page.

Example, in your Style Guide page:

main : Html.Html msg
main =
    layout layoutFontsAndAttributes <|
        column []
            [ ...
            , Styleguide.page
                [ Framework.Button.introspection
                , Framework.Color.introspection
                ]
            ...
            ]

viewDocument : Model -> Browser.Document Msg

This create the entire page of Browser.Document type.

main : Platform.Program Flags Model Msg

Introspection

Used internally to generate the Style Guide


type alias Introspection =
{ name : String
, signature : String
, description : String
, variations : List Variation 
}

This is the type that is required for Introspection

Example, inside Framework.Button:

introspection : Styleguide.Introspection msg
introspection =
    { name = "Button"
    , signature = "button : List Modifier -> Maybe msg -> String -> Element msg"
    , description = "Buttons accept a list of modifiers, a Maybe msg (for example: \"Just DoSomething\") and the text to display inside the button."
    , variations =
        [ ( "Sizes"
          , [ ( button [ Small ] Nothing "Button", "button [ Small ] Nothing \"Button\"" )
            , ( button [ Medium ] Nothing "Button", "button [ Medium ] Nothing \"Button\"" )
            , ( button [ Large ] Nothing "Button", "button [ Large ] Nothing \"Button\"" )
            ]
          )
        ]
    }

introspections : List ( Introspection, Basics.Bool )