README

This is no longer up-to-date. We no longer implement Drupal 7 sites.

\

Refer to common_design base theme for Drupal 8, and for generic Common Design styles and markup.

\

A minimal starter theme for OCHA sites built with Drupal 7. The markup and styles can also be used for non-Drupal sites.

See OCHA basic demo

For developers

See OCHA basic dev site for documentation and examples. View via web inspector to see Drupal template suggestions. This will help understand where the markup is coming from (some comes from Drupal, some is custom). This is especially relevant for implementations not using Drupal as the markup might be copied instead of used directly from the repo.

Releases

Refer to Github releases for latest updates. We use npm-version and sematantic versioning

This theme contains

Common Header
Common Footer
Common SVG Icons
断点、颜色、字体大小、字体、尺寸和 z-index 变量
clearfix、REM 字体大小和媒体查询的混入
Bootstrap dropdowns (requires jQuery 1.9.1 or higher)

可选组件

网格（Bootstrap v4网格的简化版本，https://v4-alpha.getbootstrap.com/layout/overview/)
Typography
基本表格样式
基本表单样式
gulp.js 前端开发工作流程
- Sass
- Sourcemaps（在本地开发时查看包含样式的特定 Sass 文件）
- Autoprefixer
- JS 代码检查

与其他 Drupal 模块的集成

jquery_update — 支持外部 Bootstrap 库
Modernizr — 集中化的 D7 API，用于模块化 Modernizr 构建
PWA — 基本离线支持和集中化的 manifest.json 文件 API

入门

将此主题复制到您的 sites/all/themes/custom 文件夹
如果您想重命名主题，更改文件夹名称，.info 文件的文件名，并在主题文件夹中查找和替换 ocha_basic
在 Drupal 管理界面中，转到外观，找到 'OCHA Basic Starter Theme'（或您重命名后的名称），并选择 启用并设置默认

为 ocha_basic 开发做出贡献

运行 nvm use 以根据 .nvmrc 文件设置正确的节点版本
安装依赖项：npm install
将 localConfig.example.json 复制到 localConfig.json 并指定您的本地 Drupal 环境的 URL。
运行简单的 gulp 任务以构建 CSS 并监视新更改：gulp dev
当您提交更改时，它将自动运行一个“生产”Sass 构建，其中不包括 Sourcemaps

CSS

此项目使用 Sass。要做出更改，请编辑 sass/ 文件夹中的 .scss 文件，不要直接编辑 css/ 文件夹中的文件。

在主题文件夹中运行 gulp dev 以让 gulp 监视更改并自动重新构建 CSS。

运行 gulp sass 仅编译 CSS。

建议使用 Jenkins 在构建时运行 Gulp 任务以生成 CSS。如果您的项目可行，将 css/ 文件夹添加到 .gitignore 文件并从仓库中删除生成的 CSS。

JS

JavaScript 文件应添加到 js/ 并添加到 ocha_basic.info 的脚本部分。

Gulp

此项目使用 Gulp 4

如果您想查看任务列表，请运行以下命令

gulp --tasks

图标

可用的图标可在 img/icons 中找到

根据上下文使用两种技术。

将 SVG 作为背景图像值，通常在伪元素上。SVG 填充颜色作为 SVG 文件中的属性添加。我们使用此技术在技术 2 不可用时使用。图标默认为黑色。如果您需要其他颜色，最好复制图标并手动调整填充/描边以满足您的需求。将复制的文件重命名为包含颜色的文件名，例如 arrow-down--white.svg。
使用 <use> 元素使用 SVG 图标符号。SVG 图标符号在 html.tpl.php 中作为一个单一资源在 body 标签关闭之前加载。每个图标都可以通过其 ID 引用，例如：

<svg class="icon icon--arrow-down">
  <use xlink:href="#arrow-down"></use>
</svg>

每个图标都应该有 icon 类和所需的 BEM 选择器，例如 icon--arrow-down。我们可以创建关联的 CSS 规则来控制尺寸和填充。我们使用 https://github.com/jkphl/gulp-svg-sprite。有关更多详细信息，请参阅 https://una.im/svg-icons。

生成图标符号

如 gulp 任务中定义的，所有新图标都应放置在 img/icons 目录中。运行 gulp sprites 以生成新的符号。这将在 img/icons/icons-sprite.svg 中生成符号 SVG，并将其放置在该位置，并创建一个包含所有 SVG 的 html 页面以供参考 img/icons/sprite.symbol.html。

重命名图标

在导入 Common 图标的最新版本时，在 package.json 中有一个批量重命名命令，可以通过运行以下命令来调用：

# first, cd to repo root
npm run icon-rename

这假设您有一个与http://brewformulas.org/Rename 兼容的工具——您可以使用Homebrew在OSX上安装它

brew install rename

浏览器支持

查看https://un-ocha.github.io/styleguide/common-design/

图标

OCHA默认图标已提供。请用您的标志更新这些图标。

http://realfavicongenerator.net/ 是生成图标的良好工具。

Modernizr

我们支持Modernizr Drupal模块，而ocha_basic.info文件包含了我们所需要的Modernizr测试。

在ocha-basic-site仓库中找到modernizr-custom.js。

启用主题后，转到admin/configuration/development/modernizr以重新构建Modernizr，包括主题的功能检测：svg、cssgrid、cssgridlegacy和mediaqueries。

添加到主屏幕 / manifest.json

我们支持PWA Drupal模块，而不是提供我们自己的manifest.json文件。在template.php中实现了hook_pwa_manifest_alter()钩子，其中包含我们的默认颜色/图标，这些可以通过正常的PWA管理UI进行覆盖。

与面板一起使用

与Omega基础主题一起使用以启用面板

将base theme = omega添加到ocha_basic.info
以page.tpl.php为依据创建您的布局

unocha / ocha_basic

维护者

详情