ZURB फाउंडेशन: प्रतिसादात्मक फ्रंट एंडसाठी वापरकर्ता इंटरफेस CSS फ्रेमवर्क

2010 मध्ये डिझाइन एजन्सी ZURB ने सेवा सुरू करण्याच्या उद्देशाने एक CSS फ्रेमवर्क तयार केला प्रोटोटाइप तयार करणे सुलभ करा e विकासाचा कालावधी कमी करा. हे करण्यासाठी, सर्वोत्कृष्ट स्निपेट्स, नमुने आणि टेम्पलेट्स त्यांना फाउंडेशनमध्ये एकत्र आणण्यासाठी निवडले गेले, फ्रेमवर्क जे 2011 मध्ये मुक्त स्त्रोत प्रकल्प म्हणून प्रकाशित झाले आणि जे तेव्हापासून लोकांसाठी विनामूल्य आहे.

फाउंडेशन एक प्रतिसादात्मक फ्रंट एंड फ्रेमवर्क आहे, ज्यामध्ये UI कॉन्फिगरेशनसाठी कार्यक्षम HTML आणि CSS घटक असतात (वापरकर्ता इंटरफेस), विविध स्निपेट्स आणि टेम्पलेट्स पण असंख्य पर्यायी JavaScript विस्तार. वेब फ्रेमवर्कमध्ये ए मॉड्यूल रचना आणि वेगवेगळ्या उपकरणांवरून प्रवेश करण्यायोग्य प्रकल्प कॉन्फिगर करण्यासाठी डिझाइन केले आहे; सह वितरीत केले जाते एमआयटी परवाना आणि दोन्हीवरून डाउनलोड केले जाऊ शकते अधिकृत मुख्यपृष्ठ चालू असणे GitHub. फाउंडेशन आवृत्ती 4.0 वरून कामकाजाचा आधार लागू होतो "मोबाईल फर्स्ट", म्हणून तेव्हापासून आम्ही कार्यप्रदर्शन ऑप्टिमाइझ करण्यासाठी आणि फ्रेमवर्कमधील फाइल्सचा आकार हलका करण्यासाठी अनेक नवीन मॉड्यूल्सच्या मदतीने काम करत आहोत. फाउंडेशनच्या मानक आवृत्ती व्यतिरिक्त, ZURB ने ईमेल वृत्तपत्रांच्या विकासासाठी इतर रूपे देखील प्रकाशित केली आहेत (ईमेलसाठी फाऊंडेशन) आणि एक पृष्ठ साइट्स (अॅप्ससाठी पाया).

फाउंडेशन, त्याच्या मॉड्यूलर संरचनेद्वारे वैशिष्ट्यीकृत प्रतिसादात्मक वेब फ्रेमवर्क, लवचिकतेमध्ये सर्वात जास्त फायदे. डाउनलोड करण्यापूर्वी तुम्हाला कोणते घटक निवडायचे आणि कोणते नाही हे ठरवण्याची शक्यता आहे: अशा प्रकारे तुम्हाला आवश्यक नसलेले मॉड्युल डाउनलोड करण्याची सक्ती न करता तुम्ही वेब कोड कलेक्शनचा तुमचा स्वतःचा सानुकूलित प्रकार तयार करू शकता. आणि जर असे घडले की तुम्हाला असे लक्षात आले की तुम्हाला एक घटक आवश्यक आहे जो तुम्ही डाउनलोडच्या वेळी निवडला नव्हता, तर तुम्ही ते नंतर फ्रेमवर्कमध्ये सहजपणे जोडू शकता. त्याच प्रकारे, यापुढे आपल्यासाठी उपयुक्त नसलेले मॉड्यूल्स काढून टाकणे देखील शक्य आहे: म्हणून आपणास नेहमीच आवश्यक असलेली फंक्शन्स असण्याची हमी दिली जाते. आपल्या वेब प्रकल्पाची प्राप्ती.

फाउंडेशन 6.0 साठी तुमच्याकडे आणखी एक पर्याय आहे 40 घटक खालील सात क्षेत्रांशी संबंधित:

