เอกสารระบบการออกแบบของคุณด้วยเศษส่วน

Sep 13, 2025
วิธีการ

คุณชอบเรียนรู้เพิ่มเติมเกี่ยวกับระบบการออกแบบหรือไม่? จากนั้นอย่าพลาดวิศวกรอาวุโส UI Mina markham ที่ สร้างนิวยอร์ก ในวันที่ 28 เมษายนที่เธอจะหารือเกี่ยวกับวิธีที่เธอสร้าง Pantsuit ระบบการออกแบบที่ขับเคลื่อนแอปพลิเคชันจำนวนมากที่โฮสต์บน Hillaryclinton.com และบนชายฝั่งตะวันตกที่ สร้างซานฟรานซิสโก เมื่อวันที่ 9 มิถุนายน สเตฟานี rewis จะแบ่งปันบทเรียนที่เธอเรียนรู้ในขณะที่สร้างระบบการออกแบบ Salesforce

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

เอกสารคู่มือสไตล์มีแนวโน้มที่จะมาจากไฟล์ Markdown เพื่อแสดงมาร์คอัพผู้เขียนมักถูกบังคับให้คัดลอกและวางลงใน Markdown นี่แทบจะเป็นไปไม่ได้ที่จะรักษาเมื่อมีส่วนประกอบหลายชิ้นเข้าด้วยกัน

ในขณะที่ไลบรารีรูปแบบในทางกลับกันถือว่าไฟล์ HTML ส่วนประกอบของเราเป็นพลเมืองชั้นหนึ่ง แต่ละองค์ประกอบจะได้รับหน้าของตัวเองซึ่งแสดงเครื่องหมายมาร์กอัปและ HTML ที่แสดงผลโดยตรงจากไฟล์ HTML สิ่งนี้ทำให้ไฟล์ HTML และเอกสารไม่สามารถออกจากการซิงค์ได้

ไลบรารีรูปแบบมักถูกสร้างขึ้นโดยใช้ภาษาเทมเพลตมากกว่า HTML ธรรมดา เทมเพลตสามารถรวมถึงตัวแปรและตรรกะอื่น ๆ จากนั้นเราสามารถส่งผ่านข้อมูลชุดต่าง ๆ ที่ช่วยให้การแสดงผลของส่วนประกอบที่จะแสดง

เป็นไปได้ที่จะรวมหลายเทมเพลตเพื่อสร้างการแสดงผลที่ซับซ้อนมากขึ้นหรือแม้กระทั่งหน้าเต็ม ไฟล์เหล่านี้มีความยืดหยุ่นดังนั้นพวกเขาสามารถใช้งานได้ในการผลิต! การเปลี่ยนแปลงใด ๆ ที่ทำกับไลบรารีรูปแบบของเราจะถูกจัดทำขึ้นโดยอัตโนมัติโดยเว็บไซต์ของเราเนื่องจากมาร์กอัปทั้งหมด - สำหรับห้องสมุดหรือสำหรับการผลิต - ต้นกำเนิดมาจากเทมเพลตทั่วไปชุดเดียว

Design systems will be covered at both Generate New York and San Francisco this year

ระบบการออกแบบจะถูกปกคลุมที่ทั้งสองสร้างนิวยอร์กและซานฟรานซิสโกในปีนี้

ใส่เศษส่วน

