UConn Banner

A (UConn brand) standards-compliant implementation of the University's web banner.

History

As with most of our web branding efforts, University Communications has teamed with the UITS Web Dev Lab to create a new look for the University's web presence. While the majority of university departments and organizations can be brought into brand compliance through the use of the Aurora (WordPress) platform courtesy of UITS, there is still a need for static templates. This project attempts to bridge that gap.

As of January 16, 2020, the master branch of this repository represents 3.x of the banner. The key differences are outlined below:

1.x (deprecated)	2.x (deprecated)	3.x	4.x
- Designed for use with Bootstrap	- Bootstrap classes removed	- Added support for a School/College type banner. This includes support for optional mobile menu and popups.
- Embedded media queries intended to mirror Bootstrap	- No media queries. User must define them.	- Added support for white banner with blue text
- npm compatible	- composer compatible	- Added support for popups with search box
		- Added a php generator to quickly create static banners
			- Updated dependencies and build process
			- Deprecated jekyll in favor of 11ty
			- Removed support for Compass
			- Improved support for level 1 and 2 site titles
			- Download buttons for banner markup and assets
			- Added typescript support to project

Who should use this?

Anyone building a new *.uconn.edu website that won't be hosting on the Aurora platform.

Site Requirements (Recommended)

• Conditional HTML Classes for Internet Explorer

Usage:

There are a number of ways to use this code. Here are just a few:

1. HTML - You can download the latest zip file and use the assets in the "_site" directory to start building your website.
2. PHP - Use Composer to embed the banner in your page.
3. npm - Include as a node_module with npm install uconn-banner --save-dev, use the HTML/CSS/JS from the "_site" directory.

Tests

This repo uses phpunit to test the attributes of the banner. Tests can be run with ./vendor/bin/phpunit tests/Banner/BannerTest.php --bootstrap vendor/autoload.php.

Contributing / Development

Clone/download this repo and use 11ty.

	
# Clone and open
git clone https://github.com/uconn/banner.git
cd banner

# use [nvm](https://github.com/nvm-sh/nvm)
nvm use

# Install npm dependencies
npm install

# Install composer dependencies
composer install


# Run the develop task
npm run develop

Open up http://localhost:8080/ in your web browser to view your changes.

Javascript

If you plan to use this banner with the mobile menu enabled, please make sure to read the following carefully. You must implement your own mobile menu. While the banner provides a menu toggle, it is (almost) completely un-opinioated when it comes to the markup or style for the menu. The only thing you must do is make sure that the id of the component that wraps the menu matches the aria-controls attribute of the menu toggle button.

<!-- banner -->
<button 
  class="btn mobile-menu-btn"
  id="banner-mobile-button"
  aria-haspopup="true"
  aria-controls="mobile-menu-id"
  aria-expanded="false"
>
<!-- end banner -->

<!-- wherever the mobile menu is... -->
<nav id="mobile-menu-id">
  <!-- menu markup -->
</nav>
<!-- end mobile menu -->

When the button is clicked, it will dispatch a custom javascript event called ucBannerMenuState that can be listened to. This lets you control the menu from any other script.

// banner.js

// custom event 
var ucBannerMenuStateEvent = new CustomEvent('ucBannerMenuState', {
  detail: { isOpen: false },
  bubbles: true
})

// this is part of the click event listener on the banner buttons
function toggleMenu(button) {
  var isExpanded = button.getAttribute('aria-expanded') === 'true' ? true : false
  // switch the state of the emitted event
  ucBannerMenuStateEvent.detail.isOpen = !isExpanded
  // dispatch the event
  button.dispatchEvent(ucBannerMenuStateEvent)
  // handle the rest of the toggle
  !isExpanded ? expand(button) : collapse(button)
  return true
}
// end banner.js

// ...some other script in a different part of the project
var menuToggle = document.querySelector('#banner-mobile-button')
var mobileMenu = document.querySelector('#mobile-menu-id')

// listen for the custom event
document.addEventListener('ucBannerMenuState', function(evt) {
  // toggle a class based on the state of the event
  evt.detail.isOpen ? 
    mobileMenu.classList.add('active') : 
    mobileMenu.classList.remove('active');
})

For a complete example, consult the unminified banner.js file and menu-demo.js files.

Deployment to github pages

	
# Run the build task
nvm use && npm run develop

# push just the _site directory to gh-pages
git subtree push --prefix _site origin gh-pages

Static output

To create a static html version of the banner, you can use the included Generator.php file. It covers the full range of options available to the Banner. You can use the generator with the command php src/Banner/Generator.php <options>. For help or to see a list of options - php src/Banner/Generator.php --help.