30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. Workflow
Webdesign

960 ग्रिड सिस्टम को एक डिजाइन फ्रेमवर्क के रूप में प्रयोग करना

by
Length:LongLanguages:

Hindi (हिंदी) translation by Taruni Rampal (you can also view the original English article)

960 ग्रिड सिस्टम थोड़ी देर के लिए आस पास हो गई है ... लेकिन इसका उपयोग ज्यादातर HTML/CSS फ्रेमवर्क के रूप में परियोजनाओं के कोडन पक्ष पर किया गया है। आज, हम एक परियोजना की शुरुआत में 960GS जैसी ग्रिड सिस्टम्स के उपयोग के लाभों पर चर्चा करने जा रहे हैं, इससे पहले कि आप Photoshop या Fireworks भी खोलें। अगर आपने पहले किसी फ्रेमवर्क का इस्तेमाल नहीं किया है, या आप एक अच्छा रिफ्रेशर चाहते हैं, तो यह शुरू करने के लिए एक शानदार जगह है!


A Bit of Context : हमारी सिस्टर साइट, Nettuts ने कोडिंग उपकरण के रूप में CSS फ्रेमवर्क का उपयोग करने के बारे में bunch of great articles पोस्ट किया है। वे इस चर्चा के लिए सभी प्रासंगिक हैं, इसलिए आपको मौका मिलने पर उन्हें बाहर की जाँच करें। हालांकि, यह आलेख, विशेष रूप से advantages of using a framework for Web Designers specifically। इसके बजाय, हम इसके बारे में चर्चा करने जा रहे हैं, इसके बजाय, हम कोडिंग के शुरु होने से पहले एक ढांचा का उपयोग कैसे कर सकते हैं, डिजाइन चरण में एक शक्तिशाली उपकरण हो सकता है। ठीक है, चलें!

डाइविंग इनवेट फ्रेमवर्क

संभावना है कि आपने पहले से ही कुछ प्रकार के CSS फ्रेमवर्क के बारे में सुना है या इसका इस्तेमाल किया है ... लेकिन सिर्फ, किसी भी वेब प्रोजेक्ट में CSS फ्रेमवर्क (उर्फ grid system) का उपयोग करने के महत्वपूर्ण लाभों की समीक्षा करें:

  • एक "framework" प्रदान करता है जो कि सभी मॉनिटरों पर अच्छा दिखने के लिए डिज़ाइन किया गया है।
  • सटीक माप परिभाषित करके डिजाइन प्रक्रिया को सरल बनाता है।
  • पूर्व कोडेड HTML/CSS प्रदान करके विकास का समय कम कर देता है।
  • एक संपूर्ण दुनिया में, यह डिजाइनरों और डेवलपर्स में बेहतर ढंग से संवाद करने में मदद करता है - डिजाइन से कोडिंग तक जाने की प्रक्रिया को सपाट कर देता है।

अंततः, एक CSS framework को सामग्री कॉलम के लिए कुछ बुनियादी दिशानिर्देशों को स्थापित करने में मदद करनी चाहिए, जबकि अभी भी उनके डिजाइनों पर पूर्ण नियंत्रण वाले डिजाइनर उपलब्ध कराते हैं।

In this artical: मैं समझाने जा रहा हूं कि CSS framework क्या है, और मैंने 960 चुना है। फिर, मैं basics पर जाकर 960 ग्रिड कैसे लागू करूं।  हमारी चर्चा को खोलने के लिए, मैं आपको कुछ ऐसी साइटें दिखाऊँगा जो 960 ग्रिड का उपयोग कर रही हैं, और ये कैसे संरचित हैं।


CSS फ्रेमवर्क: ए संक्षिप्त अवलोकन

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

बार-बार, इन फ्रेमवर्क में टाइपोग्राफी स्टाइलशीट भी होते हैं, जो आपकी साइट की टाइपोग्राफी (टाइपोग्राफी के बारे में अधिक जानकारी के लिए, this article को देखें) पर काम करना शुरू करने के लिए एक शानदार जगह के रूप में कार्य कर सकते हैं।

