git.iko.soy/typeable/elm-ui
on master help sign in
Palette Group Experiment Sketch
d5f5e17Matthew Griffith
notes/discussion/PaletteGroups.mdnew file+132
compare with master
unifiedsplit
@@ -0,0 +1,132 @@
1+# Mini Palette Experiment
2+
3+`elm-ui` currently implements most things such as layout and style as attributes on a element. These are intended to be explicit so that visiting an element will give you all the information you need to understand how an element is shown.
4+
5+However, this can also mean that Elements gather a lot of attributes and in the effort of capturing a consistent design language you may find yourself repeating a lot of combinations of attributes.
6+
7+Previously a construct like `mix : List (Attribute msg) -> Attribute msg` has been proposed as a way to make things easier, however that opens up a large design space. Developers then have to make the difficult decision about what attributes to group together. That decision is It also would allow intermixing of event handlers with style and layout, which seems weird.
8+
9+As an alternative, we could have specific groupings of attributes that are allowed. Done right, this may solve the problem of the dev having to worry about proper groupings and push them towards thinking of their design as a cohesive whole.
10+
11+My intuition says that these groupings will fall along the lines of the current module organization. Here are the helper functions that come to mind. These would be in addition to everything we already have.
12+
13+
14+## Spacing Palette
15+
16+```elm
17+Element.spaceWith :
18+ { padding :
19+ { top : Int
20+ , right : Int
21+ , bottom : Int
22+ , left : Int
23+ }
24+ , spacing :
25+ { x : Int
26+ , y : Int
27+ }
28+ } -> Attribute msg
29+```
30+
31+## Color Palette
32+
33+It might be a little weird to have a color grouping, but my gut says it probably makes sense.
34+
35+By binding background and text color together, we can know all of our background and text color combinations, making it easier to verify and specifiy a minimum contrast for accessibility.
36+
37+```elm
38+Element.colors :
39+ { background : Color
40+ , text : Color
41+ , border : Color
42+ } -> Attribute msg
43+```
44+
45+## Font Palette
46+
47+```elm
48+Element.Font.with :
49+ { typeface : String
50+ , fallback : List String
51+ , scale : Scale
52+ -- adjustments is a new thing that's coming that will allow more precise font sizing.
53+ , adjustments : Maybe Font.Adjustment
54+ -- These are variations like `slash zero`
55+ , variations : List Font.Variation
56+ } -> (Option, Attribute msg)
57+
58+type Scale
59+ = Single Int
60+ | Triple
61+ { small : Int
62+ , normal : Int
63+ , large : Int
64+ }
65+ | Fluid (windowSize -> Scale)
66+
67+
68+
69+
70+-- Usage
71+
72+(titleFont, title) =
73+ Font.with
74+ { typeface = "EB Garamond"
75+ , fallback =
76+ [ "georgia"
77+ , "serif"
78+ ]
79+ , scale =
80+ Font.Triple
81+ { small = 12
82+ , normal = 16
83+ , large = 32
84+ }
85+ , adjustments = Nothing
86+ , variations = []
87+ }
88+
89+
90+view =
91+ Element.layoutWith { options = [ titleFont ] } <|
92+ el
93+ [ title.large
94+ ]
95+ (text "I am a large title font")
96+
97+
98+```
99+
100+## Border Model
101+
102+```elm
103+Element.Border.with :
104+ { width : Int
105+ , style : Border.Style
106+ , rounded :
107+ { topLeft : Int
108+ , topRight : Int
109+ , bottomLeft : Int
110+ , bottomRight : Int
111+ }
112+ }
113+```
114+
115+
116+## Shadow Model
117+
118+This might mean breaking out shadows into their own module.
119+
120+```elm
121+Element.Shadow.stack : List Shadow -> Attribute msg
122+```
123+
124+
125+# General Questions
126+
127+So, here are the questions I have:
128+
129+- If you have a current codebase with `elm-ui`, would this simplify things at all? Is there a way you can quantify it(most elements I have would have half as many attributes)?
130+- Are there alternate groupings that you've come across?
131+
132+