Web Styles Guide Overview

The UHCL 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 University of Houston-Clear Lake website is based on the brand guidelines established by the Office of University Communications. Open-source typefaces have been used in place of brand fonts for ease of use and improved on-screen rendering. Colors have been used 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 UHCL website look good and function properly at any size and 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.
  • Bower is used as a package manager to manage the components of the HTML build environment. More information can be found at http://bower.io
  • Gulp 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://gulpjs.com
  • The Twitter Bootstrap framework underpins the custom HTML, CSS and JavaScript for the site. More information can be found at http://getbootstrap.com
  • 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 Compatibility

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

  • Internet Explorer: IE9 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)