PHPackages                             unb-libraries/unb\_lib\_theme - 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. unb-libraries/unb\_lib\_theme

ActiveDrupal-theme[Utility & Helpers](/categories/utility)

unb-libraries/unb\_lib\_theme
=============================

Drupal Bootstrap 4.x Base Theme For UNB Libraries Branding.

177.5k↓46.6%Twig

Since Feb 28Pushed 6mo ago6 watchersCompare

[ Source](https://github.com/unb-libraries/unb_lib_theme)[ Packagist](https://packagist.org/packages/unb-libraries/unb_lib_theme)[ RSS](/packages/unb-libraries-unb-lib-theme/feed)WikiDiscussions 9.x-4.x Synced 1mo ago

READMEChangelogDependenciesVersions (3)Used By (0)

[![UNB Libraries Search](documentation/images/unb-libraries-screenshot.png)](documentation/images/unb-libraries-screenshot.png)

UNB Libraries Theme.
====================

[](#unb-libraries-theme)

Drupal 8 and 9 theme based on Bootstrap Barrio 5.1.x theme ([https://www.drupal.org/project/bootstrap\_barrio](https://www.drupal.org/project/bootstrap_barrio)).
Note the theme branch 9.x segment refers to Drupal 9.x while the 4.x segment refers to Bootstrap 4. The dev-8.x-4.x branch is intended to use for projects using Drupal 8.x.

License
-------

[](#license)

- unb\_lib\_theme is licensed under the MIT License:

    -
- Attribution is not required, but much appreciated:

    - `unb_lib_theme by UNB Libraries`

How to Use
----------

[](#how-to-use)

This theme is not intended to be used directly but instead as a **parent theme** that provides UNB Libraries-branded header/footer/assets etc. for a project's subtheme. Requirements/dependencies are as follows:

- add `Bootstrap Barrio`, `UNB Libraries Calendar Hours Client` and `UNB Libraries Banner Alerts`, along with `UNB Libraries theme`to your project repo build/composer.json file's require section:

    ```
    "require": {
      …
      "drupal/bootstrap_barrio": "5.1.10",
      "unb-libraries/alert_scheduler": "dev-8.x-1.x",
      "unb-libraries/calendar_hours": "dev-9.x-1.x",
      "unb-libraries/unb_lib_theme": "dev-9.x-4.x",
      …
    }
    ```

    The *emergency banner* and *banner image library hours* sections of the default page template header section depend on UNB Libraries' *Alert Scheduler* and *Calendar Hours Client*projects respectively to function as intended.

    For more information visit  and [https://github.com/unb-libraries/calendar\_hours](https://github.com/unb-libraries/calendar_hours)
- add `Twitter Bootstrap` 4.5.x to your **project repo's** root `composer.json` file's `require-dev` section. This will provide the SASS code necessary (within the `vendor` folder) for your subtheme dev environment for extending/overriding Bootstrap variables/functions/etc. Example:

    ```
    "require": {
      …
      "twbs/bootstrap": "~4.5.3",
      …
    }
    ```

Note that the 4.5.3 branch was selected to match the version used by Bootstrap Barrio 5.1.x.

UNB Libraries Administration Theme Enhancements
-----------------------------------------------

[](#unb-libraries-administration-theme-enhancements)

This theme contains various stylistic improvements to Drupal core's `Seven` administration theme defined in the `src/scss/admin-overrides-seven.scss` Sass file. These style rules are primary intended for UNB Libraries projects. Should you use `Seven` as your project's administration theme and want to incorporate these overrides please proceed as follows:

- create an `admin-style.scss` files inside your subtheme's `src/scss` folder
- add the following import at the top of this file: ```
    @import '../../../../../vendor/unb-libraries/unb_lib_theme/src/scss/admin-overrides-seven.scss';
    ```
- define a library for the administration styles in your subtheme's `SUBTHEMENAME.libraries.yml` file: ```
    admin-styling:
      version: VERSION
      css:
        theme:
          dist/css/admin-style.css: { minified: true }

    ```
- finally, you may attach the admin library assets to an administration form in code using: `$form['#attached']['library'][] = 'lib_unb_ca/admin-styling';`

This will compile (minimized) to `dist/css/admin-style.css`. If you wish to add additional project-specific administration rules simply add them **after** your `@import` line.

### Utility Classes

[](#utility-classes)

Several utility classes are available for use for your convenience (see src/scss/custom/\_utility.scss):

- #### Hover Grow

    [](#hover-grow)

    - To transitionally scale an element by 3% on hover/focus, apply `hover-grow` class to the element
        **Example:** ``
        See:
    - To transitionally scale an element **horizontally** (i.e. width) by 3% on hover/focus, apply `hover-grow-h` class to the element
        **Example:** ``
    - To transitionally scale an element **vertically** (i.e. height) by 3% on hover/focus, apply `hover-grow-v` class to the element
        Example: ``
- #### Expanded/Collapsed Icons

    [](#expandedcollapsed-icons)

    - To add a Font Awesome square caret (i.e. upward/downward-facing arrow) icon to the left of toggle buttons to indicate expandable/collapsible sections simply apply a header-icon-h class to the parent element of the buttons.

        **Example:** ``

        Note this feature relies on the **aria-expanded** attribute - for info on Bootstrap buttons + aria see: )
- #### Linked images

    [](#linked-images)

    - To add a standardized image link visual hover/focus effect, add the `img-link` class either to the parent `` tag of the image or to the parent container of the `` tag itself

        **Example** *(class added to parent tag of <a>)*:

        ```

          >

        ```

        This will reduce the opacity of the linked image using a 3ms transition effect upon hover and focus.
- #### Custom opacities

    [](#custom-opacities)

    - To add a transparent quality to a container apply one of UNB Library Theme's custom opacity classes

        **Example:** *(slightly see the content behind an affixed navbar)*
        ``

        [![](documentation/images/opacity-utlility.png)](documentation/images/opacity-utlility.png)

        Valid class values, from least to most opaque (i.e. most to least translucent), are:
        - opacity-25
        - opacity-50
        - opacity-75
        - opacity-80
        - opacity-85
        - opacity-90
        - opacity-95
- #### Inline lists

    [](#inline-lists)

    - To change the default display behaviour of an unordered list from block to inline block, wrap the ullist element with a container that has the wrapper-list-inline class applied.

    ```

      Quick Links:

        Renew Books / My Account
        Document Delivery
        Recalls
        Floor Plans
        Borrow Tech & Tools

    ```

    [![](documentation/images/list-inline-utility-quicklinks.png)](documentation/images/list-inline-utility-quicklinks.png)

Style Guide Suggestions
-----------------------

[](#style-guide-suggestions)

### Webforms

[](#webforms)

- UNB Libraries forms adopt a standardized look and feel for attributes such as background, border, button colors, etc - this is done by wrapping the form field (including form action buttons)) inside a container with a `theme-dark` class applied to it: [![Sample UNB Libraries webform](documentation/images/webform-sample.png)](documentation/images/webform-sample.png)
- **Note:** to implement this using Webform UI, add a parent *Container* element, edit it, switch to the *Advanced* tab and expand the *Element Attributes* section. Next, choose the *custom* element CSS class and enter theme-dark in the conditional field. Finally, save the change.

    [![Sample UNB Libraries webform](documentation/images/webform-container-class.png)](documentation/images/webform-container-class.png)
- The **Privacy** footer is used across most webforms and is implemented using a Bootstrap alert:

    ```

      Privacy: UNB Libraries will only use the comments you send to
      improve our website and services. We are not storing any personal information.

    ```
- Related fields are typically grouped together as children of a **Fieldset** element container within the Webform "Build" UI.

    [![Sample UNB Libraries webform](documentation/images/webform-fieldset-container-wrapper.png)](documentation/images/webform-fieldset-container-wrapper.png)

    This triggers custom style attributes for the form display with regards to font-size, font-weight, whitespace, etc

    [![Sample UNB Libraries webform](documentation/images/webform-fieldset-wrapper-display.png)](documentation/images/webform-fieldset-wrapper-display.png)

Notes
-----

[](#notes)

- This subtheme uses Bootstrap Barrio as a base theme, specifically the 5.1.x branch which, in turn, employs Bootstrap 4 (Barrio 5.5.x uses Bootstrap v5):

    - [https://www.drupal.org/project/bootstrap\_barrio](https://www.drupal.org/project/bootstrap_barrio)
- As of Bootstrap Barrio v5.1.10, Bootstrap v4.5.x is specifically bundled (i.e. do not use v4.6.x - see global-styling theme library)

    - Subthemes compiling sass should add the following `require-dev` package to `composer.jason`:
        "twbs/bootstrap": "~4.5.3",
    - The banner hours depends on the UNB Libraries > Calendar Hours > Calendar Hours Client module:

        - [https://github.com/unb-libraries/calendar\_hours](https://github.com/unb-libraries/calendar_hours)
    - Add Font Awesome Icons module, 2.x branch for icons used in Header/Footer:

        -
        - load only the **free** icon subset, i.e. the **Solid** and **Brand** icons *(else the non-free icon font may take precedence and not display)*
            - this in done via the Font Awesome Settings > Partial File Configuration admin config form: /admin/config/content/fontawesome

###  Health Score

31

—

LowBetter than 68% of packages

Maintenance47

Moderate activity, may be stable

Popularity30

Limited adoption so far

Community14

Small or concentrated contributor base

Maturity26

Early-stage or recently created project

 Bus Factor1

Top contributor holds 93% 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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/14816365594cfd5c8735f92d8831195c60d0c1803c9a65d66aed17ad448c1a85?d=identicon)[JacobSanford](/maintainers/JacobSanford)

---

Top Contributors

[![jtmcd75](https://avatars.githubusercontent.com/u/10372283?v=4)](https://github.com/jtmcd75 "jtmcd75 (489 commits)")[![bricas](https://avatars.githubusercontent.com/u/18400?v=4)](https://github.com/bricas "bricas (14 commits)")[![patschilf](https://avatars.githubusercontent.com/u/46682967?v=4)](https://github.com/patschilf "patschilf (14 commits)")[![jeffcarter](https://avatars.githubusercontent.com/u/656114?v=4)](https://github.com/jeffcarter "jeffcarter (7 commits)")[![JacobSanford](https://avatars.githubusercontent.com/u/244894?v=4)](https://github.com/JacobSanford "JacobSanford (2 commits)")

### Embed Badge

![Health badge](/badges/unb-libraries-unb-lib-theme/health.svg)

```
[![Health](https://phpackages.com/badges/unb-libraries-unb-lib-theme/health.svg)](https://phpackages.com/packages/unb-libraries-unb-lib-theme)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)