Style Guide

This site documents HTML and CSS components developed for use in ALU's in-house web applications.

View the Project on GitHub aludeveloper/alu-styleguide

Introduction

The HTML code patterns documented here can be used to style content created for the web or any application with an HTML/CSS interface. Access the entire component library on AdobeXD here ALU UI Component Library

Principles

This style guide is based on the Delight by Design pillars that were developed together with the Marketing team. They aim to provide a way of thinking about humans, their emotions, and the outcomes we want to create. They include:

Innovation through understanding; Our student feels understood and validated to live the life they want.
Approachable and motivating; Our student feels encouraged, rewarded, and at ease with tasks.
Speed from simplicity; Our student feels empowered by a fast, easy experience flow.
Guide and anticipate; Our student feels supported, clear, and assured what to do.
Confidence from clarity; Our student feels confident from clear, relevant insights.

Get Started

To get started, all you have to do is download the alu_brand.scss file for this Github repository under /assets/css/_scss/ and add it to your css folder, as well as your index.html file.

For grids and layouts, it is highly recommended that you use Bootstrap to create a mobile-first experience that is consistent across devices.

All icons used come from Font Awesome. Read the documentation on how to add it to your HTML.

However, please note that the styles documented here are based on the current ALU Brand Guidelines which are subject to change.

NOTE: If you would like to make contributions to the ALU design system (that encompasses this style guide and the UI component library), please refer to the contribution guide.

Typography

All headlines and body text use Montserrat sans serif type.

Headline H1

Headline H2

Headline H3

Headline H4

Headline H5

Body Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam viverra blandit erat, sed bibendum risus fringilla eget. Suspendisse vitae sapien fringilla mi egestas aliquam.

This is link text.

Colors

To determine how the full range of colors are used and in what proportion, please refer to the ALU Brand Guidelines.

