README

UNB图书馆主题。

基于Bootstrap Barrio 5.1.x主题（https://www.drupal.org/project/bootstrap_barrio）的Drupal 8和9主题。
请注意，主题分支 9.x 段表示Drupal 9.x，而 4.x 段表示Bootstrap 4。 dev-8.x-4.x 分支旨在用于使用Drupal 8.x的项目。

许可

unb_lib_theme 在MIT许可证下授权
- https://open-source.org.cn/licenses/mit-license.html
不需要署名，但非常感谢
- 由UNB图书馆提供

如何使用

此主题不直接使用，而是作为 父主题，为项目子主题提供UNB图书馆品牌的头部/底部/资产等。要求/依赖项如下

将 Bootstrap Barrio、UNB Libraries Calendar Hours Client 和 UNB Libraries Banner Alerts 以及 UNB Libraries 主题 添加到项目仓库 build/composer.json 文件的 require 部分中
```
"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",
  …
}
```
默认页面模板头部部分的 紧急横幅 和 横幅图像图书馆开放时间 部分分别依赖于UNB图书馆的 Alert Scheduler 和 Calendar Hours Client 项目来按预期工作。

更多信息请访问 https://github.com/unb-libraries/alert-scheduler 和 https://github.com/unb-libraries/calendar_hours
将 Twitter Bootstrap 4.5.x 添加到您的 项目仓库 的根 composer.json 文件的 require-dev 部分中。这将提供必要的SASS代码（在 vendor 文件夹中），用于您的子主题开发环境中的扩展/覆盖Bootstrap变量/函数等。示例
```
"require": {
  …
  "twbs/bootstrap": "~4.5.3",
  …
}
```

请注意，选择了 4.5.3 分支以匹配Bootstrap Barrio 5.1.x使用的版本。

UNB图书馆管理主题增强

此主题包含对Drupal核心的 Seven 管理主题的各种样式改进，这些改进定义在 src/scss/admin-overrides-seven.scss Sass文件中。这些样式规则主要针对UNB图书馆项目。如果您使用 Seven 作为项目的管理主题并希望包含这些覆盖，请按以下步骤操作

在子主题的 src/scss 文件夹内创建一个 admin-style.scss 文件

在此文件顶部添加以下导入

@import '../../../../../vendor/unb-libraries/unb_lib_theme/src/scss/admin-overrides-seven.scss';

在您的子主题的 SUBTHEMENAME.libraries.yml 文件中定义管理样式的库

admin-styling:
  version: VERSION
  css:
    theme:
      dist/css/admin-style.css: { minified: true }

最后，您可以使用以下代码在代码中将管理库资产附加到管理表单： $form['#attached']['library'][] = 'lib_unb_ca/admin-styling';

这将编译（最小化）到 dist/css/admin-style.css。如果您希望添加额外的特定于项目的管理规则，只需在您的 @import 行之后添加它们。

实用类

提供了一些实用类以供方便使用 （参见src/scss/custom/_utility.scss）

悬停增长
- 要悬停/聚焦时过渡性地按3%缩放元素，请将 hover-grow 类应用于该元素
  示例： <div class="card bg-light border border-unb-red hover-grow text-center">
  参阅： https://lib.unb.ca/copyright
- 要在悬停/聚焦时将元素水平（即宽度）缩放3%，请将元素应用hover-grow-h类
  示例： <div class="card bg-light border border-unb-red hover-grow-h text-center">
- 要在悬停/聚焦时将元素垂直（即高度）缩放3%，请将元素应用hover-grow-v类
  示例： <div class="card bg-light border border-unb-red hover-grow-v text-center">
展开/折叠图标
- 要向切换按钮左侧添加Font Awesome正方形三角形（即向上/向下箭头）图标以表示可展开/可折叠部分，只需将header-icon-h类应用到按钮的父元素。
  
  示例： <div class="accordion header-icon-h" id="accordion-example">
  
  注意此功能依赖于aria-expanded属性 - 关于Bootstrap按钮 + aria的信息，请参阅：https://bootstrap.ac.cn/docs/4.6/components/collapse/#accordion-example)
链接图像
- 要添加标准化的图像链接视觉悬停/聚焦效果，将img-link类添加到图像的父<a>标签或其自身的父容器
  
  示例 (添加到</a>标签的父标签的类)
```
<div class="img-link">
  <a href="#url">><img src="/path/img-filename" alt="Logo of external website"></a>
</div>
```
  这将使用3毫秒的过渡效果在悬停和聚焦时降低链接图像的透明度。

自定义透明度
- 要给容器添加透明效果，请应用UNB图书馆主题的以下自定义透明度类之一
  
  示例： (在固定导航栏后面稍微看到内容)
  <nav id="navbar-main" class="navbar navbar-expand-lg px-0 affix opacity-80">
  
  有效类值，从最不透明到最透明（即最不透明到最透明），分别是
  - opacity-25
  - opacity-50
  - opacity-75
  - opacity-80
  - opacity-85
  - opacity-90
  - opacity-95

内联列表

要将无序列表默认的显示行为从块改为内联块，请将具有wrapper-list-inline类应用的容器包裹在ul列表元素中。

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

风格指南建议

网络表单

UNB图书馆表单采用标准的外观和感觉，例如背景、边框、按钮颜色等，这是通过将表单字段（包括表单操作按钮）包装在应用了theme-dark类的容器中来实现的：
注意：要使用Webform UI实现此功能，请添加一个父容器元素，编辑它，切换到高级选项卡并展开元素属性部分。接下来，选择自定义元素CSS类，并在条件字段中输入theme-dark。最后，保存更改。

大多数网络表单使用隐私页脚，并使用Bootstrap警报实现

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

相关字段通常作为Webform "构建" UI中Fieldset元素容器内的子元素分组

这会触发与字体大小、字体粗细、空白等有关的表单显示的自定义样式属性

注意

此子主题使用Bootstrap Barrio作为基础主题，特别是5.1.x分支，该分支又使用Bootstrap 4（Barrio 5.5.x使用Bootstrap v5）
- https://www.drupal.org/project/bootstrap_barrio
截至Bootstrap Barrio v5.1.10，Bootstrap v4.5.x特别捆绑（即不要使用v4.6.x - 请参阅全局样式主题库）
- 编译sass的子主题应将以下require-dev包添加到composer.jason
  "twbs/bootstrap": "~4.5.3",
- 横幅时间取决于UNB图书馆 > 日历时间 > 日历时间客户端模块
  - https://github.com/unb-libraries/calendar_hours
- 添加Font Awesome Icons模块，2.x分支，用于在页眉/页脚中使用图标
  - https://www.drupal.org/project/fontawesome
  - 只加载免费图标子集，即实心和品牌图标（否则非免费图标字体可能会优先加载，导致无法显示）
    - 这通过字体Awesome设置中的部分文件配置管理表单完成： /admin/config/content/fontawesome

unb-libraries / unb_lib_theme

维护者

详细信息

README

UNB图书馆主题。

许可

如何使用

UNB图书馆管理主题增强

实用类

悬停增长

展开/折叠图标

链接图像

自定义透明度

内联列表

风格指南建议

网络表单

注意