FlatCMS Demo Theme

The starter theme for Dopamine FlatCMS, with a bilingual demo site to go with it: twelve components — hero, prose, callout, feature grid, text with image, gallery, FAQ, video facade, contact form, contact details, header, footer — plus layouts, a theme.yml asset manifest and demo content in English and Greek.

The look is borrowed from Dopamine Fluid: black header and footer, a lime hero, heavy uppercase display type (Archivo, via Google Fonts) and pastel feature cards. The design source lives in demo.pen (Pencil) if you want to tweak before you code.

A theme is a starting point, not a dependency: you clone it, delete its git history, and it is yours. There is nothing to update from upstream — every site rewrites the components it uses, and that is the intended workflow.

Install

composer create-project dopamine/flatcms-skeleton my-site --no-install --ignore-platform-req=php
cd my-site
cp .env.example .env

rm -rf theme
git clone https://github.com/panfotis/flatcms-theme-demo theme
rm -rf theme/.git

# optional: the demo pages and images (English works out of the box)
cp -R theme/_demo-content/pages theme/_demo-content/uploads content/
rm -rf theme/_demo-content

ddev start          # or: AUTH_DEV_BYPASS=1 php -S localhost:8080 -t public public/router.php

The bilingual demo

The demo content ships in English and Greek. The skeleton's config serves English only; to see both, replace the locales block in config.php with:

'locales' => [
    'en' => ['label' => 'English',  'prefix' => '',    'default' => true],
    'el' => ['label' => 'Ελληνικά', 'prefix' => '/el', 'fallback' => 'default'],
],

The language switcher in the header appears on its own once a second locale exists.

Layout

theme.yml            global CSS/JS — local files are inlined, https:// entries
                     become real <link>/<script defer> tags with SRI
layout.twig          the default page shell     (bare.twig: no header/footer)
404.twig 500.twig    themeable error pages
components/<name>/   schema.yml + <name>.twig + optional <name>.css / <name>.js
                     — the file beside the template is the whole declaration
assets/              css/site.css, js/site.js
_demo-content/       demo pages and uploads; copy into content/ once, then delete

Styling ladder, cheapest first: add rules to assets/css/site.css (emitted last, wins the cascade) → edit a component's .css → edit its template.

License

MIT — see LICENSE.