Styleguide Navigation

02 Project Setup

How we work in this styleguide. Stack, install, and contacts: README.md.

DEPT® does frontend only. Enjoying integrates markup and resources (CSS, JS, images, …) into production.

Components

One folder per component (SMACSS): HTML (HAML), SCSS, and JS together.

+ components/{topic}/{component_name}
                  component_name.html.haml   # Demo page (no leading underscore)
                  _component_name.haml       # Partial
                  _component_name.scss
  • JS hook: prefer data-js-{name} (e.g. data-js-teaser) over .js-{name} classes. Keep CSS classes for styling; use data-attributes for behaviour. Existing .js-* hooks stay until that markup is touched.
  • Frontmatter: title, desc, ticket
  • Partials: underscore prefix, no dashes (Middleman collections)

Pages (sitemap)

---
              title: A 01 Home
              desc: Template for homepage
              ticket: EDRE-000
              ---
  • Hide from the index: hide_from_index: true

Helpers

Put shared logic in helpers/. Restart Middleman after changes.

Release notes

Write a release note for every change that Enjoying needs to see — always when markup changes.

  • Component: notes in the .html.haml frontmatter
  • Otherwise: data/releasenotes.yml

  • Collected at /docs/releasenotes.html

    notes:

    - "2026-08-26 -- Correct headline level on home for accessibility, refs EDRE-000 (markup) [jr]"

Format: YYYY-MM-DD -- What changed, refs EDRE-000 (markup) [jr]

  • (markup) — add this when HTML structure, class names, or attributes changed
  • [jr] — author initials
  • Ticket in the text (EDRE-000)
  • English, short, specific. Skip notes for purely local/dev-only work.

Git

Keep branches clean: merge finished work, then delete the remote branch.

| Branch | Purpose | |--------|---------| | master | Production | | develop | What Enjoying is currently integrating | | feature/… | Extensions and adjustments in progress |

Commit messages: type, what changed and why, ticket.

fix: correct headline level on home for accessibility reasons, refs #EDRE-000
              feat: add retrofit column letter E on A350 seatmap, refs #EDRE-885
              chore: tidy seatmap demo page, refs #EDRE-000

Use feat, fix, chore (or similar). No vague messages like “updates”.

Handoff to Enjoying

When a change is ready, send Slack and/or email to Enjoying (Aleksandar Papic) with:

  1. dept.dev link of the styleguide page
  2. Ticket (EDRE-000)
  3. Whether markup changed ((markup)) and what they must integrate
  4. Reminder that resources (CSS, JS, images, …) must go into production too

Example:

Subject: Styleguide – EDRE-000 headline level on home
              
              Hi Aleksandar,
              
              Please pick this up from the styleguide:
              
              - Preview: https://<branch>.dept.dev/pages/… (dept.dev)
              - Ticket: EDRE-000
              - Markup: yes — headline level on home corrected for accessibility
              - Please integrate markup and resources into production.
              
              Thanks
              Jürgen