Materialize - एक सामग्री डिजाइन सीएसएस फ्रेमवर्क

गूगल की सामग्री डिजाइन वेब पर और मोबाइल ऐप्स पर भी अच्छा काम करने का लक्ष्य है। यह डेवलपर्स के साथ लोकप्रियता प्राप्त कर रहा है और यदि आप इसे भी अपनाना चाहते हैं, तो आपकी साइट पर सामग्री डिजाइन को लागू करने के कई तरीके हैं। आप Polymer या Angular का उपयोग कर सकते हैं, या आप Materialize का उपयोग कर सकते हैं.

मटीरियलिज़ ए है सीएसएस समर्थन के साथ सामग्री डिजाइन सिद्धांतों पर आधारित सीएसएस फ्रेमवर्क बेहतर विकास के लिए। यह आसान उपयोग के लिए डिफ़ॉल्ट स्टाइल करता है, और इसमें विस्तृत प्रलेखन है.

आप भीतर बहुत सारे उपयोगी घटक पा सकते हैं: संवाद, मोडल, तारीख लेने वाला, सामग्री बटन, लंबन, कार्ड और बहुत कुछ। इसमें कई नेविगेशन विकल्प हैं जिन्हें आप चुन सकते हैं, जैसे ड्रॉप डाउन, मेनू और टैब में स्लाइड। Materialize भी एक का उपयोग करता है 12-ग्रिड प्रणाली 3 डिफ़ॉल्ट स्क्रीन आकार मीडिया प्रश्नों के साथ: 600px की अधिकतम चौड़ाई एक मोबाइल डिवाइस, 992px टैबलेट डिवाइस और अब 992px से अधिक एक डेस्कटॉप डिवाइस माना जाता है.

शुरू करना

Materialize: उपयोग के साथ आरंभ करने के दो तरीके हैं मानक सीएसएस या सास. दोनों स्रोतों को यहां डाउनलोड किया जा सकता है। आप निम्न कमांड का उपयोग करके उन्हें बोवर के साथ भी प्राप्त कर सकते हैं:

 bower स्थापित सामग्री 

यदि आप स्रोत प्राप्त कर लेते हैं, तो सुनिश्चित करें कि उन्हें अपनी प्रोजेक्ट फ़ाइल में ठीक से लिंक करें या यदि आप Sass संस्करण का उपयोग कर रहे हैं तो स्रोत को संकलित करें.

विशेषताएं

इस खंड में, मैं कुछ विशेषताओं की व्याख्या करूंगा जो कि मेटेरियलाइज़ ऑफर प्रदान करती हैं.

1. सैस मिक्सिंस

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

निम्नलिखित एनीमेशन गुणों पर एक नज़र डालें:

 -वेबकिट-एनीमेशन: 0.5 एस; -मोज़-एनीमेशन: 0.5 एस; -ओ-एनीमेशन: 0.5 एस; -एमएस-एनीमेशन: 0.5 एस; एनीमेशन: 0.5 एस; 

कोड की उन पंक्तियों को सास मिक्सिन की एक पंक्ति के साथ फिर से लिखा जा सकता है:

 @include एनीमेशन (.5s); 

वहाँ लगभग 19 मुख्य मिश्रण उपलब्ध। पूरी सूची देखने के लिए, Sass श्रेणी में जाएं mixins टैब.

2. पाठ प्रवाह

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

फ़्लो टेक्स्ट का उपयोग करने के लिए, आप बस जोड़ सकते हैं प्रवाह के पाठ अपने इच्छित पाठ पर कक्षा। उदाहरण के लिए:

 
यह फ्लो टेक्स्ट है.
 

फ्लो टेक्स्ट सेक्शन पर यहाँ डेमो चेक करें.

3. तरंगों के साथ तरंग प्रभाव

सामग्री डिजाइन भी इंटरैक्टिव प्रतिक्रिया के साथ आता है, एक उल्लेखनीय उदाहरण लहर प्रभाव है। Materialize में, यह प्रभाव कहा जाता है लहर की. मूल रूप से जब उपयोगकर्ता बटन, कार्ड या किसी अन्य तत्व को क्लिक या टैप / टच करते हैं, तो प्रभाव दिखाई देता है। लहरों को जोड़कर आसानी से बनाया जा सकता है लहरों प्रभाव अपने तत्वों पर वर्ग.

यह स्निपेट आपको तरंगों का प्रभाव देता है.

 जमा करें 

डिफ़ॉल्ट रूप से तरंग ग्रे होते हैं। लेकिन ऐसी स्थिति में जहां आपके पास एक गहरे रंग की पृष्ठभूमि है, आप रंग बदलना चाह सकते हैं। एक अलग रंग जोड़ने के लिए, बस जोड़ें waves- (रंग) तत्व को। "(रंग)" को किसी रंग के नाम से बदलें.

 जमा करें 

