Main Content

Web Standards

Getting Started

Digital content must adhere to University standards and be accurately reflected across all platforms. The Office of Website Management functions as TCU’s in-house consultant for Website development and emerging technology projects. The team is responsible for strengthening TCU’s online presence and brand identity, and manages website hosting, domain names, accessibility, legal and compliance requirements.

TCU websites and pages are built within WordPress, the University’s official content management system, and utilize a parent-child theme strategy, where standardized headers and footers (parent themes) are complemented by a fully customizable center (child theme) space.

The Web components are built on a solid HTML foundation to ensure a functional user interface across all browsers. Newer browsers will render the most robust user experience, but critical information is accessible on any browser, even if JavaScript fails.

Child Themes

WordPress child themes inherit the functionality of the web standards (parent) theme, but allow you to modify and enhance the functionality, while protecting your changes from future updates. Child themes are highly recommended if you are making any changes to the web standards theme, including basic style.css changes.

To give you a head start, we have created a fully working child theme template that you may download. You are welcome to modify the child theme as appropriate for your school/college within TCU’s standards.

Upload your child theme via SFTP or via the WordPress dashboard and click activate when the theme is on your site.

Child Theme Starter Repository

 

CSS architecture

  • The CSS foundation of this theme is built with the Sass preprocessor language
  • CSS selectors are prefixed with tcu (for example: .tcu-button)
  • Our CSS uses a Block, Element, Modifier (BEM) approach
  • Uses nesting, when appropriate, with a maximum of three levels
  • Global variables are defined in the _variables.scss file
  • CSS helper classes are defined in the _helpers.scss file
  • Media queries are built with a mobile-first approach
  • Spacing units are primarily defined as rem or em units so they scale appropriately with text size. Pixels can be used to detail work. (Example: 3px borders)

Where things are located

  • SCSS styles are located in: library/scss (/core, /elements, /components)
  • Compiled CSS is located in: library/css/style.css (We use the minified version in production styles.min.css)
  • SCSS helper classes are located in: library/scss/core/_helpers.scss
  • CSS Grid is located in: library/scss/layout/_grid.scss
  • JS for front-end is located in: library/js (jquery.meanmenu.js, tcu.menu.js, scripts.js). All JS files are concatenated into one file located in: library/js/concat/all-tcu-scripts.js
  • Fonts are located in: library/css/fonts
  • Images and icons are located in: library/images and library/images/svg

Browser support

The standards are responsive on all newer browsers through progressive enhancement, but officially support Internet Explorer 11 and up, and the latest versions of Chrome, Firefox and Safari.

Web Visual Guide

While many programs maintain unique brand identities, this guide offers a single visual style, which can be applied to a broad range of university digital platforms. The web visual guide offers a clean, modern design that meets high standards of visual accessibility, while promoting a sense of credibility, trust and warmth.

The color palette and typography provide consistency and flexibility to meet a range of layout needs—from polished marketing pages to content-heavy digital services. The palette’s purple, Horned Frog grey and black can be applied generously or sparingly to create a distinctly TCU design with adaptability.

You may need to customize this web visual guide, but we encourage you to incorporate as much consistency in look, feel and usability as possible. We strongly recommend you use the TCU Styleguide when writing language for TCU.

Web Visual Files