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