This document discusses component-based web development. It introduces Atomic Design and BEM methodologies for building user interfaces out of reusable components. Atomic Design structures components as atoms, molecules, organisms and pages, while BEM provides naming conventions for blocks, elements and modifiers. The document also discusses how PatternLab can be used to document and organize components, and how preprocessing allows for scoped component styling. It argues that Atomic Design and BEM can be combined into an "a-BEM" methodology for improved structure and readability of components.

1. Thinking in
components

2. An introductory story:

3. An introductory story:
B f !

4. An introductory story:
B f !

5. Agenda:
1.
2.

6. ➔ Web development now and then

7. ➔ Web development now and then
2011

8. Components Web Components

9. Components
- DOM conflicts
Web Components

10. Going back to our little story:
*

11. Going back to our little story:
*

12. Conventions & Methodologies

13. Conventions & Methodologies
●
●

14. Conventions & Methodologies

15. Agenda:
1.
2.

16. ➔ Past development analysis

17. a-B.E.M
➔ Past development analysis

18. Atomic Design
● Aimed towards both designers and
developers
● Provides a system for composing
components
● Offers a tool for keeping track of
components

19. Designers and developers
The Component concept needs to be mastered by both departments.
Bridging the gap between design and development is more important now
than ever.

20. A system for composing components
Atomic Design brings us a few “new” terms, inspired from chemistry.
Combining lesser stages result in greater stages (e.g.: atom + atom = molecule)
Atom Molecule Organism Template Page

21. Atoms
In Chemistry, atoms are
the basic building blocks of matter.
In Web Interfaces, atoms are
the building blocks of an interface.
Atoms cannot be broken down any further.
Often, atoms aren’t too useful on their own.
e.g.: input, image, button

22. Molecules
In Chemistry, molecules are
chemically joined atoms.
Also, they represent the
smallest unit of a compound.
In Web Interfaces, molecules
consist of two or more atoms.
They are the backbone of a more complex system.
e.g.: search bar = label + input + button

23. Organisms
In Chemistry, organism are
complex systems of chemical compounds.
The molecule is the smallest unit of a compound*.
In Web Interfaces, organisms are
a group of different or the same type of molecules.
e.g.: header = logo + search bar + menu
*the compound is probably missing from the Atomic Design terminology as there was no need for an extra
level of component complexity

24. Templates
The Chemistry lessons end here.
Templates are wireframes, comprised of
groups of organisms.
They eventually become the production code.
e.g.: homepage template = header + hero banner + article(s) + footer

25. Pages
An atomic design Page is a
specific instance of a template.
The template content is replaced
with real/sample content.
Variations of the content will help
identify corner cases and the effectiveness of the system.

26. All together demo
https://vimeo.com/174472797

27. Keeping track of components
Applications evolve in time.
We develop new pages,
with new components
and with new functionality.
It is important to index all components.

28. Enter PatternLab
PatternLab is an open-source tool.
It’s purpose is to help us build user interfaces
in a pattern manner based on the atomic design principles.
It provides several tools to ease our work:
● a pattern starter kit
● a design system builder
● a viewport resizer
PatternLab comes in several editions: Node, Gulp, Grunt, Webpack and PHP

29. Block Element Modifier
(B.E.M.)
● Conceived for developing the
Yandex search engine with
minimum effort
● Solid naming conventions
● Improves code readability
● Offers a series of tools

30. B.E.M. timeline
Started in 2005 Open Sourced
in 2010
Launched in 2009

31. Blocks
A block is a top-level abstraction
of a new component.
The block is thought of as a parent.
The block’s name can have multiple
words separated by 1 hyphen.
e.g.: section-promo

32. Elements
Elements are the children of blocks.
An element’s name is prefixed by the
block and double underscore.
e.g.: section-promo__banner,
section-promo__title

33. Modifiers
Modifiers are meant to manipulate the
blocks in order to theme or style the
particular component without
inflicting changes on another module.
A modifiers name is prefixed by the
block and double hyphens.
e.g.: section-promo--active

34. Short recap:
.block__element--modifier

35. All together demo
https://codepen.io/razvan-rosu/pen/MQqVKv

36. B.E.M. + preprocessors = <3
B.E.M. methodology results in
having less CSS selectors, therefore
our styles become much cleaner.
By introducing a preprocessor
into our application build, we take it
one step further: component scoping.
https://codepen.io/razvan-rosu/pen/QQVrQJ

37. Atomic Block Element
Modifier (a-B.E.M.)
An unofficial fusion between Atomic
Design and B.E.M.

38. Atomic design prefixes
.[a/m/o]-block__element--modifier

39. Improved readability
(lisp-case => camelCase)
B.E.M.
a-B.E.M.

40. Refactored demo
https://codepen.io/razvan-rosu/pen/bLmpVO

41. Thank you!
Questions
?

42. References:
Atomic design:
Atomicdesign.bradfrost.com
patternlab.io
B.E.M.:
en.bem.info/methodology
getbem.com
a-B.E.M.:
css-tricks.com/abem-useful-adaptation-bem
Design systems:
http://ui-patterns.com/patterns