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。