FTS starter kit

Flexible Template System

The Flexible Template System (FTS) is a pattern system within Drupal that allows redhat.com web properties to scale, it also serves as a powerful development tool and a comprehensive library of our patterns. Users can customize patterns within Patternkit, a prototyping tool, and they can also design and build pages within Drupal while staying 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 different languages. As our web properties scale, it is vital to have a modern content management system that designers and developers can use to build or iterate pages quickly. A one-time three-hour training session is offered to all new Drupal users and you are automatically enrolled in this session when you are granted Drupal access.

FTS starter kit

The FTS starter kit is the bridge between Adobe XD and the page building experience within Drupal. Sometimes designers are unsure of what FTS patterns are available or they are concerned about consistency when moving from a design to development environment. The FTS starter kit aims to eliminate inconsistencies by providing designers with customizable FTS patterns that are 1:1 when using the same patterns to build pages in Drupal.

Adobe XD

The FTS starter kit is maintained in Adobe XD and Adobe Creative Cloud. They need to be installed if you want access to FTS patterns. Once a license is granted, Associates can install their desired app(s) from within Adobe Creative Cloud. Contact your manager for further assistance if necessary.

Get started

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

1

Request an invite

Contact us and tell us about you and what you are working on in relation to FTS and Drupal.

2

Sync the library

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

3

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 the FTS patterns for you to start working with.

If you do not see the library, click on the Manage libraries link in the Libraries panel. The library may need to be enabled by turning on the switch. It takes some time for XD to sync our libraries, so be patient. Remember that your Adobe account needs to be on the Adobe for Teams plan if you want to use this library.

Still not working? For further assistance, contact us.

Load the library

When fully synced, the library will appear in the Libraries panel in XD. Clicking on the library will load the FTS patterns.

4

Create pages

Use the FTS patterns in XD to build patterns or create pages that will be 1:1 when moving to Drupal.

Working in Adobe XD

Using patterns

Find your desired FTS 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). Highlight the layer with a chain icon to the left, switch back to the Libraries panel, and drag and drop a different pattern on top of it. To reset a pattern back to the default, right-click on the layer with a chain icon to the left and select Reset to Main State.

Component states

Each FTS pattern in XD features Component States or options you can toggle to show different kinds of specs or states. Toggling each component state is a good way to learn about FTS patterns and how you can customize them in Drupal.

• Default State - The default appearance of a pattern
• Blueprint - Overlays a skeleton of element labels which correspond to the fields in Drupal
• Layout options - Displays examples of layout configurations, additional options are available in Drupal
• Alignment - Displays alignment options for certain elements like calls to action or text
• Spacing - Overlays the correct spacers in between each element according to the design system
• Available themes - Changes the appearance of elements according to the available themes
• Pattern builder demo link - Provides a link to customize each pattern further using Patternkit

Element labeling

In the Blueprint component state in XD, the element labels are the same as the field names in Patternkit or Drupal. If you want to add, change, or remove an element in a pattern, look for the corresponding field that matches the label. There are a lot of fields even for simple FTS patterns, but following the blueprint will make it easy to find the correct fields in Drupal.

Working in Drupal

Pattern options

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

Adding patterns

When you add a new FTS pattern in Drupal, refer back to the element labels in the Blueprint component state in XD to know exactly which fields are available to customize.

Customizing patterns

A new FTS pattern can be customized with just a few clicks. Element labels in XD make it easy to find the corresponding fields in Drupal you can work with. To change something, select each dropdown to see what options are available. When you change something like the background color, elements inside the pattern will also change to fit the new theme. 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 by a lot once you get the process right.

Best practices

Our goal with the FTS starter kit and Drupal is to give users the tools they need to design and develop pages by themselves. There are endless ways to customize FTS patterns or build pages in Drupal or XD. However, there are also endless ways to create things that do not align to our brand standards and design system. When customizing FTS patterns or building pages in Drupal or XD, these resources will help you stay aligned.

• Design system Foundations or common FTS layouts like Cards
• Brand standards like icons, illustrations, photography, etc.
• FTS patterns or layout demo pages so you can see what already exists in the wild

Example of an FTS pattern that can be created in Drupal or XD, but does not align to the design system

Contributing

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

• If you need a new pattern, describe the pattern you want created and why
• If you need an existing pattern to be added, tell us which pattern
• If you feel a pattern you created or built should be added, send us an XD file or screenshot and we will review it
• If you think updates need to be made, describe the pattern and the specific updates

Warning
When changes to an FTS pattern are made in XD, you must update that pattern manually or drag and drop a new one to see the changes.

Frequently asked questions

How does a pattern in Drupal get updated?
Design and development teams meet weekly to review new FTS pattern requests or updates. If you submit a new request or update, it is assigned a priority in our backlog. Once the priority is set and a schedule is agreed upon, design or development work begins. When the work is complete, the new request or update is implemented and you will be notified.

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

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

What if I want to report a bug?
For reporting bugs, use this form and include screenshots or a detailed explanation. If something is broken or if the bug is high priority, contact us on Google Chat.

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