Docs

What's New

v2.4.1

An incremental update with minor change

Footer content update

v2.4.0

This update brings fixes to the sidebar navigation, a new emergency banner, and other enhancements.

Sidebar
- Further improved sidebar display on mobile.
- Removed unused styles.
- Demos append "Sections" to the title of the section to improve usability, but the inclusion of this text is optional.
Navigation
- Cleaned up iconography and menu buttons on mobile.
Accessibility
- Added ARIA landmarks for navigation and semantic elements for content.
Jumbotron
- Fixed an issue where background images would repeat.
Emergency Banner
- Added an emergency banner to show critical information on the site.

v2.3.0

Dependency updates
- Bootstrap updated to 4.3.1. See the Release Notes.
- Fabricator updated to latest version.
CSS
- Enabled Responsive Text globally, fixing a number of text issues within content types.
- Removed partials and modules that are not currently used.
Jumbotron
- Removed border radius from Jumbotrons by default.
Sidebar
- Improved design on small screens.
- Added a demo for a sidebar that does not collapse.
Documentation
- Added documentation for Social Icons.
- Added guidelines for Video Jumbotrons.

v2.2.0

This update brings some minor changes to content types and tooling:

Blocks
- Block elements had some redundancy with the Jumbotron element, so blocks have been deprecated and Jumbotrons should be used instead.
Jumbotrons
- Added a video jumbotron option.
- Added a block example for Jumbotron.
Homepage
- Adjusted the Homepage styling to better match 1.x.
Tooling and Assets
- JavaScript bundle is now minified.

v2.1.2

This update includes a variety of patches and improvements to content types, and refines typography across the site with the use of subpixel rendering.

Accordion
- On extra-long accordion titles, the text didn't line up quite right with the chevron.
Carousel
- Increased color contrast on Carousel controls.
- Darkened the caption for better readability.
Person Spotlight
- New Variant: Compact
  - Introduced a slightly smaller Person Spotlight variantion.
Pull Quote
- New Variant: Compact
  - Addressed the issue of reliance on a "profile" photo of the speaker. Now we have a new version that is just a large quoted text.
- Spacing and typography changes that help Pull Quote respond better to medium-sized devices, not blow up to huge sizes on desktop devices, and generally weigh better visually.
Sidebar
- On mobile, the sidebar menu is contained inside a dropdown made out of the top-level nav item. You can't actually click a link to go to that top-level section. We amended this by adding a link to the top-level item inside the menu, visible on mobile only. It's separated by a horizontal rule from the subsection links.

v2.1.1

This update reintroduces the legacy Header design, carousel enhancements, and various bugfixes.

Reverted the removal of Trajan from the typestack.
Refactored and refreshed the legacy header design to use Bootstrap 4 styles.
Introduces thumbnail carousel view and various fixes.
Dependency bump of Boostrap to 4.1.2.

Important Usage Notes

The redesigned header has been demoted and will be included in a future release. It is included for preview, testing, and feedback use only, and is not to be used at the time of this release.

v2.1.0

An incremental update with minor changes and bugfixes.

Improved search behavior
Developers: Updated NPM dependencies. CSS/JS assets are now in /public, and Webpack has been migrated to 4.0.

v2.0.4

An incremental update with minor changes and bugfixes.

Upgraded to Bootstrap 4.1.1
Improved Search
Updated Can We, Should We, Will We?

v2.0.3

An incremental update with minor changes and bugfixes.

Fixes inconsistent Person Spotlight styles.
Department Switcher
- Now a content type for easier use within prototypes.
- Fixed the markup on the Department Switcher demo page.
Updated to Bootstrap 4.1.
Carousel display fixes.

v2.0.2

An incremental update with small changes limited to some content types, including the header.

Agenda
- Completely redesigned content type with new styles and mobile compatibility
- Useful for a sequence of events, such as a day plan
Carousel
- Updated markup to latest Bootstrap
- Fixed slide indicators not showing up on demos
Header
- Changed the dividing bar (|) from a link to normal text
- Search
  - Fixed some input display issues caused by remotely updated Google Search code
Sidebar
- Various bug fixes

v2.0.1

Welcome to the redesigned SCU Design System!