फिलहाल दो मुख्य CSS फ्रेमवर्क हैं: Blueprint और 960. दोनों बेहतरीन सुविधाओं और उपयोग में आसानी के साथ पूरी तरह से सक्षम फ़्रेमवर्क हैं। यह केवल वरीयता के मामले में आता है, जिसकी रूपरेखा आपको सबसे आरामदायक महसूस करती है।

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


960 GS: ग्रीटी विवरण

व्यक्तिगत रूप से, मुझे मिली 960 ग्रिड मेरी आवश्यकताओं को बेहतर मानते हैं, इसलिए मैंने अपनाया और इसी लेख में हम इस पर चर्चा करेंगे। हालांकि, हम जिन व्यापक सिद्धांतों पर चर्चा करेंगे, वे किसी भी रूपरेखा पर लागू होंगे, जिसमें खाका शामिल होगा।

960.gs अपने सभी साइट के तत्वों को 960px चौड़ा (clever girl) कंटेनर में डालकर और उस कंटेनर को 12, 16 या 24 समान आकार के कॉलम में विभाजित करने पर आधारित है।  वे वैकल्पिक चौड़ाई का उपयोग करने के लिए एक उपकरण प्रदान करते हैं, लेकिन 960 पूरे सिस्टम के लिए विकसित किया गया है और यह बहुत तेज दिखने के लिए होता है।

Why 960px? क्योंकि 960px एक चौड़ाई है जो कि प्लेटफ़ॉर्म की विस्तृत संख्या के लिए उपयुक्त है जिस पर हम वेब को ब्राउज़ करते हैं। यह अनिवार्य रूप से एक 1024px विस्तृत मॉनिटर की अनुमति देता है साइट सही और बिना क्षैतिज स्क्रॉलिंग दिखाने के लिए, ब्राउजर क्रोम, स्क्रॉलबार की चौड़ाई के लिए लेखांकन, और स्पष्टता के लिए थोड़ा पैडिंग। हमेशा मुख्य सामग्री कॉलम के दाईं ओर स्थित 10px मार्जिन होता है, जिसका अर्थ है कि छोटे ब्राउज़र हमेशा पाठ के बिना सबसे ऊपरी बाईं सामग्री को पढ़ने में सक्षम होंगे, लेकिन ब्राउज़र विंडो के खिलाफ।

इसके अतिरिक्त, 960GS के सभी नंबर सुनहरी अनुपात पर आधारित पूरी संख्या हैं - कोई दशमलव अंक या फ़्लिकर स्पेसिंग समस्याएं नहीं हैं। यदि आपने Mathematics and Web Design पर हमारा लेख पढ़ा है, तो आप जानते हैं कि इन नंबरों को सही कैसे प्राप्त करना महत्वपूर्ण है?

आप इसे कैसे देख सकते हैं, इस पर निर्भर करता है कि एक द्रुतगति चूक या अच्छी विशेषताओं में से एक, जिस तरह से 960 हैंडल (या नहीं) टाइपोग्राफी है। वहाँ एक text.cssfile शामिल है, लेकिन यह मुख्य रूप से सुनिश्चित करने के लिए है कि कम से कम एक जगह है, ताकि आप तेजी से प्रोटोटाइप कर सकें, सामान्य तत्व जैसे कि शीर्षकों, पैराग्राफ और सूचियों में बुनियादी स्टाइल है।

ब्लूप्रिंट कैसे अलग है?

मैं यहाँ बहुत अधिक गहराई में नहीं जाऊंगा, लेकिन आइए, 960.gs और ब्लूप्रिंट के बीच महत्वपूर्ण अंतरों पर संक्षेप में चर्चा करें। सबसे पहले, ब्लूप्रिंट 950px पर आधारित एक CSS फ्रेमवर्क है - यह 960 के समान है, जिस तरह से वह बेसिक लेआउट सामग्री (BP का इस्तेमाल पैडिंग और अनुपात के समान दृष्टिकोणों के साथ 24 कॉलम) करता है ... लेकिन ऐसा है वहाँ जहां ब्लूप्रिंट समान हो रहा हो।