ALU Primary - Anchor Blue (#002E6D)

ALU Primary - Carmine Red (#D00D2D)

Silver Mist (#758592)

Sky Blue (#00A2E1)

Storm (#2C6C88)

Forest (#00A585)

Burnt Orange (#EC6607)

Red (#F5333F)

Buttons

Primary Action Button

A basic button can be achieved by adding the CSS class ‘primary-btn’.

Example

<button class="primary-btn">Click me</button>

When to use

When you want to strongly suggest something that a user must do (call to action), and as a strong visual indicator to help a user complete their journey for example in situations where a user may want to go ‘next’, ‘complete’, ‘start’ etc.

When not to use

For the alternative we give users for the primary action. In this case use either the secondary button style or link button. A primary button should not be used for miscellaneous actions - that is the action is important, but may not be what the user is looking to do right then.

Button Styles

Class	Default State	Active State	Disabled State
.primary-btn
.secondary-btn
.link-btn
.success-btn
.warning-btn
.danger-btn
.icon-btn

Other button styles can also be achieved by adding the corresponding CSS class as shown above in the table. Every button has three states, that is; default, disabled, and active. The example below shows how to implement each state;

<!-- Active secondary button -->
<button class="secondary-btn active">Click me</button>

<!-- Disabled secondary button -->
<button class="secondary-btn disabled">Click me</button>

Implementation for icon buttons is slightly different since their states require stacking mulitple icons. See example below;

<!-- Default state -->
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x icon-btn default"></i>
  <i class="fas fa-trash fa-stack-1x fa-inverse icon-btn"></i>
</span>
<!-- Active state -->
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x icon-btn active"></i>
  <i class="fas fa-trash fa-stack-1x fa-inverse icon-btn"></i>
</span>
<!-- Disabled state -->
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x icon-btn default"></i>
  <i class="fas fa-trash fa-stack-1x fa-inverse icon-btn disabled"></i>
</span>

Recommendation: Use icon buttons with a label or tooltip for clarity on what the action does especially for more abstract meanings.

Forms

Basic inputs and labels

ALU branded form inputs and elements use custom CSS styles that are different from their native appearance. This is just so that they appear consistent on whatever platform is being used for implementation.

Examples

This is a label.

This shows an error. Please fill this field.

This is another label.

<!-- text input -->
<div class="form-container"> <!-- use 'form-container' to align items vertically -->
  <label for="demo-text-input1">This is a label.</label>
  <input id="demo-text-input1" class="fc-input" type="text" placeholder="A helpful placeholder">
</div>

<!-- text input with error -->
<div class="form-container">
  <label for="demo-text-input1">This is shows an error.</label>
  <input id="demo-text-input1" class="fc-input error" type="text" placeholder="A helpful placeholder">
  <small class="error-text">Please fill this field.</small>
</div>

<!-- drop down select -->
<div class="form-container">
  <label for="demo-text-input2">This is another label.</label>
  <div class="select">
    <select id="demo-text-input2" class="fc-select">
      <option>This is an option</option>
      <option>This is another option</option>
      <option>This is yet another option</option>
    </select>
  </div>
</div>

Recommendation: Form validation messages should not only identify the problem, but also tell users how to fix it. Also, validation needs to be contextual so validation messages should be placed next to the input field with the problem.

Radio Buttons

Example

Radio 1

Radio 2

<label class="radio">
  <span class="radio_input">
    <input type="radio" name="radio">
    <span class="radio_control"></span>
  </span>
  <span class="radio_label">Radio 1</span>
</label>

Checkboxes

Example

The checkbox label text

<label class="fc-custom-checkbox">
    <input type="checkbox" checked />
    <svg width="32" height="32" viewBox="-4 -4 39 39" aria-hidden="true" focusable="false">
        <!-- The background -->
        <rect class="checkbox-bg" width="35" height="35" x="-2" y="-2" stroke="#002E6D" fill="none" stroke-width="4"
            rx="6" ry="6"></rect>
        <!-- The checkmark-->
        <polyline class="checkbox-checkmark" points="4,14 12,23 28,5" stroke="transparent" stroke-width="4" fill="none"></polyline>
    </svg>
    <span>The checkbox label text</span>
</label>

Cards

Content Card

This is a header

This is the body text.

Example

<div class="content-card">
  <div class="content-header">
    <div>This is a header</div>
    <div id="action-btns">
      <div class="tooltip" data-tooltip="Edit">
        <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x icon-btn default"></i><i class="fas fa-pen fa-stack-1x icon-btn"></i></span>
      </div>
      <div class="tooltip" data-tooltip="Delete">
        <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x icon-btn default"></i><i class="fas fa-trash fa-stack-1x icon-btn"></i></span>
      </div>
    </div>
  </div>
  <div class="content-body">
    <p>This is the body text.</p>
  </div>
</div>

When to use

Use a content card when you want to group short pieces of related information. It can be a paragraph or a simple form. If there’s a lot more information to be displayed, use an expandable card to link to additional details.

Expandable Card

Every expandable card comes with a ‘details’ button that expands it to reveal more details about. To do this, just adjust the width of ‘action-card’ class in the CSS.

Arts@ALU

ALC Mauritius

Arts@ALU is a creative expression space that promotes art in the ALU community.

Example

<div class="expandable-card">
  <img src="./assets/imgs/placeholder.jpg" alt="Image placeholder" />
  <div class="expandable-card-body">
    <div id="content">
      <h2>Arts@ALU</h2>
      <p class="small-text">ALC Mauritius</p>
      <p>Arts@ALU is a creative expression space that promotes art in the ALU community.</p>
    </div>
    <button class="primary-btn">Details</button>
  </div>
</div>

Recommendation: Use cards for flexible layouts that can adapt to different screen sizes. Cards should not be used for large amounts of information, instead use a list - they are more scannable than cards.

Tables

Term 1	Grade
Data & Decisions	3.6
Communicating for Impact	3.6
Entrepreneurial Leadership	3.6
Projects	3.6

Example

<div style="overflow-x:auto;">  <!-- make table responsive -->
  <table class="content-table">
    <tr class="content-table-header">
      <th>Term 1</th> <th>Grade</th>
    </tr>
    <tr>
      <td>Data & Decisions</td> <td>3.6</td>
    </tr>
    <tr>
      <td>Communicating for Impact</td> <td>3.6</td>
    </tr>
    <tr>
      <td>Entrepreneurial Leadership</td> <td>3.6</td>
    </tr>
    <tr>
      <td>Projects</td> <td>3.6</td>
    </tr>
  </table>
</div>

Notifications

Success! This is a notification.

Error! This is a notification.

Warning! This is a notification.

This is just an info notification.

Examples

<div class="notification" id="success">
  <div>Success! This is a notification.</div>
  <i class="fas fa-times"></i>
</div>
<div class="notification" id="error">
  <div>Error! This is a notification.</div>
  <i class="fas fa-times"></i>
</div>
<div class="notification" id="warning">
  <div>Warning! This is a notification.</div>
  <i class="fas fa-times"></i>
</div>
<div class="notification" id="info">
  <div>This is just an info notification.</div>
  <i class="fas fa-times"></i>
</div>

When to use

Notifications should be used to give users appropriate feedback. It’s important to let users know of an application/system’s status, such as error messages or warnings so that they are able to understand the current context. There are two main types of notifications, which are based on whether the user is required to perform an action:

Action-required notifications: alert the user of an event that requires a user action. These are often urgent, and should be intrusive.

Contact deleted.

Undo?

<div class="notification" id="info">
  <div>Contact deleted.</div>
  <div>
    <a href="#">Undo?</a>
    <i class="fas fa-times"></i>
  </div>
</div>

Passive notifications: these should just be informational. They report a system occurrence that does not require any user action. Please refer to earlier examples on implementation.

Recommendation: Notifications should provide more context and enough background information so that the user knows what the notification is about.