बूटस्ट्रैप बनाम फाउंडेशन बनाम बुलमा बनाम सिमेंटिक बनाम यूआईकिट

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


यह पोस्ट आपको अपने अगले प्रोजेक्ट के लिए सही CSS फ्रेमवर्क चुनने के लिए गाइड करती है। मुझे लगता है कि आपको फ्रंट-एंड प्रौद्योगिकियों और उत्तरदायी वेब डिज़ाइन सिद्धांतों का बुनियादी ज्ञान है। प्रत्येक CSS फ्रेमवर्क को बूटस्ट्रैप बनाम फाउंडेशन बनाम बुलमा बनाम सिमेंटिक बनाम UIkit के विभिन्न पहलुओं को कवर करने के लिए परीक्षण किया गया है। मैं प्रत्येक ढांचे की उत्पत्ति और इसके शीर्ष विशेषताओं को कवर करता हूं। मैं आपको प्रत्येक रूपरेखा के लिए एक त्वरित शुरुआत गाइड भी देता हूं.

बूटस्ट्रैप बनाम फाउंडेशन बनाम बुलमा बनाम सिमेंटिक बनाम यूआईकिट

इस पोस्ट के अंत में, आप प्रत्येक फ्रेमवर्क की शीर्ष विशेषताओं और सीमाओं को जानेंगे और बेहतर स्थिति में होंगे कि यह पहचान सके कि उनमें से कौन सा आपकी आवश्यकताओं के अनुरूप है। आएँ शुरू करें:

  • बूटस्ट्रैप #
  • फाउंडेशन #
  • Bulma #
  • शब्दार्थ #
  • UIkit #

बूटस्ट्रैप (Getbootstrap.com)

बूटस्ट्रैप बनाम

बूटस्ट्रैप वेबसाइटों को जल्दी से विकसित करने के लिए एक उत्तरदायी, मोबाइल-पहला CSS फ्रेमवर्क है। यह इस सूची में सबसे लोकप्रिय सीएसएस फ्रेमवर्क है, जिसमें गीथहब पर 130k से अधिक सितारे हैं। बूटस्ट्रैप में एचटीएमएल, सीएसएस और जावास्क्रिप्ट के साथ विकसित तैयार घटक शामिल हैं.

बूटस्ट्रैप को शुरू में 2011 में ट्विटर पर विकसित किया गया था, लेकिन यह अंततः एक स्वतंत्र परियोजना के रूप में विकसित हुआ। वर्तमान स्थिर संस्करण 4.3 है। 5 बूटस्ट्रैप, जो वर्तमान में विकास में है, वेनिला जेएस के साथ jQuery के उपयोग को स्थानापन्न करेगा, पुराने ब्राउज़रों के लिए समर्थन और वर्तमान प्लेटफॉर्म को बदल देगा.

बूटस्ट्रैप का उपयोग करने के लिए, आपको एक नया वेब पेज बनाते समय निम्नलिखित करना होगा:

  • HTML5 सिद्धांत का उपयोग करें
  • एक व्यूपोर्ट मेटा टैग बनाएं
  • अपने सिर टैग में बूटस्ट्रैप सीएसएस आयात करें
  • JQuery, Popper.js और फिर bootstrap.min.js के क्रम में स्क्रिप्ट आयात करें बूटस्ट्रैप के जावास्क्रिप्ट कार्यों में से किसी का उपयोग करने के लिए

यहाँ एक स्टार्टर टेम्पलेट है.




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

एक मजबूत मोबाइल-प्रथम दृष्टिकोण के अलावा, फ्रेमवर्क की परिपक्वता के लिए महत्वपूर्ण सामुदायिक समर्थन है। इसके अलावा, जबकि बूटस्ट्रैप एक सूची रखता है स्वीकृत ढांचे और किट आपके लिए चुनने के लिए, थर्ड पार्टी डेवलपर्स बूटस्ट्रैप के लिए किट और पैकेज भी प्रदान करते हैं जिन्हें आपकी परियोजनाओं के साथ समान रूप से आसानी से एकीकृत किया जा सकता है। यहाँ बूटस्ट्रैप के लिए मुफ्त यूआई किट की हमारी पसंद है। पहले मोबाइल होने के अलावा, टचस्क्रीन के लिए कुछ समर्थन है। जैसा कि बूटस्ट्रैप एक परिपक्व परियोजना है, यह कई पहुंच सुविधाओं का समर्थन करता है.

