La Trobe Design System

Goals of the La Trobe Design system

  • Improve the consistency of design
  • Improve the scalability of design
  • Improve the maintainability of design
  • Improve usability and accessibility

How to use the Design sytem

To apply the design system to a page requires the following three settings:

a. Settings page:

Change System Defined Frontend Design to Main Site (1099240)

Use Change? to apply to page and its children. Use Override? to apply to this page only.

b. Paint layouts page:

Change Paint layout to La Trobe Design System - paint layout (1068988)

Use Paint Layout to apply to page and its children. Use Override Paint Layout to apply to this page only.

c. Metadata schemas page:

Change Metadata schema to La Trobe Design System - metadata schema (1094469)

Select Cascade? to  apply to page and its children. Un-select Cascade? to apply to this page only.

You can now use the design system components on the pages these settings have been applied to.

2. Use DS Components

Note: only WYSIWYG containers and DS components can be used on these pages.

Legacy code and components will not render correctly:

  • do not try and use legacy components and code.
  • do not use raw hand coding

The DS components are available as Content Templates.

All DS components are prefixed DS:

Here are the available components.

Note: only WYSIWYG containers and DS components can be used on these pages.

Legacy code and components will not render correctly:

  • do not try and use legacy components and code.
  • do not use raw hand coding

The DS components are avaiable as Content Templates.

All DS components are prefixed DS:

Here are the available components: