This document discusses the evolution of web design methodologies from static pages to dynamic single-page applications. It introduces Atomic Design and ITCSS as approaches to bring more structure and scalability to component-based design systems. The author learns to design directly in React using Atomic patterns, CSS Modules, and PostCSS to address challenges with CSS organization and scaling. They create a living style guide using Storybook to demonstrate these techniques.

1. THE ATOMIC STORYBOOK
ITCSS DUSTUP
BOLDLY GOING WHERE DESIGN HAS
LIKELY GONE BEFORE:

2. SECTION 1:
HOW WE GOT HERE

3. WEBPAGES USED TO BE:
▸ Static presentation layer
▸ Single focus — each page was fairly
self-contained
▸ A full page refresh (server roundtrip)
▸ Easy to code: HTML/CSS/JS/PHP
▸ Easy to understand

4. THESE GAVE WAY TO APPS:
▸ AJAX (async loading was the
missing ingredient)
▸ Fragments, not full pages were
being updated, often with JSON
data hydration
▸ Hyperactive focus => Did I need all
the data, or just this one thing?
▸ The attention span phenomenon:
“OH LOOK SQUIRREL!”

5. WITH BIGGER EXPECTATIONS…
▸ Waterfall was in decline
▸ The rise of Agile!
A. Kanban
B. Scrum
▸ Shorter development cycles
▸ “Smaller is better!”
CAME SHORTER DEADLINES

6. YEAH, WE’RE
GONNA NEED TO
PLAY A LITTLE
CATCH UP…
Bill Lumbergh

7. DESIGN FALLS BEHIND
▸ Have to be methodical:
A. Information architecture
B. User experience
C. Basic styling
▸ Prefer to design the whole
thing at once
▸ Risk of style creep

8. DEVELOPMENT FALLS BEHIND
▸ Agile workflows demand discrete pieces of functionality
▸ Design dependencies:
A. Usability, complex workflows
B. Requirements — what are those?
▸ Exploration — “Does this 3 level foldout menu work
better here…or here…how about here?”

9. SECTION 2:
ATOMIC DESIGN & ME

10. I KNOW!
WE’LL DESIGN IN CODE!
Hare-brained designer (me)
IN WHICH I AM COMPLETELY OVER MY HEAD

11. ATOMIC DESIGN IS METHODOLOGY FOR CREATING
DESIGN SYSTEMS. THERE ARE FIVE DISTINCT LEVELS
IN ATOMIC DESIGN:
Brad Frost — @brad_frost
HTTP://BRADFROST.COM/BLOG/POST/ATOMIC-WEB-DESIGN/
Atoms > Molecules > Organisms > Templates > Pages

12. HTTP://BRADFROST.COM/BLOG/POST/ATOMIC-WEB-DESIGN/#ATOMS
ATOMS: THE SMALLEST BUILDING BLOCKS
▸ Single HTML tags:
A. Form label
B. Input
C. Paragraph
D. Header
E. Link

13. HTTP://BRADFROST.COM/BLOG/POST/ATOMIC-WEB-DESIGN/#MOLECULES
MOLECULES: GROUPS OF ATOMS BONDED TOGETHER
▸ Possible combinations:
A. Form label & input
B. Search box
C. Button bar (tabs)
D. Text block (header, sub-header, timestamp, paragraph)

14. HTTP://BRADFROST.COM/BLOG/POST/ATOMIC-WEB-DESIGN/#ORGANISMS
ORGANISMS: MOLECULES FORMING DISTINCT UI COMPONENTS
▸ Possible combinations:
A. Header
B. Navigation bar + flyout menus
C. Main body text + aside
D. Footer

15. HTTP://BRADFROST.COM/BLOG/POST/ATOMIC-WEB-DESIGN/#TEMPLATES
TEMPLATES: BLOCKED REPRESENTATIONS OF FULL PAGES
▸ Useful for information architecture and content design
▸ Help customers visualize the layout
▸ Help customers adjust content “shape”

16. HTTP://BRADFROST.COM/BLOG/POST/ATOMIC-WEB-DESIGN/#PAGES
PAGES: SPECIFIC TEMPLATE INSTANCES
▸ Built from multiple atoms, molecules, organisms
▸ Allow designers to build smaller, discrete things

17. GREAT!
HOW DO WE GET THERE?

18. PATTERN LAB
▸ Simple way for designers to build UI
components in code
▸ Single source of truth for visual design
▸ PHP or Node + Gulp
▸ Minimal templating in Mustache
▸ JSON includes for realistic data models
▸ Easily exported as a static site
HTTP://PATTERNLAB.IO/

19. THAT’S LUNCH, RIGHT?

