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.
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.
- 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 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)