Style Guide
- Restructured the Style Guide. Fixed broken code examples.
- Redesigned the landing page and navigation.
Accordion
- Restyled BS4 accordion (previously marked for deprecation) and introduced a new/improved accordion style
- Card-based accordions (per BS4) are still availabile via Accordion Cards.
Lists
- A new content type for lists with an ordered (numeric) set of items.
Sidebar
- A new, lightweight sidebar design has been adopted that will allow for greater responsive behavior.
- Adjustments to Sidebar behavior.
Templates and Demos
- Expanded number of demonstration layouts and updated their content types.
- Removed Kitchen Sink demo, which will return in a future release.
- Experimental:
  - New story display options: Story and Story (Cover Image).
  - Sidebar Breakout, a proof-of-concept layout that mixes sidebar layout with landing page layouts.
Dropdown Menus
- Modified the default BS4 dropdown behavior.
- Added support for all .navbars to have dropdown menu items
- Links with dropdown send user to page on click
- Dropdown pops out on hover over these links

v2.0.0

Bootstrap dependency bump to BS4 stable.

v2.0.0-beta.3

Bootstrap dependency bump to BS4 Beta 3.

v2.0.0-beta.2

Bootstrap dependency bump to BS4 Beta 2.
Updated grayscale palette to use a swatch.
Further improved the search experience in the new header.
Toolkit optimizations for developers.

v2.0.0-beta

Release Highlights:

Migrated from Bootstrap 3 to Bootstrap 4.
Audited content types.
Better CSS/JS performance.
Quicker toolkit run/refresh time.
New templates and documentation.
Deprecated Trajan and removed from font stack.

Bootstrap 4

Upgraded to Bootstrap 4

Content Type Changes

New Content Types
- Comparison Table
General Content Type Changes
- Updated Content Types for Bootstrap 4.
- One column/two column "module" designations are deprecated in favor of columns. See: Site Pointer, Infographics, List Items, more.
Agenda
- Simple responsive table (built with Bootstrap grid) which is intended for scheduling events that have several parts.
Block
- Full-width block content featuring a button and the option for an interactive background (e.g. a map)
Buttons
- Large "stroked" style is now deprecated.
- Maroon buttons are now deprecated (aliased to brand-primary to aid in the transition).
- Added new standard and outline buttons.
- Increased the options for the the existing SCU custom buttons.
- Added .btn-shadow class for a drop shadow effect on buttons.
Jumbotron (formerly Hero)
- Renamed Jumbotron and uses BS4-standard code.
- Transitioned .high-contrast to .has-dim for better accessibility.
- Added background options for Jumbotrons, including .bg-primary and others.
Image Gallery
- Renamed Carousel using BS4-shipped code.
- Otherwise unchanged in functionality, but has a slightly more modern look.
Image Grid
- Removed in favor of gutter-less grids.
Infographics
- Deprecated prix/window style.
- Created new styles based on BS badges.
Panels
- Panels are now deprecated in favor of Cards.
Sidebar
- A new, lightweight sidebar design has been adopted that will allow for greater responsive behavior.
Site Pointer
- New secondary styles for site pointers.
Person Spotlight
- Redesigned Person Spotlight to be more universal; removes overlay and introduces left/right card style.
- Removed "compact" version of person spotlight, as it utilizes media list code.
Pull Quotes
- Redesigned to be a more attention-grabbing type with space for a very large photo and quote.
Highlight (formerly Ribbons)
- Refactored ribbon code to work correctly across all browsers; renamed to Highlight. See Wrapping Highlighted Text.
Windowpane
- A new UI interaction has been added to Windowpanes. Using the .has-overlay class, an overlay will appear when hovering over a windowpane. This was often requested as a way to add more information about an item without going to a page. The overlay must have a call-to-action. This call to action will show on mobile devices where :hover states are not shown. The list-group option, though still supported, is not shown in the demo. These items would often overflow the Windowpane container.

Templates and Documentation

Typography
- Reset to Bootstrap standards, most notably, made headers less opinionated (no color or transform), headers now use a true bold font (used a browser-filled Trade Gothic previously)
- Added .legacy-headers class for matching the pre-2.0 header styles. More information.
Templates
- Added new footer system with flexibility for major-unit branding.
- New Department Switcher using select2.
- New headers and footers.
- New email template (Solid).
- New Cover Image layout.
Documentation
- Added Accessibility guidelines.
- Added Header and Footer Guidelines.
Landing Pages
- Landing page templates have been removed from the public build but are still available in local code branches; the licenses for these templates do not specify if they can be made available within our toolkit and have been removed.
- A number of prototypes have been removed from the Toolkit.

Fabricator and Build

./scss/ contains Sass files, which are identical to Less in purpose but with (very) slightly different syntax/execution in general
- ./scss/landing/
  - Contains landing page styles; these are compiled to their respective files (only landing-*.scss)
