Style Design Patterns and Disciplines

Styles across many sites are surprisingly similar, but the CSS strategies to accomplish the style is non-obvious. Style Design Patterns attempts to classify these commonly recurring problems and their solutions.

Transcript

1. Style Design Patterns & Disciplines @jrhicks
2. Jeffrey Hicks jrhicks.github.io @jrhicks Employee and owning member At CTEH LLC developer, designer, & mentor of web Web technologies and databases
3. React LiFle Rock
4. Style - A disIncIve appearance
5. Design Pa0erns General re-usable soluIon to commonly occurring problem
6. Learning Design PaFerns DramaIcally Increases Quality
7. Panel Layout Pa0ern •  Panels extend to edges of browser. •  Content width is fixed and centered. •  First Panel (also known as hero) contains large text. •  Panels alternate color Source: Brad Sanders hFps://www.youtube.com/watch?v=ko0jgfRuxJM
8. Panels Extend To Edge
9. Content Fixed Width & Centered
10. “First Panel” is Hero Panel
11. Panels Alternate Color white picture white grey
14. Double Container
15. Double Container Pa0ern
16. Hero Panel •  Large aFracIve photographs as background. •  Uncomfortably tall. •  Overlay text using vigneFe overlay Source: Brad Wesfall - hFp://Inyurl.com/z5s4c9y
17. Hero Pa0ern Source: Brad Wesfall - hFp://Inyurl.com/z5s4c9y
18. Hero Panel Source: Brad Wesfall - hFp://Inyurl.com/z5s4c9y
19. Hero Panel Text Overlay •  Covered Not Tiled •  Centered •  Legible Text Overlay
20. Hero Panel Text Overlay
21. Border Discipline •  Use borders lightly •  Not all transiIons need a border •  Must be a darker hue of which ever background is the darkest Source: Brad Wesball - hFps://youtu.be/ko0jgfRuxJM?t=1h18m28s
22. Border Discipline
23. Border Discipline
24. You Can Now Make This! Grid Column Pa0ern Solves alignment and verIcal rhythm through equally sized columns and guFers
25. Grid Column Pa0ern
26. Grid Column Pa0ern
27. Grid Column Pa0ern
28. Grid Column Pa0ern
29. Column Spans Column Span = 1 Column Span = 6 Column Span = 2
30. CSS Libraries •  Have done all the math for us. •  Provide style classes for column-span possibility.
31. CSS Libraries •  Does the math •  Provides style classes for each column span width possible. •  Provide row containers to give columns a place to live. Ideally columns totaling 12.
32. Bootstrap Example
33. Bootstrap Example
34. Pop Quiz!
35. Pop Quiz! •  What are these?
36. Pop Quiz! •  What are these?
37. Pop Quiz! •  What are these? Panels (or containers in bootstrap speak)
38. Pop Quiz! •  What are these?
39. Pop Quiz! •  What are these? Rows
40. Pop Quiz! •  What are these?
41. Pop Quiz! •  What are these? Columns
42. You Can Now Make This! The Clearfix Trick Solves needing to contain a bunch of floated elements
43. The Clearfix Trick All items floated Causes container to have no height.
44. The Clearfix Trick
45. You Can Now Make This! Fixed Height anZ-pa0ern Fixing a container’s height to solve layout problems is very fragile
46. Fixed Height anZ-pa0ern Source: Brad Wesball hFps://youtu.be/ofSnkJ9tPPM?t=15m51s
47. Fixed Height anZ-pa0ern Source: Brad Wesball hFps://youtu.be/ofSnkJ9tPPM?t=15m51s
48. Fixed Height anZ-pa0ern Source: Brad Wesball hFps://youtu.be/ofSnkJ9tPPM?t=15m51s VerIcal centering breaks with: •  Font sizes •  Any design tweaks. •  User sekngs.
49. Fixed Height anZ-pa0ern Source: Brad Wesball hFps://youtu.be/ofSnkJ9tPPM?t=15m51s
50. Fixed Height anZ-pa0ern
51. Fixed Height anZ-pa0ern
52. Fixed Height anZ-pa0ern
53. Fixed Height anZ-pa0ern
54. Fixed Height anZ-pa0ern Apply the Clear Fix Trick
55. Fixed Height anZ-pa0ern text-align: center not working floated blocks
56. Fixed Height anZ-pa0ern inline-block
57. Fixed Height anZ-pa0ern inline-block
58. Fixed Height anZ-pa0ern
59. You Can Now Make This! NegaZve Margin Pa0ern Solves padding elements inside a container while keeping edge elements flush with the edge of the container.
60. You Can Now Make This! NegaZve Margin Pa0ern Grid Columns Solves padding columns inside a row while keeping the far lel column and far right column flush with the edges
61. NegaZve Margin Pa0ern Source - Brad Wesball - hFp://Inyurl.com/jgk3rvp
62. NegaZve Margin Pa0ern
63. NegaZve Margin Pa0ern
64. NegaZve Margin Pa0ern hFp://www.helloerik.com/the-subtle-magic- behind-why-the-bootstrap-3-grid-works
65. You Can Now Make This! NegaZve Margin Pa0ern Galleries Solves padding media inside a gallery while keeping the far lel, top, right, and boFom images flush with the gallery edges
66. NegaZve Margin Pa0ern
68. NegaZve Margin Pa0ern We would like to put padding between gallery items. We do NOT want to lose our nice flush lines.
69. NegaZve Margin Pa0ern Pukng margin around the items breaks out lel and right alignment.
70. NegaZve Margin Pa0ern The items are inside a gallery. Lets put a border so we can see it. If we put a negaIve margin on the gallery equal to the spacing around the items …
71. NegaZve Margin Pa0ern Now we just need to remove the gallery border
72. NegaZve Margin Pa0ern Warning: You need to do a liFle math to size the art items to fit.
73. You Can Now Make This! NegaZve Margin Pa0ern Cards Solves padding contents inside a card while keeping the top, lel, & right edges of the feature image flush with the border.
74. NegaZve Margin Pa0ern
75. You Can Now Make This! Media Object Pa0ern PresenIng media (image/video) along with some variable size content (text) hFp://www.stubbornella.org/content/2010/06/25/the-media-object-saves- hundreds-of-lines-of-code/
76. Media Object Pa0ern
77. Media Object Pa0ern
78. Medi
79. Medi
80. Media Object Pa0ern
81. You Can Now Make This! Masonry Layout Pa0ern Popular style for grouping content
82. Masonry Layout Pa0ern •  Usually white on grey. •  Great for variable length collecIons •  Important for associaIng user acIon with target. •  I believe popularized by Apple
83. Masonry Layout Pa0ern
84. Masonry Layout Pa0ern
85. Masonry Layout Pa0ern
86. Masonry Layout Pa0ern
87. Masonry Layout Pa0ern
88. You Can Now Make This! hFp://alistapart.com/arIcle/axiomaIc-css-and-lobotomized-owls Lobotomized Owl Pa0ern We want each item to hFp://alistapart.com/arIcle/axiomaIc-css-and-lobotomized-owls
89. Lobotomized Owl Pa0ern
90. Lobotomized Owl Pa0ern
91. Lobotomized Owl Pa0ern
92. Lobotomized Owl Pa0ern
93. You Can Now Make This! Color Discipline Be conservaIve with color. Choose two colors at most.
94. Color Discipline You can choose different saturaZons and lightness of the same hue. Source: Brad Wesfall: hFps://youtu.be/ko0jgfRuxJM?t=23m10s
95. Color Discipline You can choose different saturaZons and lightness of the same hue. Do not cross hues hFps://www.lightningdesignsystem.com/design/color/
96. Color Discipline
97. Color Discipline
98. Color Discipline Color is used sparingly to draw aFenIon to important elements and those that we want the user to take acIon on hFps://www.lightningdesignsystem.com/design/color/
99. Color Discipline
100. Color Discipline
102. Thank You
103. AddiZonal Resources UI Principles for programmers hFps://www.youtube.com/watch?v=ko0jgfRuxJM Component Independence & Layout Strategies hFps://www.youtube.com/watch?v=ofSnkJ9tPPM @bradwes\all hFp://Inyurl.com/gvmjey6 UI Principles for programmers Dec 2015 Conference
104. Upcoming PresentaZons
105. Business ApplicaZon Style Pa0erns Displaying Data •  Record Lists •  Table •  Tiles •  InteracIve Cards •  Feeds Layout •  Record Layouts •  Reference Layouts •  Workspace Layouts •  List Layouts •  Table Layouts •  Board Layouts •  Master/Detail Layouts And Also •  Data Entry •  Messaging •  NavigaIon •  Voice & Tone •  ….