pattern library in wordpress projects
TRANSCRIPT
![Page 1: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/1.jpg)
Pattern Library in WordPress projects
WordPress Riga, Latvia, October 1st ,2016@karlis_upitis, karlisup.com
![Page 2: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/2.jpg)
Hello,I am Karlis
![Page 3: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/3.jpg)
© Würth Phoenix 2016
§ IT and Consulting Company of the Würth-Group
§ Headquarter in Italy, European-wide presence, more than 130 highly skilled employees
§ International experience in Business Software and IT Management
§ Core competencies in trading processes, wholesale distribution and logistics
§ Microsoft Gold Certified Partner, ITIL certified, OTRS Preferred Partner
We create the right balance between technology and services
for our customers to support their IT operations and
deliver in that way a better business result
Facts & Figures
§ More than 1.000 customers worldwide
§ Over 500.000 service checks with NetEye
§ 25.000 monitored hosts
§ 3 offices in 2 countries
§ HQ in Italy
About Würth Phoenix
… more than software
![Page 4: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/4.jpg)
/karlisup @karlis_upitis
![Page 5: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/5.jpg)
• WhatisPatternLibrary?
• Whyshouldyouuseit?
• Integrationinexistingprojects
• Whereshouldyoustart?
• PatternLibrary+WordPress
Outline
![Page 6: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/6.jpg)
What isPattern Library?
![Page 7: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/7.jpg)
http://www.nec.edu.au/wp-content/uploads/2015/10/Monkey-is-confused.jpg
![Page 8: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/8.jpg)
DesignSystem
![Page 9: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/9.jpg)
BRANDIDENTITY
https://issuu.com/bondo/docs/foursquare
![Page 10: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/10.jpg)
DESIGNPRINCIPLES
https://www.facebook.com/note.php?note_id=118951047792
![Page 11: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/11.jpg)
FRONTENDDEV.CONVENTIONS
http://tech.tmw.co.uk/code/TMW-frontend-guidelines/
![Page 12: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/12.jpg)
DesignSystem
![Page 13: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/13.jpg)
Pattern Library is a collection of design elements
that appear multiple times across a site.
https://boagworld.com/design/pattern-library/
![Page 14: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/14.jpg)
http://www.bbc.com/sport
![Page 15: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/15.jpg)
![Page 16: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/16.jpg)
![Page 17: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/17.jpg)
1
2
3
4
![Page 18: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/18.jpg)
![Page 19: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/19.jpg)
![Page 20: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/20.jpg)
1
![Page 21: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/21.jpg)
![Page 22: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/22.jpg)
We're not designing pages, we're designing systems of
components.StephenHay
![Page 23: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/23.jpg)
Who usesPattern Library?
![Page 24: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/24.jpg)
MailChimp
https://ux.mailchimp.com/patterns
![Page 25: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/25.jpg)
Salesforce
https://www.lightningdesignsystem.com/
![Page 26: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/26.jpg)
AListApart
http://patterns.alistapart.com/
![Page 27: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/27.jpg)
Why shouldYou use it?
![Page 28: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/28.jpg)
Consistent UI
Speed up Production
Common Playground
![Page 29: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/29.jpg)
http://bradfrost.com/blog/post/interface-inventory/
![Page 30: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/30.jpg)
![Page 31: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/31.jpg)
KeepitDRY
REUSE
![Page 32: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/32.jpg)
http://redfootsafaris.co.za/wp-content/uploads/2012/11/Nam-3.jpg
UX/UIDesigners
BackEnddevelopers
FrontEnddevelopers
![Page 33: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/33.jpg)
back/frontenddev – structureoftheJSON?frontendcolleague– doesthiselementexist?frontenddev afteramonth – whatisthis?ux/ui designer– qualityofimplementeddesign?stakeholders – whatistheprogress?content-writer – howmuchcontent?
Forwardquestions toPatternLibrary
![Page 34: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/34.jpg)
Integration in existing projects
![Page 35: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/35.jpg)
Single PatternStyle
Demo Data
Documentation
Template
![Page 36: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/36.jpg)
![Page 37: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/37.jpg)
a) Give the same look & feel
b) Support new module creation
![Page 38: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/38.jpg)
© Würth Phoenix 2016
Facts Challenges
Products with a history Legacy UX support
Multiple CSS libraries Risk of class name collision
Time & Resource limit Future proof quick solution
Multiple large products Knowledge transfer
Obstacles
![Page 39: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/39.jpg)
http://www.neteye-blog.com/2016/09/style-consistency-thanks-to-component-library/
Patterns are in SYNC
![Page 40: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/40.jpg)
DOCUMENTATION
![Page 41: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/41.jpg)
Where shouldYou start?
![Page 42: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/42.jpg)
TRY ITGET ALLIES
SELL IT
![Page 43: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/43.jpg)
Pattern Library + WordPress
![Page 44: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/44.jpg)
• InstallWordPress
• CloneTimberstartertheme
• ClonePatternLibrary
• PreparedatainWordPress
• Passdatato.twigPatterns
Steps
![Page 45: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/45.jpg)
![Page 46: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/46.jpg)
CloneTimberstarterthemeInthemesfolder
ClonePatternLibraryinthetheme(followtheinstructions)
https://github.com/timber/starter-theme https://github.com/karlisup/pattern-library/
![Page 47: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/47.jpg)
![Page 48: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/48.jpg)
1
2
1
2
![Page 49: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/49.jpg)
![Page 50: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/50.jpg)
![Page 51: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/51.jpg)
![Page 52: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/52.jpg)
Index.php
Index.twig
![Page 53: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/53.jpg)
![Page 54: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/54.jpg)
http://core0.staticworld.net/images/article/2013/12/plug-in-100159797-primary.idge.jpg
![Page 55: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/55.jpg)
Great Tool
You Can Start Dirty
Plays nice with WordPress
![Page 56: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/56.jpg)
https://github.com/karlisup/pattern-library
Pattern Library
![Page 57: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/57.jpg)
© Würth Phoenix 2016
Products
57
NetEye EriZone
Real User Experience Alyvix
… more than software
NetEye® is a unified IT monitoring solution for
companies needing to govern IT environments with
appropriate operational costs.
EriZone is a solution to manage tickets and
processes according to ITIL best practices.
Real User Experience (RUE) analyzes each single
request from the users’ workplace to the server, to
measure the user experience on on-premis and
cloud-based IT services.
Alyvix simulates interactions of a human user on any
application’s GUI to continuously check availability
and responsiveness of the tested application.
![Page 58: Pattern Library in WordPress projects](https://reader034.vdocument.in/reader034/viewer/2022052705/58a867761a28ab6c328b6bd1/html5/thumbnails/58.jpg)
© Würth Phoenix 2016
GRAZIE PER
LA VOSTRA ATTENZIONE!
www.wuerth-phoenix.com
© Würth Phoenix 2016 … more than software
Thank You
www.neteye-blog.com
www.lnked.in/wuerth-phoenix
@WuerthPhoenix