सामग्री
- समस्या
- सुसी
- कंटेनर
- स्पॅन
- डीफॉल्ट सेट अप करत आहे
- पॅडिंग स्तंभ
- मीडिया क्वेरी व्यवस्थापकीय
- ब्रेकपॉईंट आणि सुसी
- मिक्सिनसह मास्टरिंग लेआउट
गुंतवणूकीत गणितांमुळे प्रतिसादात्मक लेआउट तयार करणे आव्हानात्मक असू शकते, म्हणून प्रक्रिया सुलभ करण्यासाठी डिझाइनर्ससाठी फ्रेमवर्क आणि / किंवा सॅसकडे वळणे सामान्य आहे. बरेच फ्रेमवर्क 12-स्तंभ ग्रीडवर आधारित असतात, परंतु एक प्रतिसाद साइट नेहमीच या संरचनेमध्ये बसत नाही. येथे, मी 12-स्तंभ ग्रीडच्या पलीकडे जाणा truly्या खरोखर लवचिक लेआउट तयार करण्यासाठी दोन Sass विस्तार कसे वापरावे हे दर्शवित आहे.
समस्या
प्रतिसादात्मक लेआउट डिझाइन करणे कठीण असू शकते, कारण त्यात विविध ब्रेकपॉइंट्सवर कंटेनर, पंक्ती, स्तंभ आणि गटारीची रुंदी मोजणे समाविष्ट आहे. फ्रेमवर्क सामान्य ब्रेकपॉइंट्ससाठी प्रीसेट तयार करुन मदत करू शकतात. उदाहरणार्थ, बूटस्ट्रॅप 3 आम्हाला चार मीडिया क्वेरी ब्रेकपॉइंट्ससह 12-स्तंभ ग्रीड देते. त्यानंतर आपण असे वर्ग वापरता ज्यामुळे आपली सामग्री ग्रीडमध्ये विशिष्ट प्रमाणात स्पॉट्स होऊ शकते आणि गटारी नेहमी 30px घेतात.
हे बर्‍याच वेळा तेजस्वीपणे कार्य करते, परंतु दोन समस्या आहेत. प्रथम, आपल्या मार्कअपमध्ये हे वर्ग जोडल्याने थोडेसे शब्दचिन्ह मिळेल. म्हणा की आपल्याला असा लेआउट पाहिजे ज्यामध्ये मोबाइल डिव्हाइसवरील सर्व स्तंभ, लहान डिव्हाइसवरील 12 स्तंभांपैकी सहा आणि मध्यम डिव्हाइसवरील चार वापरा. ते मार्कअप कदाचित यासारखे काहीतरी दिसू शकते:
h2> सेवा </ h2> div> लेख> img src = "प्रतिमा / चिन्ह-एक्सोटिक्पीट्स.एसव्हीजी" Alt = "चिन्ह"> एच 3> विदेशी पाळीव प्राणी / एच 3> पी> आम्ही सरपटणारे प्राणी, उंदीर, पक्षी आणि इतरांसाठी विशेष काळजी प्रदान करतो विदेशी पाळीव प्राणी. </ p>
दुसरी समस्या अशी आहे की हे वर्ग आपल्या HTML वर लेआउट माहिती जोडतात आणि आपला कोड अद्यतनित करणे कठीण करतात, विशेषत: मोठ्या स्थापनेवर. जसे की आपले लेआउट अधिक गुंतागुंतीचे होत जाईल तसतसे आपण कदाचित अशा कोडसह समाप्त होऊ शकता:
div>
मोठा मुद्दा असा आहे की आपल्याकडे लवचिकता कमी आहे. आपल्या फ्रेमवर्कमध्ये गणितांची काळजी घेणे आवश्यक आहे, कारण तो एक कठीण भाग आहे, परंतु आपल्या लेआउटच्या मेट्रिक्सवर तो लिहित नाही. हे फ्रेमवर्क आपला बॉस कोणी बनवले?
सुसी
गणिताची काळजी घेताना आपल्याला डिझाइनबद्दल काळजी करू असे सुसीचे सोपे वचन आहे. त्याच्या मुळाशी पूर्णपणे लवचिक ग्रीड सिस्टममध्ये रुंदीची गणना करण्यासाठी हे सस मिश्रणाचा एक संच आहे.
आपल्या प्रोजेक्टमध्ये लायब्ररी इम्पोर्ट कमांडद्वारे आयात करून प्रारंभ करा: @ आयात "सुसी";. हे आपल्याला सुसीच्या ग्रीड फ्रेमवर्कमध्ये प्रवेश देते जे अंमलात आणणे सोपे नाही. त्याच्या सर्वात मूलभूत स्वरुपामध्ये, आपल्याला फक्त दोन मिक्सन्स शिकण्याची आवश्यकता आहे. प्रथम कंटेनर मिक्सिन आहे.
कंटेनर
घटकांची रुंदी विविध ब्रेकपॉइंट्समध्ये कशी समायोजित करते हे कंटेनर आपल्याला मदत करते. सुसी सह आम्ही आमच्या एचएमटीएल कोडमध्ये कोणतेही अतिरिक्त वर्ग न जोडता कोणत्याही वेळी कोणत्याही घटकात कंटेनर पुन्हा परिभाषित करू शकतो.
समजा मी एक वेगळी वेबसाइट देत आहोत. जर मला एचटीएमएल घटकात कंटेनर तयार करायचा असेल तर, मी माझ्या घोषणेमध्ये याप्रमाणे अंतर्भूत करू शकतो:
#welcome {लेख {@ कंटेनर (70%) समाविष्ट करा; } //लेख }
हे आमच्या एचटीएमएल मध्ये एक .कॉनटेनर क्लास न जोडता, बूटस्ट्रॅप कंटेनर सारख्या विभागातील वर्गासह आयटम बनवेल - म्हणजे आमचा एचटीएमएल बरेच अधिक अर्थपूर्ण असू शकते.
डिव्ह आयडी = "आपले स्वागत आहे"> लेख> एच 1> लँडन हॉटेलमध्ये आपले स्वागत आहे </ h1> p> मूळ लंडन पश्चिम लंडनच्या मध्यभागी 50 वर्षांनंतर टिकून आहे. थिएटरपासून जेवणापर्यंत, ऐतिहासिक स्थळांपर्यंत - वेस्ट एंडच्या प्रत्येकासाठी काहीतरी आहे. आणि नॉन-टू-मिस रूफटॉप कॅफे हे प्रवासी आणि स्थानिक लोकांसाठी पेय, खाण्यापिण्यात आणि चांगल्या संभाषणावर व्यस्त राहण्यासाठी एक उत्तम ठिकाण आहे. </ P> / लेख </ div>
माझे एचटीएमएल बरेच वाचनीय करण्याव्यतिरिक्त, यामुळे गोष्टी अद्यतनित करणे सुलभ होते. जेव्हा आम्ही सामग्री आणि देखावा यासारख्या वर्गांचा वापर करतो तेव्हा त्या घटकांच्या लेआउटच्या संदर्भात काय आहे हे पुन्हा परिभाषित करणे सोपे आहे, आपली सामग्री आपल्या इच्छेनुसार वागण्यासाठी आपल्याला किती वर्ग जोडण्याची आवश्यकता आहे याचा विचार करण्याऐवजी .
स्पॅन
सुसीमध्ये आपण स्पॅन वापरुन पंक्ती आणि स्तंभ तयार करा. एखादा घटक तयार करण्यासाठी जो तीन स्तंभांपैकी एक घेईल, आपण असे काहीतरी लिहू शकता.
#usefulinfo {विभाग {@ कालावधी समाविष्ट करा (3 पैकी 1); }}
याबद्दल खरोखर काय महान आहे ते आहे की आम्हाला कधीही विशिष्ट संख्येच्या स्तंभांचे अनुपालन करणे आवश्यक नाही आणि त्यानुसार त्या घटकांचे समायोजन करण्याची गरज नाही. माझ्या लेआउटमधील कोणताही घटक त्या वेळी मला आवश्यक असलेल्या क्षेत्राची केवळ रक्कम घेईल.
हे स्तंभांबद्दल आपल्या विचारसरणीत खरोखर बदलते. जर मी बूटस्ट्रॅप वापरत असेल तर, मी वरील कोड .col-sm-4 म्हणून लिहितो कारण 12 स्तंभांपैकी एक तृतीयांश चार आहे. सुसी सह, मला किती युनिट विस्तृत करायचे आहेत याचा विचार करण्याची गरज नाही; मला आवश्यक असलेली जागा मी निर्दिष्ट करु शकतो. जेव्हा आपण यापुढे विशिष्ट स्तंभांच्या रूपांतरणाबद्दल विचार करत नाही, तेव्हा त्याऐवजी लेआउट कसे दिसावे यावर आपण लक्ष केंद्रित करू शकता.
डीफॉल्ट सेट अप करत आहे
अर्थात, कोणत्याही लेआउट सिस्टममध्ये डीफॉल्ट असणे चांगले आहे, म्हणून आम्हाला प्रत्येक वेळी आमच्या गटारींचा आकार निर्दिष्ट करण्याची गरज नाही. आम्ही आमच्या सस च्या शीर्षस्थानी $ susy नावाचे व्हेरिएबल बदलून ते करू.
us सुसी: (स्तंभ: 12, कंटेनर: 60 मी, गटारी: 1/4, गटारी-स्थिती: आत);
आपला डीफॉल्ट ग्रीड सेट अप करण्यासाठी आपण वापरु शकता सुशीकडे एक टन बरेच डीफॉल्ट आहेत परंतु हे मूलभूत सेटअप मानक बूटस्ट्रॅपसारखे डीफॉल्ट एकत्र ठेवण्याची काळजी घेईल. हे विसरू नका, सुसीमधील प्रत्येक गोष्ट सानुकूल आहे जेणेकरून आपण यापैकी कधीही लग्न केले नाही आणि त्या टॅग-बाय-टॅग आधारावर बदलू शकता.
जेव्हा आम्ही कंटेनर मिक्सइनमध्ये @Contal कमांड वापरतो तेव्हा डिफॉल्ट ग्रिडमध्ये आता 12 स्तंभ असतील आणि त्या कंटेनरच्या आकारात एक चतुर्थांश गटारी असलेल्या 60 मी रुंदीसह लॉक होईल. जर आम्हाला आमचे मागील भाग या ग्रीडमध्ये बसवायचे असतील तर आम्ही यासारखे घोषणा लिहू शकतो:
#usefulinfo {विभाग {@ कालावधी (4) समाविष्ट करा; }}
याचा अर्थ प्रत्येक विभागात 12 स्तंभांपैकी चार स्तंभ आहेत. तथापि, मला असे वाटते की एखादा घटक ’तीनपैकी एक’ स्तंभ घेतो असे म्हणण्यात सक्षम असणे अधिक अर्थपूर्ण आहे. आपल्याला एखाद्या विशिष्ट स्थानावर स्तंभ ऑफसेट करण्याची आवश्यकता असल्यास आपण हे संकेत वापरू शकता:
@ अंतर्भूत कालावधी (12 पैकी 8 वाजता);
हे घटकास 12-स्तंभ ग्रीडच्या चौथ्या स्थानावर प्रारंभ करून, आठ स्तंभ घेऊ देते. म्हणून जेव्हा आपण लेआउट तयार करता तेव्हा आपल्या विद्यमान ग्रीडमध्ये डिझाइन कसे बसते त्याऐवजी आपली सामग्री काय करण्याची आवश्यकता यावर आपण लक्ष केंद्रित करू शकता.
पॅडिंग स्तंभ
आपल्या घटकांचे प्लेसमेंट नियंत्रित करण्याचा दुसरा मार्ग म्हणजे आपल्या स्तंभांना पॅड करणे. हे आपल्या स्तंभांच्या दोन्ही बाजूला अनेक स्तंभ मोकळी जागा जोडते. उदाहरणार्थ, आपण स्तंभ सात युनिट्स उजवीकडे हलवू शकता आणि त्यास डावीकडून एक युनिट पॅड करू शकता:
@ समावेश पॅड (7,1);
याचा अर्थ असा आहे की सकारात्मक जागांबद्दल विचार करण्याद्वारे गोष्टी घालण्याव्यतिरिक्त (एखाद्या घटकाने किती स्तंभ घ्यावेत) याचा विचार करून आपण उलट सामग्री करू शकता आणि आपल्या सामग्रीच्या प्रत्येक बाजूला अंतरांवर आधारित डिझाइन तयार करू शकता.
मीडिया क्वेरी व्यवस्थापकीय
गोष्टी खरोखर प्रतिसाद देण्याकरिता, आपल्याला कॉलम सेटअप एकत्रित करणे आणि प्रतिसादात्मक ब्रेकपॉइंट्ससह डिझाइन करणे आवश्यक आहे. हे करण्यासाठी, आम्ही ब्रेकपॉईंट नावाच्या लायब्ररीतून मिक्सिनचा दुसरा सेट वापरू शकतो.
ब्रेकपॉईंट आपल्या लेआउटमध्ये मीडिया क्वेरी हाताळणे सुलभ करते. हे माध्यम क्वेरी ब्रेकपॉइंट्स तयार करण्यासाठी आपल्याला वापरण्याची आवश्यकता असलेल्या भाषेचे सुलभकरण करून करते. पारंपारिकपणे, आपण यासारखे नियम वापरून हे तयार करता:
@ मिडिया (किमान रूंदी: 34 मी) आणि (जास्तीत जास्त रुंदी: 62 मी) {.कंपनी {...}}
हे रूंदीची एक श्रेणी तयार करते ज्यात घोषणांचा आपल्या लेआउटवर प्रभाव पडतो. ब्रेकपॉईंट एक कॉल्स-सेन्स मिक्सइन मध्ये कॉल अंतर्भूत करतो जे लिहायला खूप सोपे आहे:
.container break @ ब्रेकपॉइंट (34 मी 62 मील) समाविष्ट करा {...}
कॉल देखील भिन्न आहे, कारण आम्ही हे विद्यमान वर्गात सहजपणे असाइन करू शकतो. ब्रेकपॉईंट बद्दल मोठी गोष्ट म्हणजे ती सामान्य लेआउट गरजांवर आधारित गृहित धरते.
ब्रेकपॉईंटचे नियम शिकणे देखील सोपे आहे. आपल्याला फक्त तीन गोष्टी माहित असणे आवश्यक आहे:
- जर आपण केवळ ब्रेकपॉईंट कॉलमध्ये एकच नंबर समाविष्ट केला असेल तर ब्रेकपॉईंट किमान रुंदीचा मीडिया क्वेरी कॉल गृहित धरेल
- आपण दोन संख्या समाविष्ट केल्यास ब्रेकपॉईंट असे गृहीत धरते की आपण दोन संख्यांमधील श्रेणी निर्दिष्ट करू इच्छित आहात (आधीच्या उदाहरणाप्रमाणे)
- जर आपण दोन मूल्ये समाविष्ट केली आणि एक स्ट्रिंग असेल तर असे गृहित धरले जाते की आपण मिश्रणाला एक वैशिष्ट्य मूल्य जोडी पाठवित आहात, म्हणून आपणास इच्छित असल्यास आपण अभिमुखता किंवा इतर कोणत्याही विशेष मीडिया क्वेरी नियम पाठवू शकता
आवृत्ती 2.2.1 पासून ब्रेकपॉईंट सुसीमध्ये दुमडलेला आहे. सुसी आवृत्ती ब्रेकपॉईंट मिक्सइन प्रमाणे कार्य करते, परंतु ब्रेकपॉईंट कॉल करण्याऐवजी आपण सुसी-ब्रेकपॉईंट वापरता. असाच कॉल केला जाईलः
.कंटेंटर {@ सुसी-ब्रेकपॉईंट (34 मी 62 मी) समाविष्ट करा {कमाल रूंदी: 50%; समास-डावे: ऑटो; मार्जिन-राइट: ऑटो; }}
ब्रेकपॉईंट आणि सुसी
जेव्हा आपण ब्रेकपॉईंट सुसी बरोबर एकत्र करता तेव्हा आपणास एक लवचिक ग्रिड मिळतो जो सहजपणे भिन्न मीडिया क्वेरी घोषणांमध्ये समायोजित करू शकतो. चला साइटवरील माहिती विभागासाठी HTML वर एक नजर टाकू.
div id = "hotelinfo"> लेख आयडी = "उपयोगीinfo"> विभाग आयडी = "आगमनाफो"> / विभाग> विभाग id = "सेवा"> / विभाग> विभाग id = "प्रवेशयोग्यता"> / विभाग> / लेख> लेख id = "ग्रीनप्रोग्राम"> / लेख </ div>! - हॉटेलइन्फो ->
सुसी आणि ब्रेकपॉईंट एकत्र करून, आम्ही विविध मीडिया ग्रिड लेआउट असलेले मीडिया क्वेरी तयार करू शकतो. माझ्या लेआउटमध्ये माझ्याकडे तीन भिन्न विभाग आहेत, परंतु व्ह्यूपोर्टच्या रूंदीनुसार त्यांचे वेगळे नियम आहेत असे मला वाटते.
या दोन भिन्न ब्रेकपॉइंट्स वर, आमचे लेआउट नाट्यमयपणे वेगळ्या प्रकारे वागते. उजवीकडील मोठ्या ब्रेकपॉईंटमध्ये, प्रत्येक विभाग तीन स्तंभ घेते. छोट्या ब्रेकपॉईंटमध्ये, पहिला कॉलम व्ह्यूपोर्टच्या 100 टक्के घेते, परंतु इतर दोन व्ह्यूपोर्टच्या निम्मे भाग घेतात. हेच हे मिक्सन इतके शक्तिशाली बनवते. या दोन लेआउट व्यक्त करण्याचा कोड संक्षिप्त आहे:
विभाग {@ सुसी-ब्रेकपॉईंट (650px) समाविष्ट करा sp @ कालावधी (3 पैकी 1) समाविष्ट करा; break // ब्रेकपॉइंट @ सुसी-ब्रेकपॉईंट (450px 650px) समाविष्ट करा {&. चेकलिस्ट {@ अंतर्भूत (2 पैकी 1)} // चेकलिस्ट break // ब्रेकपॉइंट} // विभाग
प्रथम, आम्ही विभाग टॅगमधील कोणत्याही घटकासाठी डीफॉल्ट सेट करतो. जर ते घटक 650px पेक्षा जास्त व्ह्यूपोर्टवर पोहोचले तर प्रत्येकाने एक युनिट घेण्यासह ते तीन-युनिट ग्रिड व्यापतील.
जर लेआउट 450 पीएक्स आणि 650 पीएक्स दरम्यान असेल तर. चेकलिस्ट (सेवा आणि प्रवेशयोग्यता विभाग) च्या वर्गासह घटक फक्त दोन स्तंभांसह पूर्णपणे नवीन ग्रीडमध्ये फिट असतील आणि प्रत्येक घटक त्यापैकी एक एक घेईल.
या दोन ब्रेकपॉइंट्स दरम्यान आगमन माहिती 100% ग्रीड घेते. लक्षात घ्या की 450 पिक्सल खाली काय होते हे आम्ही निर्दिष्ट केले नाही. डीफॉल्टद्वारे याची काळजी घेतली जाते - प्रत्येक विभाग व्ह्यूपोर्टच्या 100 टक्के घेईल.
मिक्सिनसह मास्टरिंग लेआउट
या दोन मिक्सिन फ्रेमवर्क आपल्याला काय देतात हे लेआउट तयार करण्यासाठी वापरत असलेल्या कोडच्या पलीकडे जाईल. या ग्रीडची किंवा त्या ग्रीडची काळजी न घेता आपली मांडणी व्यक्त करण्याची क्षमता किंवा ग्रीड प्रोजेक्ट्स डिझाइन करताना आपला मेंदू कार्य करण्याच्या पद्धती बदलतो.
मला चुकीचे देऊ नका, मला फ्रेमवर्क आवडतात. बूटस्ट्रॅप अभूतपूर्व वेगाने लेआउट तयार करण्यात आपली मदत करू शकते. हे एक लढाई-चाचणी केलेली ग्रीड ऑफर करते जी सारण्या, मोडल्स आणि फॉर्म सारख्या सामान्य घटक द्रुतपणे हाताळण्यासाठी सर्व प्रकारच्या सीएसएस आणि जावास्क्रिप्ट घटक प्रदान करण्यासाठी लेआउटच्या पलीकडे जाते.
मी आराखडा केलेली डिझाइनची प्रणाली जी करते ती म्हणजे मांडणीचे वर्णन करण्यासाठी आपण वापरत असलेली भाषा बदलणे. ही एक नैसर्गिक, मागास-सुसंगत आणि शिकण्याची सोपी प्रणाली आहे जी वेबसाइट्स डिझाइन करण्याच्या विचारसरणीत बदल करेल.
शब्द: रे व्हिलालोबोस
रे व्हिलालोबस Lynda.com वर एक स्टाफ लेखक आहे जो फुल स्टॅक डिझाइन आणि डेव्हलपमेंट, फ्रंटएंड डिझाइन, जेएस, अँगुलरजेएस, सस, बूटस्ट्रॅप मध्ये तज्ञ आहे. हा लेख मूळतः नेट मासिकाच्या 274 अंकात प्रकाशित झाला होता.
हे आवडले? हे वाचा!
- परिपूर्ण वेबसाइट लेआउटसाठी 20 चरण
- चमकदार वर्डप्रेस ट्यूटोरियल निवड
- डिझाइनर्ससाठी विनामूल्य टॅटू फॉन्ट