- ./scss/partials/
  - All of our (SCU) partial styles, just like they were in the original toolkit except Sass now
- ./scss/_components.scss
  - Bootstrap components we use on the site
- ./scss/toolkit.scss
  - Sass entry point; this is the file that gets compiled into toolkit.css. It "loads" Bootstrap into itself, then applies our partials on top, which lets us use Bootstrap but with our customizations (notably, color, typography, etc.)
- ./scss/variables.scss
  - Our Bootstrap variable overrides
./js/ contains
- ./js/compiled-bundle.js
  - Our custom JS output by Webpack to include Bootstrap, jQuery, etc. code which it depends on
- ./js/fabricator.js
  - Fabricator's Webpack output JS
HTML changes (views, etc.)
- Various changes to demos to make them work properly on Bootstrap 4
- Upgraded landing pages to their Bootstrap 4 versions
- Moved style guide to ./src/views/style-guide.html, which sources from ./src/materials/style-guide/*.html; this resolves a navigation issue caused by the style guide's original format

.eslintrc.json
- Moved from .eslintrc to help resolve strange issues with ESLint not working on some hosts

gulpfile.js
- Minimized complicated/large config JSON structure
- Removed bower tasks. bower scripts/styles are now loaded directly (removed from gulpfile)
  - Did the same for Bootstrap .scss
- Now utilizing run-sequence for tasks that should be executed successively rather than simultaneously
- Now utilizing done promise under gulp tasks which cannot have a simple return statement
- Swapped csslint for sass-lint; swapped jshint for eslint
- Changed scu.js and fabricator.js to properly both (together) use webpack for compilation
- Changed babel preset to es2016 from babili so scu.js won't be minified in development mode
- Added gulp-autoprefixer module which removes need to write browser-specific CSS prefix rules entirely
- Added task style:landing to compile landing page CSS in parallel (also: files are now <1 KB each)
- Added gulp-size to measure the size of output CSS files to ./css/

package.json
- Removed extraneous Node deps
- Added gulp-autoprefixer (CSS automatic vendor prefixes), gulp-size (track sizes of compiled CSS files)
- Now using this file to describe Babel preset instead of having a .babelrc

./src/assets/toolkit/scripts/scu.js
- Removed extraneous JS code which was meant for leftover parts of Bootstrap landing pages
- Upgraded to ES6 standard
- Removed header code (vast majority of this file)

v1.0.7

Released November 15, 2016

Removed extraneous images and prototypes from launched projects.
Added the Agenda content type.
Added Print Style Guide documentation.
Refactored headers and footers - both now use type instead of images.
Added new email templates.
Moved landing page JS out of global JS files.

v1.0.6

Updated Fontello - uses latest icon fonts available (most notably, Instagram is updated) and added the SCU seal.
Replaced the PNG logos in the header with the seal from the Fontello icon set.
Fixed the social demos to reintroduce the icon-based seal.

v1.0.5

Released Jul 26, 2016

New CSS for Cards based on Bootstrap 4.0-alpha2. The original CSS was based on alpha0, and some significant changes had been made in the meantime.
Removed "Profile" as a content type.
Content type demos now use holder.js.
Sidebar markup fixed, CSS adjustments made.
Hero content type added from White Whale's original design.
Global footer updated to use social media icons instead of static images (#54).
Added Image Grid content types.
Added .bg-img utility classes.

v1.0.4

Added spacer utility classes (more information on homepage)
Added new content types: Blocks, Ribbons, Statcards.
Landing page prototype: MBA
Added new Button styles (outline).
Updated the Roadshow Prototype to showcase some of the new padding, margin, and typography utility classes along with the new Ribbon content type.
Updated the Mission logos to be the correct ones (with doors) (thanks, Linda!)
Fixed a long-standing display issue with Person Spotlight in the Content Type view.
New Instagram logo (#52)

v1.0.3

Released June 17, 2016

Added the Windowpane content type and demo.
Added landing page templates: Bold, Minimal, and Startup.

v1.0.2

Reorganized our structure to be more helpful for developers that are looking to leverage our toolkit (#42)
Fixed Header issues (#46)

v1.0.1

Released May 20, 2016

Added some packages and dependencies to make the install process easier.
Added Pull Quote content type.
Added "Startup" style marketing landing page.
Changed the README to be slightly more helpful.

v1.0

First version of toolkit
Added content types, colors, typography demonstration, homepage demo, and other documentation.

Accessibility

Here's what you need to know about accessibility and code:

All code submissions to the Toolkit must be accessible.
WCAG 2.0/AA is the technical standard that we follow, but we should design with accessibility best practices in mind.
The University Accessibility Policy requires third-party content to be fully accessible.

The Toolkit has accessibility auditing capabilities (gulp a11y) that can be used to audit content. In addition to automated tools, pages should be checked using WebAIM WAVE. Pages and content should have 0 errors according to WAVE reports.

WAVE will not detect all accessibility issues. It is your responsibility to ensure that websites are accessible. A few errors that may not be detected by the tool are:

Color contrast issues. Use a Contrast Checker.
JavaScript interactivity and progressive enhancement
Effective contextual information, such as alt attributes, need to be descriptive.

If you have questions about accessible contributions to the toolkit or new websites, please contact Christina Olivas, Director of Digital Strategy.

Cloud Fonts

Our primary fonts, Trade Gothic, Bauer Bodoni Italic, and Trajan are provided by fonts.com.

Their license is for use on the official Santa Clara University website and affiliated properties and cannot be used for print materials under this license.

The Office of Marketing and Communication is currently reviewing available options for making these fonts available for print projects.

Getting Started

Header And Footer Guidelines

Header Guidelines

Our header system is designed to be user-friendly, accessible, and flexible. The header design has two primary layouts, core layout and customized layout:

Core Layout

The core layout is a general SCU header and navigation.

Used For:

SCU homepage
Prospective student-oriented pages
Non-academic departments and offices

Not used for:

Schools, initiatives, or centers (use Customized Layout)

Customized Layout

The customized layout is intended for use on pages with their own visual identity or where a segment-specific navigation improves user experience.

Customization Options

The custom layout is designed to accommodate a number of elements.

Branding

The branding section, by default, is a text-based logo set in Trade Light with the name of your school, department, or unit. Trade Bold, Bodoni Italic, and Bodoni Bold Italic are also typography options for centers or initiative-based websites. The maximum width of content in this area is 280px.

This header is designed to flex vertically if your content exceeds the height of the bar. If you are looking to use a graphic, it should be 280px wide.

Navigation Options

We have tested the header with up to seven (7) navigation items, and encourage you to use up to that amount. The customized footer also contains up to nine (9) different navigation elements.

See the Navbar section in Bootstrap's documentation for more details on what the navigation supports, including calls-to-action, inline text, and other elements.

Do not:

Modify or remove the "Santa Clara University" branding/homepage link in the topmost bar.
Remove or change the Search icon or modify the search placeholders or behavior.

Footer Guidelines

Similar to the header system, the redesigned footers offer a core layout and a customized layout.

Core Footer

The core footer contains SCU's contact information, social media links, and general links. This layout should not be modified.

Customized Footer

The customized footer offers unit-specific branding, including customizable contact information and social media links to your pages.

There is also three columns of link space available for your use, and we encourage you to put unique links into this area and avoid duplication with your header.

Here are some examples of common pages that work well in a footer:

About
Faculty Listings
Staff Listings
Contact Us

Do not:

Modify or remove the Santa Clara University branding/homepage link in the bottom-most bar.
Remove or change the Login, Facebook, or Twitter icons in the bottom-most bar.
Remove the Accessibility link or copyright information.

Landing Pages

Draft Guidelines

We recognize that sometimes user needs and business goals necessitate (and sometimes require) a unique digital experience. In anticipating this need, we have integrated landing pages into our design language that can help address any needs not covered by our current design.

Here are some guidelines for landing pages:

Every design project should be attempted in our pattern library. Using existing resources helps us keep our brand consistent across various experiences. We should attempt to expand the design language to accommodate requests before selecting a landing page.
There must be a demonstrated business or user need that justifies a new design. Examples of this include initiative-based websites or special projects.
Landing pages still play by the brand rules. That means colors, fonts, and other design elements must be preserved.
OMC has the ultimate approval for new landing page rollouts. We will work with you to determine if using one of our landing page designs is the best route given your user tasks and business goals.

Print Style Guide

Our guidelines for print projects are part of our Visual Identity Elements :

University Logos - Guidelines and correct configurations for SCU's most important visual branding tool.
The SCU Seal - Usage applications for the University's official, iconic symbol, having historical Jesuit roots.
Wordmark Use - The word-only version of our logo and its functions for enhancing the SCU brand.
Official Colors - The University's color palette of core and accent color options to support the SCU brand.
Fonts for Print - The official primary and secondary fonts that support SCU's typographic identity.
Templates - Page layout examples and available templates for internal department self-publishing options.