Pattern Library

The Pattern Library is a resource for consistent layout and styling on CLA web pages. Best practices should be followed when creating new pages and editing existing pages, using these patterns as a guide.

CLA site structure

The CLA web sites are built upon the Drupal CMS, employing Zurb Foundation 5 and SASS for structure and styling. Foundation has many built-in features and capabilities to manage how content is displayed, and we use some of its default styles in this library. Many custom styles have been designed for the University and for CLA specifically.

Who uses this library?

The primary audience for this pattern library are designers and developers working within CLA to build websites and edit content on behalf of departments and programs. Some markup and styles are intended for use outside of Drupal.

Knowledge of HTML, CSS, and SASS are required to make effective use of the patterns contained in this library.

Can I use these patterns in Drupal?

Yes. The CLA Drupal build is pre-configured with several content editing capabilities in the WYSIWYG editor. Some content types require additional markup or style, provided by this library, to display correctly on CLA sites. Note that SASS variables are not valid in Drupal and will not be compiled.

Terms and Phrases

HTML: Hyper Text Markup Language is the standard coding language used to create web pages.

CSS: Cascading Style Sheets is a style sheet language used for describing the look and formatting of a document written in a markup language.

WYSIWYG: "What You See Is What You Get" editors, such as the body section in Drupal's page edit mode. This allows a user to change type styles and insert content without writing code and see a near-identitcal preview of what the content will look like on the page.