Recommended
More Related Content
What's hot
Similar to Digital pattern library
Similar to Digital pattern library (20)
Recently uploaded
Recently uploaded (20)
Digital pattern library
- 1. A practical guide to how we built a self-documenting digital pattern library digitalcommunications@st-andrews.ac.uk
- 2. Introduction What are you interested in? Do you have a digital pattern library?
- 3. Objectives When does a pattern library fit into a redesign process? What is a pattern? How to identify patterns How to build patterns Governance
- 4. Why a digital pattern library?
- 7. What is a digital pattern library?
- 16. Advantages/disadvantages of digital pattern libraries
- 17. How to start using or developing a pattern library
- 18. Standards Content Design Modules Pattern library• Code • Content • Naming conventions
- 23. Standards Content Design Modules Pattern library• Code • Content • Naming conventions Test Test TestTestTest
- 24. Standards Content Design Modules Pattern library• Code • Content • Naming conventions Standardise Testing Testing TestingTestingTesting Simplify Consolidate
- 25. Start small
- 26. Does this approach resonate with you?
- 27. What is a pattern for the University of St Andrews?
- 28. Header
- 29. Navigation bar
- 30. Hero banner
- 33. Category header Navigation bar Header Breadcrumbs Content whole Navbox grid Navboxes Footer
- 35. What is a pattern for you?
- 36. What is core and optional? What variations would you allow? What names would you give the patterns?
- 37. University of St Andrews digital pattern library
- 38. Our philosophy – build on firm foundations
- 39. Our philosophy – write once <div class="accordion"> <h3>Moral, Political and Legal Philosophy</h3> <div> <p>...</p> </div> </div> Website Web applications Documentation Examples
- 40. Our philosophy – easy way to build options
- 41. Our philosophy - test driven development <div class="accordion"> <h3>Moral, Political and Legal Philosophy</h3> <div> <p>...</p> </div> </div> Pattern library
- 42. Our philosophy – standalone pattern library
- 43. Our philosophy – platform agnostic
- 44. Pattern library uses the pattern library
- 45. Building a pattern from scratch
- 46. Pattern library Pattern template • HTML + handlebars • Sass (CSS) • JavaScript Options • JSON Documentation Code • screen.css • print.css • core.min.js Documentation template • HTML + handlebars 1 2 3 4 Grunt
- 47. Pattern library Pattern template • HTML + handlebars • Sass (CSS) • JavaScript Options • JSON Documentation Code • screen.css • print.css • core.min.js Documentation template • HTML + handlebars 1 2 3 4 Grunt
- 48. Step 1 – Create pattern template demo
- 50. Identify pattern to be built Accordion
- 51. Extract code <div class="accordion"> <h3>Moral, Political and Legal Philosophy</h3> <div> <p>...</p> </div> </div>
- 52. Optimise code: HTML <div class="accordion"> <h3 aria-expanded="false" aria-controls="accordion-0" role="tab" tabindex="0">Moral, Political and Legal Philosophy</h3> <div id="accordion-0" aria-hidden="true" role="tabpanel"> <p>...</p> </div> </div> Accessible Responsive Standards
- 53. Optimise code: Sass (_accordion.scss)
- 54. Optimise code: JavaScript (accordion.js)
- 55. Pattern template <div class="accordion"> <h3 aria-expanded="false" aria-controls="accordion-0" role="tab" tabindex="0">{{{ accordion-heading }}}</h3> <div>{{{ accordion-content }}}</div> </div> <div class="accordion"> <h3 aria-expanded="false" aria-controls="accordion-0" role="tab" tabindex="0">Moral, Political and Legal Philosophy</h3> <div id="accordion-0" aria-hidden="true" role="tabpanel"> <p>...</p> </div> </div> Optimised HTML Handlebars
- 56. Pattern library Pattern template • HTML + handlebars • Sass (CSS) • JavaScript Options • JSON Documentation Code • screen.css • print.css • core.min.js Documentation template • HTML + handlebars 1 2 3 4 Grunt
- 57. Step 2 – create options JSON
- 58. { "options": [ { "option-heading": "Single accordion", "option-description": "", "option-anchor": "single", "accordion": { "accordion-heading": "Moral, Political and Legal Philosophy", “accordion-content": "<p>Lorem ipsum dolor sit amet...</p>" } } ] } <div class="accordion"> <h3 …>{{{ accordion-heading }}}</h3> <div>{{{ accordion-content }}}</div> </div> Options – JSON Pattern template
- 59. { "options": [ { "option-heading": "Single accordion", "option-description": "", "option-anchor": "single", "accordion": { "accordion-heading": "Moral, Political and Legal Philosophy", “accordion-content": "<p>Lorem ipsum dolor sit amet...</p>" } } ] } <div class="accordion"> <h3 …>{{{ accordion-heading }}}</h3> <div>{{{ accordion-content }}}</div> </div> Options – JSON Documentation template Pattern template
- 60. Pattern library Pattern template • HTML + handlebars • Sass (CSS) • JavaScript Options • JSON Documentation Code • screen.css • print.css • core.min.js Documentation template • HTML + handlebars 1 2 3 4 Grunt
- 61. Step 3 – create documentation template
- 62. Options JSON Option 1 Option 2 Option 3 { { { } } } Documentation template Instructions and rules Documentation template Pattern template Pattern option 1 Pattern option 2 Pattern option 3 Pattern library
- 63. Documentation – dummy template --- title: Dummy pattern --- <p class="alert alert-info">See CONTRIBUTING.md for details on how to create a new pattern.</p> <p>The introduction may be several paragraphs long if required. It should introduce the pattern, explain what it is and when and where it may be used.</p> <p>You may use any formatting as required, such as paragraphs and unordered lists:</p> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Dolores tempore enim debitis totam</li> </ul> <p>Documentation should follow the writing for the web guidelines and adhere to the house style guide.</p> <hr> <h3>Options available</h3> <ul> {{#dummy-pattern-options.options}} <li><a href="#{{option-anchor}}">{{option-heading}}</a></li> {{/dummy-pattern-options.options}} </ul> {{#dummy-pattern-options.options}} <hr> <h3>{{option-heading}}</h3> {{{option-description}}} </div>{{> dummy-pattern}}<div class="container"> <span class="label label-default">Code</span> <pre><code class="pattern-source html">{{> dummy-pattern}}</code></pre> {{/dummy-pattern-options.options}}
- 64. Documentation – dummy template --- title: Dummy pattern --- <p class="alert alert-info">See CONTRIBUTING.md for details on how to create a new pattern.</p> <p>The introduction may be several paragraphs long if required. It should introduce the pattern, explain what it is and when and where it may be used.</p> <p>You may use any formatting as required, such as paragraphs and unordered lists:</p> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Dolores tempore enim debitis totam</li> </ul> <p>Documentation should follow the writing for the web guidelines and adhere to the house style guide.</p> <hr> <h3>Options available</h3> <ul> {{#dummy-pattern-options.options}} <li><a href="#{{option-anchor}}">{{option-heading}}</a></li> {{/dummy-pattern-options.options}} </ul> {{#dummy-pattern-options.options}} <hr> <h3>{{option-heading}}</h3> {{{option-description}}} </div>{{> dummy-pattern}}<div class="container"> <span class="label label-default">Code</span> <pre><code class="pattern-source html">{{> dummy-pattern}}</code></pre> {{/dummy-pattern-options.options}} Insert name of pattern
- 65. Documentation template --- title: Accordion --- <p>The accordion pattern presents an expandable and collapsible section of content. Accordions shorten pages and reduce scrolling, but they require users to click on topic headings to find information. Therefore, accordions should be used sparingly. For more information see the <a href="https://www.nngroup.com/articles/accordions-complex-content/"> Nielsen Norman Group report on accordion usability</a>.</p> <h3>Rules for accordions</h3> <ul> <li>Must not be used when your audience needs most or all of the content on the page to answer their questions. It is better to show all page content at once when the user case supports it. In such cases, do not worry about page length.</li> <li>Must not be used in an aside.</li> </ul> <hr> <h3>Options available</h3> <ul> {{#accordion-options.options}} <li><a href="#{{option-anchor}}">{{option-heading}}</a></li> {{/accordion-options.options}} </ul> {{#accordion-options.options}} <hr> <h3>{{option-heading}}</h3> {{{option-description}}} </div>{{> accordion}}<div class="container"> <span class="label label-default">Code</span> <pre><code class="pattern-source html">{{> accordion}}</code></pre> {{/accordion-options.options}} Examples (accordion-options.json) Pattern (accordion.hbs) Insert rules
- 66. Pattern library Pattern template • HTML + handlebars • Sass (CSS) • JavaScript Options • JSON Documentation Code • screen.css • print.css • core.min.js Documentation template • HTML + handlebars 1 2 3 4 Grunt
- 67. Pattern library Pattern template • HTML + handlebars • Sass (CSS) • JavaScript Options • JSON Documentation Code • screen.css • print.css • core.min.js Documentation template • HTML + handlebars 1 2 3 4 Grunt
- 68. Step 4 – Grunt demo
- 69. Build and test pattern - Grunt
- 70. Build and test pattern – error in CSS
- 71. Build and test pattern – error in JSON
- 72. Accordion pattern in pattern library
- 76. Pattern library Pattern template • HTML + handlebars • Sass (CSS) • JavaScript Options • JSON Documentation Code • screen.css • print.css • core.min.js Documentation template • HTML + handlebars 1 2 3 4 Grunt
- 78. Questions and answers Would our pattern library be helpful for you? If so, how? Have we missed anything? What governance issues do you foresee? How would you overcome these?
Editor's Notes
- Examples of the University of St Andrews crest from a number of different sites to demonstrate the current lack of standards.
- Another example of non-standard websites. Having websites that are built in different ways and hosted on different platforms places a burden on support and maintenance. It also makes websites difficult and time consuming to redevelop or extend their existing functionality. Having a standard approach to building components and websites would reduce the overall cost and risk to the institution.
- Example pattern library: BBC GEL http://www.bbc.co.uk/gel
- Example pattern library: GOV.UK service manual https://www.gov.uk/service-manual/design
- http://bradfrost.com/blog/post/atomic-web-design/ http://patternlab.io/
- Bootstrap pattern library http://getbootstrap.com/
- Material design https://material.io/ Material Design (codenamed Quantum Paper) is a design language developed in 2014 by Google. Expanding upon the "card" motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.
- http://www.material-ui.com/
- http://ui-patterns.com/
- Before work can begin on a pattern library you need to start by defining the standards for content and code. Otherwise inconsistencies will creep in and require reworking. Also need naming conventions for patterns and associated resources.
- The digital communications team service manual defines the standards we use https://www.st-andrews.ac.uk/digital-standards/service-manual/
- We have guidelines for how our code (e.g. HTML, PHP and CSS) code should be formatted https://github.com/standrewsdigital/digital-code-style-guide
- Example screenshot from our house style https://www.st-andrews.ac.uk/digital-standards/service-manual/house-style/
- Also important to agree on standards such as naming conventions and tagging and how you are going to work together. We use: Github Gitflow Gitkraken
- At each stage you need to make sure you test the standards, the content, design etc. with developers and users.
- Overall objective is to standardise, simplify and consolidate what we do into digital patterns.
- How to eat an elephant? Don’t need to tackle everything at once. Start somewhere – we only created patterns that we needed for a given project.
- A pattern for us consists of code, documentation and examples.
- Header pattern
- Navigation bar pattern
- Hero banner pattern
- Navbox and navbox grid patterns
- Tile grid and tiles patterns
- An example of another page built using components from our pattern library.
- The pattern library can be seen at www.st-andrews.ac.uk/dpl
- Workshop exercise to evaluate what is a pattern by analysing a number of different university home pages.
- Things to think about when creating a new pattern.
- Why have we built our own DPL – documentation alongside code Build from firm foundations (Bootstrap) Write once One step documentation and code Accessible Responsive Examples Test driven The DPL uses the DPL Platform agnostic Standalone DPL
- Our pattern library is built off Bootstrap. This means that we effectively have hundreds of experts working on our code for free! Bootstrap has been modified to make our own within the guidelines of Bootstrap. This means it is maintainable. For example, we have implemented University of St Andrews colours.
- The pattern is written once and then used in a number of different outputs.
- The pattern library provides an easy way to create different options for the patterns.
- The pattern library automatically checks for syntax errors in the code.
- The pattern library doesn’t rely on server side technologies such as PHP or MySQL.
- The pattern library is not optimised for a particular platform.
- www.st-andrews.ac.uk/dpl/
- There are four steps to creating a pattern.
- The first step is to create the pattern template.
- Build a prototype website based on user need and content required. Then identify patterns that need to be built and their variations. For example, we have an accordion pattern in the following page: https://standrewsdigital.org.uk/subjects/philosophy/
- This is the accordion pattern we want to build.
- The first step is to extract the HTML code from the prototype.
- The HTML code is then optimised to ensure it is accessible and compliant with standards.
- We also need to optimise the CSS code. We use Sass so we can include variables for colours.
- In the accordion example we also need to have JavaScript code that will ensure that it doesn’t rely on a mouse click to open or close it.
- In this example, we want to specify the heading and content text via Handlebars variables.
- The next step is to recreate the options that will be provided for each example.
- The options file sets the values for the Handlebars variables.
- The option-heading, option-description and option-anchor variables are identical for every pattern. These are used to create the documentation.
- Steps 1 and 2 are now complete.
- The options JSON file interacts with the pattern template and documentation template to create an entry in the pattern library.
- The documentation starts with a dummy template.
- The dummy template is edited to provide the name of the pattern.
- The dummy documentation template is edited to provide the rules for the pattern.
- With steps 1, 2 and 3 complete we can process everything via Grunt.
- Grunt is run to create the pattern library.
- This screenshot shows a simulated error in CSS.
- Simulated error in the JSON file
- Example of accordion pattern in the pattern library.
- The output of the Grunt script is a set of web pages and three source files that are referenced by any page that uses the pattern library.
- Example source code showing references to digital pattern library code.
- Example of the accordion pattern on live page: https://www.st-andrews.ac.uk/subjects/philosophy/
- The pattern is complete.
- The pattern library relies on these technologies. Visit GitHub (https://github.com/standrewsdigital/digital-pattern-library) to download the code. Further instructions on how to set up the pattern library are also found on GitHub.
- Lessons learnt at the University of St Andrews: Accommodating third party applications needs compromise. Don't use DPL before fully tested. Education and user engagement is not easy - needs to be planned in advanced and continually reviewed. Whole team needs skills to support our DPL. There is a technical overhead in learning our DPL. Successful DPL needs user testing throughout. Gather user requirements before building patterns. Challenge of how to roll out revised code to third party applications. Have standards before starting. If users ask for a new pattern there needs to be a process for dealing with this. Need clear ownership of DPL. Need rigour in CMS to make it work. Pair programming ensures quality. Internal training sessions (digital visa) trains editors to use the correct pattern. Uses existing framework (Bootstrap) – gave us a head start – have removed elements we don’t support or require. Non technical people can easily find the HTML. Developers save time as the design decisions have been made. Need good comms plan for new and revised patterns. Closer integration between DPL and T4 would be beneficial e.g. trace where pattern is being used in the CMS, update CMS automatically based on changes to DPL.