Style Sheet Organization

You might be wondering what are some recommendations as far as organizing your styles.

The first thing in mind that might seem a bit counter intuitive, is that you don't need to couple your views to your stylesheet.

You can think of your styles as a separate concern from your view.

Separating View and Styles

Style Elements wants you to have one stylesheet, but what happens when you have a really big stylesheet.

You can break that stylesheet down into sections using union types!

-- The main style type.
type MyStyles 
    = Title
    | Subtitle
    | Navigation
    | Nav NavigationStyles


-- An organized subsection of your styles
type NavigationStyles
    = Logo
    | Link


stylesheet = 
    Style.styleSheet
        [ style Title
            [ --title styles
            ]
        , style SubTitle
            [ --subtitle styles
            ]
        , style Navigation
            [ --nav logo styles
            ]
        , style (Nav Logo)
            [ --nav logo styles
            ]
        , style (Nav Link)
            [ --nav logo styles
            ]
        ]

You can then render things using that new value.

import Element exposing (layout, row, empty, text, link)

view = 
    Element.layout stylesheet <|
        row Navigation []
            [ el (Nav Logo) [] empty
            , link "/profile" <| 
                el (Nav Link) [] (text "My Profile")
            , link "/logout" <| 
                el (Nav Link) [] (text "Log out")
            ]

Other Best Practices!

One of the strongest tools you have at your disposal is to capture your style values in a function.

This allows you to build a style system that is flexible and easily extensible.

So, let's start with a font stack. We can create a function that captures any font stacks we have:

type FontStack = SansSerif | Serif | Mono


stack : FontStack -> List Font.Font
stack fontstack =
    case fontstack of
        SansSerif ->
            [ Font.font ""
            ]

        Serif ->
            [ Font.font "Garamond"
            ]

        Mono ->
            [ Font.font "Inconsolata"
            ]


-- Then in our styleSheet we can use that function like
stylesheet =
    Style.styleSheet
        [ style MainTitle
            [ Font.typeface (stack Serif)
            ]
        ]

This means that in the future if you want to change a font, you only have to change it in one place.

You can use this technique for all values. Try it out for your color palette, your shadows, or anything you want to keep track of.

Using Scales

Scales are also incredibly useful and should be an integral part of your stylesheet.

What is a scale? It's actually just a function that takes a number and returns another number!

A common scale is called the modular scale and it can be used to make your font sizes look nice.

import Style.Scale as Scale

-- We create a scale function that starts at 16 and moves up at a ratio of 1.618
scale =
    Scale.modular 16 1.618

-- We can now use `scale` to handle our font sizes.
stylesheet =
    Style.styleSheet
        [ style StandardText
            [ Font.size (scale 1) -- renders as 16px
            ]
        , style SubTitle
            [ Font.size (scale 3) --renders as 16 * 1.618 ^ (4 - 1)px, which is 41.88px
            ]
        , style SubTitle
            [ Font.size (scale 2) -- renders as (16 * 1.618)px, which is 25.8px
            ]
        ]

Don't be put off by the math if it seems confusing. The main point here is that you don't have to think of the math. Just pick a starting size, and a ratio that should be used to scale up or down the font size.

Then just use scale 1 or scale 2 or whatever size you want. Things will generally look nice.

You can use this technique to keep your spacing and padding in sync as well. Define a scaling function for them, and use that instead of direct pixel sizes.