वेब डिज़ाइनर्स के लिए टेन लिविंग स्टाइल गाइड टूल्स - बेस्ट ऑफ़

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

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

इस पोस्ट में, हमने एक साथ 10 आसान टूल रखे हैं जो आपकी मदद कर सकते हैं अपनी खुद की जीवन शैली गाइड बनाएँ.

1. मुझे स्टाइल करो

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

2. फेब्रिकेटर

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

3. सामने

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

4. आस

साथ में Aigis, आप किसी भी पाठ फ़ाइलों से शैली गाइड उत्पन्न कर सकते हैं (उदा. .सीएसएस, .एससीएसएस, .styl, .md)। आप मार्कडाउन में प्रलेखन भी लिख सकते हैं, और अपनी साइट थीम को कस्टमाइज़ कर सकते हैं.

5. होलोग्राम

होलोग्राम ट्रुलिया द्वारा बनाया गया था, और शैली गाइड बनाने के लिए एक महान समाधान है। यह एक रूबी रत्न है आपके सीएसएस में टिप्पणी पार्स भयानक शैली गाइड उत्पन्न करने के लिए। होलोग्राम में कुछ मूल शैलियों और नेविगेशन के साथ एक टेम्प्लेटिंग सिस्टम है जिससे आपकी स्टाइल गाइड भी आसान हो जाती है.

6. स्टाइल

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

7. केएसएस

केएसएस (स्टाइल स्टाइल शीट्स) मुख्य रूप से एक है प्रलेखन विनिर्देश और एक स्टाइल गाइड फॉर्मेट जो है इसकी अपनी टिप्पणी वाक्य रचना है. केएसएस में एक रूबी लाइब्रेरी भी शामिल है जो पार्स करती है .सास, .एससीएसएस, तथा .सीएसएस एक साफ शैली गाइड में KSS दिशा निर्देशों के साथ प्रलेखित फाइलें। केएसएस अधिक उन्नत उपयोगकर्ताओं और पेशेवर टीमों के लिए है, क्योंकि इसके साथ एक स्टाइल गाइड बनाने के लिए कोडिंग ज्ञान की आवश्यकता होती है.

8. SC5 स्टाइल गाइड जेनरेटर

उसके साथ SC5 स्टाइल गाइड जेनरेटर आप सीधे अपने ब्राउज़र में स्टाइल गाइड बना और संपादित कर सकते हैं। यह है केएसएस पर आधारित है कुछ शांत विशेषताओं के साथ, जैसे कि एक AngularJS संचालित UI जो आपकी शैलियों को देखने, खोजने और परीक्षण करने में आपकी मदद करता है। SC5 KSS के समान दस्तावेज़ संकेतन का उपयोग करता है। यह SASS, LESS, PostCSS और शुद्ध CSS स्टाइलशीट का समर्थन करता है.

9. स्टाइलकोडो

StyleDocco एक आसान Node.js अनुप्रयोग है कि है अपनी स्टाइलशीट से स्टाइल गाइड बनाता है. आप इसे npm से इंस्टॉल कर सकते हैं। उत्पन्न स्टाइलगाइड में, स्टाइलडोको आपके द्वारा लागू की गई शैलियों और HTML कोड का एक उदाहरण के साथ एक पूर्वावलोकन दिखाता है.

StyleDocco के होम पेज पर, आप दो स्टाइल गाइड उदाहरण पा सकते हैं, एक डिफ़ॉल्ट स्टाइलशीट से उत्पन्न, और दूसरा बूटस्ट्रैप साइट से उत्पन्न। उदाहरण आपको दस्तावेज़ सिंटैक्स SytleDocco का उपयोग करने में भी मदद कर सकते हैं.

10. पैटर्न लैब

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