ब्लूप्रिंट फॉर्म-विशिष्ट स्टाइल और नोटिफिकेशन की अनुमति देता है, जो कुछ मैं चाहता हूं कि 960 को लागू किया जाएगा।

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

  • टाइपोग्राफी - BP सभी तत्वों के लिए टाइपोग्राफी आकार और अंतरण प्रदान करता है।
  • फॉर्म स्टाइलिंग स्टाइलिंग - रूपों और कुछ वर्गों के लिए स्टाइलिंग जिन्हें फ़ॉर्म में जोड़ने के लिए इस्तेमाल किया जा सकता है (जैसे कि आवश्यक फ़ील्ड)।
  • प्रिंट स्टाइल्स - प्रिंट स्ट्य्लेशिट्स जब सर्फर्स प्रिंट बटन को दबाएंगे।
  • प्लगइन्स के लिए UI - बटन, टैब और प्रेइट्स के लिए पूर्व-निर्मित CSS (और कभी कभी चित्र)।

ब्लूप्रिंट के साथ मेरे पास जो समस्या थी, वह यह है कि डिजाइन चरण में उपयोग करने के लिए यह बहुत जटिल है ... स्क्रैच से एक डिजाइन बनाने का मतलब है कि वे जो कुछ भी प्रदान करते हैं, उन्हें पुनः स्वरूपित करना और BP द्वारा प्रदान की जाने वाली पूरी तरह से व्यापकता को बनाए रखना कठिन होता है। इसके विपरीत, 960.gs केवल एक लेआउट प्रदान करती है - एक डिजाइनर यथार्थवादी सीमाओं के भीतर रचनात्मक बनाने के लिए एकदम सही है।


960 ग्रिड सिस्टम का उपयोग करना

960 ग्रिड लगभग डरावना उपयोग करने में आसान है (वास्तव में, आप खुद से पूछना शुरू कर सकते हैं: "मैं इससे पहले क्यों नहीं उपयोग कर रहा था?"), केवल कुछ सरल नियमों के साथ आपको पालन करना चाहिए।

Download the 960 Grid from 960.gs

इसे डाउनलोड करने के बाद, उस निर्देशिका के अंदर एक नज़र डालें जिसे आपने अभी अनजिप किया। I want to draw your attention to two folders: "sketch_sheets" और "templates" "sketch sheets"। फ़ोल्डर में एक ब्राउज़र विंडो के अंदर विभिन्न ग्रिड आकारों के एक PDF होता है, और "template" फ़ोल्डर में सूर्य के तहत लगभग हर ग्राफिक्स प्रोग्राम (जैसे कि GIMP, Fireworks और Photoshop) के लिए टेम्पलेट्स शामिल हैं।

स्केच शीट्स: अपना जीवन आसान बनाना ...

CSS फ्रेमवर्क का उद्देश्य आपके जीवन को आसान बनाना है, और आपको हमेशा एक डिजाइन बनाने के लिए समय कम करने में मदद करने के तरीकों की तलाश करना। फ़ोटो टेम्पलेट में डिज़ाइन बनाने के दौरान इन टेम्प्लेट का उपयोग करें, क्लाइंट के साथ किसी प्रोजेक्ट के विवरण पर चर्चा करते हुए "sketch sheets" की कॉपीज प्रिंट करें (और इससे पहले कि आप this पर ध्यान दें)!


छपे हुए स्केच शीट का उदाहरण ... इसमें कुछ स्केचिंग के साथ।

