Building:Feature Previews - cu-uis/cu-starterkit-project GitHub Wiki

Currently the CU Starter Kit does not include a default Install Profile like CU Boulder's Web Express project. Sites start with a standard Drupal CMS install screen. We will eventually adopt the new Starter Kit approach being defined by as part of Drupal's Distribution Modernization Initiative, but until then there are still steps to build the site before you can see the functionality. The module like cusys_simple_styleguide and cusys_layout_paragraphs being added now are only configuring the minimal functionality required for automated testing, but you can use these modules to preview functionality that is more flushed out in online.cu.edu.

Simple Style Guide

To see the equivalent of https://online.cu.edu/simple-styleguide on your own site, follow these steps.

  1. Enable Twig Tweaks (required for cusys_barrio)
  2. Enable cusys_barrio and cusys_claro in admin/appearance
  3. Set cusys_barrio as the default theme
  4. Set cusys_claro as the admin theme
  5. Enable CU Styleguide
  6. Go to https://[YOURS-SITE]/simple-styleguide

Layout Paragraphs

Enabling the CU Layout Paragraphs Bundle makes available a layout paragraph type along with several for common content patterns, that can be added to content types.

  • Enable CU Layout Paragraphs (dependencies: Layout Paragraphs, Paragraphs, Entity Reference Revisions, Field, File, Layout Discovery).
  • In structure view -> Paragraph types, the module provides the following Paragraph Types:
    • Layout: provides different layout options for your content(one/two/three columns)
    • WYSIWYG: a rich text editor field utilizing Drupal CKEditor
    • View Reference: Allows selection of a reference view for display

Enabling the Paragraphs Content WYSIWYG Editor in a Content Type

  1. Edit or create a content type.
  2. Choose the manage fields operation.
  3. Add Field -> In the field type dropdown, select under Reference Revisions -> Paragraph.
  4. Provide a label for the field, save and continue.
  5. Set type of item to reference to paragraph.
  6. Set allowed number of values to Limited | 1 and save the field settings.
  7. Edit the field and set the reference type to include Content: WYSIWYG.
  8. Edit both manage form display and manage display and set the widget and format to layout paragraphs.
  9. Go to content -> Add content, choose the content type to add.
  10. The WYSIWYG enabled field(s) for the content present a popup with the WYSIWYG editor.

Content Bundle

Enabling the CU Content Bundle adds defaults for Formats and Editors and the LinkIt plugin.

Media Bundle

Enabling the CU Media Bundle adds Drupal Media, Media Library, WebP and Responsive Images. It also adds permissions for base roles.

Theming

This section will cover installing, configuring and sub-theming for the project.

The CU Base theme is based on the Bootstrap Barrio theme, which is following the "so far" defined Drupal 10 theming practices. This means that it is a snapshot of the theme at the time of creation. Currently it is set to the 5.5.6 release, which will need to be manually updated with new releases.

This theme is a backbone type theme, which does not need to be installed but is automatically installed for a sub-theme. The CU Base theme is a UIS site theme that has basic CU branding elements. To theme your site you will either need to select one of our predefined themes or follow the sub-theming instructions below. The theme also utilizes the CU Bundles modules: Content, Media, Layout Paragraphs, Style-guide.

CU Base settings without a sub-theme should have configuration settings set for Base UIS theme.

Local Development(offline)

These Barrio based themes/sub-themes utilize a CDN for the Bootstrap libraries, which is a selectable option in the theme settings. If you wish to work offline then you will need to add the libraries to your site. Follow the instructions below:

This may change once CU Base has been added from packagist.

  1. Require the Bootstrap library in your main composer.json file: composer require twbs/bootstrap:^5.0.0
  2. To copy dist files into libraries folder during installation, you can add the following 2 lines of script into your main composer.json file:
"scripts": {
    "post-install-cmd": [
        "@composer drupal-scaffold"
    ],
    "post-update-cmd": [
        "@composer drupal-scaffold",
        "mkdir -p web/libraries/bootstrap",
        "cp -R vendor/twbs/bootstrap/dist web/libraries/bootstrap"
    ]
},

This will maintain your bootstrap version up to date when updating via composer.

  1. Ensure you have local Bootstrap libraries added to your THEME.libraries.yml, next to your Bootstrap CDN library:
bootstrap:
  js:
    /libraries/bootstrap/dist/js/bootstrap.min.js: {}
  css:
    component:
      /libraries/bootstrap/dist/css/bootstrap.min.css: {}
  dependencies:
    - core/popperjs
  1. To switch between libraries you can select the option "Load Library", at the bottom of your theme settings. Here is a dated reference.

Sub-theming

CU Base ships with a standard sub-theme starter kit located on the sub-theme folder. You can choose one of our predefined themes or use the starter kit to create a new one. The original Barrio Bootstrap included a color selection but it has since been deprecated. Therefore it has been removed.

Predefined themes:

  • CU Base - generalized theme primarily for informational sites
    • CU Bundles - Content, Media, Layout Paragraphs, Styleguide

Creation - By Script

You will need to copy/clone the CU Base theme locally or from the CU Starter Kit repository. Then run the sub-theme script with the following commands:

# Run from theme root, e.g. "themes/custom/cu_base".
# Make script executable.
chmod +x scripts/create_subtheme.sh
# Run script with interactive prompts.
./scripts/create_subtheme.sh

After generating your sub-theme, you need to do the following to complete the setup:

  1. Remove the .EXAMPLE extension from your yourname.info.yml file. There may have been 2 files created so just delete one of them.
  2. Edit the file yourname.info.yml
  • Update the Name and Description to match your needs.
  1. Edit /config/schema/yourname.schema.yml
  • Update label
  1. Enable the Theme by navigating to the Appearance page on your site, which is located at admin/appearance

Admin Base

Installation

Configuration

Sub-theming