elemental_styleguide

エレメンタルスタイルガイド

Rails 5.1+のシンプルなスタイルガイド、Elemental_Componentsとよく合うように設計されています。二人は一緒になって、ブラッド・フロストの作品と、ロンリー・プラネットのスタイルガイドリッツォの背後にある考えに触発されています。

インストール

この行をアプリケーションのGemfileに追加します。

 gem "elemental_styleguide"

そして実行してください：

$ bundle

インストールジェネレーターを実行します：

$ bin/rails g elemental_styleguide:install

これにより、次のファイルとディレクトリが作成されます。

 app/
  views/
    layouts/
      styleguide/
        example.html.erb
    styleguide/
      01_home.md

スタイルガイドは、以下をルートファイルに取り付けることができます。

 mount ElementalStyleguide :: Engine => "/styleguide"

これで、 http://localhost:3000/styleguideでスタイルガイドにアクセスできます。

ページ

app/views/styleguideディレクトリにマークダウンファイルを追加するだけで、スタイルガイドページを作成できます。これらは、サブディレクトリに配置することで構成し、ファイル名を数字でプレフィックスすることでソートすることができます。

スタイルガイドのインスピレーションについては、ブラッドフロストのスタイルガイドガイドをご覧ください。

例

カタログに触発された特別なマークダウン構文は、独自のアプリケーションのコンテキストで、スタイルガイドページのerbコードの例をレンダリングするために使用できます。

 # Example

``` example
<%= "Hello world" %>
```

ラッピング要素の幅と高さを制御するために、オプションを例に渡すことができます。

 ``` example
width: 500
height: 200
---
<%= "Hello world" %>
```

例を適切に機能させるには、アプリケーションのCSSとJSが必要です。 app/views/layouts/styleguide/example.html.erbレイアウトファイルがあり、その例が内部にレンダリングされています。このファイルは、WebパッカーGEMを使用する場合のjavascript_pack_tag 、またはボディタグにクラスとスタイルを使用する場合、ヘッダーに追加のタグを追加するために変更できます。

謝辞

この図書館は、Elemental_Componentsとともに、Atomic Design and Living Styleガイドに関するBrad Frostの著作と、Lonely Planet Style GuideのRizzoに触発されました。他のインスピレーションは次のとおりです。

• カタログ - 反応のためのスタイルガイド
• ストーリーブック - 反応のためのスタイルガイド
• React StyleGuidist- Reactのスタイルガイド
• セル - ルビーのコンポーネントを表示します
• Komponent -Rubyのコンポーネントを表示します

Real World Style Guidesのリストについては、http：//styleguides.ioをご覧ください。