FTS starter kit

Flexible Template System

The Flexible Template System (FTS) is a pattern building system in Drupal that allows its users to scale redhat.com web properties. It serves as a powerful development tool and a comprehensive library of our patterns. FTS users can customize patterns in Patternkit and then use those same patterns to build pages and experiences in Drupal. FTS is a powerful system that empowers its users to build web experiences that are aligned to our brand standards and design system.

Drupal

Red Hat uses Drupal, the content management system. Over 30,000 pages are maintained in Drupal including support for eight languages. As our redhat.com web properties scale, it is vital to have a powerful content management system that designers and developers can use to build or update pages quickly. A one-time three-hour training session is offered to all new Drupal users; you are automatically enrolled in this session when you are granted Drupal access.

FTS starter kit

The FTS starter kit acts as a bridge between XD and the page building experience in Drupal. Sometimes designers are unsure of what FTS patterns are available, or they want to do their best to maintain consistency, when moving from a design to development environment. The FTS starter kit aims to eliminate these inconsistencies by providing designers with customizable FTS patterns that are 1:1 when using the same patterns to build pages and experiences in Drupal.

Get started

If necessary, complete any Drupal or XD trainings before requesting an invite to access the FTS starter kit library.

1

Request an invite

Contact us about what you are working on and then we will send you an invite to access the library.

2

Sync the library

Once you accept the invite, a library of patterns will sync in XD. There are a lot, so this might take some time.

3

Load the library

When syncing is done, the library will appear in the Libraries panel. Selecting this library will load all of the patterns.

About the Libraries panel

Load the library

When the FTS starter kit library is done syncing, it should appear in the Libraries panel in XD. You can view the Libraries panel by pressing Shift+Command+Y (or Shift+Control+Y on Windows). Clicking on the library will load all of the FTS patterns for you to work with.

If you do not see the library, click on the Manage libraries link in the Libraries panel. The library might be turned off for you. To turn it on, toggle the switch as pictured below. It does take some time for XD to sync our libraries, so be patient. Remember that our libraries require access to Adobe Creative Cloud through a Red Hat account.

Still need assistance? No problem, just contact us and we will make sure you get connected.

4

Create pages and experiences

Use these patterns to create designs and experiences that look consistent when building them in Drupal.

Working in XD

Using patterns

To use FTS patterns in XD, find your desired pattern in the Libraries panel and add it to your design by dragging and dropping. To replace a pattern, switch to the Layers panel by pressing Command+Y (or Control+Y on Windows). Select the pattern (the layer with a chain icon on the left), switch back to the Libraries panel, and drag and drop a new pattern on top of it. To reset a pattern, right-click on the pattern and select Reset to Main State.

Component states

Every FTS pattern includes Component States which are states you can toggle to display various specs or design options. Toggling component states is a good way to learn about FTS patterns and how to customize them in Drupal. Each FTS pattern includes the following component states.

• Default State - Resets a pattern to the default appearance
• Blueprint - Overlays element labels which correspond to fields or inputs in Patternkit and Drupal
• Layout options - Displays some examples of possible layout configurations
• Alignment - Displays alignment options for elements like calls to action or text
• Spacers - Shows how elements should use spacers according to the design system
• Themes - Shows how the appearance of elements change depending on what theme is selected
• Pattern builder demo link - Overlays a link to customize the pattern using Patternkit

Element labeling

In the Blueprint component state, every element is labeled. When you want to customize an element in Patternkit or Drupal, look for the input or field that matches the element label.

Working in Drupal

Pattern options

The patterns available in the FTS starter kit are about the same as the ones in Patternkit and Drupal which makes it easy to recreate your page design when building.

Adding and customizing patterns

When you want to add a new FTS pattern in Drupal, reference the element labels in the Blueprint component state to know exactly which inputs and fields are available to customize.

FTS patterns can be customized with just a few clicks. To change something, expand a dropdown to see what customizations are available. To add or remove a component like a call to action, there are buttons nearby. This continuous loop of working with FTS patterns in XD and then building them in Drupal takes practice, but it can reduce working time a lot once you get the process right.

Best practices

When creating the FTS starter kit library and leveraging Drupal, our goal is to give users tools to empower them to design and develop on-brand and on-system websites and experiences by themselves. There are lots of ways to customize FTS patterns in XD or Patternkit and then build them in Drupal. However, there are also lots of ways to stray off-brand and off-system. When working with the assets in this library, the following resources should help you stay aligned.

• Design system foundations
• Brand standards like icons, illustrations, photography, etc.
• FTS patterns or layout demo pages so you can see what exists already
• The Source page

This example uses FTS patterns, but does not align to brand standards or the design system

Contributing

We welcome any feedback regarding the FTS starter kit library and we want you to contribute to its growth. Feel free to contact us about any of the following.

• If you would like to request a new pattern, describe what you would like created and why
• If you need something that already exists added to the library, tell us about it
• If you feel something you created should be added, send us your designs and we will review them
• If you think something needs to be updated, describe which asset and what the updates are

Frequently asked questions

How does a pattern in Drupal get added or updated?
The design system team meets regularly with the FTS team to discuss new pattern requests or updates, which are assigned a priority in Workfront as they come in. Once a priority is set and a schedule is agreed upon, design or development work begins. When the work is complete, the FTS starter kit library and the WebRH repo are updated. All updates are then communicated to the team via a monthly e-mail newsletter.

How do I request a new pattern be added or updated in Drupal?
To request a new pattern or request updates to an existing pattern, fill out this form.

How can I get more Drupal or XD training?
For Drupal training, follow the tasks in this practice document to get acquainted with changing images, adding links, adding new patterns, and more. For XD training, visit this page to learn how to use libraries and components.

How can I report a bug?
To report a bug, fill out this form and include screenshots or a detailed explanation. If something is broken or if the bug is high priority, create a new topic in the CMS Help | redhat.com Google Chat group.

How can I contact the team about something else?
For other questions or additional support, contact us or chat with us in the CMS Help | redhat.com Google Chat group.