20. JUST ONE SMALL DETAIL…
WE USE REACT, SO SOMEONE HAS TO
REFACTOR THOSE PATTERNS INTO JSX…
YEAH…

21. EVERYTHING’S A COPY:
▸ Patterns created outside the front-end tooling
are a layer removed from the finished product
▸ Nuance can get lost in translation —
“I wanted that to slide in, not jump up from the bottom.”
▸ In my experience, not much faster than PSD/Sketch
EVERYTHING’S A COPY:EVERYTHING’S A COPY:EVERYTHING’S A COPY:

22. SECTION 3A:
BACK TO THE PROVERBIAL
DRAWING BOARD

23. DESIGNERS DON’T REACT!
THIS ONE DOES.

24. THIS ACTUALLY REQUIRED ME TO LEARN REACT
▸ A little scary, but I’m adapting well
▸ Eliminates a layer of abstraction
between my elements and final code
▸ Uses the latest tools:
A. React + Webpack (1) :( Sorry @thelarkinn
B. Babel + ES6
C. And a few others…

26. SECTION 3B:
SO I HAVE COMPONENTS.
CSS STILL SUCKS.

27. CSS IS KUDZU VINE

28. CSS PROBLEM #1:
SPECIFICITY
▸ Discipline is high at beginning of project
▸ Everyone agrees to basic hierarchy, class-based approach
▸ Discipline is lost as deadlines loom, overtime mounts
▸ !important begins creeping into your code base
▸ Rules are over-written in too-specific ways, leading to this:
#main .layout-container . layout-container-inner div div div…
▸ Visual layouts become brittle, harder to verify integrity

29. CSS PROBLEM #2:
NAMESPACING (OR LACK THEREOF)
▸ Can fake this with Sass/Less, but it’s still just a class inside
another class
▸ Can be clobbered with an ID or overly nested (specific) rule

30. HTTP://WWW.CREATIVEBLOQ.COM/WEB-DESIGN/MANAGE-LARGE-CSS-PROJECTS-
ITCSS-101517528
ENTER ITCSS
(INVERTED TRIANGLE CSS)

31. THIS IS A METHODOLOGY THAT INVOLVES
VISUALISING YOUR ENTIRE CSS PROJECT AS
A LAYERED, UPSIDE-DOWN TRIANGLE. THIS
HIERARCHICAL SHAPE REPRESENTS A MODEL
THAT WILL HELP YOU ORDER YOUR CSS IN THE
MOST EFFECTIVE, LEAST WASTEFUL WAY.
Harry Roberts — @czzwizardry
HTTP://WWW.CREATIVEBLOQ.COM/WEB-DESIGN/MANAGE-LARGE-CSS-PROJECTS-
ITCSS-101517528

32. ITCSS IS AND DOES THE FOLLOWING:
▸ Favors a class-based, NO ID, component architecture
▸ Generic to explicit CSS
A. Top of the triangle is very general, catch all, settings
B. Bottom is very specific, usually a single component
▸ Low to high specificity
A. Start out capturing more items due to low specificity
B. Increase specificity through each level of the triangle
C. Makes progressive passes over the DOM, refining CSS with each pass
D. Uses !important as a feature, not a bug

33. CONFESSION TIME:
▸ I’m moving away from Sass / SCSS! Shock! Horror!
▸ It’s true. I have finally found a few nits:
A. A bit slower when compared to alternatives
B. Ruby dependency, which isn’t a crime, but this is JS!
C. Bad habits like too-deep nesting, wrong use of @extend
and %placeholder
D. Better alternatives?

34. SECTION 3C:
CSS MODULES AND
POSTCSS

35. HTTPS://GLENMADDERN.COM/ARTICLES/CSS-MODULES
CSS MODULES + REACT FOR GREAT GOOD
▸ Not React specific, but they work great
with React components
▸ CSS modules are local by default:
▸ Import * from ‘../objects/Layout.css’;
▸ Namespaces: Layout__flex__<hash64:5>
▸ Collisions are very unlikely

36. CSS COMPOSITION FTW
.common {
/* all the common styles you want */
}
.normal {
composes: common;
/* anything that only applies to normal */
}
.disabled {
composes: common;
/* anything that only applies to disabled */
}
HTTPS://GLENMADDERN.COM/ARTICLES/CSS-MODULES

37. HTTPS://GITHUB.COM/POSTCSS/POSTCSS
POSTCSS: THE POWER IS IN YOUR HANDS
▸ All the cool stuff of Sass/SCSS/Less
▸ CSS Next (Level 4, native variables, more)
▸ Cleaner CSS, less nesting w/ composition
▸ Webpack pipelining

38. SECTION 4:
LIVE CODE!!!
Github.com/1Copenut/atomic-storybook