For projects that want a few more batteries. Built by the team who brought you da.live and adobe.com.
- Use this template to make a new repo.
- Install AEM Code Sync.
- Browse to https://da.live/start.
- Follow the steps.
- Clone your new repo to your computer.
- Install the AEM CLI using your terminal:
sudo npm install -g @adobe/aem-cli - Start the AEM CLI:
aem up. - Open the
{repo}folder in your favorite code editor and buil something. - Recommended: Install common npm packages like linting and testing:
npm i.
- Language only support - Ex: en, de, hi, ja
- Region only support - Ex: en-us, en-ca, de-de, de-ch
- Hybrid support - Ex: en, en-us, de, de-ch, de-at
- Fragment-based localized 404s
- Localized Header & Footer
- Do not translate support (#_dnt)
- Optional containers to constrain content
- Grids: 1-6
- Columns: 1-12
- Color scheme: light, dark
- Gap: xs, s, m, l, xl, xxl
- Spacing: xs, s, m, l, xl, xxl
- Background: token / image / color / gradient
- Universal buttons w/ extensive styles
- Images w/ retina breakpoint
- Color scheme support: light, dark
- Modern favicon support
- New window support
- Deep link support
- Modal support
- Brand - First link in header
- Main Menu - First list in header
- Actions - Last section of header
- Menu & mega menu support
- Disable header/footer via meta props
- Schedule content using spreadsheets
- Quick Edit
- Extensible plumbing for plugins
- Schedule simulator
- Convert production links to relative
- Extensible LCP detection
- Environment detection
- Extensible logging (console, coralogix, splunk, etc.)
- Buildless reactive framework support (Lit)
- Hash utils patterns (#_blank, #_dnt, etc)
- Modern CSS scoping & nesting
- AEM Operational Telemetry
- Cloudflare Worker reference implementation
A page is what holds your content. It can be styled using a metadata property called template which will load styles that apply to the entire page.
A section is a sub-section of your page. It can be styled using a section-metadata block. A section will control the layout of blocks.
Blocks are children of sections. A block adds visual context to parts of a page.
An auto block is a block generated from a pre-defined piece of content. Often times from a link that matches a particular pattern. Link-based auto blocks can be helpful when additional nesting of content is required.
Default content is content that lives outside a block.
XS, S, M, L, XL, XXL
quiet, default, strong, negative
accent, primary, secondary, negative (w/ outline variations)
1 - 12
1 - 6
blue, gray, green, magenta, organge, red, purple, yellow (w/ 100-900 variations)
light, dark