brand-primaryto aid in the transition).
.has-dimfor better accessibility.
.has-overlayclass, 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
:hoverstates are not shown. The
list-groupoption, though still supported, is not shown in the demo. These items would often overflow the Windowpane container.
./scss/ contains Sass files, which are identical to Less in purpose but with (very) slightly different syntax/execution in general
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.)
HTML changes (views, etc.)
./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
.eslintrcto help resolve strange issues with ESLint not working on some hosts
bowerscripts/styles are now loaded directly (removed from gulpfile)
run-sequencefor tasks that should be executed successively rather than simultaneously
gulptasks which cannot have a simple return statement
fabricator.jsto properly both (together) use
toolkit.jswon't be minified in development mode
gulp-autoprefixermodule which removes need to write browser-specific CSS prefix rules entirely
style:landingto compile landing page CSS in parallel (also: files are now <1 KB each)
gulp-sizeto measure the size of output CSS files to
gulp-autoprefixer(CSS automatic vendor prefixes),
gulp-size(track sizes of compiled CSS files)
alpha0, and some significant changes had been made in the meantime.
Here's what you need to know about accessibility and code:
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:
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.
Not used for:
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.
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:
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:
Our guidelines for print projects are part of our Visual Identity Elements :