simpledev.css एक नया CSS फ्रेमवर्क है जिसे मैं अधिकतर क्लासलेस फ्रेमवर्क के रूप में वर्णित करता हूं। मैं इसे अधिकतर क्लासलेस कहता हूं क्योंकि बहुत सारे कोड प्रकार चयनकर्ताओं का उपयोग करते हैं, इसलिए आपको अपने वेब पेज को स्टाइल करने के लिए कई कक्षाएं जोड़ने की ज़रूरत नहीं है। कुछ कक्षाएं हैं, लेकिन हम उन्हें न्यूनतम रखने की कोशिश करते हैं (अभी तक लगभग 42 कक्षाएं ही हैं)।

आइए नीचे दी गई कुछ विशेषताओं पर गौर करें!

विशेषताएँ

1. ज्यादातर क्लासलेस डिज़ाइन: यह ज्यादातर क्लासलेस है, इसलिए जैसे ही आप फ्रेमवर्क जोड़ते हैं, आप अपने सादे HTML पेज को रूपांतरित होते देखेंगे।
2. सामान्य तत्वों के लिए न्यूनतम कक्षाएं: हम उन चीज़ों के लिए कक्षाएं प्रदान करते हैं जो वास्तव में सामान्य हैं: एक नेवबार, लिंक को बटन की तरह बनाना, एक मूल पाद लेख, आदि।
3. पहुंच-केंद्रित: मैं एक पहुंच-योग्यता विशेषज्ञ नहीं हूं, लेकिन मैंने पहुंच-योग्यता की सर्वोत्तम प्रथाओं को ढांचे में शामिल करने की पूरी कोशिश की। इसलिए, फ्रेमवर्क में एक स्किप लिंक घटक, एक दृश्य-छिपा वर्ग है, और हम फ़ॉन्ट आकार के लिए रेम्स का उपयोग करते हैं।
4. थीम समर्थन: Simpledev.css विभिन्न थीम का समर्थन करता है। आप केवल लाइट मोड, केवल डार्क मोड या दोनों का उपयोग कर सकते हैं।
5. न्यूनतम जावास्क्रिप्ट: यह जेएस पर बहुत हल्का है। हम केवल नेवबार घटक के लिए JS का उपयोग करते हैं। यदि आप नेवबार का उपयोग नहीं कर रहे हैं (या आप इसके बजाय सरल नेवबार घटक का उपयोग कर रहे हैं), तो आप जेएस को पूरी तरह से छोड़ सकते हैं!
6. आरंभ करना आसान: हमारे पास एक आरंभ करें पृष्ठ है जिसमें बुनियादी और उन्नत टेम्पलेट हैं जिन्हें आप कॉपी या डाउनलोड कर सकते हैं, एक GitHub रेपो जिसे आप डाउनलोड कर सकते हैं या एक नया रेपो शुरू करने के लिए उपयोग कर सकते हैं, और CodePen से एक पेन इसे सीधे अपने ब्राउज़र में आज़माने के लिए।
7. रेसिपी: हमारे पास एक रेसिपी पेज भी है जहां आप चिपचिपा नेवबार, गोलाकार कोनों, धारीदार टेबल और चिकनी स्क्रॉलिंग जैसी चीजें प्राप्त करने के लिए सीएसएस नियमों को अपनी कस्टम.सीएसएस फ़ाइल में कॉपी और पेस्ट कर सकते हैं!
8. कस्टम रंग पैलेट: आप अपना खुद का रंग पैलेट ला सकते हैं। Simpledev.css में वास्तव में डिफ़ॉल्ट रूप से कोई रंग नहीं होता है, इसलिए आप अपने खुद के रंग चुन सकते हैं और इसे फ्रेमवर्क में जोड़ सकते हैं।
9. मॉड्यूलर घटक: यदि आप चाहें तो आप तकनीकी रूप से कुछ घटकों को डाउनलोड कर सकते हैं और उन्हें व्यक्तिगत रूप से उपयोग कर सकते हैं। बस GitHub रेपो पर जाएँ और अपनी इच्छित CSS फ़ाइलें डाउनलोड करें। बस ध्यान रखें कि हमने अपने घटकों को मॉडर्न नॉर्मलाइज़ के शीर्ष पर विकसित किया है, इसलिए आपको समान लुक पाने के लिए मॉडर्न नॉर्मलाइज़ को शामिल करने की आवश्यकता हो सकती है।

पृष्ठभूमि

पिछले साल मैंने GitHub पर अद्भुत-सीएसएस-फ्रेमवर्क रेपो की खोज की थी। इसमें विभिन्न श्रेणियों में समूहीकृत सीएसएस फ्रेमवर्क की एक लंबी सूची शामिल है। मुझे विशेष रूप से क्लासलेस सीएसएस फ्रेमवर्क वाले अनुभाग में रुचि थी। मुझे CSS फ़ाइल से लिंक करने और आपके HTML को संशोधित किए बिना HTML पेज के दिखने के तरीके को तुरंत बदलने का विचार पसंद आया।

शुरुआत में, मैं सूची में Water.css नामक फ्रेमवर्क से प्रेरित था, लेकिन बाद में मैंने Pico.css, एक और क्लासलेस फ्रेमवर्क से अधिक प्रेरणा प्राप्त की।

आखिरकार मैंने अपना स्वयं का ढांचा बनाने का प्रयास करने का निर्णय लिया। हालाँकि, मैं चाहता था कि यह थोड़ा अलग हो:

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

निष्कर्ष

इस पोस्ट को पढ़ने के लिए धन्यवाद! मुझे कुछ एहसान माँगने हैं:

1. कृपया GitHub पर रेपो को तारांकित करें!
2. ढांचे के साथ एक छोटी परियोजना बनाने का प्रयास करें
3. यदि आपको कोई समस्या दिखती है, तो कृपया GitHub पर एक समस्या बनाएं
4. यदि आपके पास कोई फीचर अनुरोध है, तो कृपया GitHub पर चर्चा शुरू करें
5. यदि आपके पास घटक के लिए कोई विचार है, तो उसे CodePen पर बनाने का प्रयास करें!

यदि आपका कोई प्रश्न या सुझाव है तो नीचे एक टिप्पणी छोड़ें! मैं संभवतः बाद में Simpledev.css पर एक ट्यूटोरियल भी जारी रखूंगा।