Drupal 8 में breakpoints के साथ काम करना

01/10/2025, by Ivan

Drupal 8 में breakpoints को एडिट करने के लिए कोई यूज़र इंटरफ़ेस नहीं है। चूँकि breakpoints कॉन्फ़िगरेशन फ़ाइलों में परिभाषित होते हैं, contrib में भी यूज़र इंटरफ़ेस प्रदान करना संभव नहीं है।

Breakpoints का उपयोग viewport (स्क्रीन, प्रिंटर और अन्य मीडिया आउटपुट प्रकारों) की ऊँचाई या चौड़ाई को चरणों में विभाजित करने के लिए किया जाता है और यह सुनिश्चित करते हैं कि responsive डिज़ाइन विभिन्न उपकरणों पर सही ढंग से दिखाई दे। Breakpoints मॉड्यूल breakpoints के उपयोग को मानकीकृत करता है और मॉड्यूल और थीम्स को एक-दूसरे के breakpoints सेट या उपयोग करने की अनुमति देता है। Breakpoints मॉड्यूल ऊँचाई, चौड़ाई और resolution के आधार पर breakpoints को ट्रैक करता है।

ध्यान दें कि अपनी CSS breakpoints को breakpoints.yml फ़ाइल में डालना केवल तभी आवश्यक है जब Drupal को breakpoints के साथ इंटरैक्ट करना हो, जैसे कि Responsive Images मॉड्यूल के मामले में।

शब्दावली

Breakpoints

Breakpoints एक लेबल और एक media query से बने होते हैं। Media queries breakpoints को कोड करने का औपचारिक तरीका हैं। उदाहरण के लिए, 40em की चौड़ाई वाला breakpoint इस प्रकार लिखा जाएगा: '(min-width: 40em)'। Breakpoints वास्तव में केवल media queries हैं जिनमें कुछ अतिरिक्त मेटाडेटा होता है, जैसे नाम और multipliers की जानकारी।

थीम्स और मॉड्यूल myThemeOrModule.breakpoints.yml नामक कॉन्फ़िगरेशन फ़ाइल बनाकर breakpoints परिभाषित कर सकते हैं, जहाँ myThemeOrModule आपकी थीम या मॉड्यूल का नाम है।

इस फ़ाइल में प्रत्येक प्रविष्टि एक breakpoint को परिभाषित करती है, जो मशीन नाम से uniquely पहचानी जाती है, जैसे bartik.mobile और उसके चाइल्ड एलिमेंट्स जो breakpoint के गुणों को परिभाषित करते हैं:

label - breakpoint के लिए पढ़ने योग्य नाम।
mediaQuery - media query टेक्स्ट, जैसे 'all and (min-width: 851px)'.
weight - breakpoint के लिए क्रम (पोज़िशनल weight)।
multipliers - समर्थित पिक्सेल resolution multipliers।

नोट: breakpoints का weight क्रम बेहद महत्वपूर्ण है। breakpoints जिनकी न्यूनतम चौड़ाई सबसे कम है, उनका weight सबसे कम होना चाहिए, और जिनकी न्यूनतम चौड़ाई सबसे बड़ी है, उनका weight सबसे अधिक होना चाहिए। डिफ़ॉल्ट रूप से मॉड्यूल breakpoints को छोटे से बड़े क्रम में व्यवस्थित करते हैं। हालाँकि, आवश्यकता पड़ने पर मॉड्यूल इस क्रम को बदल सकते हैं: उदाहरण के लिए, Responsive Image मॉड्यूल breakpoints को सबसे बड़े से सबसे छोटे क्रम में व्यवस्थित करता है।

उदाहरण (bartik.breakpoints.yml):

bartik.mobile:
  label: mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
bartik.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
  weight: 1
  multipliers:
    - 1x
bartik.wide:
  label: wide
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
  multipliers:
    - 1x

Breakpoint group

Breakpoints को groups में व्यवस्थित किया जा सकता है। मॉड्यूल और थीम्स को groups का उपयोग विभिन्न उद्देश्यों के लिए उपयोग किए जाने वाले breakpoints को विभाजित करने के लिए करना चाहिए, जैसे लेआउट breakpoints या इमेज साइज़ breakpoints।

