Website Starter

A Drupal site template for company and product websites, built with Display Builder and the UI Suite UIkit design system. Pages, blog listings and blog posts are made of UIkit components arranged in Display Builder — no Canvas, no Layout Builder displays.

The site template works on its own: it applies the Web Admin, Web SEO, Web Security, Web Development, Web Page, Web Assets, Web Blog, Web Editor and Web Config default recipes, the Web Dashboard recipe and core recipes, never another site template.

Install

Composer runs inside DDEV, so nothing is needed on your machine but DDEV itself. Start from the Website project template, which ships this site template:

mkdir -p ~/workspace/projects/my-website
cd ~/workspace/projects/my-website
ddev config --project-type=drupal11 --docroot=web --php-version=8.4
ddev start
ddev composer create-project drupal/website:^1.0@alpha
ddev drush site:install ../recipes/website_starter -y --account-name=webmaster --site-name="My Website"
ddev launch

Or open the site with ddev launch and pick Website Starter in the installer.

On an installed site, apply it as a recipe:

ddev composer require drupal/website_starter:^1.0@alpha
ddev drush recipe ../recipes/website_starter

What you get

• Content types: Webpage and Web Blog, with the media library (images, documents, audio, video) of Web Assets.
• A page layout built in Display Builder with UIkit components: sticky navbar with logo, main and account menus, offcanvas menu on small screens, content section and footer with menus, social links and copyright.
• Content displays built in Display Builder: blog posts as UIkit articles, blog teasers as UIkit cards, a paginated front page listing.
• Contact webform with anti-spam protection, at /form/contact.
• Administration: Web Admin with Gin and its toolbar, Coffee, Project Browser and automatic updates; the Webmaster and Editorial default dashboards of the Web Dashboard recipe, built with Display Builder.
• SEO and security: Web SEO with breadcrumbs, redirects, path aliases, metatags and the XML sitemap; Web Security with anti-spam protection and login by email or username.
• Editing and configuration: the editor and configuration management features of Webship.
• Design system: the UI Suite UIkit theme with its UI Styles utilities, UI Skins design tokens (light and dark color modes) and UI Icons pack.
• UIkit showcase: the common pages of the free UIkit demos, in a UIkit showcase menu: a landing page, Features, Get started, Gallery (masonry grid and lightbox), Slideshows and Elements, with Support and Image credits pages in the footer. The images are the UIkit demo images (MIT) and NASA public domain photos.
• Demo content: About us, Privacy and Terms pages, 32 illustrated blog posts, a video, menus and footer links — imported as Drupal default content.
• Documentation and products: a short guide to the Webship site templates at /docs (getting started, installing with Composer, choosing a site template, the dashboards, building pages with Display Builder), and pages about the Webship installer, Website Starter, Webship Starter and Webtheme at /products.

Page layouts and the administration theme

The page layouts are built for UI Suite UIkit, the front theme, and stay out of the pages UIkit Admin renders:

• The showcase, support and other page layouts add the Current theme condition (current_theme: ui_suite_uikit) to the path they target.
• The default layout keeps no condition: Display Builder takes a page layout without conditions for the default one. Web Admin keeps it out of the pages another theme renders, like the log in, password reset and registration screens it shows in UIkit Admin.

A site installed from an earlier release gets the default layout fixed by updating Web Admin. The conditional layouts get the condition with:

ddev drush php:eval '
foreach (\Drupal::entityTypeManager()->getStorage("page_layout")->loadMultiple() as $layout) {
  if (!$layout->isDefault() && !$layout->getConditions()->has("current_theme")) {
    $layout->getConditions()->addInstanceId("current_theme", ["id" => "current_theme", "negate" => FALSE, "theme" => "ui_suite_uikit"]);
    $layout->save();
  }
}'

Image credits

The UIkit demo images (MIT) and the NASA photos are listed on the Image credits page of the site. The photos of the documentation and the products are released under CC0 (public domain dedication), and were resized for the web:

File	Photo	Author	License
developer-laptop-code.jpg	Laptop coding programs	Tirza van Dijk	CC0
code-on-monitor.jpg	Code on computer monitor	Markus Spiske	CC0
code-editor-laptop.jpg	Code editor on a laptop	Luis Gomes	CC0
team-planning-laptops.jpg	Planning with laptops	Helloquence	CC0

webship-portal-product-shot.jpg is a screenshot of the Webship Portal front page with Webtheme, distributed with this project under GPL-2.0-or-later.

Requirements

• Drupal 11.4 or later.
• PHP 8.3 or later.
• Composer 2.

Tests

Automated functional tests use webship-js against a site installed from this recipe:

npm install
LAUNCH_URL=https://my-site.ddev.site npm test

Learn more

• Display Builder documentation
• UI Suite UIkit components
• Drupal recipes

Maintainers

• Rajab Natshah: RajabNatshah