Web Style Guide Overview

The Rush University Web Style Guide is provided to help designers, developers, content creators and publishers employed by the University maintain consistency across academic and administrative department web pages. The guide includes a comprehensive list of visual and functional components and their use throughout the site.

Introduction

About the Visual Style

The design of the Rush University website is based on brand guidelines established by University Relations and the Office of University Communications. University Relations is responsible for managing Rush University’s image by working collaboratively with others across the Rush campus to protect and promote the Rush brand. On the web, open-source typefaces in addition to web optimized brand fonts have been used for improved on-screen rendering. Colors have been selected in accordance with WCAG 2.0 AA accessibility guidelines.

UI Components and Patterns

The site contains common user interface (UI) components designed to help users find specific information easily. Navigation sets, buttons and iconography all follow established patterns that will be familiar to or easily learned by key audiences.

Responsive Web Design

  • Responsive web design makes the Rush website look good and function properly at any size regardless of device.
  • The HTML is constructed such that a single set of HTML works across all devices and screen sizes.
  • The HTML avoids duplicating elements for display at different breakpoints and avoids using JavaScript to adjust the display for different breakpoints.
  • When possible, spacing units are defined as rem or em units; rather than defining pixel sizes, this allows the elements to scale appropriately.

HTML Build Environment

  • The HTML for the project is built using SASS to compile CSS.
  • NPM is used as a package manager to manage the components of the HTML build environment. More information can be found at https://www.npmjs.com/
  • Guard is used as a task runner to execute the tasks to “build” the final HTML, minify files, etc. More information can be found at http://guardgem.org/
  • The Omega-4 base theme framework underpins the custom HTML, CSS and JavaScript for the site. More information can be found at https://www.drupal.org/project/omega
  • mStoner recommends editing the source files for the project (SCSS, JavaScript, etc.) and using the above tools to “build” the HTML as opposed to editing the resulting HTML, CSS and JavaScript directly.

Browser Compatability

The HTML is built to be viewed on the following browsers:

  • Internet Explorer: IE10 through IE11
  • Safari: latest (as of November 2015)
  • Firefox: latest (as of November 2015)
  • Chrome: latest (as of November 2015)
  • Microsoft Edge: latest (as of November 2015)

The Rush University website contains many design elements that have been implemented in the WYSIWYG editor as styles or templates. A series of sample webpages have been created that demonstrate all of the styles and templates that have been built as part of the implementation.

The page below was used during initial Content Editor training on March 14, 2016. Feel free to view / edit the page if helpful in orienting yourself to managing content within Drupal.

  • Page Used During March 14 Training