Framework

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.

There are three ways to configure and customize this package.

Overwrite variables

To change the variables (mainly colors), as defined inside Configuration.elm use the file FrameworkConfiguration.elm. You can create such file in the root folder of your project or better you should copy the entire framework inside your repository. The file should contain

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

To change the automatically-generated-styleguide logo, title and description you need to pass a new configuration file. SOmething like:

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

To add new feature and have them showing up in the style guide just remember to output the introspection and add them into the configurations

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 : Color

, grey9 : Color

, greyB : Color

, greyD : Color

, greyF : Color

, titleLeftSide : Element msg

, title : Element msg

, subTitle : String

, version : String

, introduction : Element msg

, mainPadding : Int

, password : String

, forkMe : Attribute msg

, hostnamesWithoutPassword : String -> Bool

}

Configuration

type alias Flags =

{ width : Int

, height : Int

, locationHref : String

}

type alias Model =

{ maybeUrl : Maybe Url

, maybeWindowSize : Maybe WindowSize

, modelStyleElementsInput : Model

, modelFormField : Model

, modelFormFieldWithPattern : Model

, modelCards : Model

, introspections : List ( Introspection, Bool )

, password : String

, conf : Conf Msg

, key : Key

}

type Msg

= MsgToggleSection String

| MsgOpenAllSections

| MsgCloseAllSections

| MsgChangeWindowSize Int Int

| MsgStyleElementsInput Msg

| MsgFormField Msg

| MsgFormFieldWithPattern Msg

| MsgCards Msg

| MsgChangePassword String

| MsgNoOp

| LinkClicked UrlRequest

| UrlChanged Url

Functions

init : Flags -> Url -> Key -> ( Model, Cmd Msg )

initCmd : Flags -> Url -> Key -> Cmd Msg

initConf : Conf msg

initModel : Flags -> Url -> Key -> Model

subscriptions : Model -> Sub Msg

update : Msg -> Model -> ( Model, 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 -> Document Msg

This create the entire page of Browser.Document type.

main : 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, Bool )

lucamug/style-framework/1.0.0