README

Build an editable corporate, agency, or organization website with 27 Content Blocks, English/German labels, four palettes, and TYPO3's native editing tools.

Live demo → · All elements · Style variants · Get started · Documentation

Why Crispframe?

Build pages in TYPO3. Reorder blocks, edit content, choose icons, and replace images without modifying theme code.
Shape the design. Configure palettes, typography, spacing, corners, page width, and header/footer variants through Site Settings.
Handle larger sites. Use two-level dropdown or mega menus, mobile disclosure controls, breadcrumbs, and selectable footer page trees.
Publish in English and German. Interface labels are translated; editorial content stays in normal TYPO3 records.
Keep assets local. Bundled Plus Jakarta Sans, Lucide SVG icons, and vanilla JavaScript. No font or icon CDN and no frontend build step.
Start with or without examples. The theme installs without importing demo pages. The optional demo is a separate package.

Installation

Add to an existing TYPO3 site

From your Composer project root:

composer require crispframe/agency-theme:^1.6
vendor/bin/typo3 extension:setup --extension=agency_theme
vendor/bin/typo3 cache:flush

Then:

In Site Management → Sites, add the Crispframe Agency Theme Site Set to your site. Its identifier is crispframe/agency-theme.
In page properties, select a Crispframe backend layout: Default, Landing, Minimal, or Article.
Add content through the content-element wizard. Use Site Settings for branding and shared navigation.
Complete the first-run checklist before publishing.

Start a new site with examples

Use the TYPO3 14.3 starter project. On a new, empty installation, add the optional demo:

composer require crispframe/agency-demo:^1.6
vendor/bin/typo3 extension:setup --extension=agency_demo
vendor/bin/typo3 cache:flush

The demo package imports editable pages and example assets through TYPO3 Initialisation. Do not import it over an existing site or rerun imports to update edited content.

Preview

Mega navigation	Service cards

Mobile navigation	Styled contact form

View Work, Resources, Insights, pricing, and German case-study screenshots →

Captured from the live development demo on 29 September 2026. The demo can include changes ahead of the latest tagged release. Branding, images, copy, and prices are editable examples; they are not imported by the theme.

Content Blocks

Build	Blocks
Introductions and conversion	Hero, Intro, Text/image, CTA
Services and proof	Services, Feature grid, Stats, Logo cloud, Testimonials, Projects, Team, Process
Media and decisions	Gallery, Video, Pricing, FAQ, Comparison, Timeline
Articles and resources	Child page teasers, Tabs, Pull quote, Resource list, Author card
Orientation and contact	Section navigation, Callout, Office locations, Contact

The Contact block displays contact details. For an inquiry form, add a separate Form element and select one of the included presets.

The Article layout places an optional sidebar after the main content on small screens. Standard TYPO3 text, images, tables, file links, and menu elements can be used alongside the theme blocks. See the page recipes for practical combinations.

Visual customization

Set these values in Site Settings; no CSS edit is required.

Setting	Choices
Palette — `styles.palette`	`ocean`, `forest`, `plum`, `ember`
Type scale — `styles.typeScale`	`standard`, `expressive`
Content width — `styles.contentWidth`	`compact`, `standard`, `wide`
Corners — `styles.corners`	`sharp`, `soft`, `round`
Section rhythm — `styles.spacing`	`compact`, `balanced`, `airy`
Header — `styles.headerVariant`	`standard`, `compact`; sticky header is a separate switch
Footer — `footer.layout`	`full`, `minimal`
Submenus — `navigation.submenuLayout`	`dropdown`, `mega`; two rendered page levels
Breadcrumbs — `navigation.showBreadcrumbs`	Show or hide

Additional settings cover company details, logo, English/German CTA labels, announcements, social links, and two footer page trees. CTA and legal page pickers take precedence over legacy URL fields and keep internal links language-aware.

Content elements also expose their own width, background, and spacing controls. Hero blocks support split, centered, background-media, and minimal layouts. The guided style variants add fixed choices for Hero headline width, Services, Feature grid, Projects, Testimonials, and CTA without changing existing records.

For deeper CSS changes, use the styling source map to find the owning file for each component.

Forms

Add a Form content element and select Contact inquiry or Project inquiry. Both use TYPO3 Form Framework. The project preset includes service, organization, optional budget and timing, contact details, consent, and a message.

Before accepting inquiries:

Set finisher overrides on the Form element for recipient and sender addresses.
Configure TYPO3's mail transport for your host.
Send a test submission and verify delivery and reply-to behavior.

The bundled example.invalid addresses are placeholders. Mailpit in the development stack captures test emails; it is not a production mail provider. The extension's form definitions should remain unchanged—use site-level overrides or your own form for custom questions.

Requirements

Dependency	Supported range
TYPO3	`^13.4.15
Content Blocks	`^1.6
PHP and extensions	Must meet the requirements of your selected TYPO3 version
TYPO3 extensions	Form, Frontend, Fluid Styled Content, RTE CKEditor, SEO; declared in Composer

Composer resolves the required extensions. The Site Set includes typo3/fluid-styled-content, typo3/form, and typo3/seo-sitemap. Hosting, database, mail delivery, and your site's base URL remain deployment settings.

Docker is optional. Contributors can use the Docker Compose development guide; Podman Compose is also supported.

SEO and accessibility

Crispframe supplies metadata fallbacks, TYPO3 core canonical URLs, sitemap integration, and Organization, FAQPage, and BreadcrumbList structured data. Editors provide page titles, descriptions, sharing images, and useful image alternative text.

Interactions include visible focus, keyboard-operated navigation and tabs, gallery focus return, native FAQ disclosure, and reduced-motion support. Final accessibility depends on your content and configuration; use the accessibility checklist and SEO setup guide before launch.

Updates and troubleshooting

Back up your database and uploads, review the release notes, then run:

composer update crispframe/agency-theme --with-dependencies
vendor/bin/typo3 extension:setup --extension=agency_theme
vendor/bin/typo3 cache:flush

Review TYPO3's schema changes before applying them. Existing editorial records and Site Settings remain in your site; updating the theme does not reimport the demo.

Symptom	Check
Theme or blocks do not appear	Site Set is active, extension setup ran, page layout is selected, caches are flushed
Page looks unstyled	Browser Network panel: CSS/font requests must succeed; check asset publishing and host/proxy errors
Form does not deliver	Finisher addresses and TYPO3 mail transport; inspect the mail capture service in development
German link opens English	Prefer a page picker or TYPO3 page reference; ensure the target page has a translation
Submenu is missing	Parent has visible child pages; only two navigation levels are rendered

For removal steps, see First run: updating and removing.

Documentation

Report a bug with your TYPO3/theme versions, reproduction steps, and a screenshot. Do not include credentials or private content.

License

GPL-2.0-or-later. Plus Jakarta Sans is bundled under the SIL Open Font License. Lucide attribution and license notices are included with the local icon assets.

crispframe / agency-theme

Package info

Security

Statistics