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.
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.