वास्तव में, जब भी आप कोई प्रोजेक्ट शुरू करते हैं, तब मैं इन स्केच शीट्स का उपयोग करने का सुझाव दूंगा: वे आपको किसी भी लेआउट पर अपने आप को लॉक करने से पहले स्वतंत्र रूप से प्रयोग करने की अनुमति देंगे। यह आपको केवल 5 मिनट का स्केचिंग ले सकता है, यह समझने के लिए कि कोई डिज़ाइन होगा या काम नहीं करेगा, जैसा कि 50 मिनट के विपरीत- अगर आप इसे डिजाइन और कोडिंग करते थे।


960 टेम्पलेट्स के साथ डिजाइनिंग

साइट के लिए स्केच आउट अवधारणा पर एक बेसिक समझौते पर आने के बाद, यह टेम्पलेट फ़ाइलों को खोलने का समय है। यह संभवतः केंद्रीय कारण है कि मैं 960 सिस्टम का उपयोग करना पसंद करता हूं ... यह किसी ऐसे प्रोग्राम के लिए पहले से तैयार किया गया है जो आप सोच सकते हैं। मुझे Photoshop का उपयोग करना पड़ता है, इसलिए यहां दिए गए टेम्पलेट का एक स्क्रीनशॉट है:

यहां मुख्य लाभ सरल है: टेम्प्लेट में सभी मुख्य सामग्री कॉलम के लिए पूर्व-निर्मित मार्गदर्शिकाएं हैं जो CSS के फ्रेमवर्क के अनुरूप होती हैं जो चीजों के कोडिंग पक्ष पर होती है।  अपने मुख्य सामग्री कॉलम को जल्दी से ड्रा करे और अपने डिजाइन में सब कुछ स्वच्छ और व्यवस्थित रखे।

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

आपको अभी भी साइट पर सब कुछ डिज़ाइन करना होगा (निश्चित रूप से!), लेकिन अपने डिज़ाइन को मार्गदर्शिका के अनुसार रखते हुए, यह चीजों के विकास पक्ष को बहुत आसान बना देगा। जैसे कि अतिरिक्त लाभ के रूप में, सामग्री कोशिकाओं के बीच पैडिंग के लिए एक समान दृष्टिकोण होना आपके डिजाइन को और अधिक पेशेवर बनाने के लिए एक शानदार तरीका है। इस बारे में यहां और पढ़ें "Pixel Perfect Comps"।


इसे स्थापित करना

अब जब आप एक डिज़ाइन नीचे खिसक चुके हैं, तो उस समय हम 960 ग्रिड सिंटेक्स के बारे में बात करते हैं। जैसा कि मैंने परिचय पर उल्लेख किया है, आप Nettuts पर CSS फ्रेमवर्क के उपयोग और प्रोटोटाइप के बारे में बहुत अधिक जानकारी पा सकते हैं, इसलिए मैं यहां बस मूलभूतताओं को कवर करने जा रहा हूं।

सबसे पहले, आपको उपयुक्त CSS फ़ाइलों को अपने डिज़ाइन में संदर्भित करने की आवश्यकता होगी: reset.css (ब्राउज़र क्वार्कस के लिए रीसेट फाइल), text.css (अंतर्निहित टाइपोग्राफी स्टाइलशीट), और 960.css (या 960_24_col.css अगर आप 24 कॉलम ग्रिड का उपयोग कर रहे हैं)। आम तौर पर, मैं अपने सभी साइट-विशिष्ट स्टाइल को अलग फाइल (आमतौर पर style.css कहा जाता है) में रखता हूं, यह सुनिश्चित करने के लिए कि मैं फ्रेमवर्क में कुछ नहीं तोड़ता हूं।

Quick Tip: फ्रेमवर्क का जिक्र करने के बाद अपनी स्टाइलशीट का जिक्र करें, ताकि आप फ्रेमवर्क को बदलने के बिना फ्रेमवर्क के विशिष्ट पहलुओं को समायोजित कर सकें (और यदि आप कोई गलती करते हैं, तो आपको फ़्रेमवर्क की फ़ाइलों को फिर से डाउनलोड और अधिलेखित नहीं करना पड़ेगा )।  इन 4 फाइलों के साथ, अब आप अपनी साइट को डिज़ाइन करने के लिए तैयार हैं।

