Love Your Library CCL Button Templates - 2.25'' Blue Pattern with Hearts
Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're...
Transcript of Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're...
![Page 1: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/1.jpg)
Pattern LibrariesLeveraging Atomic Design and Pattern Lab to Develop a Living Visual Style Guide
Jayson Jaynes, ITS Web ServicesWeb Developer
Mark Miller, IET Professional ServicesWeb Developer
![Page 2: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/2.jpg)
“We’re not designing pages, we’re designing systems of components.
Stephen HayWeb Strategist Guru
Pattern Libraries2
![Page 3: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/3.jpg)
Pattern Libraries3
Why a Pattern Library? § Quick mockups and iteration§ Working with real code§ Responsive interactions§ Able to isolate components§ Easy updating and extending§ Documentation and annotation tools
![Page 4: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/4.jpg)
Pattern Libraries4
We Need All the Changes for Everyone§ Leadership wanted to see an inventory of components
before we built§ Wanted quick turnaround on design updates§ Concerned about mobile and tablet§ Needed a working example to show partners and
stakeholders§ Wanted documentation on design changes and decisions§ Must be compliant and pass accessibility§ Need to share final design with partners’ developers
![Page 5: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/5.jpg)
Pattern Libraries5
Three-Week Design Challenge§ Redesigning the www.ucdavis.edu website§ Allowed 3 weeks to present a functional site
- …but it doesn’t work that way!- Especially in a complex CMS like Drupal
§ We didn’t want to take 3 weeks making HTML mockups only to throw that work away later
§ We also knew that we would need to brand other sites with the same design
![Page 6: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/6.jpg)
Pattern Libraries6
Our Universal Pattern Library GoalIf you're looking to build a fully customized website or application, our easy-to-use Pattern Library will allow you to build a unique look and feel without designing common elements from scratch. Developers across our university can borrow and contribute patterns, making it easier to forge functional, beautiful websites and applications with less effort.
![Page 7: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/7.jpg)
Pattern Libraries7
Enter Pattern Lab!An atomic framework that helps us build thoughtful, pattern-driven user interfaces using atomic design principles.§ Produces final Pattern Library site§ Creates navigation of components§ Utilizes a built-in viewport resizer§ Develops comprehensive documentation
![Page 8: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/8.jpg)
Pattern Libraries8
Atomic Design Principles
![Page 9: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/9.jpg)
Pattern Libraries9
AtomsBase Components§ Smallest a component can be broken down
- Fonts, colors- Inputs, buttons- Paragraphs, section headers, lists
![Page 10: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/10.jpg)
Pattern Libraries10
AtomsText Input
Buttons
![Page 11: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/11.jpg)
Pattern Libraries11
MoleculesBuilding Complexity§ Two or more Atoms that come together to create a new
component- Search: Label, Input, Button- Cards: Image, Heading, Paragraph, Link
![Page 12: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/12.jpg)
Pattern Libraries12
MoleculesSearch Box
Label Input Button Label Input Button
![Page 13: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/13.jpg)
Pattern Libraries13
OrganismsAreas of Content & Functionality§ Two or more Molecules and Atoms that build a piece
of the interface- Header- Footer- News Feed
![Page 14: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/14.jpg)
Pattern Libraries14
OrganismsHeader
Social Media Links Molecule
Search Molecule
Header Menu Molecule
Site Top Menu Molecule
Logo Atom
![Page 15: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/15.jpg)
Pattern Libraries15
OrganismsHeader
Search Popup MoleculePrimary Nav MoleculeSite Logo Atom
![Page 16: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/16.jpg)
Pattern Libraries16
TemplatesPage-Level Layout and Interactions§ Using Organisms to build a wireframed template for a
type of page- Homepage- Basic Page- News & Event Listings
![Page 17: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/17.jpg)
Pattern Libraries17
TemplatesBasic Page
Content Organisms Sidebar OrganismHeader Organism
![Page 18: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/18.jpg)
Pattern Libraries18
TemplatesBasic Page
Content Organisms Sidebar OrganismHeader Organism
Trust us, it’s there.
![Page 19: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/19.jpg)
Pattern Libraries19
PagesInserting Real Content§ Final page layout and functionality using real content
- Homepage- Basic page- News & Events Listings
![Page 20: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/20.jpg)
Pattern Libraries20
PagesIntroduction Page
![Page 21: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/21.jpg)
Pattern Libraries21
PagesHomepage Page
![Page 22: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/22.jpg)
Pattern Libraries22
Documentation ToolAccessing the Documentation
Gear Button
![Page 23: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/23.jpg)
Pattern Libraries23
Documentation ToolAccessing the Documentation
Show PatternInfo
![Page 24: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/24.jpg)
Pattern Libraries24
Documentation ToolAccessing the Documentation
State, Description,Usage, Code,Dependencies
![Page 25: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/25.jpg)
Pattern Libraries25
Flavors of Pattern LabNode Versions§ Vanilla Edition§ Gulp Edition§ Grunt Edition§ Webpack Edition
PHP Editions§ Mustache Edition§ Twig Edition§ Drupal Edition§ Thin Edition
![Page 26: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/26.jpg)
Pattern Libraries26
Technology Requirements§ Build requires PHP and Node.js§ NPM to manage development assets§ Bower to manage browser assets§ Gulp/Grunt to run tasks and builds§ Sass to write CSS
![Page 27: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/27.jpg)
Pattern Libraries27
Incorporating Into My ProjectOption 1: Place directly inside a website§ Pros
- Everything in one place- Access styles directly from
main website§ Cons
- Styles are not easily used outside the main website
Option 2: Keep itseparate and sync styles§ Pros
- Everything can be reused across multiple websites
- Pure beautiful markup§ Cons
- Integrating into websites is more complex
![Page 28: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/28.jpg)
Pattern Libraries28
Syncing Into My External Website§ Gulp task: newsite
- Copies necessary config out of a “starterkit” into an external website/CMS
- Copies initial styles over§ Gulp task: themesync
- Sync styles into an external website/CMS- Only copies sass/css, javascript, and images- Markup is up to each external website to manage
![Page 29: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/29.jpg)
Pattern Libraries29
How Can This Help All of UC?Sharing the Workload by Reusing Code!§ Boilerplate Pattern Library§ Build on development knowledge base § Reduce accessibility concerns§ Increase scalability§ Share new and better patterns§ Hugs and PUPPIES!
![Page 30: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/30.jpg)
Pattern Libraries30
Proposed ImprovementsWe’re Striving to Make Things Better!§ Better code documentation§ Mobile tables and tabbed data§ Documentation on incorporating with Drupal CMS§ New, and improved, patterns§ More advance automations
![Page 31: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/31.jpg)
Pattern Libraries31
Get the CodeUCSF Pattern Library§ github.com/ucsf-web-services/ucsf_pattern_library
UCD Pattern Library§ bitbucket.org/ietwebdev/sitefarm-pattern-lab-one
![Page 32: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/32.jpg)
Pattern Libraries32
Using the CodeThe Library is Open!Online demo of patterns with code and documentation:§ UCSF’s Pattern Library Website (webpatterns.ucsf.edu)§ UCD’s Pattern Library Website (ucd-one-patternlab.s3-
website-us-west-1.amazonaws.com)
![Page 33: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/33.jpg)
Pattern Libraries33
Other Documentation & Support§ Pattern Lab (patternlab.io)§ UC Tech Slack, #pattern-library (uctech.slack.com)
![Page 34: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/34.jpg)
Pattern Libraries34
Q&A, Slack channel: #pattern-library
Jayson JaynesWeb Developer
ITS Web Services
Contact: [email protected]
Slack: @jaysonjaynes-ucsf
Mark MillerWeb Developer
IET Professional Services
Contact: [email protected]
Slack: @markmill
![Page 35: Patterns Library -- UCCSC 16x9-final Library... · Our Universal Pattern Library Goal If you're looking to build a fully customized website or application, our easy-to-use Pattern](https://reader036.fdocuments.in/reader036/viewer/2022062508/6042723446e07319577424e3/html5/thumbnails/35.jpg)
Pattern Libraries35
Thank you!