regionhalland/styleguide

Region Hallands 风格指南包含构建我们数字客户会议所需的所有组件。更多详情请访问 stilguide.regionhalland.se

v15.2.1 2020-02-17 06:10 UTC

README

通过以下步骤启动本地服务器...

  1. 下载此仓库。
  2. 运行 npm install
  3. 运行 npm composer install
  4. 运行 gulp
  5. 终端现在应该会告诉你服务器运行的本地URL。

Gulp 命令

命令描述
gulp启动本地开发环境,包括 browsersync。
gulp 版本生成新版本的组件-CSS(包括资产)并将其放入 ´/releases/[版本号]/´。
gulp build构建新的静态 fractal 文件。构建 包括发布包。

创建组件

遵循 Fractals 的文档创建组件。

组件中的 JavaScript 和图片管理

如果组件目录中包含图片,则在保存时将通过 gulp 编译。包含 JavaScript 的组件需要在文件 sites-building.json 中添加。

图片

所有图片在 gulp 运行后都会放入 ´public/images/components/[组件名称]/file.jpg´,然后可以在组件的 .hbs 文件中使用,例如

<img src="/images/{{name}}/figure.jpg" alt="{{alt}}">

JavaScript

我们目前使用 jQuery 为我们的组件构建 JavaScript。

发布

通过在 github 的 production 分支上提交(注意!不是 azure),将在 https://stilguide.regionhalland.se 上构建网站的新版本。

为单个网站构建风格指南

查看 sites.building.md 中的说明。