960.gs साइट से खींचा सिंटेक्स का त्वरित अवलोकन यहां दिया गया है:

पहली div है आपका container, आपकी सामग्री को किस तरह से संग्रहीत किया जाएगा। इसे "container_12" के रूप में class को परिभाषित करके, आप कह रहे हैं: "मैं यह container को 12 कॉलम ग्रिड चाहता हूं" (एक ही अभ्यास लागू होता है जब 16 और 24 कॉलम ग्रिड)।

अब जब आपने container को 12 कॉलम लेआउट के रूप में परिभाषित किया है, तो आप अपनी साइट को ऐसे तरीके से ढालना शुरू कर देते हैं कि यह लेआउट के अंदर फिट बैठता है। यदि आप पदानुक्रम में अगले div तत्वों को देखते हैं (जैसा कि टैब द्वारा नोट किया गया है), तो आप उनकी परिभाषाओं के लिए सिंटेक्स देखेंगे। "Grid_7" और "grid_3" समझने में आसान है: आप कह रहे हैं कि यह div तत्व स्तंभों की X संख्या को लेने वाला है। हालांकि, 7 + 3 = 10 <12, जिसका अर्थ है कि आपके पास container के अंत में 2 खाली कॉलम होंगे, है ना?ठीक है, यह वह जगह है जहां class परिभाषा के उपसर्ग और प्रत्यय पहलू खेलने में आते हैं। "Grid_x suffix_y" की एक class की परिभाषा के साथ, आप कह रहे हैं: "मैं यह div को एक्स कॉलमों को लेने के लिए चाहता हूं, और उसके बाद इसके बाद रिक्त कॉलम की संख्या Y होनी चाहिए।" (यह भी उपसर्ग पर लागू होता है)। इसलिए, चूंकि "Grid_7" में 1 का उपसर्ग है, और "Grid_3" में 1, 7 + 3 + 1 + 1 = 12 का प्रत्यय है!

अब तक, मुझे पता है कि आप "Grid_7" div में नेस्टेड div तत्वों के बारे में सोच रहे हैं ठीक है,  आप डिस्टेक्ट्स को ले जा सकते हैं जो एक निश्चित डिवीजन के भीतर एक दूसरे div में लेते हैं, जब तक कि यह उसके मूल ग्रिड के आकार से अधिक न हो। इसके अलावा, पहले और आखिरी तत्वों को क्रमशः उनकी class परिभाषा में "alpha" और "omega" जोड़ा जाना चाहिए। इसलिए, हमारे नमूना कोड में: "grid 2 alpha" "grid_7" में नेस्टेड पहला भाग है, अगले तत्व "grid_3" मध्य में है (और इसलिए इसे "alpha" या "omega" संलग्न करने की आवश्यकता नहीं है), और आखिरकार "grid_2_omega" "div" में स्थित अंतिम भाग है। और 2+3+2= 7 के बाद से, परिभाषा उचित है।


यह सब एक साथ रख: एक संक्षिप्त उदाहरण

इस पूरी प्रक्रिया को दर्शाने के उद्देश्य के लिए, मेरे एक निजी परियोजना के डिजाइन चरण के दौरान 960 फ्रेमवर्क का उपयोग करने के एक त्वरित उदाहरण के माध्यम से चलें।

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

सेरबेरस वेबसाइटः उदाहरण जो हम प्रयोग करेंगे

मास इफ़ेक्ट 2 मेरे पिछले 5 वर्षों के पसंदीदा गेमों में से एक है, और मेरे लिए काल्पनिक संगठन "Cerberus" के लिए एक साइट का निर्माण करना एक चुनौती होगी। संगठन के मुख्य पहलू हैं: व्यावसायिकता और तकनीकी कौशल, जो मैं एक साफ डिजाइन के साथ व्यक्त करना चाहता था, जिसने अपने पूरे रंग योजना का इस्तेमाल किया शुरू करने के लिए। मैं साइट के लिए डिजाइन तैयार करता हूं (यह मेरे लिए निष्ठावान होगा, सही है?)।

