uconn / banner
The UConn Banner - Branding for the top of your web pages.
Installs: 2 037
Dependents: 2
Suggesters: 0
Security: 0
Stars: 8
Watchers: 3
Forks: 5
Open Issues: 12
Language:HTML
Requires
- liquid/liquid: ^1.4
Requires (Dev)
- league/climate: ^3.8
- pestphp/pest: ^2.30
- vanilla/garden-cli: ^3.1
- dev-master
- 4.0.2
- 4.0.1
- 4.0.0
- 3.0.5
- 3.0.4
- 3.0.3
- 3.0.2
- 3.0.1
- 3.0.0
- 2.0.5
- 2.0.4
- 2.0.3
- 2.0.2
- 2.0.1
- v2.0.0
- v1.2.0
- 1.1.0.x-dev
- v1.1.0
- v1.0.5
- v1.0.4
- dev-update
- dev-dependabot/npm_and_yarn/webpack-5.76.0
- dev-dependabot/npm_and_yarn/json5-2.2.3
- dev-dependabot/npm_and_yarn/luxon-2.5.2
- dev-dependabot/npm_and_yarn/qs-and-browser-sync-6.11.0
- dev-dependabot/npm_and_yarn/engine.io-6.2.1
- dev-dependabot/bundler/nokogiri-1.13.9
- dev-dependabot/bundler/addressable-2.8.1
- dev-dependabot/bundler/tzinfo-1.2.10
- dev-dependabot/npm_and_yarn/shell-quote-1.7.3
- dev-dependabot/npm_and_yarn/glob-parent-5.1.2
- dev-dependabot/npm_and_yarn/hosted-git-info-2.8.9
- dev-dependabot/bundler/activesupport-6.0.3.1
- dev-develop
- dev-feature/options
- dev-feature/design-update
- dev-health
- dev-feature/tooltip-under
- dev-feature/tooltip-before
- dev-new_design
This package is auto-updated.
Last update: 2024-10-18 14:50:15 UTC
README
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:
Who should use this?
Anyone building a new *.uconn.edu website that won't be hosting on the Aurora platform.
Site Requirements (Recommended)
Usage:
There are a number of ways to use this code. Here are just a few:
- HTML - You can download the latest zip file and use the assets in the "_site" directory to start building your website.
- PHP - Use Composer to embed the banner in your page.
- 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
.