• ग्रिड: रिस्पॉन्सिव्ह वेब डिझाईनसाठी निर्णायक घटक म्हणजे ग्रिडचा लवचिक लेआउट, ज्याची रुंदी 1200 पिक्सेल आहे. तुम्ही या मॉड्युलची निवड रद्द देखील करू शकता, तथापि प्रणाली वेगवेगळ्या उपकरणांवरून प्रवेश करण्यायोग्य आणि भिन्न रिझोल्यूशन स्केलवर सुसंगत वेब प्रोजेक्ट डिझाइन करण्यासाठी आधार बनवते. या व्यतिरिक्त, आवृत्ती 6.0 पासून प्रारंभ करून "फ्लेक्स ग्रिड" मॉड्यूल निवडण्याची देखील शक्यता आहे, जे CSS फ्लेक्सबॉक्स मॉडेलच्या (जसे की क्षैतिज किंवा अनुलंब) च्या आधारावर कार्य करून घटकांची अधिक लवचिक स्थिती करण्यास अनुमती देते. वस्तूंचे संघटन).

• जनरल : सामान्य मॉड्यूल्समध्ये (ज्याचा अधिकृतपणे ग्रिड देखील भाग आहे) प्रथम आणि सर्वात महत्त्वाचे वर्ग आहेत फ्लोट e दृश्यमानता, धन्यवाद जे तुम्ही करू शकता defiएकल घटकांची स्थिती आणि दृश्यमानतेशी संबंधित वर्तनाचे नियम परिभाषित करा; याव्यतिरिक्त, या भागात तुम्हाला फॉर्म तयार करण्यासाठी एक घटक तसेच लेखन आणि मजकूरासाठी मूलभूत स्वरूप असलेले प्रिंटिंग हाउस मॉड्यूल देखील सापडेल.

• नियंत्रण: तुमच्या वेब प्रकल्पातील सर्व अत्यंत आवश्यक संवादात्मक घटक येथे आहेत. उदाहरणार्थ, ही बटणे आहेत जी वापरकर्त्याला एका क्लिकसह इतरत्र मार्गदर्शन करतात किंवा निवडलेले घटक बंद करतात. असे मॉड्यूल देखील आहेत ज्यासह आपण स्लाइडर समाकलित करू शकता आणि बटणे चालू / बंद मोडसह.

• जलवाहतूक: फ्रंट एंडच्या कॉन्फिगरेशनमध्ये, नेव्हिगेशन घटक नक्कीच गहाळ होऊ शकत नाहीत, त्यामुळे ZURB फाउंडेशनसह तुमचा प्रकल्प पूर्ण करण्यासाठी तुमच्याकडे अनेक प्रकारचे मॉड्यूल आहेत ज्यात सेट करायचे आहेत. मेनू बार आणि मेनू (ड्रॉप-डाउन, ड्रॉप-डाउन सूची, ड्रिलडाउन), नेव्हिगेशन मार्ग (ब्रेडक्रंब) जोडा किंवा पृष्ठांवर क्रमांक जोडा.

• कंटेनर: सामायिक जागेत मजकूर, प्रतिमा किंवा व्हिडिओ यासारखे भिन्न घटक समाविष्ट करण्याची कंटेनर ही एक विलक्षण संधी आहे. येथे तुम्हाला क्लासिक सामग्री विजेट्ससाठी शैली सापडतील जसे की ड्रॉप-डाउन मेनू, टॅब, कॅस्केडिंग सेक्टर किंवा मोडल संवाद.

• मीडिया: "मीडिया" विभागात तुम्हाला फ्रेमवर्क मॉड्यूल्स आढळतील जे मल्टीमीडिया घटकांच्या समावेशासाठी उपयुक्त असतील. उदाहरणार्थ, "फ्लेक्स व्हिडिओ" घटक तुम्हाला यामध्ये समर्थन देतोव्हिडिओ टाकत आहे आणि सामग्री भिन्न डिस्प्ले आकार आणि रिझोल्यूशनच्या प्रकारांशी जुळवून घेतल्याची खात्री करते. याव्यतिरिक्त, पूर्वावलोकन प्रतिमांसाठी घटक तसेच साधने वापरण्यासाठी उपयुक्त टिपा देखील आहेत.

• प्लग-इन: शेवटी तुम्ही ZURB फाउंडेशनसाठी काही अतिशय उपयुक्त विस्तार निवडू शकता जे तुमच्यासाठी वेब फ्रेमवर्कसह काम करणे सोपे करतात. उदाहरणार्थ, "मोशन UI" लायब्ररीसह, तुम्हाला एक अतिशय उपयुक्त लायब्ररी डाउनलोड करण्याची शक्यता आहे, जरी फक्त Sass व्हेरियंटसाठी उपलब्ध असले तरीही, ज्यामुळे UI पॅसेज आणि अॅनिमेशन तयार करणे एक ब्रीझ बनते.

