Document your design systems with Fractal

Sep 11, 2025
कैसे करना है

क्या आप डिजाइन सिस्टम के बारे में अधिक सीखने की कल्पना करते हैं? फिर वरिष्ठ यूआई इंजीनियर को याद न करें मीना मार्कहम पर [2 9] न्यूयॉर्क जेनरेट करें

28 अप्रैल को, जहां वह चर्चा करेगी कि उसने पैंटसूट कैसे बनाया, डिज़ाइन सिस्टम जिसने हिलेरीक्लिंटन डॉट कॉम पर होस्ट किए गए कई एप्लिकेशन को संचालित किया। और पश्चिम तट पर, पर सैन फ्रांसिस्को उत्पन्न करें 9 जून को, स्टेफनी रेविस सेल्सफोर्स डिज़ाइन सिस्टम के निर्माण के दौरान उसने कुछ सबक साझा किए।

अब तक, हम में से कई परिचित हैं शैली गाइड । लेकिन डिजाइन सिस्टम दस्तावेज की एक नई नस्ल है भाप प्राप्त करने: पैटर्न पुस्तकालय। दोनों के बीच बड़ा अंतर उपकरण के दस्तावेज का प्राथमिक स्रोत है।

एक स्टाइल गाइड का दस्तावेज़ीकरण मार्कडाउन फ़ाइल से उत्पन्न होता है, इसलिए मार्कअप को दिखाने के लिए लेखक को अक्सर इसे मार्कडाउन में कॉपी और पेस्ट करने के लिए मजबूर किया जाता है। एक साथ कई घटकों को फिट करते समय इसे बनाए रखना लगभग असंभव है।

दूसरी ओर, एक पैटर्न लाइब्रेरी, हमारी घटक एचटीएमएल फाइलों को प्रथम श्रेणी के नागरिकों के रूप में मानती है। प्रत्येक घटक को अपना खुद का पृष्ठ मिलता है, जहां यह मार्कअप प्रदर्शित करता है और सीधे HTML फ़ाइल से HTML प्रदान करता है। यह सुनिश्चित करता है कि एचटीएमएल फाइलें और दस्तावेज़ीकरण कभी सिंक से बाहर नहीं निकलती है।

पैटर्न पुस्तकालय अक्सर सादे एचटीएमएल की बजाय एक टेम्पलेटिंग भाषा का उपयोग करके बनाए जाते हैं। टेम्पलेट्स में चर और अन्य तर्क शामिल हो सकते हैं, फिर हम डेटा के विभिन्न सेटों में गुजर सकते हैं, जिससे एक घटक की विविधता प्रदर्शित की जा सकती है।

अधिक जटिल डिस्प्ले, या यहां तक ​​कि पूर्ण पृष्ठों को बनाने के लिए कई टेम्पलेट्स को गठबंधन करना संभव है। ये फ़ाइलें इतनी लचीली हैं कि वे उत्पादन में भी इस्तेमाल किए जा सकते हैं! हमारी पैटर्न लाइब्रेरी में किए गए कोई भी परिवर्तन स्वचालित रूप से हमारी वेबसाइट द्वारा उठाया जाता है, सभी मार्कअप - पुस्तकालय या उत्पादन के लिए - कैननिकल टेम्पलेट्स के एक सेट से निकलता है।

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

डिजाइन सिस्टम इस साल न्यूयॉर्क और सैन फ्रांसिस्को दोनों को उत्पन्न करने के लिए कवर किया जाएगा

आंशिक रूप से दर्ज करें

Clearleft द्वारा बनाया गया, भग्न आपको वेब घटक पुस्तकालयों का निर्माण और दस्तावेज करने में मदद करता है, और उन्हें अपनी परियोजनाओं में एकीकृत करता है। इस ट्यूटोरियल में हम कैसे काम करते हैं (डेमो का एक पूर्ण संस्करण डाउनलोड करें) [9 2] यहां

)।

फ्रैक्टल एक node.js मॉड्यूल है जो एनपीएम के माध्यम से स्थापित है। सबसे पहले आप वैश्विक स्तर पर मॉड्यूल स्थापित करना चाहते हैं ताकि आप एक नई परियोजना उत्पन्न कर सकें:

[9 7]

इस पैकेज के साथ, एक नई परियोजना बनाएँ: 

fractal new project-name

