{"id":18360737,"url":"https://github.com/unb-libraries/unb_lib_theme","last_synced_at":"2025-04-10T03:37:48.920Z","repository":{"id":39543983,"uuid":"107420997","full_name":"unb-libraries/unb_lib_theme","owner":"unb-libraries","description":"Base Drupal 8 theme including UNB Libraries branding","archived":false,"fork":false,"pushed_at":"2025-01-22T14:19:16.000Z","size":10253,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":7,"default_branch":"9.x-4.x","last_synced_at":"2025-03-18T01:15:17.324Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Twig","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unb-libraries.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-18T14:39:18.000Z","updated_at":"2025-01-22T14:19:20.000Z","dependencies_parsed_at":"2023-02-09T13:16:33.069Z","dependency_job_id":"565e0e20-916b-42e9-8294-e2b5bfcb0c9e","html_url":"https://github.com/unb-libraries/unb_lib_theme","commit_stats":{"total_commits":494,"total_committers":9,"mean_commits":"54.888888888888886","dds":0.08097165991902833,"last_synced_commit":"6b25a08896bc945e7c18e7f6317f5e2952d91874"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unb-libraries%2Funb_lib_theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unb-libraries%2Funb_lib_theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unb-libraries%2Funb_lib_theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unb-libraries%2Funb_lib_theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unb-libraries","download_url":"https://codeload.github.com/unb-libraries/unb_lib_theme/tar.gz/refs/heads/9.x-4.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248154007,"owners_count":21056534,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-05T22:29:43.851Z","updated_at":"2025-04-10T03:37:48.898Z","avatar_url":"https://github.com/unb-libraries.png","language":"Twig","funding_links":[],"categories":[],"sub_categories":[],"readme":"![UNB Libraries Search](documentation/images/unb-libraries-screenshot.png)\n# UNB Libraries Theme.\nDrupal 8 and 9 theme based on Bootstrap Barrio 5.1.x theme (https://www.drupal.org/project/bootstrap_barrio).\u003cbr\u003e\nNote the theme branch \u003ckbd\u003e9.x\u003c/kbd\u003e segment refers to Drupal 9.x while the \u003ckbd\u003e4.x\u003c/kbd\u003e segment refers\nto Bootstrap 4. The \u003ckbd\u003edev-8.x-4.x\u003c/kbd\u003e branch is intended to use for projects using Drupal 8.x.\n\n## License\n- unb_lib_theme is licensed under the MIT License:\n  - http://opensource.org/licenses/mit-license.html\n\n- Attribution is not required, but much appreciated:\n  - `unb_lib_theme by UNB Libraries`\n\n\n## How to Use\nThis theme is not intended to be used directly but instead as a **parent theme** that provides UNB Libraries-branded\nheader/footer/assets etc. for a project's subtheme. Requirements/dependencies are as follows:\n\n- add `Bootstrap Barrio`, `UNB Libraries Calendar Hours Client` and `UNB Libraries Banner Alerts`, along with `UNB Libraries theme`\n  to your project repo \u003ckbd\u003ebuild/composer.json\u003c/kbd\u003e file's require section:\n  \u003cpre\u003e\u003ccode\u003e\"require\": {\n    \u0026hellip;\n    \"drupal/bootstrap_barrio\": \"5.1.10\",\n    \"unb-libraries/alert_scheduler\": \"dev-8.x-1.x\",\n    \"unb-libraries/calendar_hours\": \"dev-9.x-1.x\",\n    \"unb-libraries/unb_lib_theme\": \"dev-9.x-4.x\",\n    \u0026hellip;\n  }\u003c/code\u003e\u003c/pre\u003e\n\n  The \u003ci\u003eemergency banner\u003c/i\u003e and \u003ci\u003ebanner image library hours\u003c/i\u003e sections of the default page\n  template header section depend on UNB Libraries' \u003ci\u003eAlert Scheduler\u003c/i\u003e and \u003ci\u003eCalendar Hours Client\u003c/i\u003e \n  projects respectively to function as intended.\u003cbr\u003e\u003cbr\u003e\n  For more information visit https://github.com/unb-libraries/alert-scheduler and https://github.com/unb-libraries/calendar_hours\n  \u003cbr\u003e\u003cbr\u003e\n\n- add `Twitter Bootstrap` \u003ckbd\u003e4.5.x\u003c/kbd\u003e to your **project repo's** root `composer.json` file's `require-dev` section. This will provide\n  the SASS code necessary (within the `vendor` folder) for your subtheme dev environment for extending/overriding Bootstrap\n  variables/functions/etc. Example:\n  \u003cpre\u003e\u003ccode\u003e\"require\": {\n    \u0026hellip;\n    \"twbs/bootstrap\": \"~4.5.3\",\n    \u0026hellip;\n  }\u003c/code\u003e\u003c/pre\u003e\n\nNote that the \u003ckbd\u003e4.5.3\u003c/kbd\u003e branch was selected to match the version used by Bootstrap Barrio 5.1.x.\n\n## UNB Libraries Administration Theme Enhancements\nThis theme contains various stylistic improvements to Drupal core's `Seven` administration\ntheme defined in the \u003ccode\u003esrc/scss/admin-overrides-seven.scss\u003c/code\u003e Sass file. These style\nrules are primary intended for UNB Libraries projects. Should you use `Seven` as your\nproject's administration theme and want to incorporate these overrides please proceed as follows:\n- create an \u003ccode\u003eadmin-style.scss\u003c/code\u003e files inside your subtheme's \u003ccode\u003esrc/scss\u003c/code\u003e folder\n- add the following import at the top of this file:\n  \u003cpre\u003e\u003ccode\u003e@import '../../../../../vendor/unb-libraries/unb_lib_theme/src/scss/admin-overrides-seven.scss';\u003c/code\u003e\u003c/pre\u003e\n- define a library for the administration styles in your subtheme's \u003ccode\u003eSUBTHEMENAME.libraries.yml\u003c/code\u003e file:\n  \u003cpre\u003e\u003ccode\u003eadmin-styling:\n    version: VERSION\n    css:\n      theme:\n        dist/css/admin-style.css: { minified: true }\n  \u003c/code\u003e\u003c/pre\u003e\n- finally, you may attach the admin library assets to an administration form in code using:\n\u003ccode\u003e$form['#attached']['library'][] = 'lib_unb_ca/admin-styling';\u003c/code\u003e\n\nThis will compile (minimized) to \u003ccode\u003edist/css/admin-style.css\u003c/code\u003e. If you wish to add additional project-specific\nadministration rules simply add them **after** your \u003ccode\u003e@import\u003c/code\u003e line.\n\n### Utility Classes\nSeveral utility classes are available for use for your convenience \u003ckbd\u003e(see src/scss/custom/_utility.scss)\u003c/kbd\u003e:\n\n- #### Hover Grow\n  - To transitionally scale an element by 3% on hover/focus, apply \u003ccode\u003ehover-grow\u003c/code\u003e class to the element\u003cbr\u003e\n    \u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e\u0026lt;div class=\"card bg-light border border-unb-red hover-grow text-center\"\u0026gt;\u003c/code\u003e\u003cbr\u003e\n    See: https://lib.unb.ca/copyright \u003cbr\u003e\u003cbr\u003e\n  \n  - To transitionally scale an element \u003cb\u003ehorizontally\u003c/b\u003e (i.e. width) by 3% on hover/focus, apply \u003ccode\u003ehover-grow-h\u003c/code\u003e class to the element\u003cbr\u003e\n    \u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e\u0026lt;div class=\"card bg-light border border-unb-red hover-grow-h text-center\"\u0026gt;\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n\n  - To transitionally scale an element \u003cb\u003evertically\u003c/b\u003e (i.e. height) by 3% on hover/focus, apply \u003ccode\u003ehover-grow-v\u003c/code\u003e class to the element\u003cbr\u003e\n    Example: \u003ccode\u003e\u0026lt;div class=\"card bg-light border border-unb-red hover-grow-v text-center\"\u0026gt;\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n\n- #### Expanded/Collapsed Icons\n  - To add a Font Awesome square caret (i.e. upward/downward-facing arrow) icon to the left of toggle buttons to\n  indicate expandable/collapsible sections simply apply a \u003ckbd\u003eheader-icon-h\u003c/kbd\u003e class to the parent element of\n  the buttons.\u003cbr\u003e\u003cbr\u003e\n\n     \u003cb\u003eExample:\u003c/b\u003e \u003ccode\u003e\u0026lt;div class=\"accordion header-icon-h\" id=\"accordion-example\"\u0026gt;\u003c/code\u003e\u003cbr\u003e\u003cbr\u003e\n\n     Note this feature relies on the \u003cb\u003earia-expanded\u003c/b\u003e attribute - for info on Bootstrap buttons + aria see:\n     https://getbootstrap.com/docs/4.6/components/collapse/#accordion-example) \u003cbr\u003e\u003cbr\u003e\n\n- #### Linked images\n  - To add a standardized image link visual hover/focus effect, add the \u003ccode\u003eimg-link\u003c/code\u003e class either to the parent\n    \u003ccode\u003e\u0026lt;a\u0026gt;\u003c/code\u003e tag of the image or to the parent container of the \u003ccode\u003e\u0026lt;a\u0026gt;\u003c/code\u003e tag itself\u003cbr\u003e\u003cbr\u003e\n    \u003cb\u003eExample\u003c/b\u003e \u003ci\u003e(class added to parent tag of \u0026lt;a\u0026gt;)\u003c/i\u003e:\u003cbr\u003e\n    \u003cpre\u003e\u003ccode\u003e\u0026lt;div class=\"img-link\"\u0026gt;\n      \u0026lt;a href=\"#url\"\u0026gt;\u003e\u0026lt;img src=\"/path/img-filename\" alt=\"Logo of external website\"\u0026gt;\u0026lt;/a\u0026gt;\n    \u0026lt;/div\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\n    This will reduce the opacity of the linked image using a 3ms transition effect upon hover and focus.\n\n- #### Custom opacities\n  - To add a transparent quality to a container apply one of UNB Library Theme's custom \u003ckbd\u003eopacity\u003c/kbd\u003e classes\n    \u003cbr\u003e\u003cbr\u003e\n    \u003cb\u003eExample:\u003c/b\u003e \u003ci\u003e(slightly see the content behind an affixed navbar)\u003c/i\u003e\u003cbr\u003e\n    \u003ccode\u003e\u0026lt;nav id=\"navbar-main\" class=\"navbar navbar-expand-lg px-0 affix opacity-80\"\u0026gt;\u003c/code\u003e\n    \u003cbr\u003e\u003cbr\u003e\n    ![](documentation/images/opacity-utlility.png)\n    \u003cbr\u003e\u003cbr\u003e\n    Valid class values, from least to most opaque (i.e. most to least translucent), are:\n    - \u003ckbd\u003eopacity-25\u003c/kbd\u003e\n    - \u003ckbd\u003eopacity-50\u003c/kbd\u003e\n    - \u003ckbd\u003eopacity-75\u003c/kbd\u003e\n    - \u003ckbd\u003eopacity-80\u003c/kbd\u003e\n    - \u003ckbd\u003eopacity-85\u003c/kbd\u003e\n    - \u003ckbd\u003eopacity-90\u003c/kbd\u003e\n    - \u003ckbd\u003eopacity-95\u003c/kbd\u003e\n    \u003cbr\u003e\u003cbr\u003e\n \n- #### Inline lists\n  - To change the default display behaviour of an unordered list from block to inline block, wrap the \u003ckbd\u003eul\u003c/kbd\u003e\n  list element with a container that has the \u003ckbd\u003ewrapper-list-inline\u003c/kbd\u003e class applied.\n  \u003cpre\u003e\u003ccode\u003e\u0026lt;div id=\"quicklinks-wrapper\" class=\"collapse wrapper-list-inline\"\u0026gt;\n    \u0026lt;h3 class=\"d-inline-block\"\u0026gt;Quick Links:\u0026lt;/h3\u0026gt;\n    \u0026lt;ul class=\"pl-2\"\u0026gt;\n      \u0026lt;li\u0026gt;\u0026lt;a href=\"https://unb.on.worldcat.org/myaccount\"\u003eRenew Books / My Account\u0026lt;/a\u0026gt;\u0026lt;/li\u0026gt;\n      \u0026lt;li\u0026gt;\u0026lt;a href=\"/services/docdel\"\u0026gt;Document Delivery\u0026lt;/a\u0026gt;\u0026lt;/li\u0026gt;\n      \u0026lt;li\u0026gt;\u0026lt;a href=\"/services/recalls\"\u0026gt;Recalls\u0026lt;/a\u0026gt;\u0026lt;/li\u0026gt;\n      \u0026lt;li\u0026gt;\u0026lt;a href=\"/about/find-us\"\u0026gt;Floor Plans\u0026lt;/a\u0026gt;\u0026lt;/li\u0026gt;\n      \u0026lt;li\u0026gt;\u0026lt;a href=\"/services/tech-tools\"\u0026gt;Borrow Tech \u0026amp; Tools\u0026lt;/a\u0026gt;\u0026lt;/li\u0026gt;\n    \u0026lt;/ul\u0026gt;\n  \u0026lt;/div\u0026gt;  \u003c/code\u003e\u003c/pre\u003e\n\n  ![](documentation/images/list-inline-utility-quicklinks.png)\u003cbr\u003e\n\n## Style Guide Suggestions\n### Webforms\n- UNB Libraries forms adopt a standardized look and feel for attributes such as background, border, button colors, etc - \n  this is done by wrapping the form field (including form action buttons)) inside a container with a\n  \u003ccode\u003etheme-dark\u003c/code\u003e class applied to it:\n  ![Sample UNB Libraries webform](documentation/images/webform-sample.png)\u003cbr\u003e\u003cbr\u003e\n\n- \u003cb\u003eNote:\u003c/b\u003e to implement this using Webform UI, add a parent \u003ci\u003eContainer\u003c/i\u003e element, edit it, switch to the\n  \u003ci\u003eAdvanced\u003c/i\u003e tab and expand the \u003ci\u003eElement Attributes\u003c/i\u003e section. Next, choose the \u003ci\u003ecustom\u003c/i\u003e element\n  CSS class and enter \u003ckbd\u003etheme-dark\u003c/kbd\u003e in the conditional field. Finally, save the change.\n\n  ![Sample UNB Libraries webform](documentation/images/webform-container-class.png)\u003cbr\u003e\u003cbr\u003e\n\n- The \u003cb\u003ePrivacy\u003c/b\u003e footer is used across most webforms and is implemented using a Bootstrap alert:\n  \u003cpre\u003e\u003ccode\u003e\u0026lt;div class=\"alert alert-info\" role=\"alert\"\u0026gt;\n    \u0026lt;strong\u0026gt;Privacy:\u003c/strong\u003e UNB Libraries will only use the comments you send to\n    improve our website and services. We are not storing any personal information.\n  \u0026lt;/div\u0026gt;\n  \u003c/code\u003e\u003c/pre\u003e\n\n- Related fields are typically grouped together as children of a \u003cb\u003eFieldset\u003c/b\u003e element container within the Webform \n  \"Build\" UI.\n\n  ![Sample UNB Libraries webform](documentation/images/webform-fieldset-container-wrapper.png)\u003cbr\u003e\u003cbr\u003e\n\n  This triggers custom style attributes for the form display with regards to font-size, font-weight, whitespace, etc\n\n  ![Sample UNB Libraries webform](documentation/images/webform-fieldset-wrapper-display.png)\u003cbr\u003e\u003cbr\u003e \n\n## Notes\n- 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):\n  - https://www.drupal.org/project/bootstrap_barrio\n\n- 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)\n  - Subthemes compiling sass should add the following `require-dev` package to `composer.jason`:  \n    \"twbs/bootstrap\": \"~4.5.3\",\n\n  - The banner hours depends on the UNB Libraries \u003e Calendar Hours \u003e Calendar Hours Client module:\n    - https://github.com/unb-libraries/calendar_hours\n\n  - Add Font Awesome Icons module, 2.x branch for icons used in Header/Footer:\n    - https://www.drupal.org/project/fontawesome\n    - load only the \u003cb\u003efree\u003c/b\u003e icon subset, i.e. the \u003cb\u003eSolid\u003c/b\u003e and \u003cb\u003eBrand\u003c/b\u003e icons \u003ci\u003e(else the non-free icon font\n      may take precedence and not display)\u003c/i\u003e\n       - this in done via the Font Awesome Settings \u003e Partial File Configuration admin config form: \n         \u003ckbd\u003e/admin/config/content/fontawesome\u003c/kbd\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funb-libraries%2Funb_lib_theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funb-libraries%2Funb_lib_theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funb-libraries%2Funb_lib_theme/lists"}