elemental_styleguide
1.0.0
Guía de estilo simple para Rails 5.1+, diseñada para ir bien con Elemental_Components. Los dos juntos están inspirados en las obras de Brad Frost y por los pensamientos detrás de la guía de estilo de Lonely Planet Rizzo.
Agregue esta línea al archivo gem de su aplicación:
gem "elemental_styleguide"Y luego ejecutar:
$ bundleEjecute el generador de instalación:
$ bin/rails g elemental_styleguide:installEsto creará los siguientes archivos y directorios:
app/
views/
layouts/
styleguide/
example.html.erb
styleguide/
01_home.md
La guía de estilo se puede montar en su archivo de rutas con:
mount ElementalStyleguide :: Engine => "/styleguide" Ahora puede acceder a la guía de estilo en http://localhost:3000/styleguide .
Puede crear páginas de guía de estilo simplemente agregando archivos de Markdown al directorio app/views/styleguide . Estos se pueden estructurar colocándolos en subdirectorios y se ordenan prefijando los nombres de los archivos con un dígito.
Echa un vistazo a la guía de guía de estilo de Brad Frost para la inspiración de la guía de estilo.
Una sintaxis especial de Markdown, inspirada en el catálogo, puede usarse para representar ejemplos de cualquier código erb en la página de la Guía de estilo, en el contexto de su propia aplicación:
# Example
``` example
<%= "Hello world" %>
```Es posible pasar opciones al ejemplo, para controlar el ancho y la altura del elemento de envoltura:
``` example
width: 500
height: 200
---
<%= "Hello world" %>
``` Los ejemplos necesitan el CSS y JS de su aplicación para funcionar correctamente. Hay una app/views/layouts/styleguide/example.html.erb archivo de diseño en el que se representan ejemplos. Este archivo se puede modificar para agregar etiquetas adicionales al encabezado, como javascript_pack_tag cuando se usa la gema webpacker, o clases y estilos a la etiqueta del cuerpo.
Esta biblioteca, junto con Elemental_Components, se inspiró en los escritos de Brad Frost sobre el diseño atómico y las guías de estilo de vida, y Rizzo, la guía de estilo Lonely Planet. Otras inspiraciones fueron:
Para obtener una lista de guías de estilo del mundo real, consulte http://styleguides.io.
