elemental_styleguide

元素樣式指南

軌道5.1+的簡單樣式指南，旨在與Elemental_components搭配使用。兩者一起靈感來自布拉德·弗羅斯特（Brad Frost）的作品以及《孤獨星球風格指南》（Rizzo）背後的想法。

安裝

將此行添加到您的應用程序的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目錄中添加Markdown文件即可創建樣式指南頁面。這些可以通過將其放入子目錄中來構建，並通過將文件名的前綴加上數字進行排序。

查看Brad Frost的“樣式指南”指南Inspiration指南。

例子

在您自己的應用程序的上下文中，可以使用出受目錄啟發的特殊降價語法，以渲染“樣式指南”頁面上的任何erb代碼的示例：

 # Example

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

可以將選項傳遞給示例，以控制包裝元素的寬度和高度：

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

示例需要您的應用程序的CSS和JS才能正常運行。有一個app/views/layouts/styleguide/example.html.erb佈局文件，示例在其中。可以修改此文件以在使用WebPacker GEM時，例如javascript_pack_tag ，或在車身標籤中添加類和样式時，可以修改此文件。

致謝

該圖書館與Elemental_components一起，靈感來自布拉德·弗羅斯特（Brad Frost）關於原子設計和生活方式指南的著作，以及《孤獨星球風格指南》（Rizzo）。其他靈感是：

• 目錄 - 反應的樣式指南
• Storybook-反應的樣式指南
• React Styleguidist-反應的樣式指南
• 單元格 - 查看紅寶石的組件
• komponent-查看紅寶石的組件

有關現實世界風格指南的列表，請查看http://styleguides.io。