elemental_styleguide

원소 스타일 가이드

Rails 5.1+의 간단한 스타일 가이드, Elemental_components와 잘 맞도록 설계되었습니다. 둘이 함께 브래드 프로스트의 작품과 Lonely Planet 's Style Guide Rizzo의 생각에서 영감을 얻었습니다.

설치

이 라인을 응용 프로그램의 보석에 추가하십시오.

 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의 스타일 가이드 가이드를 확인하십시오.

예

카탈로그에서 영감을 얻은 특수 Markdown Syntax는 자신의 애플리케이션의 맥락에서 스타일 가이드 페이지에서 erb 코드의 예를 렌더링하는 데 사용될 수 있습니다.

 # Example

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

래핑 요소의 너비와 높이를 제어하기 위해 옵션을 예제로 전달할 수 있습니다.

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

제대로 작동하려면 예제는 응용 프로그램의 CS 및 JS가 필요합니다. 예제가 렌더링되는 app/views/layouts/styleguide/example.html.erb 레이아웃 파일이 있습니다. 이 파일은 WebPacker Gem을 사용할 때 javascript_pack_tag 와 같이 헤더에 추가 태그를 추가하기 위해 수정할 수 있습니다.

감사의 말

이 라이브러리는 Elemental_Components와 함께 원자 디자인 및 생활 스타일 가이드에 관한 Brad Frost의 저술과 Lonely Planet 스타일 가이드 인 Rizzo에서 영감을 받았습니다. 다른 영감은 다음과 같습니다.

• 카탈로그 - 반응을위한 스타일 가이드
• 스토리 북 - 반응을위한 스타일 가이드
• React Styleguidist- 반응을위한 스타일 가이드
• 셀 - 루비의 구성 요소보기
• Komponent- 루비의 구성 요소보기

실제 세계 스타일 가이드 목록은 http://styleguides.io를 확인하십시오.