This document provides an overview of styleguides, including why and when they are needed, different types of styleguides, workflows for developing styleguides, techniques and tools, and tips for CSS design. It discusses pattern libraries, prototypes, and repositories as different types of living styleguides. All-in, upfront, and small step workflows are presented, along with their pros and cons. Techniques covered include OOCSS, refactoring, responsive design, and build tools. The document concludes by promoting an upcoming event on frontend automation.

1. STYLEGUIDE
DESIGN AND
DEVELOPMENT
Hi, I’m a happy styleguide!

2. TOPICS FOR TODAY
Why and when we need a styleguide
What is a living styleguide
Different workflows
Find me on Twitter: @Fabbrucci

3. This is Nody
YO!

4. I feel fine here

5. I feel strange here …

6. Thanks for wrapping me!

7. Thanks for overriding me!

8. “Every day a Nody becomes sad.
We can’t turn our back on it.”

9. This is Teamy
We have super powers!

10. We did a great job!

11. We have to change something …
For instance:
change the new menu, support blackberry, sell on kindle …

12. Oh oh! We are screwed …
For instance:
we can’t cahnge the code, we need to restart …

13. “Every day a Teamy become sad.
We can’t turn our back on it.”

14. This is Needy
I need a cool product!

15. Has
Doesn’t want
Needs
Be sadRisksFears Uncertainties
Product

16. looks for
come to an agreement
Collaborators Competitors

17. Rubbish Different Product
(that works)
Initial Product

18. “Every day a Needy become sad.
We can’t turn our back on it.”

19. How can
we css
help them?

20. A LITTLE BIT
OF CONTEXT
Once upon a time …

21. Risks Management

22. Artifacts focus on blame
WHAT THE HELL!!!

23. Reality Check
Plan
—————
Idea
Execution
—————
Reality
This is heaven
Does it exist?

24. Agile
Short cycles
Focus on value
Soft planning

25. Side Effects
New risks, more fears, more uncertainties
More reality, more chances

26. It’s where needy starts to see things
“Yes, it’s what I want but more…”
Design becomes crucial
Offers reality check
Teamy provides feasibility
Empowers decision making
Tactical and strategic
Enables distributed ownership
emergent leadership, emergent respect

27. Design is execution,
but also discovery

28. The way you
design CSS
changes in each context

29. Why a living styleguide
is important?
Discovery
Enable “rapid hi-fi prototyping”
Fast feedback from stakeholders
Execution
Continuous Reality Check
Visual consistency brings brand reputation

30. WHAT IS A
LIVING STYLEGUIDE
Do you remember me? Yuk!
http://styleguides.io/

31. 1.
Pattern library
A bucket list of
components that people can “use”
(typography, colors, icons,
visual patterns, buttons…)
Its focus is granularity.

33. 2.
Prototype
A rudimentary working model
for demonstration purpose
(working prototypes, static pages,
a pre-product)
Its focus is consistency.

34. Salesforce Example

35. 3.
Repository
A collection of
assets and knowledge
(build tools, coding standard,
frontend architecture…)
Its focus is simplicity.

36. A living styleguide
is a multilanguage
dictionary

37. WORKFLOWS
I love Italian food!

38. 1. All-in
Visual
Interfaces
time
Living
Styleguide
Prototype Product
Understand
and
decide
Risks and builds
Problems: Whose?

39. 2. Upfront
time
Living
Styleguide
Prototype Product
Understand and decide
Risks and builds
Problems: Whose?

40. 3. Small Steps
time
Living Styleguide
Prototype Product
Understand and decide. Problems: whose?
Risks and build

41. Pro & Cons
1 2 3
Easy to plan
No visual imprinting
Risks are more
distributed
Emergent lean design
High level of
reality-check
Lack of reality-check
All risks are on team
Getting meaningful
feedback is hard
Hard to plan
Leadership and
conflicts emerge

42. Collaborators
Competition
StableAlpha
1
All-in
2
Upfront
3
Small steps

43. Choose the workflows
that best fit
product success
and
Needy relationship

44. TECHNIQUES
AND
TOOLS
1+2 … 3!

45. Huge Costellation
OOCSS Design
Refactoring
Team
Build tools
Devices
Responsive Design
Naming
Browsers
Performance

46. My favourite
four CSS tips
for you

47. How and when should I use
helpers, mixins, extends, OOCSS?
1.
Focus on changeability

48. 2.
Start thinking in
terms of components
more than pages

49. visual regression, deferral commitment
3.
Learn how to refactor

50. 4.
Spend 10% of your time
on a toolkit
Let your computer do the job for you

51. 5.
Calibrate quality
Continuous relearning,
be able to downgrade when needed

52. How to start your
experimentation?
Where are my feet?

53. 1.
Explore other
people CSS
architecture

54. 2.
Go
and build your first
styleguide

55. 3.
Which of your
clients best fit this
approach?

56. CSS is definitely
for real pro

57. It’s PROMO time
Frontend Automation
27-28th Oct, Bologna
Digital products design

58. Thank YOU
http://fabbrucci.me @fabbrucci
Credits
BAZINGA!