Perch, Patterns and Old Browsers
5 likes1,817 views
Rachel Andrew discusses the redesign of the Perch CMS control panel, emphasizing the importance of a pattern library for managing independent UI components. She highlights the use of Fractal for documentation and organization while advocating for modern CSS techniques, addressing old browser support as a secondary concern. The talk stresses the benefits of starting with a pattern library to streamline development and ensure an up-to-date design process.
Perch, Patterns and Old Browsers
- 1. Perch, patterns, and old browsers. Rachel Andrew @ Patterns Day
- 2. I am: ‣ co-founder of Perch CMS ‣ An invited Expert to the CSS Working Group ‣ A Google Developer Expert ‣ A wearer of too many hats ‣ Blogging at rachelandrew.co.uk, on Twitter as @rachelandrew
- 4. Redesigning the Perch Control Panel.
- 9. The Perch UI has to exist as a set of independent components that can be displayed in any order.
- 10. We needed a pattern library.
- 11. Why not use HTML and CSS? ▸ Lots of duplication - copying and pasting code around ▸ Slow to make changes across items using the same markup ▸ Had to encode markup for display and also keep that up to date ▸ Would be unlikely to keep it up to date after launch as changes were painful
- 13. Requirements for a pattern library tool ▸ Somewhere to document design decisions ▸ A system to organise and separate components ▸ Something that would remain up to date once the product shipped ▸ Something we could make available to our third party add-on developers as a reference for their Perch add-ons
- 14. Many systems at the time assumed we were building a website.
- 16. We chose Fractal because: ▸ It didn’t assume the shape of our project - no assumption of a ‘homepage’ for example ▸ It left the organisation of components and naming up to us ▸ It didn’t dictate which build tools were used for the end CSS ▸ Allowed documentation to be stored alongside patterns ▸ Could export to HTML in order that we could make it available online
- 17. Pattern Library as Source of Truth.
- 18. Fractal is where the CSS for the Perch UI is built.
- 20. Naming things is hard.
- 25. Don’t stress about naming. It will become clearer as you build.
- 26. Don’t be afraid to refactor, and choose a tool that enables this.
- 28. Reduced Test Case First development
- 29. Perch supports right back to IE9. * supports doesn’t mean ‘looks the same’
- 30. I didn’t worry about old browsers until after we had built the UI.
- 31. Flexbox & Grid are so different. If you build using old methods first you won’t take advantage of their creative possibilities.
- 32. Start with solid markup.
- 33. Build your up to date experience using up to date methods.
- 34. Then look at the browsers that don’t support these newer methods.
- 35. Time spent dealing with old browsers, back to IE9 for the Perch UI? About a day.
- 36. When faced with a confusing broken mess, we strip it back to a reduced test case.
- 37. Components are already a reduced test case.
- 38. Browser testing Work in the Pattern Library to test and fix each component in turn. Starting with the smallest version - in our case our ‘atoms’. By the time you get to the main layouts you may find it all just works. If not, remember your layout is just another component, into which other things sit.
- 39. Working pattern library first is a very good way to start using new CSS.
- 40. Use Grid on a small element of your design.
- 41. .wrapper { display: grid; grid-gap: 10px; margin: 0 auto; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: minmax(150px, auto); } .tall-panel { grid-row-end: span 2; } A grid component Creating a grid with as many columns as will fit. Items with a class of ‘tall-panel’ span two rows.
- 44. .wrapper { display: flex; flex-wrap: wrap; } .wrapper { display: grid; grid-gap: 10px; margin: 0 auto; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: minmax(150px, auto); } .panel { margin-left: 5px; margin-right: 5px; flex: 1 1 200px; } .tall-panel { grid-row-end: span 2; } @supports (display: grid) { .wrapper > * { margin: 0; } } No Grid? Use Flexbox as a fallback
- 46. Keep fallback code with the component in the pattern library.
- 48. Designing a component seems less overwhelming than designing a whole site.
- 49. Developing CSS in the Pattern Library makes CSS more manageable.
- 50. Pattern library first keeps the build process and the runtime process separate.
- 51. Components are reduced test cases. Allowing you to more easily embrace new techniques and deal with old browsers.
- 52. Choose tools that allow you to refactor the pattern library as things change.
- 53. Make the pattern library the source of truth and it can’t get out of date.
- 54. Links & Things The Perch Pattern Library: http://patterns.perchcms.com Fractal: http://fractal.build/ Atomic Design: http://atomicdesign.bradfrost.com/ Patterns on Grid by Example: https://gridbyexample.com/patterns/ Grid fallbacks and overrides cheatsheet: https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks
- 55. Thank you! @rachelandrew Resources and slides: https://rachelandrew.co.uk/speaking/event/patterns-day