An incremental update with small changes limited to some content types, including the header.
- Completely redesigned content type with new styles and mobile compatibility
- Useful for a sequence of events, such as a day plan
- Updated markup to latest Bootstrap
- Fixed slide indicators not showing up on demos
- Changed the dividing bar (|) from a link to normal text
- Fixed some input display issues caused by remotely updated Google Search code
Welcome to the redesigned SCU Design System!
- Style Guide
- Restructured the Style Guide. Fixed broken code examples.
- Redesigned the landing page and navigation.
- 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.
- A new content type for lists with an ordered (numeric) set of items.
- 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.
- 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
- Bootstrap dependency bump to BS4 stable.
- Bootstrap dependency bump to BS4 Beta 3.
- 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.
- 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.
Content Type Changes
- New Content Types
- 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.
- Simple responsive table (built with Bootstrap grid) which is intended for scheduling events that have several parts.
- Full-width block content featuring a button and the option for an interactive background (e.g. a map)
- 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.
.btn-shadow class for a drop shadow effect on buttons.
- Jumbotron (formerly Hero)
- Renamed Jumbotron and uses BS4-standard code.
.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.
- Deprecated prix/window style.
- Created new styles based on BS badges.
- Panels are now deprecated in favor of Cards.
- 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)
- 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
- 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)
.legacy-headers class for matching the pre-2.0 header styles. More information.
- 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
- Contains landing page styles; these are compiled to their respective files (only
- All of our (SCU) partial styles, just like they were in the original toolkit except Sass now
- Bootstrap components we use on the site
- 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.)
- Our Bootstrap variable overrides
- Our custom JS output by Webpack to include Bootstrap, jQuery, etc. code which it depends on
- 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
- Moved from
.eslintrc to help resolve strange issues with ESLint not working on some hosts
- Minimized complicated/large
config JSON structure
bower scripts/styles are now loaded directly (removed from gulpfile)
- Did the same for Bootstrap
- 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
fabricator.js to properly both (together) use
webpack for compilation
babel preset to
toolkit.js won't be minified in development mode
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)
gulp-size to measure the size of output CSS files to
- Removed extraneous Node deps
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
- 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)
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.
- 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.
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
- 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.
.bg-img utility classes.
- 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)
Released June 17, 2016
- Reorganized our structure to be more helpful for developers that are looking to leverage our toolkit (#42)
- Fixed Header issues (#46)
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.
- First version of toolkit
- Added content types, colors, typography demonstration, homepage demo, and other documentation.
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.
- 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 Nic Bertino, Director of Digital Strategy.
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.
Our header system is designed to be user-friendly, accessible, and flexible. The header design has two primary layouts, core layout and customized layout:
The core layout is a general SCU header and navigation.
- SCU homepage
- Prospective student-oriented pages
- Non-academic departments and offices
Not used for:
- Schools, initiatives, or centers (use 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.
The custom layout is designed to accommodate a number of elements.
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.
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.
- 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.
Similar to the header system, the redesigned footers offer a core layout and a customized layout.
The core footer contains SCU's contact information, social media links, and general links. This layout should not be modified.
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:
- Faculty Listings
- Staff Listings
- Contact Us
- 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.