V+V Frontend Dev Process

dev_process.md

FRONTEND DEV PROCESS

Deliverable 1*

Atom page (style guide)

• Breadcrumbs
• Buttons
• Button Groups (i.e. Social Media)
• Button Rollover
• Chips
• Colors
• Favicon
• Fonts
• Form Elements (text input, radio button, checkboxes, etc.)
• Icons
• Lists
• Loader (if available/applicable)
• Table Elements (<table>, <th>, <tr>, <td>...<tbody> if needed)

---

Deliverable 2*

• Molecule page
  • Group of Atoms - multiple Atoms should build a Molecule, potentially in some kind of wrapper
  • Organism subsections - multiple Molecules will create an Organism, potentially in a wrapper of some kind

---

Deliverable 3*

• Organism page (reworked Molecule page)
  • Group of Molecules - multiple Molecules will build an Organism, potentially in a wrapper of some kind
  • Template subsections - multiple Organisms will create a Template, potentially in a wrapper of some kind
  • All repeatable modules/sections (as per high-fidelity Sketch wires) - to be reused across multiple templates/pages

---

Deliverable 4

• Template
  • Group of Organisms - multiple Organisms will build a Template, potentially in a wrapper of some kind
  • First template to be specified by PM. If none, internal page and/or PDP.

---

Deliverable 5*

• Page
  • A page is assigned a template
  • A page may have a unique template, used only once
  • A page may have a non-unique template, used 2 or more times across the site
  • First page to be specified by PM. If none, homepage.

---

Deliverable 6*

• Group of pages, determined by Sketch file and PM requirements

---

*Responsive, cross-browser, QA point

NOTE: Links refer to Google Material design. If design does not specify, Google Material design is a good default. Unlinked items are either generic, descriptive, or specific enough to stand on its own without reference.

Based on Brad Frost's Atomic Design. Video explainer here.