एक ठेठ ग्रिड त्रुटि (बूटस्ट्रैप ग्रिड), या डिजाइनर और लेआउट डिजाइनर एक दूसरे को क्यों नहीं समझते हैं

क्या आपने ऐसी स्थिति का सामना किया है जहां पाठ और ब्लॉक जो किसी कारण से फ़ोटोशॉप के लेआउट में पूरी तरह से फिट होते हैं, किसी भी तरह से हठपूर्वक लेआउट में पालन नहीं करना चाहते हैं - लेआउट द्वारा निर्दिष्ट चौड़ाई में फिट नहीं होते हैं? उसी समय, डिजाइनर और लेआउट डिजाइनर दोनों एक ही ग्रिड का उपयोग करते हैं, उदाहरण के लिए, बूटस्ट्रैप 3 ग्रिड।

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

बूटस्ट्रैप ग्रिड, एक सामान्य ग्रिड उदाहरण के रूप में, एक 12-कॉलम लेआउट सेट करता है, जिसमें 1200px या उससे अधिक चौड़ी स्क्रीन पर 30px कॉलम और बाएँ और दाएँ पर सामग्री के 15px साइड मार्जिन के बीच आयाम होते हैं। यह देखते हुए कि स्तंभों की चौड़ाई पिक्सेल में डिजाइनर द्वारा निर्धारित की गई है, और लेआउट डिजाइनर प्रतिशत के रूप में, नीचे वर्णित त्रुटि तुरंत ध्यान देने योग्य नहीं है।

एक ग्रिड के साथ एक डिजाइनर कैसे काम करता है? आमतौर पर इस ग्रिड को किसी सेवा द्वारा, फ़ोटोशॉप में डाउनलोड और इंस्टॉल किया जाता है। ग्रिड के साथ लेआउट डिजाइनर कैसे काम करता है? मेष बूटस्ट्रैप 3 ढांचे से लिया गया है।

फिर ग्रिड (कॉलम और अंतराल) के आयाम समान होने पर क्या समस्या है?

समस्या का सार सुविधाजनक सीएसएस-संपत्ति "बॉक्स-साइज़िंग" में है जिसका मूल्य "बॉर्डर-बॉक्स" है, जो कि बूटस्ट्रैप में डिफ़ॉल्ट रूप से सेट है। इस वजह से, डिजाइनर सामग्री की चौड़ाई (दाएं और बाएं पर 15px की 1170px प्लस साइड मार्जिन) के अलावा साइड मार्जिन की चौड़ाई पर विचार करता है, और लेआउट डिजाइनर खुद इसे जाने बिना, सामग्री की चौड़ाई में शामिल करते हैं (1170px, 15px के साइड मार्जिन सहित, यानी। सामग्री की चौड़ाई 1140px है)। इस प्रकार, यह पता चला है कि विभिन्न चरणों में परियोजना में दो अलग-अलग ग्रिड का उपयोग किया जाता है और लेआउट डिजाइनर में एक संकीर्ण होता है।

बूटस्ट्रैप के अलावा ग्रिड का उपयोग करते समय यह त्रुटि भी होती है। जाहिर है, यह "बॉर्डर-बॉक्स" के आगमन के साथ पैदा हुआ था।

समाधान सरल है - कंटेनर का आकार समायोजित करें: "कंटेनर {चौड़ाई: 1200px;}" (1170px - दाएं और बाएं पर सामग्री 15px इंडेंटेशन)। अन्य प्रस्तावों के स्क्रीन के लिए साइड रिक्ति की मात्रा के द्वारा कंटेनर के उपयुक्त समायोजन को करना भी आवश्यक है।

यह मुझे लगता है कि यह इस बात पर बहस करने का कोई मतलब नहीं है कि त्रुटि को ठीक करने के लिए कौन जिम्मेदार है। इस डिज़ाइनर के लिए लेआउट डिज़ाइनर के साथ इस प्रश्न को स्पष्ट करने के लिए यह एक अच्छा तरीका है, और लेआउट डिज़ाइनर को ग्रिड के लिए "बॉर्डर-बॉक्स" का उपयोग करने की इस सुविधा को याद रखना चाहिए। व्यापक ढांचे में बग फिक्स से उन साइटों की संख्या भी बढ़ जाएगी जो डिजाइन से सख्ती से मेल खाती हैं।