git clone [email protected]:favmed/ucsf-patternlab.git && cd ucsf-patternlab && bash scripts/setup-everything.sh
Already downloaded the repo? Just run this to make you've got dependencies and helpers taken care of:
bash scripts/setup-everything.sh
- To start, run
grunt- this kicks off Dev Mode: Sass/Compass watch, Pattern Lab Watch, and auto-reload for your browser.- Point your browser towards
public/index.htmlto see the site
- Point your browser towards
- Edit Patterns:
- Open files in
source/_patterns- Atoms, Molecules, Organisms, Templates, and Pages are all found here
- Open files in
- Edit Data/Content:
- Globally: edit
source/_data/_data.json - List Items: edit
source/_data/_listitems.json - For a component: edit the file that has the same name, but ends in
.json
- Globally: edit
- BEM for picking class names
- Atomic Design for how we think about breaking componets out of pages
- Git Flow for how we branch and merge. Nice overview here
- Work in the branch
devor branch off ofdevto create a feature branch, which gets merged back intodevafter. Working ondevis OK.devgets merged inmasterwhen it's time. Hotfixes branch off ofmaster, get merged back intomasterand thendevand then are deleted. - Naming conventions:
- Feature branch:
feature--name-of-feature(always branch off ofdev) - Hotfix branch:
hotfix--name-of-fix(always branch off ofmaster)
- Feature branch:
- Delete your feature branches or hotfix branches after they are merged back in. Let's keep this branch list slim.
- Work in the branch
- Relative links instead of root relative links for paths (where possible)
- Use
../images/logo.pnginstead of/images/logo.png
- Use
- 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.
There are many different pieces of tech and many files that set the preferences for each of them. Here's a list of them and where to find the config file for each.
- Compass/Sass:
config/config.rb- docs - Bundler (Ruby Gem Versions):
Gemfile- docs - Pattern Lab:
config/config.ini- docs - Grunt:
Gruntfile.jsandpackage.json- docs - Bower (library management):
bower.jsonand.bowerrc- docs
- 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
- Grunt Website
- Article by Chris Coyier: Grunt for People Who Think Things Like Grunt are Weird and Hard ◆ 24 ways