बूटस्ट्रैप की सबसे बड़ी कमी पृष्ठ भार में वृद्धि है। हालांकि कुछ सौ किलोबाइट एक ऐसी दुनिया में महत्वपूर्ण नहीं हो सकते हैं जहां औसत पेज का आकार 2 एमबी के आसपास है, यह उन डेवलपर्स को चिंतित कर सकता है जो उच्चतम दक्षता के लिए लक्ष्य रखते हैं। JQuery पर निर्भरता एक चिंता का विषय है, हालांकि यह जानना उत्साहजनक है कि jQuery का निष्कासन बूटस्ट्रैप 5 के रोडमैप का एक हिस्सा है.

�� पेशेवरों:

  • मोबाइल पहला, उत्तरदायी वेब डिज़ाइन ढांचा
  • अच्छा सामुदायिक समर्थन और प्रलेखन

�� विपक्ष:

  • बड़े निर्भरता आकार (~ 300KB)
  • काम करने के लिए कुछ घटकों के लिए jQuery पर निर्भरता

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

आधार (Foundation.zurb.com)

नींव बनाम

फाउंडेशन, पहली बार 2011 में बूटस्ट्रैप के एक महीने के भीतर जारी किया गया, न केवल वेबसाइटों के लिए फ्रंट एंड फ्रेमवर्क का एक वर्ग है, बल्कि एप्लिकेशन और ईमेल भी! आइए देखें कि बूटस्ट्रैप बनाम फाउंडेशन कैसे स्टैक करते हैं!

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

अपनी वेबसाइट पर फाउंडेशन का उपयोग करने के लिए व्यापक कदम इस प्रकार हैं:

  • डाउनलोड करें फाउंडेशन के संसाधन
  • HTML5 सिद्धांत का उपयोग करें
  • हेड टैग में Foundation CSS फ़ाइल जोड़ें
  • JQuery, what-input.js और फ़ाउंडेशन की स्क्रिप्ट शामिल करें
  • बॉडी टैग को समाप्त करने से ठीक पहले, फाउंडेशन को विभिन्न डोम तत्वों के लिए फाउंडेशन गुण संलग्न करने के लिए नींव () फ़ंक्शन को कॉल करें

यहाँ एक त्वरित शुरू टेम्पलेट है:

$ (दस्तावेज़) .foundation ();

आप डाउनलोड कर सकते हैं एक कस्टम बिल्ड यदि आपकी आवश्यकताओं के अनुरूप है कि फाउंडेशन फ्रेमवर्क.

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

�� पेशेवरों:

  • मोबाइल पहला, उत्तरदायी वेब डिज़ाइन ढांचा
  • एप्लिकेशन और ईमेल के लिए समर्थन प्रदान करता है

�� विपक्ष:

  • बड़े निर्भरता आकार जैसे बूटस्ट्रैप
  • कई सुविधाएँ जो शुरुआती को प्रभावित कर सकती हैं

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

आप भी इन लेखों में रुचि ले सकते हैं:

  • सर्वश्रेष्ठ कोणीय व्यवस्थापक डैशबोर्ड टेम्पलेट

Bulma (Bulma.io)

bulma बनाम

Bulma एक खुला स्रोत है, Flexbox पर आधारित हल्के CSS फ्रेमवर्क.

जबकि बूटस्ट्रैप के स्तर पर काफी नहीं है, बुल्मा 35k सितारों के साथ गिटहब पर एक काफी लोकप्रिय परियोजना है.

Bulma को मोबाइल-पहले, उत्तरदायी ढांचे के लिए डिज़ाइन किया गया है, जिसमें मॉड्यूलरिटी पर अतिरिक्त ध्यान दिया गया है.

अपनी परियोजना में Bulma का उपयोग करने के लिए, आपको इन चरणों का पालन करना होगा:

  • HTML5 सिद्धांत जोड़ें
  • उत्तरदायी व्यूपोर्ट के लिए मेटा टैग जोड़ें
  • अपने सिर टैग में Bulma CSS फ़ाइल शामिल करें
  • [वैकल्पिक] माउस का उपयोग करने के लिए फ़ॉन्ट स्क्रिप्ट जोड़ें

यहाँ एक टेम्पलेट है:

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

�� पेशेवरों:

  • लाइटवेट, फ्लेक्सबॉक्स-आधारित रूपरेखा
  • मॉड्यूलर तत्व लचीलेपन को सक्षम करते हैं

�� विपक्ष:

  • कोई जावास्क्रिप्ट तत्व नहीं
  • पहुंच के लिए सीमित समर्थन

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

सिमेंटिक (Semantic-ui.com)

शब्दार्थ बनाम

