simpledev.css هو إطار عمل CSS جديد أصفه بأنه إطار عمل بدون فئات في الغالب. أسميها في الغالب بلا فئات لأن الكثير من التعليمات البرمجية تستخدم محددات النوع، لذلك لا يتعين عليك إضافة العديد من الفئات لتصميم صفحة الويب الخاصة بك. هناك بعض الفصول، لكننا نحاول تقليلها إلى الحد الأدنى (حتى الآن لا يوجد سوى حوالي 42 فصلًا).

دعونا نتعرف على بعض الميزات أدناه!

سمات

1. تصميم لا فئات في الغالب: إنه في الغالب لا فئات، لذلك سترى صفحة HTML العادية تتحول بمجرد إضافة إطار العمل.
2. الحد الأدنى من الفئات للعناصر المشتركة: نحن نقدم فئات للأشياء الشائعة حقًا: شريط التنقل، وجعل الروابط تبدو وكأنها أزرار، والتذييل الأساسي، وما إلى ذلك.
3. التركيز على إمكانية الوصول: أنا لست خبيرًا في إمكانية الوصول، لكنني بذلت قصارى جهدي لدمج أفضل ممارسات إمكانية الوصول في إطار العمل. لذلك، يحتوي إطار العمل على مكون رابط التخطي، وفئة مخفية بصريًا، ونستخدم rems لأحجام الخطوط.
4. دعم السمة: يدعم simpledev.css سمات مختلفة. يمكنك استخدام الوضع الفاتح فقط، أو الوضع الداكن فقط، أو كليهما.
5. الحد الأدنى من JavaScript: إنه خفيف جدًا على JS. نحن نستخدم JS فقط لمكون شريط التنقل. إذا كنت لا تستخدم شريط التنقل (أو كنت تستخدم مكون شريط التنقل البسيط بدلاً من ذلك)، فيمكنك تخطي JS بالكامل!
6. من السهل البدء: لدينا صفحة البدء التي تحتوي على قوالب أساسية ومتقدمة يمكنك نسخها أو تنزيلها، ومستودع GitHub الذي يمكنك تنزيله أو استخدامه لبدء مستودع جديد، وقلم من CodePen لتجربته مباشرة في متصفحك.
7. الوصفات: لدينا أيضًا صفحة وصفات حيث يمكنك نسخ قواعد CSS ولصقها في ملف custom.css الخاص بك للحصول على أشياء مثل شريط التنقل الثابت، والزوايا المستديرة، والجداول المخططة، والتمرير السلس!
8. لوحات الألوان المخصصة: يمكنك إحضار لوحة الألوان الخاصة بك. لا يحتوي simpledev.css على أي ألوان بشكل افتراضي، لذا يمكنك اختيار الألوان الخاصة بك وإضافتها إلى إطار العمل.
9. المكونات المعيارية: يمكنك تقنيًا تنزيل بعض المكونات واستخدامها بشكل فردي إذا كنت تريد ذلك. ما عليك سوى زيارة GitHub repo وتنزيل ملفات CSS التي تريدها. فقط ضع في اعتبارك أننا قمنا بتطوير مكوناتنا بالإضافة إلى Modern Normalize، لذلك قد تحتاج إلى دمج Modern Normalize للحصول على نفس المظهر.

خلفية

اكتشفت في العام الماضي مستودع إطارات العمل الرائعة على GitHub. أنه يحتوي على قائمة طويلة من أطر عمل CSS مجمعة في فئات مختلفة. لقد كنت مهتمًا بشكل خاص بالقسم الخاص بأطر عمل CSS بدون فئات. لقد أعجبتني فكرة الارتباط بملف CSS وتغيير شكل صفحة HTML على الفور دون الحاجة إلى تعديل HTML الخاص بك.

في البداية، ألهمتني إطار العمل المسمى Water.css الموجود في القائمة، ولكن لاحقًا استلهمت المزيد من الإلهام من Pico.css، وهو إطار عمل آخر لا فئاتي.

في النهاية قررت أن أحاول إنشاء إطار العمل الخاص بي. ومع ذلك، أردت أن يكون الأمر مختلفًا بعض الشيء:

• قررت استخدام Vanilla CSS بدلاً من Sass. وذلك لأنني أردت أن يكون من السهل على الآخرين تجربة إطار العمل والتعلم أيضًا من الكود المصدري.
• لم أكن أريد أن يكون خاليًا من الفئات تمامًا، لأنني أعتقد أن هناك بعض الأشياء التي تتطلب فئات CSS.
• ربما يكون Pico هو أفضل إطار عمل CSS بدون فئات، لكنني أشعر أن بعض العناصر/المكونات كبيرة بعض الشيء، لذلك أردت أن تكون العناصر/المكونات أصغر.

خاتمة

شكرًا لقراءة هذا المنشور! لدي بعض الخدمات التي أود أن أطلبها:

1. يرجى تمييز الريبو بنجمة على GitHub!
2. حاول بناء مشروع صغير باستخدام إطار العمل
3. إذا لاحظت أي مشاكل، يرجى إنشاء مشكلة على GitHub
4. إذا كان لديك أي طلبات ميزات، يرجى بدء مناقشة على GitHub
5. إذا كانت لديك فكرة للمكون، فحاول بنائها على CodePen!

اترك تعليقًا أدناه إذا كان لديك أي أسئلة أو اقتراحات! ربما سأتابع أيضًا برنامجًا تعليميًا حول simpledev.css لاحقًا.