तसेच, डाउनलोड करण्यापूर्वी, आपण निवडू शकता की नाही defiकाही पूर्ण करा फ्रेमवर्कसाठी मानक सेटिंग्ज. यामध्ये स्तंभांची संख्या किंवा जाडी आणि ग्रिड सिस्टीमची कमाल रुंदी तसेच विविध रंग सेटिंग्ज आणि मजकूराची दिशा (डावीकडून उजवीकडे किंवा उजवीकडून डावीकडे) निश्चित करण्यासाठी पर्याय समाविष्ट आहेत. आपण प्रथम वैयक्तिक मॉड्यूलच्या कार्यप्रणालीचा अभ्यास न करता फ्रेमवर्कची चाचणी घेऊ इच्छित असल्यास, आपण फाउंडेशनची पूर्ण आवृत्ती म्हणून देखील डाउनलोड करू शकता (पूर्ण) किंवा वैकल्पिकरित्या फिकट मूलभूत प्रकार म्हणून (अत्यावश्यक).

जर तुम्ही CSS द्वारे ऑफर केलेल्या संधींबद्दल समाधानी असाल आणि डाउनलोड केलेल्या CSS फाईलवर फक्त शैली लिप्यंतरण करा, तर तुम्ही निश्चितपणे योग्य निर्णय घेतला आहे. तथापि, फाउंडेशन फ्रेमवर्कमध्ये आणखी एक विशेष वैशिष्ट्य आहे: CSS कोडचा आधार Sass शैली शीट भाषेत लिहिलेला आहे (सिंटॅक्टली अप्रतिम स्टाइलशीट्स), जे CSS साठी तथाकथित प्रीप्रोसेसर आहे. Sass तुम्हाला स्टाईल शीटवर काम करणे शक्य करते .scss जे नंतर संकलित किंवा लोकप्रिय .css फायलींमध्ये लिप्यंतरण केले जाऊ शकते आणि जे नंतर ब्राउझरद्वारे वाचले आणि अर्थ लावले जाते.

तुम्ही ZURB फ्रेमवर्कचा Sass प्रकार वापरल्यास, तुम्हाला खालील फायदे मिळतील:

• सरलीकृत वाक्यरचना (Sass किंवा CSS), जे स्टाईल शीट लिहिणे सोपे करते

• ची शक्यता defiसमाप्त देई मॉडेल्स (मिक्सिन्स) आवर्ती फॉरमॅट्स मध्यभागी सेव्ह करण्यासाठी आणि त्यांना इच्छेनुसार एकत्रित करण्यासाठी

• विविध शैली पत्रके साधे संयोजन HTTP विनंत्या कमी करण्यासाठी

• वापरत आहे चल आणि कार्ये मध्यभागी रंग, अंतर, फॉन्ट इत्यादींची देवाणघेवाण करण्यासाठी

• कोड फक्त संरचित केले जाऊ शकते धन्यवाद घरटे श्रेणीबद्ध क्रमाने, तुम्हाला कोडच्या बर्याच स्ट्रिंगशिवाय क्लिनर काम करण्याची परवानगी देते

सास कंपाइलर मूळतः रुबीमध्ये लिहिलेले आहे. तथापि, तुम्ही ही प्रोग्रामिंग भाषा वापरत नसल्यास, तुम्हाला ती Sass साठी स्थापित करण्याची सक्ती केली जात नाही कारण LibSass सोबत तुमच्याकडे C मध्ये लिहिलेला पर्याय असेल. LibSass वापरात असलेल्या सर्व ऑपरेटिंग सिस्टमसह कार्य करते आणि Node.js वर सहजपणे स्थापित केले जाऊ शकते. वर्कफ्लो, म्हणजे, Sass मधील कोडमध्ये बदल करणे आणि त्यांचे CSS मध्ये स्वयंचलितपणे भाषांतर करणे.