यह कमांड एक इंस्टॉलेशन गाइड को फायर करता है जो आपको सेटअप प्रक्रिया के माध्यम से चलता है। यह आपको परियोजना के शीर्षक के लिए पूछेगा; घटकों, दस्तावेज़ीकरण, और सार्वजनिक फ़ोल्डरों के नाम; और यदि आप संस्करण नियंत्रण के लिए जीआईटी का उपयोग करेंगे। एक बार उन प्रश्नों को पूरा करने के बाद, फ्रैक्टल सभी आवश्यक मॉड्यूल स्थापित करेगा और निर्दिष्ट के रूप में एक फ़ोल्डर संरचना स्थापित करेगा।

यदि आप ग्लोबल इंस्टॉल को छोड़ना चाहते हैं और मैन्युअल रूप से प्रोजेक्ट बनाना चाहते हैं, तो मैन्युअल इंस्टॉल निर्देशों पर पाया जा सकता है यहां ।

इसे कताई

अब आपके पास पूरी तरह से स्थापित फ्रैक्टल प्रोजेक्ट है, इसे प्रोजेक्ट फ़ोल्डर में कदम उठाकर स्पिन करें सीडी परियोजना-नाम और फ्रैक्टल सिंक कमांड चला रहा है। यह एक स्थानीय सर्वर शुरू करता है, फ़ाइलों को परिवर्तनों के लिए देखता है और स्वचालित रूप से ब्राउज़र्सिंक शुरू करता है: 

fractal start --sync

और बस इसी तरह, आपको फ्रैक्टल का एक कार्य उदाहरण मिला है। अपने ब्राउज़र को पसंद करें और नेविगेट करें http: // लोकलहोस्ट: 3000 अपनी नई फ्रैक्टल प्रोजेक्ट की शुरुआत को देखने के लिए। सभी को विश्व स्तर पर फ्रैक्टल स्थापित करने की आवश्यकता होने से बचने के लिए, अपने में एक स्क्रिप्ट बनाएं Package.json यह फ्रैक्टल बाइनरी को कॉल करता है। 

 "स्क्रिप्ट्स": {
    "फ्रैक्टल": "./node_modules/.bin/fractal प्रारंभ - Sync"
}

अब आप उपयोग कर सकते हैं एनपीएम रन फ्रैक्टल वैश्विक स्तर पर कुछ भी स्थापित किए बिना।

एक घटक जोड़ना

अब आपने एक फ्रैक्टल प्रोजेक्ट शुरू किया है, अब कुछ घटकों को जोड़ने का समय है। स्टार्टर फाइलें 'उदाहरण' नामक एक घटक के साथ आती हैं, लेकिन हम इससे छुटकारा पाने जा रहे हैं और स्क्रैच से एक नया बनाते हैं।

फ्रैक्टल के बारे में सबसे अच्छी चीजों में से एक यह है कि आप अपने घटकों को व्यवस्थित कर सकते हैं हालांकि आप घटकों के फ़ोल्डर के अंदर पसंद करते हैं, और यह स्वचालित रूप से उस संगठन को पैटर्न लाइब्रेरी नेविगेशन में नकल करेगा।

पहले घटक के लिए, हम एक के अंदर एक नया प्राथमिक बटन तैयार करेंगे बटन फ़ोल्डर । ऐसा करने के लिए, एक टेम्पलेट फ़ाइल के साथ बनाएँ घटक / बटन / प्राथमिक-बटन / प्राथमिक-बटन.एचबीएस । फ्रैक्टल बॉक्स से बाहर हैंडलबार टेम्पलेट का समर्थन करता है, इसलिए उपयोग करें .hbs दस्तावेज़ विस्तारण:

<पूर्व भाषा = "एचटीएमएल"> <कोड> & lt; बटन वर्ग = "प्राथमिक-बटन" & gt; {{टेक्स्ट}} & lt; / बटन & gt;

{{पाठ}} बटन टैग के अंदर स्ट्रिंग एक परिवर्तनीय प्लेसहोल्डर है, और यह आपको टेम्पलेट का पुन: उपयोग करने, विभिन्न मानों में गुजरने देता है टेक्स्ट डेटा फ़ाइल से।

डेटा फ़ाइल बनाने के लिए, एक ही बेस नाम को हैंडलबार फ़ाइल के रूप में उपयोग करें, लेकिन एक अलग के साथ yml विस्तार। अब प्राथमिक-बटन.config.yml अंदर बैठा घटक / बटन / प्राथमिक-बटन फ़ोल्डर इस तरह दिखना चाहिए: 

 शीर्षक: प्राथमिक बटन
