Welcome to the Web Services Living Style Guide

Before we begin, if you are new to the team, I would like to welcome you to the web services family and thank you for sharing your talents with us. If you’re already a member, thank you for your commitment and willingness to grow with us!

Below, you will find a brief description about this document and its contents. You will have the opportunity to explore different components, features and templates which are available for download! Please continue reading as we get our bearings before navigating through everything this Living Style Guide has to offer.

Understanding our Living Style Guide (LSG)

We emphasize the "Living" in Living style guide, because this document is intended to evolve continually. That being said, we strongly encourage you to refer back to this document before creating new websites or other creative materials as this document may be updated without notice. Though, the overall branding and identity of the college will remain consistent, you can expect updates and enhancements especially in the code base.

Our Living Style Guide is divided into 5 main aspects (refer to navigation on the left for each section)

  • Color Scheme – refers to the color palette that is to be used for creatives. Keeping in mind ADA compliance
  • Typography – refers to different font families and styles. The college should maintain a consistent font family, but there is some wiggle room, for individual department sites.
  • Voice – refers to the overall tone of the content.
  • Multimedia – refers to the usage of images, audio and video. We discuss best practices and offer accessibility tips
  • Web Design/Dev – refers to code writing practices, page development, ADA compliance and semantic markup

Accessibility Concerns (Look out for accessibility tips)

This college offers information and services to a diverse group of people; thus, it is extremely important that we abide by the standards set in accordance with the Americans with Disabilities Act (ADA). Though most (if not all) of the components found in this Living Style guide will be ADA compliant; we have added “accessibility tips” in different parts of our document in order to empower YOU to make informed decisions.

For a long list of accessible web components visit the, Web Accessibility for Developers.

For more on accessiblity guidelines and tools refer to the following page: http://www.mdc.edu/webservices/styleguide/accessibility.aspx

Template Files – Overview

To get you started faster we’ve created a few templates available for download. Once you’ve downloaded the zip file, simply unzip, rename it to match project url (all lowercase, no spaces, hyphens, or special characters), then transfer the folder over to our staging server. In your web browser visit: http://staging.mdc.edu/yourfoldername to see the inception of your project.

Note: Our standard for urls is one word, all lowercase letters, no numbers.(ie. www.mdc.edu/rightsandresponsibilities/)

Inside your template files you will see the following by default:

  Project Name

  •   Default.aspx – Home page
  •   CSS
    • theme.css – Stylesheet used to create the theme’s base design. Avoid editing this file, so when updates are made, there are no conflicts between your work and the new styles.
    • site.css – Your styles goes here! Only styles pertaining to your current site should be in this file.
    • Note: In dev, there’s a global style called “patterns.css” this is the styles library, with resources that are available for all projects. In production however, the patterns.css will be merged into the mdc.css once the edits are tested and approved.
  •   Img
    • site-bg.jpg – standard background image
  •   Includes
    • site-masthead-navigation.html – contains the “website banner” and the site navigation.
    •   Note: HTML in this files will be present throughout the site.