आवृत्ती 5 ते फाउंडेशन 6.0 मध्ये संक्रमणासह, ZURB ने पुन्हा एकदा संपूर्ण फ्रेमवर्कचा फाइल आकार कमी केला आहे: त्याच्या CSS च्या 60 KB आणि JavaScript च्या 84 KB सह, फाउंडेशनला एक अशी प्रतिष्ठा आहे. सर्वात सुव्यवस्थित विकास मंचांपैकी एक आणि आहे ते वाचा. उपरोक्त मॉड्यूलर रचना आणि सानुकूलित करण्याच्या विशिष्ट स्वातंत्र्याबद्दल धन्यवाद, आपण फ्रेमवर्कचा आकार आणखी कमी करण्यास सक्षम आहात. लवचिक ग्रिड आणि भिन्न सह संयोजनात विशेषताARIA (उदाहरणार्थ प्रभावी कीबोर्ड नेव्हिगेशनच्या बदलासाठी) ZURB द्वारे अंमलात आणलेल्या मूलभूत अटी, विविध प्लॅटफॉर्म आणि डिव्हाइसेसवर सुसंगत असलेल्या वेब प्रकल्पाच्या अंमलबजावणीसाठी अपरिहार्य, पूर्णपणे समाधानी मानल्या जाऊ शकतात. ARIA विशेषता सर्वोत्तम दस्तऐवजीकरण केलेल्या आहेत आणि जिथे तुमचा तुमच्या वेबसाइटची प्रवेशयोग्यता लक्षणीयरीत्या ऑप्टिमाइझ करण्याचा तुमचा हेतू आहे तिथे उपलब्ध आहेत.

जर तुम्ही फ्रेमवर्कच्या Sass आवृत्तीसह काम करत असाल, तर तुम्ही घातलेले डिझाइन घटक आणि लेआउट्स कॉन्फिगर करण्यासाठी तुमचे पर्याय विस्तृत केल्याची खात्री करा. या विशेष शैली पत्रके वापरणे नवशिक्यांसाठी कोणत्याही प्रकारे सोपे नसते आणि त्यासाठी काही विशिष्ट कालावधीची शिक्षणाची आवश्यकता असते, जे सामान्यत: प्लॅटफॉर्मसाठी देखील खरे असते. मी पण'बाह्य घटकांचे एकत्रीकरण, तसेच मॉड्यूल्स आणि फाउंडेशन प्रकल्प दुसर्या फ्रेमवर्कमध्ये किंवा CMS मध्ये खूप क्लिष्ट आहे. Twitter बूटस्ट्रॅप सारख्या इतर CSS फ्रेमवर्कच्या तुलनेत ZURB फाऊंडेशन दाखवत असलेल्या छोट्या कमकुवतता, टेम्प्लेट्सची मर्यादित विविधता आणि इंटरनेट एक्सप्लोररच्या जुन्या आवृत्त्यांसाठी समर्थनाचा अभाव आहे.

ZURB फाउंडेशन डेव्हलपरसोबत पहिल्या प्रोटोटाइपपासून ते वापरण्यास-तयार वेबसाइटपर्यंत पोहोचते आणि ते स्वतःचे वैशिष्ट्य आहे. कार्यक्षमता. तुम्हाला काही घटक अनावश्यक असल्याचे आढळल्यास, तुमच्याकडे इतर घटकांच्या कार्यक्षमतेवर परिणाम न करता त्यांची निवड रद्द करण्याचा पर्याय आहे. शेवटी, CSS फ्रेमवर्क हे विशेषतः बारीक कोडद्वारे वैशिष्ट्यीकृत आहे जे ZURB "मोबाइल फर्स्ट" द्वारे निवडलेल्या लीटमोटिफला हायलाइट करते. च्या सोबत अत्यंत लवचिक ग्रिड प्रणाली, जे तुम्ही Sass सह वैकल्पिकरित्या जुळवून घेऊ शकता, फ्रेमवर्क विकसित करण्यासाठी आदर्श आहे प्रतिसाद देणारा फ्रंट एंड ज्यांचा डेटा लोडिंगमध्ये उच्च गती आणि उत्कृष्ट प्रवेशयोग्यता तसेच भिन्न स्क्रीन आकारांमध्ये अनुकूलता असण्याचा फायदा आहे.

तुम्ही सानुकूलित आणि कदाचित अधिक क्लिष्ट वेब प्रकल्पांच्या निर्मितीसाठी ZURB फ्रेमवर्क देखील वापरू शकता, तथापि हे उर्जेच्या लक्षणीय ओव्हरलोडशी जोडलेले आहे आणि स्निपेट्सची चांगली समज आवश्यक आहे.