Web Components and Styles Guide

The SUNY Oswego website serves many functions and users. To provide the most consistent experience possible, the Office of Communications and Marketing created components that can be used on Oswego.edu Drupal sites. These components provide a consistent look and feel for the Oswego website, as well as creating an easy way for end users to create nice looking websites without needing HTML or CSS knowledge. These components attempt to solve problems that come up in requests from web editors.

Benefits of using our components:

• Standardizing to a single design system leads to cohesive, consistent experiences.
• Speeds up workflow. By picking some pre-defined components, our team can get you set up significantly quicker than if we had to create new designs.
• Shared vocabulary. Utilizing this style guide provides a shared vocabulary between our office and your office which makes our communications more efficient.
• Mobile/cross-device ready. These components have been tested across multiple devices and are ready to go. This saves time on device testing at the end of a project.
• Foundation. The components listed here are not etched in stone and are meant to be continually improved.

There are a few ways to set up these components:

• Use straight HTML from the examples. This is not recommended except in rare cases because if the component evolves, your code may become out dated/out of sync.
• Use Panels panes or Paragraphs. Utilizing modules in Drupal, we have built these components in to our CMS and can show you how to get the most out of them.

We can help you set up these components for use in your website today! Get in touch with us to schedule an appointment.