Starter Template

A basic starting point for your HTML markup or theme templates

This template has only baseline CSS and JavaScript loaded. A default right sidebar layout is used, but can be customized using the body classes below.

Browser Support

For the 2017 CSS Framework, it can be assumed that all reasonably-modern browsers are supported. This would primarily include recent versions of Safari (desktop and iOS), Chrome (desktop and Android), Firefox, and Edge. More esoteric browsers like Opera and IE Mobile are untested, but will typically work well if up-to-date. Internet Explorer 11 is supported, but all older versions are not. It's possible that designs will work acceptably well on older versions of these browsers. However, web hosting companies (like Pantheon, which hosts many of our Drupal sites) are moving aggressively toward secure hosting with newer standards (TLS 1.1+), which make secure-hosted websites 100% incompatible with older browsers that do not support these standards.

As of September 2017, this means the following browsers cannot connect to our secure-hosted sites:

• Any version of Internet Explorer before IE11 (about 4 years ago)
• Safari on any MacOS prior to 10.9 (about 4 years ago)
• iOS older than 5 (~6 years ago - a security pioneer!)
• Android's default browser prior to v5 (only about 3 years ago - yikes!)
• Chrome about 5 years ago
• Firefox a little under 4 years ago

Given this, and the overall passage of time, we've decided to drop support for older browsers and embrace modern CSS options like Flexbox layout.

CSS Class Options

Body Classes BODY.class

Cornell Branding Banner

• .cu-red - Overrides the default light gray banner to be red with white logo. Affects both 45px and Large Seal options.
• .cu-black - Overrides the default light gray banner to be black with white logo. Affects both 45px and Large Seal options.
• .cu-gray - Overrides the default light gray banner to be dark gray with white logo. Affects both 45px and Large Seal options.
• .cu-45 - Renders as a ~45px banner with small Cornell logo (this is also the default if no body class is defined). Headings appear below the banner. Note: This class is mutually exclusive with .cu-seal.
• .cu-seal - Renders as a taller banner with a large standalone Cornell seal. Headings appear to the right of the seal. Note: This class is mutually exclusive with .cu-45.
• .cu-seal-right - Added to .cu-seal to swap the left and right positions of the seal and headings.
• .cu-45-mobile - Added to .cu-seal to switch to 45px style at mobile sizes.
• .cu-45-mobile-red - Added to .cu-seal-mobile also activate the red color option on the 45px banner at mobile sizes.
• .no-main-nav - When .cu-seal is in use and no main navigation bar is planned, this class can be included to apply some subtle adjustments to the Cornell header.

Layout

• .sidebar - Activates a 65/35 two-column layout, applied to any container pairs with either a .primary (~65% width) or .secondary (35% width) class. This is primarily used by the main article, where the sidebar (aligned left by default) is comprised of #sidebar-top and #sidebar-bottom. They appear as a single column, but at mobile size, #sidebar-top appears above the main article while #sidebar-bottom appears below. The same proportion can be used elsewhere in the design, wherever .primary and .secondary are paired. Examples of this can be seen in the supplementary and footer regions below.
• .sidebar-right - Displays the sidebar on the right. (requires .sidebar)
• .sidebar-tint - Sidebar is tinted a light gray, and padding adjusted. (requires .sidebar)
• .sidebar-tint-edge - Sidebar tinting is continued horizontally to the edge of the screen. (requires .sidebar and .sidebar-tint)
• .sidebar-tint-fade - Sidebar tinting fades to white as it approaches the top left corner. This can be useful for designs without a solid, dark nav bar. (requires .sidebar and .sidebar-tint, and works best with .sidebar-right and .sidebar-tint-edge)
• .one-column-article - Creates a single column design with a modern news article feel (limited max content width, figures and blockquotes offset into the gutters). As a compliment to this, a .full-window image class was added to make images within the main article (typically a WYSIWYG region) break out of the content container to the full width of the window. Both the .one-column-article and the .full-window image should not be paired with any of the sidebar layouts and options above.

Cornell Seal Color H1.cu-logo.class

• .black - Overrides the default red seal with a black version. This works on both 45px (body.cu-45) and Large Seal (body.cu-seal) banners. Be careful, as this also overrides the white version used on red, black, and gray Cornell themes.

College/School Unit Signature (Advanced Option)

Renders a responsive, modernized version of the classic Cornell unit signature. This is a rarely-needed option, since only college-level units at Cornell are allowed to utilize a branding lockup with the University seal. And of those units, only a subset will want this traditional layout. An SVG graphic of the unit name must be created, and two markup changes must be made:

• .cu-unit-signature - Add this class to DIV.cu-brand.
• .cu-unit-lockup - A DIV with this class replaces DIV.cu-unit or is added as a previous sibling if .cu-unit will still be utilized.

Unit Image

To match the expected style, unit logotype images must be made with Iowan Old Style 35pt, and the SVG canvas should match the size of the Cornell University logotype (480x36) so that character sizes scale uniformly. When done correctly, the final rendering will look like the image below:

Curios

What is .cu45-helper?

An extra div (<div class="cu45-helper"></div>) appears in the Cornell Branding header, to facilitate the use of the 45px banner while still allowing unit heading text to be displayed. A brief technical explanation is that .cu45-helper is a full-viewport-width, relative target for an absolutely-positioned ~45px :before pseudo class, allowing unit headings to drop below the Cornell logo without requiring separate HTML markup or hardcoded heights.