https://github.com/unb-libraries/unb_lib_theme

Base Drupal 8 theme including UNB Libraries branding
https://github.com/unb-libraries/unb_lib_theme
Last synced: about 1 year ago
JSON representation
Base Drupal 8 theme including UNB Libraries branding
Host: GitHub
URL: https://github.com/unb-libraries/unb_lib_theme
Owner: unb-libraries
Created: 2017-10-18T14:39:18.000Z (over 8 years ago)
Default Branch: 9.x-4.x
Last Pushed: 2025-01-22T14:19:16.000Z (over 1 year ago)
Last Synced: 2025-03-18T01:15:17.324Z (over 1 year ago)
Language: Twig
Homepage:
Size: 9.78 MB
Stars: 1
Watchers: 7
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
Awesome Lists containing this project

README

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

# UNB Libraries Theme.

Drupal 8 and 9 theme based on Bootstrap Barrio 5.1.x theme (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

- unb_lib_theme is licensed under the MIT License:

  - http://opensource.org/licenses/mit-license.html

- Attribution is not required, but much appreciated:

  - `unb_lib_theme by UNB Libraries`

## 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 https://github.com/unb-libraries/alert-scheduler and 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

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

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

- #### Hover Grow

  - To transitionally scale an element by 3% on hover/focus, apply hover-grow class to the element


    Example: <div class="card bg-light border border-unb-red hover-grow text-center">


    See: https://lib.unb.ca/copyright 



  

  - To transitionally scale an element horizontally (i.e. width) by 3% on hover/focus, apply hover-grow-h class to the element


    Example: <div class="card bg-light border border-unb-red hover-grow-h text-center">



  - To transitionally scale an element vertically (i.e. height) by 3% on hover/focus, apply hover-grow-v class to the element


    Example: <div class="card bg-light border border-unb-red hover-grow-v text-center">



- #### Expanded/Collapsed 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: <div class="accordion header-icon-h" id="accordion-example">



     Note this feature relies on the aria-expanded attribute - for info on Bootstrap buttons + aria see:

     https://getbootstrap.com/docs/4.6/components/collapse/#accordion-example) 



- #### Linked images

  - To add a standardized image link visual hover/focus effect, add the img-link class either to the parent

    <a> tag of the image or to the parent container of the <a> tag itself



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


    
<div class="img-link">

      <a href="#url">><img src="/path/img-filename" alt="Logo of external website"></a>

    </div>


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

- #### 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)


    <nav id="navbar-main" class="navbar navbar-expand-lg px-0 affix opacity-80">

    



    ![](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

  - To change the default display behaviour of an unordered list from block to inline block, wrap the ul

  list element with a container that has the wrapper-list-inline class applied.

  
<div id="quicklinks-wrapper" class="collapse wrapper-list-inline">

    <h3 class="d-inline-block">Quick Links:</h3>

    <ul class="pl-2">

      <li><a href="https://unb.on.worldcat.org/myaccount">Renew Books / My Account</a></li>

      <li><a href="/services/docdel">Document Delivery</a></li>

      <li><a href="/services/recalls">Recalls</a></li>

      <li><a href="/about/find-us">Floor Plans</a></li>

      <li><a href="/services/tech-tools">Borrow Tech & Tools</a></li>

    </ul>

  </div>  


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


## Style Guide Suggestions

### 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)



- 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)



- The Privacy footer is used across most webforms and is implemented using a Bootstrap alert:

  
<div class="alert alert-info" role="alert">

    <strong>Privacy: UNB Libraries will only use the comments you send to

    improve our website and services. We are not storing any personal information.

  </div>

  


- 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)



  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)

 

## 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

- 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

  - Add Font Awesome Icons module, 2.x branch for icons used in Header/Footer:

    - https://www.drupal.org/project/fontawesome

    - 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
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/unb-libraries/unb_lib_theme

Awesome Lists containing this project

README
