قم بتحرير CSS Designs In-Browser باستخدام CSS George

هل تريد من قبل؟ إجراء تعديلات مباشرة في متصفحك دون الرجوع إلى ملفات CSS الخاصة بك؟ أحد الحلول هو أدوات مطوري Chrome ولكن بعض المطورين تفضل سير عمل أبسط.

هذا هو المكان CSS جورج يأتي فيها. هذا مجاني أداة التحرير داخل المتصفح أعمال على رأس أقل وانها بدأت من قبل ملف جافا سكريبت بسيط.

معظم المطورين يفضلون محرر المستندة إلى المستعرض لأنه ليس كل شخص يستخدم برنامج التحويل البرمجي LESS. لكن CSS جورج يعمل على بيئة أقل والتي يمكن تثبيتها بسرعة عبر npm.

إذا قمت بتثبيت npm ، فيمكنك تشغيل هذا الكود البسيط إضافة الملفات المصدر لمشروعك الحالي:

 npm تثبيت - حفظ ديف المغلق جورج 

أو يمكنك ذلك اسحب ال George.js ملف من GitHub حيث يتم استضافته إلى جانب جميع الملفات المصدر الأخرى. المشروع بأكمله مجاني ومفتوح المصدر حتى تتمكن من ذلك تحميل نسخة كاملة من جيثب إذا كنت لا ترغب في استخدام npm.

مع ال .شبيبة ملف المضافة إلى رأس موقعك ، يمكنك البدء تنفيذ وظائف جورج مباشرة من المتصفح. إلى افتح نافذة المحرر, انقر فوق مفتاح التلدة الذي يمكن الوصول إليه من Shift + الموجود في الزاوية العلوية اليسرى لمعظم لوحات المفاتيح. ا نافذة جديدة يجب أن يبدو يبدو مثل هذا:

من هذه الشاشة ، يمكنك ذلك تحرير متغيرات أقل تستخدم لكل شيء من الألوان إلى أحجام الخطوط أو عائلات الخطوط.

هذا هو المكان البرنامج المساعد أقل يصبح ضرورة لأنه يجب عليك إخبار CSS George المتغيرات التي يجب تضمينها. بمجرد إعدادها ، يمكنك فقط افتح محرر متصفح CSS George وانتقل الى المدينة.

آمل أن يكون من الواضح أن هذه الأداة لا يجب أن تدرج في وقت التشغيل. إلا إذا كنت تريد على وجه التحديد السماح للزائرين تحرير لون الصفحة والاسلوب, التي عموما ليست فكرة جيدة. لكن ل اختبار محلي, CSS George هي أداة نادرة توفر فائدة لجميع مطوري الواجهة الأمامية.

يمكنك رؤيته مباشرة على صفحة CSS George التجريبية ، أو تحميل نسخة كاملة عبر npm أو من GitHub repo.