You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: docs/naming-things-is-hard/README.md
+10-3
Original file line number
Diff line number
Diff line change
@@ -12,6 +12,7 @@
12
12
## Atomic Design
13
13
* In 2016, Brad Frost wrote an excellent book called [Atomic Design](https://atomicdesign.bradfrost.com/). Here's a summary:
14
14
* "Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner."
15
+
15
16
```
16
17
1.atoms
17
18
2.molecules
@@ -28,6 +29,7 @@
28
29
29
30
### Modified Atomic Design
30
31
* Copycat-based themes introduced a structure that was a (confusing) hybrid of Atomic Design and [SCMACSS](http://smacss.com/) (?)
32
+
31
33
```
32
34
00-global
33
35
01-base
@@ -38,6 +40,7 @@
38
40
```
39
41
40
42
* In a recent secret project that will not be named, Alex, Jeff, and I converted a Copycat-based theme to a structure that was much closer to original Atomic Design.
43
+
41
44
```
42
45
00-fundamentals (previously 'universal')
43
46
01-atoms
@@ -53,8 +56,9 @@
53
56
*[Awesome Design Systems](https://github.com/alexpate/awesome-design-systems) - aggregated list on GitHub
54
57
55
58
## Design Tokens
56
-
* The concept of design tokens is worth mentioning here. [Firefox](https://design.firefox.com/photon/resources/design-tokens.html) has a good definition (below).
57
-
* "A design token is an abstraction of a visual property such as color, font, width, animation, etc. These raw values are language application agnostic and once transformed and formatted can be used on any platform."
59
+
* The concept of design tokens is worth mentioning here. Firefox has a good [definition](https://design.firefox.com/photon/resources/design-tokens.html) (below).
60
+
* "A design token is an abstraction of a visual property such as color, font, width, animation, etc. These raw values are language application agnostic and once transformed and formatted can be used on any platform."
61
+
58
62
* Here's a fairly typical example in a visual format:
* Drupal has a modular content model, which supports a high level of complexity. There are many specific terms to understand, including node, region, block, view, paragraph, etc.
* Here is an example WordPress page, using a simple page template with a sidebar.
96
+
92
97
```
93
98
page-sidebar
94
99
header
@@ -103,6 +108,7 @@ page-sidebar
103
108
104
109
### Expand Atomic Design
105
110
* It was suggested during the meeting that expanding Atomic Design to include more levels of hierarchy could help avoid the problem of 'everything is a molecule' or 'everything is an organism'
0 commit comments