Getting started
This design system aims to provide a set of reuseable components for building products in the RMIT library digital ecosystem.
These components work together well and can be interchanged with a degree of modularity. The system provides a flexible and easy to use starting point to design and develop your product (additional features or adaptions specific to your project may be required).
The system has been designed and developed rapidly and is by no means comprehensive. The intention is to iterate and extend the system's capabilities over time, when and where design and development resources become available.
Benefits
- Consistency across different products, creating a sense of familiarity for our users (both students and educators)
- Rapid prototyping at increased fidelity
- Quicker progression from design to development
- Easier to make changes across a number of products at once
Design
An extensive figma file is available. This file contains both design specific documentation and components that can be laid out and altered to produce high fidelity prototypes. Figma makes it easy for these prototypes to be shared and for people to comment and collaborate on designs. It also features a development mode which allows front-end developers to get stylesheet and markup information.
Development
The design system extends the bootstrap framework . There are two approaches to extending bootstrap. The simplest method is to first include the compiled css in the <head> section of your page. Then, add your own custom css directly after and overwrite and extend the styles required.
<head>
<!-- link to design system css -->
<link href="https://rmitlibrary.github.io/design-system/sass/main.min.css" rel="stylesheet">
<!-- link to your own custom styles -->
<link href="path.to/custom-styles.css" rel="stylesheet">
</head>
An alternative, which provides more flexibility, is to copy and compile the design system's scss files, resulting in a single css file. You'll need a sass compiler to carry out this method. This allows your styles to access mixins and variables from both the design system and bootstrap itself. The core scss file is structured as follows:
Import bootstrap functions
---
Declare colour variables
Declare other variables
Declare typography variables
---
Import bootstrap styles
---
Import design system styles
---
Import app specific styles
In terms of a file structure, try using this:
your-project/
└── sass/
└── main.scss
└── app-specific/
└── bootstrap/
└── design-system/