आप 7 रंगों में से चुन सकते हैं: हल्का, लाल, पीला, नारंगी, बैंगनी, हरा और चैती. आप हमेशा अपने खुद के रंगों को बना सकते हैं या अनुकूलित कर सकते हैं यदि वे रंग आपकी आवश्यकताओं के अनुरूप नहीं हैं.

4. छाया

तत्वों के बीच संबंधों को वितरित करने के लिए, सामग्री डिज़ाइन सतहों पर ऊंचाई का उपयोग करने की सलाह देते हैं। इस सिद्धांत पर अपने साथ भौतिकता का उद्धार करता है z-depth- (संख्या) कक्षा। आप 1 (5) से बदलकर छाया की गहराई निर्धारित कर सकते हैं:

 
 
छाया की गहराई ३
  
 

सभी छाया गहराई नीचे की छवि के साथ प्रदर्शित होते हैं.

5. बटन और प्रतीक

सामग्री डिजाइन में तीन मुख्य बटन प्रकार हैं: बटन उठाया, फैब (फ्लोटिंग एक्शन बटन) तथा फ्लैट बटन.

(1) उठा हुआ बटन

उठाया बटन डिफ़ॉल्ट बटन है। इस बटन को बनाने के लिए, बस a जोड़ें btn अपने तत्वों के लिए वर्ग। यदि आप इसे क्लिक या दबाए जाने पर तरंग प्रभाव देना चाहते हैं, तो इसके साथ जाएं:

 बटन 

वैकल्पिक रूप से, आप बटन को पाठ के बाईं या दाईं ओर एक आइकन भी दे सकते हैं। आइकन के लिए, आपको कस्टम जोड़ने की आवश्यकता होगी आइकन वर्ग नाम और स्थिति के साथ टैग। उदाहरण के लिए:

 डाउनलोड 

उपरोक्त स्निपेट में हम उपयोग करते हैं एमडीआई-फ़ाइल-फ़ाइल-डाउनलोड डाउनलोड आइकन के लिए वर्ग। वहाँ लगभग 740 अलग प्रतीक आप उपयोग कर सकते हैं। उन्हें आइकन्स टैब में सैस पेज पर देखने के लिए.

(2) फ्लोटिंग बटन

एक अस्थायी बटन को जोड़कर बनाया जा सकता है btn-फ्लोटिंग वर्ग और आपका इच्छित आइकन उदाहरण के लिए:

मटीरियल डिज़ाइन में, फ्लैट बटन का उपयोग अक्सर डायलॉग बॉक्स के भीतर किया जाता है। इसे बनाने के लिए, बस जोड़ना होगा btn फ्लैट आपके तत्व को इस तरह:

 पतन 

इसके अतिरिक्त, बटन के साथ अक्षम किया जा सकता है विकलांग वर्ग और बड़ा उपयोग कर बनाया btn-बड़े कक्षा.

6. ग्रिड

भौतिकता एक मानक का उपयोग करती है 12-स्तंभ उत्तरदायी ग्रिड प्रणाली। जवाबदेही को तीन भागों में बांटा गया है: छोटे, मोबाइल, मध्यम (मी) के लिए गोली के लिए और बड़ा (l) डेस्कटॉप के लिए.

कॉलम बनाने के लिए, साइ, एम या एल का उपयोग करके आकार को इंगित करें, उसके बाद ग्रिड नंबर। उदाहरण के लिए, जब आप मोबाइल डिवाइस के लिए एक आधे आकार का लेआउट बनाना चाहते हैं तो आपको ए शामिल करना चाहिए S6 अपने लेआउट में वर्ग. S6 के लिए खड़ा है छोटे-6 जिसका अर्थ है छोटे डिवाइस पर 6 कॉलम.

आपको भी शामिल होना चाहिए col आपके द्वारा बनाए गए लेआउट में क्लास करें और इसे किसी ऐसे तत्व के अंदर रखें जिसमें है पंक्ति कक्षा। यह इतना है कि लेआउट को ठीक से कॉलम में रखा जा सकता है। यहाँ एक उदाहरण है:

 
 
मेरे यहां 12-कॉलम या पूरी चौड़ाई है
 
4-कॉलम (एक तिहाई) यहां
 
4-कॉलम (एक तिहाई) यहां
 
4-कॉलम (एक तिहाई) यहां
 
 

यहाँ परिणाम है:

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

 
 
मेरी चौड़ाई में हमेशा 12 कॉलम होते हैं
 
मेरे पास 12 कॉलम मोबाइल पर, 6 टैबलेट और 9 डेस्कटॉप पर हैं
 
 

यहाँ इस तरह दिखता है:

वे मटीरियल के कुछ ही विशेषताएं हैं। उनकी अन्य विशेषताओं के बारे में अधिक जानने के लिए, प्रलेखन पृष्ठ पर जाएँ.