PHPackages uconn/banner - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. uconn/banner ActiveLibrary[Utility & Helpers](/categories/utility) uconn/banner ============ The UConn Banner - Branding for the top of your web pages. 4.2.2(2mo ago)82.2k6[12 PRs](https://github.com/uconn/banner/pulls)2MITHTML Since Apr 21Pushed 2mo ago3 watchersCompare [ Source](https://github.com/uconn/banner)[ Packagist](https://packagist.org/packages/uconn/banner)[ RSS](/packages/uconn-banner/feed)WikiDiscussions master Synced 1w ago READMEChangelog (9)Dependencies (10)Versions (47)Used By (2) [![Screenshot](https://camo.githubusercontent.com/e864b13098555fa8c64f5b847a88cd1b606f0ad2f72261a26fb6773954194450/687474703a2f2f6272616e642e75636f6e6e2e6564752f77702d636f6e74656e742f75706c6f6164732f73697465732f313036302f323031352f30312f7765622d706167652d636f6e74656e742d616c69676e2e6a7067)](https://camo.githubusercontent.com/e864b13098555fa8c64f5b847a88cd1b606f0ad2f72261a26fb6773954194450/687474703a2f2f6272616e642e75636f6e6e2e6564752f77702d636f6e74656e742f75706c6f6164732f73697465732f313036302f323031352f30312f7765622d706167652d636f6e74656e742d616c69676e2e6a7067) UConn Banner ============ [](#uconn-banner) A (UConn brand) standards-compliant implementation of the University's web banner. History ------- [](#history) As with most of our [web branding](http://brand.uconn.edu/standards/web/) 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](http://aurora.uconn.edu/) (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: **versions 1-3 are deprecated** 3.x (deprecated)4.x- Added support for a School/College type banner. This includes support for optional mobile menu and popups.- Added support for white banner with blue text- 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](https://11ty.dev)- 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- Added support for basic cookie consent bannerWho should use this? -------------------- [](#who-should-use-this) Anyone building a new \*.uconn.edu website that won't be hosting on the Aurora platform. Site Requirements (Recommended) ------------------------------- [](#site-requirements-recommended) - [Conditional HTML Classes for Internet Explorer](http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/) Usage: ------ [](#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](https://github.com/uconn/banner/archive/master.zip) and use the assets in the "\_site" directory to start building your website. 2. **PHP** - [Use Composer to embed the banner in your page](https://github.com/uconn/banner/wiki/Banner-rendering-with-PHP). 3. **npm** - Include as a [node\_module](https://www.npmjs.com/package/uconn-banner) with `npm install uconn-banner --save-dev`, use the HTML/CSS/JS from the "\_site" directory. Tests ----- [](#tests) This repo uses Pest to test the attributes of the banner. Tests can be run with `./vendor/bin/pest tests/Unit/BannerTest.php`. Contributing / Development -------------------------- [](#contributing--development) Clone/download this repo and use [11ty](http://11ty.dev/). ``` # 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 in your web browser to view your changes. ### Javascript [](#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. ``` ``` 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](js/banner.js) file and [menu-demo.js](js/menu-demo.js) files. Deployment to github pages -------------------------- [](#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 ------------- [](#static-output) To create a static html version of the banner, you can use the included [Generator.php](src/Banner/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 `. For help or to see a list of options - `php src/Banner/Generator.php --help`. ### Health Score 55 — FairBetter than 98% of packages Maintenance86 Actively maintained with recent releases Popularity25 Limited adoption so far Community23 Small or concentrated contributor base Maturity76 Established project with proven stability Bus Factor1 Top contributor holds 55.5% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~141 days Recently: every ~157 days Total 24 Last Release 70d ago Major Versions 1.1.0.x-dev → v2.0.02017-06-01 2.0.5 → 3.0.02020-01-16 3.0.5 → 4.0.02024-01-12 ### Community Maintainers ![](https://www.gravatar.com/avatar/1696f9cd69ce9a7cd0679a0ab8a9801a3990307c14a2d302803cfe13d5e47b07?d=identicon)[bdaley](/maintainers/bdaley) ![](https://www.gravatar.com/avatar/7248a69d9692bf03eba3f8420de1188cbaecafa1f72caa5581fc8bd9c3c7079d?d=identicon)[aberkow](/maintainers/aberkow) ![](https://www.gravatar.com/avatar/2c1f4515f489466903a28e72fbcf8a2a5e8ba71acac0a4bc9cb753e1d5bd19ee?d=identicon)[briankelleher](/maintainers/briankelleher) --- Top Contributors [![aberkow](https://avatars.githubusercontent.com/u/4681584?v=4)](https://github.com/aberkow "aberkow (122 commits)")[![bdaley](https://avatars.githubusercontent.com/u/382814?v=4)](https://github.com/bdaley "bdaley (73 commits)")[![jrthib](https://avatars.githubusercontent.com/u/750551?v=4)](https://github.com/jrthib "jrthib (15 commits)")[![briankelleher](https://avatars.githubusercontent.com/u/7377399?v=4)](https://github.com/briankelleher "briankelleher (8 commits)")[![cwarren714](https://avatars.githubusercontent.com/u/6865072?v=4)](https://github.com/cwarren714 "cwarren714 (2 commits)") ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/uconn-banner/health.svg) ``` [![Health](https://phpackages.com/badges/uconn-banner/health.svg)](https://phpackages.com/packages/uconn-banner) ``` ### Alternatives [selvinortiz/doxter Slick markdown editor and smart text parser. 248.9k](/packages/selvinortiz-doxter)[jakewhiteley/php-sets An implementation of a Java-like Set data structure for PHP. A Set is an iterable data structure which allows strict-type storage of unique values. 1827.5k](/packages/jakewhiteley-php-sets)[marciocamello/yii2-x-editable X-editable extensions for Yii 2, based in X-editable with Bootstrap 228.8k2](/packages/marciocamello-yii2-x-editable) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)