Rexall Mobile App CSS Design Documentation

Introduction

File structure

less
|-- mixins
          |-- table-div.less
|-- detail.less
|-- doc.less
|-- global.less
|-- input.less
|-- locator-list-item.less
|-- mixins.less
|-- rexall-style.less
|-- utility.less
|-- variables.less
|-- rexall-mobile-app-design-documentation.html

LESS

The css of Rexall mobile app is developed with LESS, each module of the app is encapsulated into one less file to make the development and update faster.


The root file of this project is rexall-style.less. It will be compiled into rexall-style.css which is use to replace the older version style sheet style.css. So far both rexall-style.css and style.css are linked to this document to make sure there is no conflicts between these two style sheets. Once this project is finished, style.css should be removed.

Note:
* Do NOT update rexall-style.css directly.
* ALWAYS make change to development less files first and then compile to css to keep development and production synced.

Variables

variables.less defines a set of global variables such as font sizes and color codes that are used in the app.

Note:
This project is still a work in progress version. The fonts and colors are collected and organized from the pages/modules whose css has already been cleaned. The list below does NOT includes all font sizes and colors across the app.

Fonts

Rexall mobile app document: @x-smallest-font

Rexall mobile app document: @smallest-font

Rexall mobile app document: @smaller-font

Rexall mobile app document: @small-font

Rexall mobile app document: @normal-small-font

Rexall mobile app document: @normal-font

Colors

@default-text-color: #1E1E1E;
@dark-grey-color: #444;
@light-grey-color: #d3d3d3;
@darkest-green-color: #0f536d;
@dark-green-color: #007B78;
@green-color: #00b5af;
@l-green-color: #70cacb;
@light-green-color: #dae5e5;
@lightest-green-color: #e9f4f4;
@x-lightest-green-color: #eef3f3;
@dark-red-color: #C72238;
@light-gold-color: #f99f1c;
@gold-color: #ED8C22;

Input fields

input.less defines 3 types of input fields in the app:

Input fields: Form


Input fields: Store search field


Input fields: Shopping Add Field


+

Store list item

The item in scrollable list of Store locator page and Clinic locator page are defined in locator-list-item.less.
The list item in Store locator is set as basic control.

Store list item: Store locator

Use .locator-list-item to create a basic list item structure.

MCI Clinic

595 Bay Street595 Bay Street595 Bay Street

Toronto, ON M5G 2C2

Route

3.55KM

OPEN Until 12:00 AM Today

Store list item: Store locator(Preferred)

Add .preferred to override the basic style.

MCI Clinic

595 Bay Street595 Bay Street595 Bay Street

Toronto, ON M5G 2C2

Route

3.55KM

OPEN Until 12:00 AM Today

Store list item: Clinic locator

Use .locator-list-item with .clinic to create a Clinic locator list item

MCI Clinic

595 Bay Street595 Bay Street595 Bay Street

Toronto, ON M5G 2C2

Route

3.55KM

OPEN Until 12:00 AM Today

Store list item: Clinic locator(Preferred)

Same as preferred Store locator list item, add .preferred on top of .locator-list-item and .clinic to create a preferred Clinic locator list item

MCI Clinic

595 Bay Street595 Bay Street595 Bay Street

Toronto, ON M5G 2C2

Route

3.55KM

OPEN Until 12:00 AM Today

Store/Clinic Detail Page Components

detail.less defines a set of components that are used in Store detail page and Clinic detail page.

Similar with locator-list-item.less, detail.less defines the components in Store detail page as basic control, adding .clinic and .preferred on top of the basic class will create specific style.

Store Detail Page: Special message

.detail-msg-section creates the component contains the store's exception message.

This is a exception message. This is a exception message. This is a exception message. This is a exception message.



Add .med to define a message with medium priority.

This is a MEDIUM exception message. This is a exception message. This is a exception message.



Add .critical to define a message with critical priority.

This is a CRITICAL exception message. This is a exception message. This is a exception message.

Store Detail Page: Store address

.detail-address-section creates the component contains the store's address and logo.

120 Adelaide Street W. Unit # R28 Toronto, ON M5H 1T1

Store Detail Page: Store address (Preferred)

Add .preferred with .detail-address-section to indicate preferred store.

120 Adelaide Street W. Unit # R28 Toronto, ON M5H 1T1

Store Detail Page: Store address (Clinic)

Add .clinic with .detail-address-section to create a address section for clinic.

Medical center 120 Adelaide Street W. Unit # R28 Toronto, ON M5H 1T1

Store Detail Page: Store address (Preferred Clinic)

Add both .preferred and .clinic with .detail-address-section to create a address section for preferred clinic.

Medical center 120 Adelaide Street W. Unit # R28 Toronto, ON M5H 1T1

Store Detail Page: Store hours

Use .detail-hours-section to create a component contains store hours.

Store Hours

Currently OPEN
  • Mo-Fr : 7:00 AM - 7:00 PM
  • Sa : 7:00 AM - 7:00 PM

Pharmacy Hours

Currently OPEN
  • Mo-Fr : 7:00 AM - 7:00 PM

 

Store Detail Page: Store hours (Clinic)

Add .clinic to .detail-hours-section for clinic hours.

Medical Clinic Hours

Currently OPEN
  • Mo-Fr : 7:00 AM - 7:00 PM
  • Sa : 7:00 AM - 7:00 PM

Public Walk-In Clinic



This Medical Clinic is inside a Rexall Drugstore.

This Medical Clinic operates independently from any Phamacy Location.

Store Detail Page: Holiday hours

Use .detail-holiday-hours-section for store holiday hours section.

Holiday Hours

DAY
STORE
PHARMACY
Dec. 25
8:30 AM - 5:00 PM
8:30 AM - 5:00 PM
Dec. 26
8:30 AM - 5:00 PM
8:30 AM - 5:00 PM

Store Detail Page: Service list

Use .detail-service-section for services list.

Store Services

  • A1C Diabetes Testing
  • Blood Pressure Kiosk and Screening
  • Diabetes Management Consultations
  • Flu Shot
  • Free Prescription Delivery
  • Gluten Free Products

Page

Page:

Under construction

Page: with header

Under construction

Panel

Panel

Under construction