संदर्भ:
    पाठ: मुझे क्लिक करें

यह सब एक साथ आपका पहला नया घटक, प्राथमिक बटन, बटन श्रेणी का सदस्य, टेक्स्ट के साथ बनाता है: 'मुझे क्लिक करें'।

घटक विविधताएं

फ्रैक्टल एक ही घटक के विविधताओं का समर्थन करता है, जिससे हमें विभिन्न संशोधक कक्षाओं या विशेषताओं के साथ एक ही घटक प्रदर्शित करने की अनुमति मिलती है। तो मान लें कि हम एक अंधेरे थीम्ड बटन का उपयोग करने का विकल्प चाहते थे। हम एक नई टेम्पलेट फ़ाइल बना सकते हैं प्राथमिक-बटन - dark.hbs हमारे मूल टेम्पलेट के बगल में (डबल डैश इन घटक विविधताओं को दर्शाता है)। इस टेम्पलेट में हम एक संशोधक लागू करेंगे हम नई शैलियों को संलग्न करने के लिए हुक कर सकते हैं। 

 & lt; बटन वर्ग = "प्राथमिक-बटन" डेटा-थीम = "डार्क" & gt; {{टेक्स्ट}} & lt; / बटन & gt;

अब जब हम अपने सीएसएस लिखते हैं, तो हम इस टेम्पलेट को संशोधित शैलियों के साथ बदलने के लिए निम्नलिखित चयनकर्ता को शामिल कर सकते हैं। 

। प्राइमरी-बटन [डेटा-थीम = "डार्क"] {}

डेटा विविधताएं

जैसे ही हम एकाधिक टेम्पलेट फ़ाइलों को बनाकर विविधताओं को परिभाषित कर सकते हैं, हम अपने डेटा के भीतर भिन्नता भी बना सकते हैं। हम इसे अंदर कर सकते हैं प्राथमिक-बटन.config.yml एक वेरिएंट सरणी जोड़कर फ़ाइल। 

 शीर्षक: प्राथमिक बटन
संदर्भ:
    पाठ: मुझे क्लिक करें
वेरिएंट:
- नाम: डाउनलोड करें
    संदर्भ:
पाठ: अभी डाउनलोड करें
- नाम: स्थापित करें
    संदर्भ:
पाठ: अभी स्थापित करें

यह बटन में पारित अलग-अलग पाठ के साथ 'डाउनलोड' और 'इंस्टॉल' नामक नई विविधताएं बनाएगा। यदि आप इसका उपयोग कर रहे थे तो एक अधिक व्यावहारिक उदाहरण हो सकता है प्राथमिक-बटन। hbs फ्रैक्टल के साथ-साथ उत्पादन में टेम्पलेट। इस मामले में, अपनी डार्क थीम के लिए एक नया टेम्पलेट बनाने की बजाय, आप थीम वैल्यू को एक चर के रूप में पारित कर सकते हैं और सभी अलग-अलग बटन विषयों को दिखाने के लिए डेटा विविधताओं का उपयोग कर सकते हैं। 

 & lt; बटन वर्ग = "प्राथमिक-बटन" डेटा-थीम = "{{थीम}}" & gt; {{टेक्स्ट}} & lt; / बटन & gt;

शीर्षक: प्राथमिक बटन
संदर्भ:
    पाठ: मुझे क्लिक करें
    थीम: लाइट
वेरिएंट:
- नाम: डार्क थीम
    संदर्भ:
पाठ: मुझे क्लिक करें
थीम: डार्क

अन्य संपत्ति को संभालना

फ्रैक्टल मार्कअप और डेटा के अलावा अन्य फ़ाइलों को भी संभालेगा। घटक फ़ोल्डर में जो भी सीएसएस, जावास्क्रिप्ट, छवियां या अन्य संपत्तियां 'संपत्ति' टैब में प्रदर्शित की जाएंगी। आप एक निर्दिष्ट कर सकते हैं Readme.md घटक के लिए फ़ाइल ताकि आप इस बारे में नोट्स लिख सकें कि घटक का उपयोग कैसे किया जाता है, या दस्तावेज़ीकरण के अन्य हिस्सों से लिंक करना।

अगले कदम