Breakpoint group breakpoints का एक संयोजन है। प्रत्येक थीम या मॉड्यूल शून्य या अधिक breakpoint groups परिभाषित कर सकता है। Breakpoint विशेष पहचानकर्ताओं और breakpoint keys का उपयोग करके बनाया जाता है। Group वैकल्पिक है—यदि आप group निर्दिष्ट नहीं करते हैं, तो group का नाम आपकी थीम या मॉड्यूल के समान होगा।

उदाहरण के लिए, yourtheme.breakpoints.yml में आप निम्न दो breakpoint groups बना सकते हैं:

yourtheme.group1.mobile:
  label: narrow
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
  group: yourtheme.group1
yourtheme.group1.narrow:
  label: narrow
  mediaQuery: '(min-width: 560px)'
  weight: 0
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group1
yourtheme.group1.wide:
  label: wide
  mediaQuery: '(min-width: 851px)'
  weight: 1
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group1

yourtheme.group2.mobile:
  label: narrow
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
  group: yourtheme.group2
yourtheme.group2.narrower:
  label: narrow
  mediaQuery: '(min-width: 400px)'
  weight: 0
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group2
yourtheme.group2.wider:
  label: wide
  mediaQuery: '(min-width: 1001px)'
  weight: 1
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group2

थीम या मॉड्यूल के मशीन नाम, डॉट, फिर group के मशीन नाम से breakpoints identifiers शुरू करना, और फिर उसी पहचानकर्ता को group key में उपयोग करना—यही breakpoint groups बनाता है। वही keys वाले सभी breakpoints एक ही breakpoint group में दिखाई देंगे।

वर्तमान में, समूह keys में दिखाई देने वाले मशीन नाम के बाहर breakpoint groups के लिए कस्टम लेबल बनाना संभव नहीं है। यही लेबल Responsive Image मॉड्यूल के UI में breakpoint group चुनते समय प्रदर्शित होगा।

एडवांस्ड उपयोग

आप अन्य मॉड्यूल या थीम्स द्वारा परिभाषित breakpoint groups में breakpoint भी जोड़ सकते हैं, लेकिन आपको पूरा नाम उपयोग करना होगा।

उदाहरण के लिए, yourmodule.breakpoints.yml में आप यह कर सकते हैं:

yourmodule.yourtheme.group2.superwide
  label: superwide
  mediaQuery: '(min-width: 1501px)'
  weight: 1
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group2

यह आपके मॉड्यूल में परिभाषित breakpoint को आपकी थीम में परिभाषित breakpoint group में जोड़ देगा।

Multipliers

Multipliers viewport डिवाइस के resolution का माप हैं, जिसे active डिवाइस के भौतिक पिक्सेल आकार और device-independent पिक्सेल आकार के अनुपात के रूप में परिभाषित किया जाता है। उदाहरण के लिए, “retina” डिस्प्ले में 2x multiplier होता है।

Breakpoint मॉड्यूल 1x, 1.5x और 2x multipliers को परिभाषित करता है। Breakpoint परिभाषित करते समय, मॉड्यूल और थीम्स यह निर्दिष्ट कर सकते हैं कि कौन से multipliers प्रत्येक breakpoint पर लागू होते हैं।

उदाहरण:

'1.5x' // Android सपोर्ट करता है
'2x'   // Mac retina display सपोर्ट करता है

नए breakpoint फ़ाइलें लोड करना

यदि आप थीम टेस्टिंग के दौरान एक नई breakpoint कॉन्फ़िगरेशन फ़ाइल जोड़ते हैं, तो आप नए breakpoints देखने के लिए cache को पुनर्निर्मित कर सकते हैं।

एक्स्ट्रा ब्लॉक टाइप्स (EBT) - नया लेआउट बिल्डर अनुभव❗

❗एक्स्ट्रा पैराग्राफ टाइप्स (EPT) - नया पैराग्राफ्स अनुभव