सहज ज्ञान युक्त उपयोगकर्ता इंटरफेस बनाने के उद्देश्य से सिमेंटिक एक सीएसएस फ्रेमवर्क है.

यह ढांचा कक्षा के नामों का उपयोग करता है जो सीखने की प्रक्रिया को आसान बनाने में मदद करने के लिए स्पष्ट हैं। शब्दावलियों में कक्षाओं को वर्गीय नामों से तार्किक अवधारणाओं को जोड़ने के लिए अंग्रेजी भाषा से प्रेरित किया जाता है.

अपनी परियोजना में शब्दार्थ घटकों का उपयोग करने के लिए, आपको निम्नलिखित चरणों को पूरा करना होगा:

  • HTML5 सिद्धांत शामिल करें
  • सिमेंटिक सीएसएस फ़ाइल लोड करें
  • किसी भी जावास्क्रिप्ट तत्वों को कॉल करने से पहले jQuery को शामिल करें
  • सिमेंटिक की स्क्रिप्ट शामिल करें

यहाँ एक टेम्पलेट है:

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

�� पेशेवरों:

  • सहज वर्ग के नाम
  • जावास्क्रिप्ट चौखटे के साथ एकीकरण

�� विपक्ष:

  • बड़ी परियोजनाओं की आवश्यकता को पूरा नहीं कर सकते हैं
  • समुदाय से सीमित समर्थन

सिमेंटिक वह फ्रेमवर्क है जिसमें अपेक्षाकृत आसान सीखने की अवस्था है, और जावास्क्रिप्ट फ्रेमवर्क का भी समर्थन करता है। यदि आपकी आवश्यकताओं में जावास्क्रिप्ट का उपयोग शामिल है, तो आपको निश्चित रूप से अपने अगले प्रोजेक्ट में इस ढांचे के उपयोग पर विचार करना चाहिए.

UIKit (Getuikit.com)

uikit बनाम

UIkit एक आधुनिक, हल्का ढांचा है जिसमें वेब इंटरफेस बनाने के लिए मॉड्यूलरिटी पर बहुत जोर दिया गया है.

यह GitHub पर लगभग 15k सितारों वाला एक अपेक्षाकृत नया, ओपन-सोस फ्रेमवर्क है। UIkit आपको उत्तरदायी डिज़ाइन बनाने में मदद करता है, ब्राउज़रस्टैक पर स्वचालित निरंतर तैनाती के साथ.

अपने प्रोजेक्ट में UIkit घटकों का उपयोग करने के लिए, आपको निम्नलिखित चरणों को पूरा करना होगा:

  • HTML5 सिद्धांत शामिल करें
  • UIkit CSS फ़ाइल लोड करें
  • कार्यक्षमता और आइकन के लिए UIkit की स्क्रिप्ट शामिल करें

यहाँ एक टेम्पलेट है:

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

�� पेशेवरों:

  • प्रतिरूपकता पर ध्यान दें, जिससे उनके साथ काम करना आसान हो जाए
  • तत्व अनुकूलन योग्य हैं, जिससे लचीलापन आता है

�� विपक्ष:

  • सीमित प्रलेखन और सामुदायिक समर्थन

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

बूटस्ट्रैप बनाम फाउंडेशन बनाम बुलमा बनाम सिमेंटिक बनाम UIkit: अंतिम विचार

यह समझने के लिए कि हमने शीर्ष सीएसएस फ्रेमवर्क की तुलना में इस बारे में क्या बात की है:

  • यदि आप एक परेशानी मुक्त समाधान चाहते हैं जिसमें बहुत अधिक समर्थन है, तो बूटस्ट्रैप के लिए जाएं
  • अपने घटकों पर अधिक स्वतंत्रता पाने के लिए, फाउंडेशन का प्रयास करें
  • अपनी परियोजना के लिए एक हल्का अतिरिक्त सुनिश्चित करने के लिए, Bulma या UIkit को आज़माएं
  • यदि आपका वेब एप्लिकेशन भारी जावास्क्रिप्ट फ्रेमवर्क का उपयोग करता है, तो आपको सिमेंटिक का विकल्प चुनना चाहिए

2020 में आप किस सीएसएस फ्रेमवर्क का उपयोग करते हैं? नीचे कमेंट्स में हमें बताएं!

अपनी वर्डप्रेस साइट को गति देने पर हमारे क्रैश कोर्स में शामिल होना न भूलें। कुछ सरल सुधारों के साथ, आप अपने लोडिंग समय को 50-80% तक कम कर सकते हैं:

करोल के द्वारा लेआउट, प्रस्तुति और संपादन.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map