Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pepabo/pepagram
A minimal Hologram theme for GMO Pepabo, Inc.
https://github.com/pepabo/pepagram
Last synced: about 1 month ago
JSON representation
A minimal Hologram theme for GMO Pepabo, Inc.
- Host: GitHub
- URL: https://github.com/pepabo/pepagram
- Owner: pepabo
- License: mit
- Created: 2016-04-04T12:36:26.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-10-14T07:43:45.000Z (about 8 years ago)
- Last Synced: 2024-11-09T17:04:19.566Z (about 2 months ago)
- Language: CSS
- Homepage:
- Size: 15.6 KB
- Stars: 15
- Watchers: 9
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Pepagram
[](https://www.npmjs.org/package/pepagram)
GMOペパボ株式会社で利用している、スタイルガイドジェネレータ [Hologram](http://trulia.github.io/hologram/) のテーマです。
## Preview
[](http://pepabo.github.io/pepagram-example/public/styleguide/)
[:point_right: **このテーマを利用して制作したスタイルガイドのサンプル**](http://pepabo.github.io/pepagram-example/public/styleguide/)
[:memo: **スタイルガイドのサンプルのコード**](https://github.com/pepabo/pepagram-example/)
## Usage
アプリケーションの Gemfile に 1 行追記して、
```
gem 'hologram'
```
bundle install します。
```
$ bundle install
```
パッケージマネージャーに Bower を利用していたら:
```
$ bower install --save-dev pepagram
```
パッケージマネージャーに npm を利用していたら:
```
$ npm install --save-dev pepagram
```
`hologram_config.yml.sample` をコピーして、 `hologram_config.yml` を用意します。
このファイルを以下のように編集して、スタイルガイドの設定をします。
> それぞれの項目の詳細は [Hologram の README](https://github.com/trulia/hologram) を参照ください。
```yml
# Hologram の設定ファイルです。
# ファイル・ディレクトリのパスは、相対パスで指定します。
# Hologram 向けにスタイルガイドのコメントが書いてある、
# スタイルシートファイルのディレクトリを指定します。
source: stylesheets
# スタイルガイドの HTML ファイルを書き出すディレクトリを指定します。
destination: styleguide
# アプリケーションの CSS ファイルを指定します。
# スタイルガイドの HTML ファイルのあるディレクトリから相対パスで指定します。
application_css:
- 'main.css'
- 'component.css'
# スタイルガイドのテーマに関するファイルのディレクトリを指定します。
documentation_assets: doc_assets
# Markdown をレンダリングするときに、
# マークアップをカスタマイズするためのファイルを指定します。
custom_markdown: doc_assets/_markdown_renderer.rb
# スタイルガイドの設定をします。
# theme_color にプロジェクトのキーカラーを指定すると、好きな配色に変えられます。
# brand_image に画像ファイルを指定すると、好きな画像を設置できます。
pepagram:
title: 'Example Style Guide'
author: 'GMO Pepabo, Inc.'
theme_color: '#3e6f99'
brand_image: 'my-brand-image.jpg'
```
> #### たとえば Rails アプリケーションなら
>
> ```
> source: app/assets/stylesheets
> destination: public/styleguide
> application_css:
> - '/assets/application.css'
> documentation_assets: vendor/assets/bower_components/pepagram/doc_assets
> custom_markdown: vendor/assets/bower_components/pepagram/doc_assets/_markdown_renderer.rb
> ```
設定ファイルのパスを指定して、 Hologram を実行します。
```
$ hologram -c hologram_config.yml
```
`destination` に指定したディレクトリに HTML ファイルが生成されるので、ブラウザで表示します。
## Development
```
$ npm install
$ npm run build
```
## License
The MIT License (MIT)
Copyright (c) 2016- GMO Pepabo, Inc.