Pattern Lab
Pattern Lab Terms
- Atoms are basic tags, such as form labels, inputs or buttons. They also include more abstract elements like color palettes, fonts, and animations.
- Molecules are groups of elements that function together as a unit. For example, a form label, search input, and button atom can combine them together to form a search form molecule.
- Organisms can consist of similar and/or disparate molecule types. For example, a masthead organism might consist of a logo, navigation, and search form, while a “product grid” organism might consist of the same product info molecule repeated over and over.
- Templates are comprised mostly of organisms combined together to form page-level objects. Templates mostly focus on content structure (such as character length, image size, etc) rather than the actual content.
- Pages are specific instances of templates and swap out placeholder content with real representative content.
Advanced Pattern Lab Concepts
- Including Patterns in Patterns
- Introduction to JSON & Mustache Variables
- Linking to Patterns
- Adding Annotations
- Pattern Lab's Special Query String Variables
- Using styleModifiers
- Using Pattern States
- Using Pattern Parameters
- Keyboard Shortcuts
- Editing the config.ini Options