ดาวน์โหลด elemental_styleguide - การดาวน์โหลดซอร์สโค้ด elemental

elemental_styleguide

ส่วนประกอบของบุคคลที่สาม

1.0.0

ดาวน์โหลด

คู่มือสไตล์องค์ประกอบ

คู่มือสไตล์แบบง่ายสำหรับ Rails 5.1+ ออกแบบมาให้เข้ากันได้ดีกับ Elemental_Components ทั้งสองได้รับแรงบันดาลใจจากผลงานของแบรดฟรอสต์และความคิดเบื้องหลังคู่มือสไตล์ Lonely Planet 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

หน้า

คุณสามารถสร้างหน้าคู่มือสไตล์ได้ง่ายๆโดยเพิ่มไฟล์ Markdown ลงในไดเรกทอรี app/views/styleguide สิ่งเหล่านี้สามารถจัดโครงสร้างได้โดยวางไว้ในไดเรกทอรีย่อยและจัดเรียงโดยนำหน้าชื่อไฟล์ด้วยตัวเลข

ตรวจสอบคู่มือคู่มือสไตล์ของแบรดฟรอสต์สำหรับคู่มือสไตล์คู่มือแรงบันดาลใจ

ตัวอย่าง

ไวยากรณ์ markdown พิเศษซึ่งได้รับแรงบันดาลใจจากแคตตาล็อกสามารถใช้เพื่อแสดงตัวอย่างของรหัส erb ใด ๆ ในหน้าคู่มือสไตล์ในบริบทของแอปพลิเคชันของคุณเอง:

 # Example

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

เป็นไปได้ที่จะส่งผ่านตัวเลือกไปยังตัวอย่างเพื่อควบคุมความกว้างและความสูงขององค์ประกอบการห่อ:

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

ตัวอย่างต้องการ CSS และ JS ของแอปพลิเคชันของคุณเพื่อให้ทำงานได้อย่างถูกต้อง มี app/views/layouts/styleguide/example.html.erb ไฟล์เค้าโครงที่แสดงตัวอย่างภายใน ไฟล์นี้สามารถแก้ไขได้เพื่อเพิ่มแท็กเพิ่มเติมลงในส่วนหัวเช่น javascript_pack_tag เมื่อใช้ Webpacker Gem หรือคลาสและสไตล์ไปยังแท็กตัวถัง

กิตติกรรมประกาศ

ห้องสมุดนี้พร้อมกับ Elemental_Components ได้รับแรงบันดาลใจจากงานเขียนของ Brad Frost ในการออกแบบอะตอมและแนวทางสไตล์การใช้ชีวิตและ Rizzo คู่มือสไตล์ Lonely Planet แรงบันดาลใจอื่น ๆ คือ: