02 Project Setup

Project structure and tech stack: README.md

Components

SMACSS concept: HTML(HAML), SCSS and JS per component.

+ components/{topic}/{component_name}
                  component_name.html.haml   # Demo page (no leading underscore)
                  _component_name.haml       # Partial
                  _component_name.scss
              

• JS hook: .js-{name} (e.g. .js-teaser) to separate form and function
• Meta in frontmatter: title, desc, ticket
• Middleman: Name partials with underscores (no dashes when using collections)

Development Index (Sitemap)

Frontmatter for pages in the index:

---
              title: A 01 Home
              desc: Template for homepage
              ticket: 2345
              ---
              

• Title = filename in lowercase with underscores
• Hide from index: hide_from_index: true

Helpers

Extract logic into helpers/. Restart the Middleman server after changes.

Release Notes

Document markup changes to delivered components/pages:

---
              notes:
                - "2019-05-01 -- PRJ-2342 Change class component--header to component--title"
              ---
              

Syntax: YYYY-MM-DD -- [Ticket], description. Collected in /docs/releasenotes.html.

GIT

• Ticket reference in commit: refs #3671
• Branch prefix: e.g. sk-mobile-nav
• Delete remote branch after merge
• Push local branches regularly