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/
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 containimport 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.
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"
}
introspection
and add them into the configurationsview : 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.
{ 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
{ width : Basics.Int
, height : Basics.Int
, locationHref : String
}
{ 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
}
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
Used internally to generate the Style Guide
{ 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 )