Skip to content

Commit 7e75531

Browse files
committed
minor edits to naming doc
1 parent ee6b562 commit 7e75531

File tree

1 file changed

+10
-3
lines changed

1 file changed

+10
-3
lines changed

docs/naming-things-is-hard/README.md

+10-3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
## Atomic Design
1313
* In 2016, Brad Frost wrote an excellent book called [Atomic Design](https://atomicdesign.bradfrost.com/). Here's a summary:
1414
* "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+
1516
```
1617
1.atoms
1718
2.molecules
@@ -28,6 +29,7 @@
2829

2930
### Modified Atomic Design
3031
* Copycat-based themes introduced a structure that was a (confusing) hybrid of Atomic Design and [SCMACSS](http://smacss.com/) (?)
32+
3133
```
3234
00-global
3335
01-base
@@ -38,6 +40,7 @@
3840
```
3941

4042
* 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+
4144
```
4245
00-fundamentals (previously 'universal')
4346
01-atoms
@@ -53,8 +56,9 @@
5356
* [Awesome Design Systems](https://github.com/alexpate/awesome-design-systems) - aggregated list on GitHub
5457

5558
## 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+
5862
* Here's a fairly typical example in a visual format:
5963
* [Feelix Design Tokens](https://feelix.myob.com/#/Design%20tokens)
6064

@@ -65,9 +69,9 @@
6569
* 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.
6670
* [Drupal Docs: Modular Content](https://www.drupal.org/docs/user_guide/en/planning-modular.html)
6771
* [Drupal Docs: Planning your Content Structure](https://www.drupal.org/docs/user_guide/en/planning-structure.html)
68-
* [Drupal Docs: Taxonomy](https://www.drupal.org/docs/user_guide/en/structure-taxonomy.html)
6972

7073
* Here is an example Drupal page, edited for clarity (e.g. simplifying Drupalisms like 'views-view' to 'view' and so on)
74+
7175
```
7276
node--example-page
7377
region--header
@@ -89,6 +93,7 @@ node--example-page
8993
* [WordPress Template Hierarchy](https://developer.wordpress.org/files/2014/10/Screenshot-2019-01-23-00.20.04.png)
9094

9195
* Here is an example WordPress page, using a simple page template with a sidebar.
96+
9297
```
9398
page-sidebar
9499
header
@@ -103,6 +108,7 @@ page-sidebar
103108

104109
### Expand Atomic Design
105110
* 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'
111+
106112
```
107113
00-fundamentals
108114
01-atoms
@@ -125,6 +131,7 @@ page-sidebar
125131
* Foundations
126132
* Resources
127133
* ... (naming things is hard)
134+
128135
```
129136
components
130137
accordion

0 commit comments

Comments
 (0)