जैसा कि मैंने डिजाइन स्केच देखा, मैंने देखा कि 960 ग्रिड में डिज़ाइन का काम कैसे किया जाए।

नीचे मेरी साइट के लिए HTML रूप-रेख है:

यदि आपने देखा है, तो logo में केवल 2 कॉलम शामिल थे, जबकि उप हेडर ने सभी 12 स्थानों को लिया था। चूंकि हेडर div 12 कॉलम लंबा था, किसी भी उप तत्व 12 स्तंभ तक लंबा हो सकते हैं। इस चाल ने मुझे शीर्षलेख बनाने की इजाजत दी, क्योंकि लोगो को 2 कॉलमों में ले लिया गया था, और बाकी को खाली छोड़ दिया गया था (इमेज वास्तव में हैडर div के लिए बैकग्राउंड इमेज है)। और चूंकि उप हेडर 12 कॉलम चौड़ा था, इसलिए logo के नीचे पूरी चौड़ाई भर दी गई (चूंकि यह लोगो के बाद छोड़ दिया 10 रिक्त स्थान के अंदर इसकी सभी सामग्री को फिट नहीं कर सके)।

यह वास्तव में एक महत्वपूर्ण अंतर है, और एक और डिजाइन उपकरण है जिसका आपको उपयोग करना चाहिए (और सुरक्षित होना, आप निश्चित है कि निश्चित स्थान का आरक्षित है, यह सुनिश्चित करने के लिए आप "prefix" या "suffix" का उपयोग कर सकते हैं)।  साइट के बाकी हिस्सों काफ़ी सूखा है- मुख्य सामग्री के लिए 8 कॉलम और साइडबार के लिए 4। प्रत्येक साइडबार तत्व एक अलग तत्व है; वे एक-दूसरे के ऊपर ढेर हो जाते हैं क्योंकि वे 4 कॉलम की चौड़ाई तक सीमित हैं।

यह समझाने के लिए कि साइट कैसे स्थापित की गई है, मैंने साइट का एक स्क्रीनशॉट ले लिया है और स्पष्ट रूप से कॉलमों को चिह्नित किया है:


एक्शन में 960 ग्रिड के उदाहरण

अब, मेरा अपना उदाहरण वास्तव में आपको बाहर जाने और कुछ किलर वेब डिजाइनर बनाने के लिए प्रेरित करने का सबसे अच्छा तरीका नहीं हो सकता है, इसलिए यहां कार्रवाई में 960 सिस्टम के कुछ उदाहरण हैं। आप 960.gs साइट पर और अधिक जानकारी प्राप्त कर सकते हैं।


अंतिम शब्द

एक CSS फ्रेमवर्क का सबसे आकर्षक पहलुओं में से एक यह है कि वे डिजाइनरों को सुविधा प्रदान करते हैं। हालांकि, किसी अन्य उपकरण की तरह, आपको यह सुनिश्चित करना है कि आप इसे एक प्रासंगिक और सार्थक तरीके से उपयोग कर रहे हैं। इसका उपयोग करने की कोशिश मत करो, अगर यह डिजाइन में फिट नहीं है, और इसे अपनी रचनात्मकता को प्रतिबंधित न करें। अधिकांश परियोजनाओं (विशेष रूप से जटिल अखबार या ब्लॉग प्रेरित लेआउट के लिए) के लिए, एक CSS फ्रेमवर्क एक अच्छा समय-बचत उपकरण हो सकता है, न कि त्वरित HTML/CSS को बाहर निकालने के लिए, बल्कि संपूर्ण डिजाइन प्रक्रिया के लिए।

CSS फ्रेमवर्क के साथ कोडिंग के बारे में अधिक पढ़ना चाहते हैं?  विषय पर आलेखों के Nettuts लाइब्रेरी की जांच करें (अधिक उन्नत टाट्स के लिए नीचे तक स्क्रॉल करें)।

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.