अपने सभी मूल घटकों के लिए पिछले उदाहरण को दोहराना आपकी साइट के मुख्य भवन ब्लॉक की एक उपयोगी सूची बनाता है। लेकिन एक पैटर्न लाइब्रेरी की असली शक्ति इन टुकड़ों को एक साथ जोड़ने की क्षमता से आती है। बाहर की जाँच करना सुनिश्चित करें [1 9 5] फ्रैक्टल प्रलेखन

सीखने के लिए कि आप बड़े लोगों को बनाने के लिए छोटे परमाणु तत्वों को जोड़कर अधिक जटिल घटकों को कैसे बनाना शुरू कर सकते हैं।

डॉक्स फ़ोल्डर पारंपरिक शैली गाइड जानकारी और पूरक नोट्स रखने के लिए एक महान जगह है। यह ऑनबोर्डिंग दस्तावेज जैसे चीजों को कवर कर सकता है, आपके ब्रांड की आवाज और स्वर, रंगों और चरों की सूचियां, आदि जैसे दिशानिर्देशों को कवर कर सकते हैं। यह घटकों के रूप में एक ही फ़ोल्डर-आधारित नेविगेशन का पालन करता है, और यदि आप अपनी फाइलों को विषय फ़ोल्डर्स के भीतर व्यवस्थित करते हैं तो आपको नेविगेट करना होगा फ्रैक्टल डॉक्स एक हवा का झोंका।

फ्रैक्टल भी अधिक जटिल डेटा स्रोतों का समर्थन करता है। यदि आपको टेम्पलेट के लिए डेटा का एक बड़ा सेट उत्पन्न करने की आवश्यकता है, या इसे किसी तीसरे पक्ष के एपीआई से खींचना चाहते हैं, तो आप इसका उपयोग कर सकते हैं घटक-नाम। config.js YML फ़ाइल डेटा के स्थान पर एक जावास्क्रिप्ट ऑब्जेक्ट को वापस करने के लिए।

अंत में, फ्रैक्टल आपको कई अलग-अलग टेम्पलेटिंग भाषाओं का उपयोग करने की अनुमति देता है।अपने दस्तावेज में पूरी सूची देखना सुनिश्चित करें।और सबसे अधिक, मज़ा है!

अपने टिकट बुक करें उत्पन्न आज!में न्यूयॉर्क आप मीना मार्कहम से सीख सकते हैं, जिन्होंने हिलेरी क्लिंटन के राष्ट्रपति अभियान के लिए डिजाइन प्रणाली का निर्माण किया, और इसमें सैन फ्रांसिस्को स्टेफनी रेविस यह समझाएगा कि आप एंटरप्राइज़ स्केल में 'लिविंग डिज़ाइन सिस्टम' के लिए एक आधुनिक सीएसएस ढांचे को कैसे आर्किटेक्ट कर सकते हैं और निर्माण कर सकते हैं।

यह लेख मूल रूप से नेट पत्रिका अंक 285 में प्रकाशित किया गया था, यहां खरीदें

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to create an app icon in Illustrator

कैसे करना है Sep 11, 2025

2 का पृष्ठ 1: इलस्ट्रेटर में ऐप आइकन कैसे बनाएं: चरण 01-11 [1 1] ..

Cache in on the BBC's performance booster

कैसे करना है Sep 11, 2025

पिछले साल बीबीसी समाचार ऐप के लिए उपयोगकर्ता परी�..

Create a vector displacement mesh brush

कैसे करना है Sep 11, 2025

याद मत करो वर्टेक्स 2018 , सीजी समुदा�..

How to create a retro logo with Affinity Designer

कैसे करना है Sep 11, 2025

उपयोग करने में आसान और अपने बेल्ट के तहत कई रचनात�..

How to draw with Affinity Photo for iPad

कैसे करना है Sep 11, 2025

आईपैड के लिए एफ़िनिटी फोटो एक महान है तस्�..

Add vibrancy to your oil paintings with these top tips

कैसे करना है Sep 11, 2025

सामग्री मारजोलिन एक माध्यम के रूप में अल..

अपनी साइट पर दृश्य संकेत जोड़ें

कैसे करना है Sep 11, 2025

यह वेबसाइट उपयोगकर्ताओं के लिए केवल एक लिंक पर क्..

5 ways to create more immersive VR experiences

कैसे करना है Sep 11, 2025

आभासी वास्तविकता बिल्कुल नया नहीं है, लेकिन यह के..

श्रेणियाँ