Front End Demo Design

The demo design is a ready-made public site design for Exponential, shipped as the extension ezdemo (package se7enxweb/ezdemo, named "Exponential Demo Design LS"). It is responsive: the same pages adapt to phones, tablets and desktop screens. It is chosen in the setup wizard as one of the site packages, and is meant for trying Exponential out and as a starting point for a site of your own.

Installing it

The setup wizard lists the site packages of the package server named in package.ini [RepositorySettings] RemotePackagesIndexURL. For 6.0.15 the server offers two that install the demo design:

The site package installs the class package ezdemo_classes, the content package ezdemo_democontent (or ezdemo_democontent_clean) and activates the extension. The ezdemo extension itself is installed by Composer with the rest of the installation; it requires ezjscore and builds on ezflow (the page blocks of the front page), expwt (the website sidebar) and ezodf.

What the design offers

• A layout that follows the width of the screen, from a phone to a wide desktop screen (<meta name="viewport" content="width=device-width, initial-scale=1"> and one stylesheet, stylesheets/ezdemo/theme.css).
• Since version 6.0.20 of the extension: a theme built on design tokens with a light and a dark mode, self-hosted fonts, and plain JavaScript for the menu, the theme switch, the carousel of the campaign block and the image gallery. Bootstrap 2 and the jQuery scripts of the earlier design were removed.
• Templates for the classes of its packages (articles, blog posts, galleries, events, forums, products and more) in the extension's design/ezdemo/templates/.

The scripts are listed in the extension's settings/design.ini.append.php, [JavaScriptSettings] FrontendJavaScriptList[]; the design is registered there with [ExtensionSettings] DesignExtensions[]=ezdemo.

Making it your own

Do not change the files of the extension: Composer replaces them on the next update. Put your own templates and stylesheets in a design extension of your own, listed before ezdemo in the design chain of the siteaccess, and override only what you need. Templates and design explains designs, the fallback chain and template overrides.

A public siteaccess can also offer its visitors more than one design to switch between: see Switching designs on a front siteaccess.

History

The demo design was introduced in the 5.x releases and was built on Bootstrap 2 and jQuery until the 6.0.20 release of the extension. The screenshots this page showed before were of that earlier design.

More

• The extensions of a new installation: which site package activates which extension.
• Packages: site packages and how the setup wizard installs them.