elemental_styleguide
1.0.0
Guia de estilo simples para o Rails 5.1+, projetado para combinar bem com elementar_components. Os dois juntos são inspirados nas obras de Brad Frost e pelos pensamentos por trás do guia de estilo do Lonely Planet Rizzo.
Adicione esta linha ao GemFile do seu aplicativo:
gem "elemental_styleguide"E depois execute:
$ bundleExecute o gerador de instalação:
$ bin/rails g elemental_styleguide:installIsso criará os seguintes arquivos e diretórios:
app/
views/
layouts/
styleguide/
example.html.erb
styleguide/
01_home.md
O guia de estilo pode ser montado em seu arquivo de rotas com:
mount ElementalStyleguide :: Engine => "/styleguide" Agora você pode acessar o guia de estilo em http://localhost:3000/styleguide .
Você pode criar páginas de guia de estilo simplesmente adicionando arquivos de marcação ao diretório app/views/styleguide . Estes podem ser estruturados colocando -os em subdiretos e classificados prefixando os nomes de arquivos com um dígito.
Confira o guia de estilo de estilo de Brad Frost para a inspiração do guia de estilo.
Uma sintaxe de Marydown especial, inspirada no catálogo, pode ser usada para renderizar exemplos de qualquer código erb na página de guia de estilo, no contexto de seu próprio aplicativo:
# Example
``` example
<%= "Hello world" %>
```É possível passar opções para o exemplo, a fim de controlar a largura e a altura do elemento de embalagem:
``` example
width: 500
height: 200
---
<%= "Hello world" %>
``` Os exemplos precisam de CSS e JS do seu aplicativo para funcionar corretamente. Existe um arquivo de layout app/views/layouts/styleguide/example.html.erb em que os exemplos são renderizados. Esse arquivo pode ser modificado para adicionar tags adicionais ao cabeçalho, como o javascript_pack_tag ao usar a gem webpacker, ou classes e estilos na etiqueta corporal.
Esta biblioteca, juntamente com elemental_components, foi inspirada nos escritos de Brad Frost no design atômico e nos guias de estilo de vida, e Rizzo, o Lonely Planet Style Guide. Outras inspirações foram:
Para uma lista de guias de estilo do mundo real, consulte http://styleguides.io.
