सीएसएस जॉर्ज के साथ अपने सीएसएस डिजाइन में ब्राउज़र संपादित करें

क्या आपने कभी चाहा है? सीधा संपादन करें आपके ब्राउज़र में बिना आपकी CSS फाइलों को वापस स्विच किए? एक समाधान क्रोम डेवलपर टूल है लेकिन कुछ डेवलपर्स एक सरल वर्कफ़्लो पसंद करते हैं.

वह है वहां सीएसएस जॉर्ज यह मुफ़्त है इन-ब्राउज़र संपादन उपकरण काम करता है LESS के ऊपर और यह एक द्वारा शुरू किया गया है सरल जावास्क्रिप्ट फ़ाइल.

ज्यादातर डेवलपर्स पसंद करते हैं ब्राउज़र-आधारित संपादक के बाद से हर कोई कम precompiler का उपयोग नहीं करता है। लेकिन सीएसएस जॉर्ज कम वातावरण पर चलता है जिसे जल्दी से स्थापित किया जा सकता है npm के माध्यम से.

यदि आपके पास npm स्थापित है तो आप इस सरल कोड को चला सकते हैं स्रोत फ़ाइलें जोड़ें अपनी वर्तमान परियोजना के लिए:

 npm install --save-dev css-george 

या आप कर सकते हो खींचें George.js फ़ाइल GitHub से जहां यह अन्य सभी स्रोत फ़ाइलों के साथ होस्ट किया गया है। पूरी परियोजना स्वतंत्र और खुला स्रोत है ताकि आप कर सकें एक पूर्ण प्रतिलिपि डाउनलोड करें GitHub से अगर आप npm का उपयोग नहीं करना चाहते हैं.

उसके साथ .js फ़ाइल आपके साइट हेडर में जोड़ी गई, आप शुरू कर सकते हैं जॉर्ज कार्यों का निष्पादन ब्राउज़र से सही। सेवा मेरे संपादक विंडो खोलें, सबसे कीबोर्ड के ऊपरी-बाएँ कोने में स्थित Shift + 'से पहुँच योग्य टिल्ड कुंजी पर क्लिक करें। ए नयी खिड़की प्रकट होना चाहिए कि कुछ इस तरह दिखता है:

इस स्क्रीन से, आप कर सकते हैं LESS चर को संपादित करें रंगों से लेकर फ़ॉन्ट आकार या फ़ॉन्ट परिवारों तक सब कुछ के लिए उपयोग किया जाता है.

यह वह जगह है जहाँ LESS प्लगइन है एक आवश्यकता बन जाती है क्योंकि आपको CSS जॉर्ज को बताना है जो चर शामिल करने के लिए. एक बार जब वे स्थापित हो जाते हैं, तो आप बस कर सकते हैं CSS जॉर्ज ब्राउज़र संपादक खोलें और शहर जाओ.

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

आप ऐसा कर सकते हैं इसे लाइव देखें CSS जॉर्ज डेमो पेज पर, या एक पूर्ण प्रतिलिपि डाउनलोड करें npm के माध्यम से या GitHub रेपो से.