สร้างโดย Clearleft เศษส่วน ช่วยให้คุณสร้างและจัดทำไลบรารีคอมโพเนนต์เว็บและรวมเข้ากับโครงการของคุณ ในการกวดวิชานี้เราจะพิจารณาอย่างใกล้ชิดว่ามันทำงานอย่างไร (ดาวน์โหลดรุ่นที่เสร็จสมบูรณ์ของการสาธิตที่ ที่นี่ .

เศษส่วนเป็นโมดูล node.js ที่ติดตั้งผ่าน NPM ก่อนอื่นคุณต้องการติดตั้งโมดูลทั่วโลกเพื่อให้คุณสามารถสร้างโครงการใหม่: 

npm install --global @frctl/fractal

ด้วยแพ็คเกจนี้ติดตั้งสร้างโครงการใหม่: 

fractal new project-name

คำสั่งนี้ยิงคู่มือการติดตั้งที่นำคุณไปสู่กระบวนการตั้งค่า มันจะขอให้คุณชื่อโครงการ ชื่อของส่วนประกอบเอกสารและโฟลเดอร์สาธารณะ และถ้าคุณจะใช้ Git สำหรับการควบคุมเวอร์ชัน เมื่อคำถามเหล่านั้นเสร็จสมบูรณ์เศษส่วนจะติดตั้งโมดูลที่จำเป็นทั้งหมดและตั้งค่าโครงสร้างโฟลเดอร์ตามที่ระบุไว้

หากคุณต้องการข้ามการติดตั้งระดับโลกและสร้างโครงการด้วยตนเองคำแนะนำการติดตั้งด้วยตนเองสามารถพบได้ที่ ที่นี่ .

หมุนมันขึ้น

ตอนนี้คุณมีโครงการเศษส่วนที่ติดตั้งอย่างสมบูรณ์หมุนด้วยการก้าวเข้าสู่โฟลเดอร์โครงการ ชื่อโครงการซีดี และเรียกใช้คำสั่งซิงค์เศษส่วน สิ่งนี้จะเริ่มเซิร์ฟเวอร์ภายในเครื่องดูไฟล์สำหรับการเปลี่ยนแปลงและเริ่มเบราว์เซอร์โดยอัตโนมัติ: 

fractal start --sync

และเช่นนั้นคุณมีตัวอย่างการทำงานของเศษส่วน เปิดเบราว์เซอร์ที่คุณเลือกและไปที่ http: // localhost: 3000 เพื่อดูการเริ่มต้นโครงการเศษส่วนใหม่ของคุณ เพื่อหลีกเลี่ยงการกำหนดให้ทุกคนติดตั้งเศษส่วนทั่วโลกสร้างสคริปต์ในตัวคุณ แพคเกจ json ที่เรียกไบนารีเศษส่วน 

 "สคริปต์": {
    "เศษส่วน": "./node_modules/.bin/fractal เริ่มต้น --SYNC"
}

ตอนนี้คุณสามารถใช้ npm รันเศษส่วน โดยไม่ต้องติดตั้งอะไรทั่วโลก

การเพิ่มส่วนประกอบ

ตอนนี้คุณเริ่มโครงการเศษส่วนแล้วก็ถึงเวลาที่จะเพิ่มส่วนประกอบบางอย่าง ไฟล์ Starter มาพร้อมกับส่วนประกอบที่เรียกว่า 'ตัวอย่าง' แต่เราจะกำจัดสิ่งนั้นและสร้างใหม่จากรอยขีดข่วน

หนึ่งในสิ่งที่ดีที่สุดเกี่ยวกับเศษส่วนคือคุณสามารถจัดระเบียบองค์ประกอบของคุณได้ แต่คุณต้องการในโฟลเดอร์คอมโพเนนต์และจะเลียนแบบโดยอัตโนมัติว่าองค์กรในการนำทางไลบรารีรูปแบบ

สำหรับองค์ประกอบแรกเราจะสร้างปุ่มหลักใหม่ภายใน โฟลเดอร์ปุ่ม . ในการทำเช่นนั้นสร้างด้วยไฟล์เทมเพลตที่ ส่วนประกอบ / ปุ่ม / ปุ่มหลัก / ปุ่มหลัก HBS . เศษส่วนรองรับเทมเพลตมือจับจากกล่องดังนั้นใช้ . hbs นามสกุลไฟล์: 

  & lt; button class = "ปุ่มหลัก" & gt; {{text}} & lt; / button & gt;

ที่ {{text}} สตริงภายในแท็กปุ่มเป็นตัวยึดตัวแปรและสิ่งนี้ช่วยให้คุณนำเทมเพลตกลับมาใช้ซ้ำในค่าต่าง ๆ สำหรับ ข้อความ จากไฟล์ข้อมูล

ในการสร้างไฟล์ข้อมูลให้ใช้ชื่อฐานเดียวกันกับไฟล์ Handlebar แต่แตกต่างกัน yml ส่วนขยาย. ตอนนี้ ปุ่มหลัก. config.yml นั่งอยู่ภายใน ส่วนประกอบ / ปุ่ม / ปุ่มหลัก โฟลเดอร์ควรมีลักษณะเช่นนี้: 

 ชื่อเรื่อง: ปุ่มหลัก
บริบท:
    ข้อความ: คลิกฉัน

ทั้งหมดนี้เข้าด้วยกันสร้างองค์ประกอบใหม่แรกของคุณปุ่มหลักสมาชิกของหมวดหมู่ปุ่มด้วยข้อความ: 'คลิกฉัน'

การเปลี่ยนแปลงส่วนประกอบ

เศษส่วนรองรับการเปลี่ยนแปลงขององค์ประกอบเดียวกันช่วยให้เราสามารถแสดงองค์ประกอบเดียวกันกับคลาสตัวแก้ไขหรือคุณลักษณะต่างๆ ดังนั้นสมมติว่าเราต้องการมีตัวเลือกในการใช้ปุ่มธีมสีเข้ม เราสามารถสร้างไฟล์เทมเพลตใหม่ที่เรียกว่า ปุ่มหลัก - Dark.hbs ถัดจากแม่แบบดั้งเดิมของเรา (Double Dash หมายถึงการเปลี่ยนแปลงองค์ประกอบเหล่านี้) ในเทมเพลตนี้เราจะใช้ตัวดัดแปลงเราสามารถเชื่อมต่อกับสไตล์ใหม่ได้ 

 & lt; button class = "ปุ่มหลัก" data-theme = "มืด" & gt; {{text}} & lt; / button & gt;

ตอนนี้เมื่อเราเขียน CSS ของเราเราสามารถรวมตัวเลือกต่อไปนี้เพื่อปรับเปลี่ยนแม่แบบนี้ด้วยรูปแบบการปรับเปลี่ยน 

 .Primary-Button [Data-Theme = "Dark"] {}

รูปแบบข้อมูล

เช่นเดียวกับที่เราสามารถกำหนดรูปแบบการเปลี่ยนแปลงได้โดยการสร้างไฟล์เทมเพลตหลายไฟล์เราสามารถสร้างรูปแบบต่าง ๆ ภายในข้อมูลของเรา เราสามารถทำสิ่งนี้ภายใน ปุ่มหลัก. config.yml ไฟล์โดยการเพิ่มอาร์เรย์ตัวแปร 

 ชื่อเรื่อง: ปุ่มหลัก
บริบท:
    ข้อความ: คลิกฉัน
ตัวแปร:
- ชื่อ: ดาวน์โหลด
    บริบท:
ข้อความ: ดาวน์โหลดเดี๋ยวนี้
- ชื่อ: ติดตั้ง
    บริบท:
ข้อความ: ติดตั้งทันที

สิ่งนี้จะสร้างรูปแบบใหม่ที่ชื่อว่า 'ดาวน์โหลด' และ 'ติดตั้ง' โดยมีข้อความที่แตกต่างกันไปที่ปุ่ม ตัวอย่างที่ใช้งานได้จริงอาจเป็นเช่นนี้หากคุณใช้เหมือนกัน ปุ่มหลัก. hbs แม่แบบในเศษส่วนรวมถึงการผลิต ในกรณีนี้แทนที่จะสร้างเทมเพลตใหม่ล่าสุดสำหรับชุดรูปแบบมืดของคุณคุณสามารถส่งค่าธีมในฐานะตัวแปรและใช้รูปแบบข้อมูลเพื่อแสดงธีมปุ่มต่าง ๆ ทั้งหมด 

 & lt; button class = "ปุ่มหลัก" data-theme = "{{theme}}" & gt; {{text}} & lt; / ปุ่ม & gt;

หัวข้อ: ปุ่มหลัก
บริบท:
    ข้อความ: คลิกฉัน
    ชุดรูปแบบ: แสง
ตัวแปร:
- ชื่อ: ธีมสีเข้ม
    บริบท:
ข้อความ: คลิกฉัน
ธีม: มืด

จัดการสินทรัพย์อื่น ๆ

เศษส่วนจะจัดการกับไฟล์อื่นที่ไม่ใช่มาร์กอัปและข้อมูล CSS, JavaScript, รูปภาพหรือสินทรัพย์อื่น ๆ ที่คุณเพิ่มในโฟลเดอร์คอมโพเนนต์จะปรากฏในแท็บ 'สินทรัพย์' คุณสามารถระบุ readme.md ไฟล์สำหรับคอมโพเนนต์เพื่อให้คุณสามารถเขียนบันทึกเกี่ยวกับวิธีการใช้ส่วนประกอบหรือเชื่อมโยงไปยังส่วนอื่น ๆ ของเอกสาร

ขั้นตอนถัดไป

การทำซ้ำตัวอย่างก่อนหน้านี้สำหรับส่วนประกอบหลักทั้งหมดของคุณสร้างแคตตาล็อกที่มีประโยชน์ของบล็อกอาคารหลักของเว็บไซต์ของคุณ แต่พลังที่แท้จริงของไลบรารีลวดลายมาจากความสามารถในการรวมชิ้นส่วนเหล่านี้เข้าด้วยกัน ตรวจสอบให้แน่ใจว่าได้ตรวจสอบ เอกสารประกอบเศษส่วน ในการเรียนรู้วิธีที่คุณสามารถเริ่มสร้างส่วนประกอบที่ซับซ้อนได้มากขึ้นโดยการรวมองค์ประกอบอะตอมที่เล็กกว่าเพื่อสร้างไฟล์ที่ใหญ่กว่า

โฟลเดอร์ Docs เป็นสถานที่ที่เหมาะสำหรับการใส่ข้อมูลคู่มือสไตล์ดั้งเดิมและบันทึกย่อเพิ่มเติม สิ่งนี้อาจครอบคลุมสิ่งต่าง ๆ เช่นเอกสารประกอบการดำเนินงานตามแนวทางของแบรนด์และเสียงของแบรนด์ของคุณรายการของสีและตัวแปรและอื่น ๆ มันเป็นไปตามการนำทางตามโฟลเดอร์เดียวกันกับส่วนประกอบที่ทำและหากคุณจัดระเบียบไฟล์ของคุณภายในโฟลเดอร์หัวเรื่องคุณจะพบการนำทาง เอกสารเศษส่วน สายลม.

เศษส่วนยังรองรับแหล่งข้อมูลที่ซับซ้อนมากขึ้น หากคุณต้องการสร้างชุดข้อมูลขนาดใหญ่สำหรับเทมเพลตหรือต้องการดึงมันมาจาก API ของบุคคลที่สามคุณสามารถใช้ Component-name.config.js ในการส่งคืนวัตถุ JavaScript แทนข้อมูลไฟล์ YML

สุดท้ายเศษส่วนช่วยให้คุณใช้ภาษาเทมเพลตที่แตกต่างกันจำนวนหนึ่งอย่าลืมตรวจสอบรายการทั้งหมดในเอกสารประกอบและส่วนใหญ่มีความสุข!

จองตั๋วของคุณไปที่ สร้าง วันนี้!ใน นิวยอร์ก คุณสามารถเรียนรู้จาก Mina Markham ผู้สร้างระบบการออกแบบสำหรับการรณรงค์ของประธานาธิบดีฮิลลารีคลินตันและใน ซานฟรานซิสโก Stephanie Rewis อธิบายวิธีที่คุณสามารถสถาปนิกและสร้างกรอบงาน CSS ที่ทันสมัยสำหรับ 'ระบบการออกแบบที่มีชีวิต' ที่ระดับองค์กร

บทความนี้เผยแพร่ในฉบับนิตยสารสุทธิ 285 ซื้อที่นี่

วิธีการ - บทความยอดนิยม

ถ่ายภาพบุคคล: วิธีการถ่ายภาพบุคคลที่สมบูรณ์แบบ

วิธีการ Sep 13, 2025

การถ่ายภาพบุคคลเป็นพระราชบัญญัติการทรงตัว - มีหลายสิ่งหลายอย่างที�..

เริ่มต้นกับ WebVR

วิธีการ Sep 13, 2025

ข้ามไปที่: ทรัพยากร WebVR ..

วิธีการทำพระคัมภีร์ตัวละครของคุณเอง

วิธีการ Sep 13, 2025

สำหรับทุกคนที่ทำงานอย่างมืออาชีพใน การออก..

ทำผม 3 มิติที่สมจริงและขนใน 3DS Max และ V-ray

วิธีการ Sep 13, 2025

อย่าพลาด Vertex 2018 กิจกรรมการเปิดตัว�..

4 ขั้นตอนง่าย ๆ เพื่อปรับปรุงการแสดงผลของคุณ

วิธีการ Sep 13, 2025

การใช้ไฟโดมเป็นหนึ่งในความก้าวหน้าที่ยิ่งให..

ทาสีซีสเคปที่กระฉับกระเฉงในน้ำมัน

วิธีการ Sep 13, 2025

วัสดุ Sarah ว�..

เริ่มต้นใช้งานด้วยผ้าใบ HTML

วิธีการ Sep 13, 2025

html & lt; canvas & gt; องค์ประกอบเป็นโซลูชันที่ทรงพลังส�..

วิธีย้ายระหว่าง DAZ Studio และ ZBrush

วิธีการ Sep 13, 2025

สำหรับผู้มาใหม่ถึง zbrush อินเทอร์เฟซดูเหมื�..

หมวดหมู่