Hindi (हिंदी) translation by Taruni Rampal (you can also view the original English article)
इस ट्यूटोरियल में हम CSS का इस्तेमाल करते हुए एक सिंपल, रेस्पॉन्सिव ग्रिड प्रणाली बनाने जा रहे हैं। एक बार जब हम परिचित होते हैं, तो यह कैसे काम करता है, हम इसे सैस के साथ बेहतर बनाते हैं, रास्ते में कुछ प्रमुख सैस सुविधाओं को सीखते हैं।
CSS के साथ आरंभ करना
चलो जल्दी से जाचे क्या हमारे ग्रिड प्रणाली की तरह दिखेगा। बिल्डिंग ग्रिड्स के तेज तरीके हैं, जिनको मार्कअप पर कम दखल की आवश्यकता है, लेकिन यह ग्रिड हमें सरल, अभी तक उपयोगी Sass तकनीकों का अभ्यास करने का एक शानदार अवसर देती है। यह एक रैपिंग एलिमेंट्स का उपयोग करता है, फिर उसमें अन्य एलिमेंट जो पंक्तियों के रूप में कार्य करते हैं, फिर उन तत्वों के भीतर जो हमारे स्तंभों के रूप में कार्य करते हैं।
Grid.css
आरंभ करने के लिए, हमें बस एक CSS फ़ाइल की आवश्यकता है, इसलिए अपने कोड एडिटर में एक नया दस्तावेज़ खोलें और इसे "grid.css" नाम दें।
सबसे पहले जो हम जोड़ना चाहते हैं वह एक ग्लोबल रीसेट और बॉक्स-साइजिंग नियम है। इससे यह सुनिश्चित होगा कि हमारे तत्वों पर लागू पैडिंग को गणना की गई आयामों के भीतर जोड़ दिया गया है, जिससे हमें स्तंभ चौड़ाई को परिभाषित करने के लिए अधिक से अधिक आजादी मिलेगी।
1 |
*,
|
2 |
*:after, |
3 |
*:before { |
4 |
margin: 0; |
5 |
padding: 0; |
6 |
-webkit-box-sizing: border-box; |
7 |
-moz-box-sizing: border-box; |
8 |
box-sizing: border-box; |
9 |
}
|
इसके बाद हम यह सुनिश्चित करने के लिए एक नियम जोड़ देंगे कि किसी भी इमेजेज का उपयोग द्रव-रूप से किया जाता है।
1 |
img { |
2 |
width: auto; |
3 |
max-width: 100%; |
4 |
height: auto !important; |
5 |
}
|
रैपर
अब कुछ नियम यह सुनिश्चित करने के लिए हैं कि हमारा रेपर एलिमेंट स्वयं व्यवहार करता है।
1 |
.wrapper { |
2 |
width: 100%; |
3 |
margin: 0 auto; |
4 |
}
|
नोट: ध्यान रखें कि हम पहले मोबाइल पर काम कर रहे हैं। हमारा कंटेनर 100% व्यूपोर्ट की चौड़ाई से शुरू होता है, लेकिन हम इसे बड़ी स्क्रीन के लिए बदल देंगे।
पंक्तियाँ
हमारे सभी पंक्ति एलिमेंट्स में कॉलम होते हैं, जिससे यह सुनिश्चित होता है कि कॉलम के समूह एक दूसरे को ठीक से साफ़ करते हैं। चलिए कुछ सामान्य .clearfix जोड़ते है हमारे रेपर और पंक्ति एलिमेंट्स के लिए।
1 |
.wrapper:after, |
2 |
.row:after { |
3 |
content: ""; |
4 |
display: table; |
5 |
clear: both; |
6 |
}
|
नोट: हमें इन एलिमेंट्स का नाम नहीं देना है। .wrapper, .row और .column, हम उससे अधिक रचनात्मक हो सकते हैं। ये नाम इस ट्यूटोरियल के प्रयोजनों के लिए बहुत स्पष्ट हैं।
कॉलम
प्रत्येक स्तंभ के आकार के आधार पर, हम कॉलम classes की एक श्रृंखला रखते हैं (उदाहरण के लिए .column-1 और .column-6 आइए, एक ही चयन में इन सभी को लक्ष्य और शैली के लिए एक विशेषता चयनकर्ता का उपयोग करें।
1 |
[class*='column-'] { |
2 |
float: left; |
3 |
padding: 1em; |
4 |
width: 100%; |
5 |
min-height: 1px; |
6 |
}
|
यह चयनकर्ता कहता है; किसी भी एलिमेंट को लो, जिसकी class में स्ट्रिंग column- शामिल हैं और निम्न स्टाइल्स को लागू करें। इसलिए हमारे सभी स्तंभ तत्वों को छोड़ दिया जाएगा, 1em का एक पैडिंग होगा (यह हमारे गटर और कुछ वर्टीकल जगह बनाता है) और व्यूपोर्ट की चौड़ाई का 100% भर जाएगा (फिर से, हम पहले यहां मोबाइल पर काम कर रहे हैं)। अंत में, min-height: 1px सुनिश्चित करता है कि कॉलम ठीक से प्रदर्शित करता है, भले ही इसमें कोई सामग्री न हो।
मानो या न मानो, अब हमारे पास एक ग्रिड है! मार्कअप हम सभी की जरूरत है।
1 |
<section class="wrapper"> |
2 |
|
3 |
<div class="row"> |
4 |
|
5 |
<div class="column-3"></div> |
6 |
<div class="column-3"></div> |
7 |
<div class="column-6"></div> |
8 |
|
9 |
</div>
|
10 |
|
11 |
</section>
|
हम पंक्तियों के भीतर कॉलम के किसी भी संयोजन का उपयोग कर सकते हैं, यह देखने के लिए डेमो पर नज़र डालें कि आपको वर्तमान में क्या करना चाहिए।
रेस्पॉन्सिव जा रहे हैं
यह हमारे मोबाइल दृश्य का ध्यान रखा गया है, अब हमें बड़ी स्क्रीन के लिए एक अलग लेआउट देने के लिए एक मीडिया क्वेरी जोड़ें। आपको अपने खुद के ग्रिड के लिए ब्रेकपॉइंट निर्धारित करने की आवश्यकता होगी, लेकिन हम 30em के एक अनियंत्रित ब्रेकपॉइंट का उपयोग करने जा रहे हैं।
1 |
@media only screen and (min-width: 30em) { |
2 |
|
3 |
}
|
इस मीडिया क्वेरी के भीतर आने वाली कोई भी स्टाइल 30em के स्क्रीन पर और अधिक व्यापक हो जाएगी। हम अपने कॉलम को सही चौड़ाई में विभाजित करने के लिए इस बिंदु का उपयोग करेंगे।
% चौड़ाई
प्रत्येक स्तंभ कितने चौड़ा होना चाहिए? यह हमारे कॉलम पर निर्भर करता है। इस प्रदर्शन के लिए मैं बारह स्तंभों के साथ काम कर रहा हूं, इसलिए हर एक को आवरण का एक बारहवीं (1/12) होना चाहिए। एक कॉलम के लिए जो दो चौड़ाई फैलाती है, यह दो बारहवीं होगी, और इसी तरह। ये जो हमें देता है वह है:
1 |
@media only screen and (min-width: 30em) { |
2 |
|
3 |
.wrapper { |
4 |
width: 95%; |
5 |
max-width: 65em; |
6 |
}
|
7 |
|
8 |
.column-1 { |
9 |
width: 8.33333%; |
10 |
}
|
11 |
|
12 |
.column-2 { |
13 |
width: 16.66667%; |
14 |
}
|
15 |
|
16 |
.column-3 { |
17 |
width: 25%; |
18 |
}
|
19 |
|
20 |
.column-4 { |
21 |
width: 33.33333%; |
22 |
}
|
23 |
|
24 |
.column-5 { |
25 |
width: 41.66667%; |
26 |
}
|
27 |
|
28 |
.column-6 { |
29 |
width: 50%; |
30 |
}
|
31 |
|
32 |
.column-7 { |
33 |
width: 58.33333%; |
34 |
}
|
35 |
|
36 |
.column-8 { |
37 |
width: 66.66667%; |
38 |
}
|
39 |
|
40 |
.column-9 { |
41 |
width: 75%; |
42 |
}
|
43 |
|
44 |
.column-10 { |
45 |
width: 83.33333%; |
46 |
}
|
47 |
|
48 |
.column-11 { |
49 |
width: 91.66667%; |
50 |
}
|
51 |
|
52 |
.column-12 { |
53 |
width: 100%; |
54 |
}
|
55 |
|
56 |
}
|
आप यह भी देखेंगे कि हमने स्क्रीन के पूर्ण चौड़ाई से कम .wrapper एलिमेंट बना लिया है और इसे max-width दिया है। देखो कि हमारे ग्रिड के लिए क्या किया है।
Sass के साथ चीजों को साफ करना
हमारा CSS ग्रिड काम करता है, लेकिन अगर हम वास्तव में हमारे ग्रिड में सोलह कॉलम चाहते हैं तो क्या होगा? या इससे भी ज्यादा? हमें हर कॉलम की फिर से गणना करना होगा और मैन्युअल रूप से इसे प्रत्येक बार हमारे CSS फ़ाइल में दर्ज करना होगा। यह न बताएं कि हमारे CSS को लंबे समय तक और लंबे समय तक और प्रबंधित करने में अधिक कठिन हो जाएगा। खुशी से, Sass (या कोई अन्य पूर्वप्रोसेसर) हमारी मदद कर सकता है।
Sass सेट करना
यह ट्यूटोरियल Sass को स्थापित करने के बारे में नहीं है, यह मानता है कि आप पहले से जानते हैं कि यह कैसे करना है। यदि यह मामला नहीं है और आपको चीजों को उठाने और चलाने की आवश्यकता है, तो एक नज़र डालें: Mastering Sass: Lesson 1 SASS पर और SASS and Compass for Web Designers: Introduction।
आपके पास एक सैस प्रोजेक्ट सेटअप हो जाने के बाद, अगले चरण में डुबकी लगाए।
डेफिनिंग वेरिएबल्स
सैस हमें अपने CSS को सभी प्रकार के तरीकों को साफ करने में मदद करने जा रहा है, लेकिन पहली चीज जो हम कर सकते हैं वह किसी उपयोगी मूल्य को निकालती है और उन्हें वेरिएबल्स में संग्रहीत करती है। "_variables.scss" नामक एक नया आंशिक रूप से शुरू करना शुरू करें; एक सैस फाइल जो सीधे CSS में संकलित नहीं की जाएगी, लेकिन हम अपनी अन्य फाइलों में संदर्भ लेंगे।
1 |
// grid variables |
2 |
$grid-columns: 12; |
3 |
$grid-max-width: 65em; |
4 |
|
5 |
|
6 |
// breakpoints |
7 |
$breakpoint-small: "only screen and (min-width: 20em)"; |
8 |
$breakpoint-medium: "only screen and (min-width: 30em)"; |
ये वैरिएबल हमें उन कॉलम की मात्रा देते हैं जिनके साथ हम काम करना चाहते हैं; 12 इस समय, लेकिन आसानी से 16, शायद 32 (जो भी आप वास्तव में चाहते हैं) में बदला जा सकता है। हमने स्ट्रिंग के रूप में वेरिएबल्स में कुछ ब्रेकपॉइंट्स को भी संग्रहित किया है, भले ही हम इस समय केवल एक का उपयोग कर रहे हैं।
हम इन्हें शीघ्र ही उपयोग करेंगे, लेकिन पहले हम कुछ मिक्सिक्स सेटअप करेंगे।
mixins
सैस मिक्सिक्स कोड का हिस्सा हैं, जिसे हम एक बार परिभाषित कर सकते हैं और फिर हमारे प्रोजेक्ट में कहीं और उपयोग कर सकते हैं। उदाहरण के लिए, हम पहले नियमों का पहला सेट ले सकते हैं जहां हम border-box बोर्ड सेटअप करते हैं और इनमें से अधिकतर एक मिक्सिन में निकाले जाते हैं। हम शुरू करते हैं:
1 |
*,
|
2 |
*:after, |
3 |
*:before { |
4 |
margin: 0; |
5 |
padding: 0; |
6 |
-webkit-box-sizing: border-box; |
7 |
-moz-box-sizing: border-box; |
8 |
box-sizing: border-box; |
9 |
}
|
फिर हम इसे का एक हिस्सा निकालते हैं जिसे हम पुन: उपयोग कर सकते हैं, एक मिक्सिन परिभाषित कर सकते हैं जिसे मैंने "border-box" कहा है जैसे:
1 |
@mixin border-box { |
2 |
-webkit-box-sizing: border-box; |
3 |
-moz-box-sizing: border-box; |
4 |
box-sizing: border-box; |
5 |
}
|
इसके बाद, हम @import हमारे वेरिएबल्स और मिक्सिन को मुख्य "grid.scss"। @include स्टेटमेंट के साथ मिक्सिन का उपयोग करके।
1 |
@import "variables"; |
2 |
@import "mixins"; |
3 |
|
4 |
*,
|
5 |
*:after, |
6 |
*:before { |
7 |
margin: 0; |
8 |
padding: 0; |
9 |
|
10 |
@include border-box; |
11 |
|
12 |
}
|
@extend Clearfix
हम स्पष्ट रूप से नियमों के साथ ऐसा ही कर सकते हैं, जैसा कि suggested by Sebastian Ekström किया गया है। इस मामले में हम Nicolas Gallagher द्वारा सुझाए गए क्लेयरफॉक्स नियम लेते हैं और उन्हें placeholder selector (%) के साथ हमारे मिक्सिन फ़ाइल में जोड़ते हैं:
1 |
%clearfix { |
2 |
*zoom: 1; |
3 |
&:before,
|
4 |
&:after { |
5 |
content: " "; |
6 |
display: table; |
7 |
}
|
8 |
&:after { |
9 |
clear: both; |
10 |
}
|
11 |
}
|
प्लेसहोल्डर चयनकर्ता हमें शैली के पूरे खंड को परिभाषित करने की अनुमति देता है जो केवल आउटपुट प्राप्त करते हैं जब हम उन्हें कहीं और बढ़ाते हैं, जैसे:
1 |
.wrapper, |
2 |
.row { |
3 |
@extend %clearfix; |
4 |
}
|
एक बार संकलित होने के बाद, Sass की साफ कुछ लाइनें इस तरह दिखती हैं:
1 |
.wrapper, |
2 |
.row { |
3 |
*zoom: 1; |
4 |
}
|
5 |
.wrapper:before, |
6 |
.row:before, |
7 |
.wrapper:after, |
8 |
.row:after { |
9 |
content: " "; |
10 |
display: table; |
11 |
}
|
12 |
.wrapper:after, |
13 |
.row:after { |
14 |
clear: both; |
15 |
}
|
हमारे वेरिएबल का उपयोग करना
चलो हम उन वेरिएबल्स के कुछ सेट अप करते हैं, जो हम करेंगे? शुरू करने के लिए हम आवरण पर max-width मूल्य को स्वैप कर सकते हैं। इस:
1 |
.wrapper { |
2 |
width: 95%; |
3 |
max-width: 65em; |
4 |
}
|
यह हो जाता है:
1 |
.wrapper { |
2 |
width: 95%; |
3 |
max-width: $grid-max-width; |
4 |
}
|
अब हमारे मीडिया क्वेरी के साथ ऐसा ही करते हैं। इस:
1 |
@media only screen and (min-width: 30em) { |
हमारे $breakpoint-medium वेरिएबल से बेहतर होगा:
1 |
@media #{$breakpoint-medium} { |
नोट: आप देखेंगे कि हम #{} में हमारी वैरिएबल को व्राप्पेड करते हैं। इसे interpolation के रूप में जाना जाता है। यह आम तौर पर किया जाता है यदि हमें किसी अन्य के भीतर एक वेरिएबल का उत्पादन करना पड़ता है, लेकिन इस मामले में यह आवश्यक है क्योंकि मीडिया मीडिया पर होने वाले सैस कंपाइलर का दौरा संभव है यदि @media सीधे ब्रेसिज़ ()। आप इसके बारे में अधिक पढ़ सकते हैं ह्यूगो गिरादुले के ऑल यू ओवर सॉवर एज़ नॉव एस जानना सैस इंटरपोलेशन।
हमारे अंतिम वैरिएबल, $grid-columns का उपयोग करने के लिए, हमें कुछ और Sass कार्यक्षमता का उपयोग करने की आवश्यकता है; लूप।
Sass Loops
हमारे कॉलम की चौड़ाई परिभाषाएं वास्तव में समान हैं, वास्तविक मूल्यों के अलावा। अगर हम जरूरत के हिसाब से कई कॉलम के लिए कॉलम की परिभाषा को आउट करते हैं, तो हर बार मूल्य बदलते वक्त यह बहुत साफ हो जाएगा। ऐसा करने के लिए हम Sass @for लूप का उपयोग कर सकते हैं, जो इस तरह दिखता है:
1 |
@for $i from 1 through 12 { |
2 |
// looped content |
3 |
}
|
यह 12 पुनरावृत्तियों पर लूप होगा, और प्रत्येक बार $i का मूल्य उस लूप को प्रतिबिंबित करेगा। हम $i इस तरह से उत्पादन कर सकते हैं:
1 |
@for $i from 1 through 12 { |
2 |
|
3 |
.column-#{$i} { |
4 |
|
5 |
}
|
6 |
|
7 |
}
|
दोबारा, आप देखेंगे कि हम ${} के आसपास $i को एक स्ट्रिंग के रूप में आउटपुट का उपयोग कर रहे हैं जो हम .column- selector. यह संकलित करते समय हमें निम्नलिखित देता है:
1 |
.column-1 { |
2 |
|
3 |
}
|
4 |
|
5 |
.column-2 { |
6 |
|
7 |
}
|
8 |
|
9 |
.column-3 { |
10 |
|
11 |
}
|
12 |
|
13 |
.column-4 { |
14 |
|
15 |
}
|
16 |
|
17 |
.column-5 { |
18 |
|
19 |
}
|
20 |
|
21 |
.column-6 { |
22 |
|
23 |
}
|
24 |
|
25 |
.column-7 { |
26 |
|
27 |
}
|
28 |
|
29 |
.column-8 { |
30 |
|
31 |
}
|
32 |
|
33 |
.column-9 { |
34 |
|
35 |
}
|
36 |
|
37 |
.column-10 { |
38 |
|
39 |
}
|
40 |
|
41 |
.column-11 { |
42 |
|
43 |
}
|
44 |
|
45 |
.column-12 { |
46 |
|
47 |
}
|
प्रतिभाशाली! अब इन चयनकर्ताओं के भीतर सही शैली का उत्पादन करने के लिए कुछ गणना का उपयोग करें।
सैस ऑपरेटर्स
हम अच्छी तरह से कर रहे हैं, लेकिन अब हमें प्रत्येक चयनकर्ता के लिए निम्नलिखित की तरह कुछ आउटपुट चाहिए:
1 |
.column-5 { |
2 |
width: 41.66667%; |
3 |
}
|
उस स्तंभ की चौड़ाई को 100% के रूप में गणना की जाती है, कॉलम की कुल संख्या से विभाजित, कॉलम संख्या से गुणा किया जाता है। इस मामले में 100% / 12 * 5 = 41.66667%। इसलिए हम लागू करने की आवश्यकता वाली गणना, वेरिएबल्स के लिए प्रासंगिक मानों को बदलना।
1 |
@for $i from 1 through 12 { |
2 |
|
3 |
.column-#{$i} { |
4 |
width: 100% / 12 * $i; |
5 |
}
|
6 |
|
7 |
}
|
सैस अब हमारे लिए गणना कर रहा है, हमें निम्न दे:
1 |
.column-1 { |
2 |
width: 8.33333%; |
3 |
}
|
4 |
|
5 |
.column-2 { |
6 |
width: 16.66667%; |
7 |
}
|
8 |
|
9 |
.column-3 { |
10 |
width: 25%; |
11 |
}
|
12 |
|
13 |
.column-4 { |
14 |
width: 33.33333%; |
15 |
}
|
16 |
|
17 |
.column-5 { |
18 |
width: 41.66667%; |
19 |
}
|
20 |
|
21 |
.column-6 { |
22 |
width: 50%; |
23 |
}
|
24 |
|
25 |
.column-7 { |
26 |
width: 58.33333%; |
27 |
}
|
28 |
|
29 |
.column-8 { |
30 |
width: 66.66667%; |
31 |
}
|
32 |
|
33 |
.column-9 { |
34 |
width: 75%; |
35 |
}
|
36 |
|
37 |
.column-10 { |
38 |
width: 83.33333%; |
39 |
}
|
40 |
|
41 |
.column-11 { |
42 |
width: 91.66667%; |
43 |
}
|
44 |
|
45 |
.column-12 { |
46 |
width: 100%; |
47 |
}
|
टिडिंग के अंतिम बिट के रूप में, हम मूल्य 12 के बजाय $grid-columns वैरिएबल का उपयोग कर सकते हैं:
1 |
@for $i from 1 through $grid-columns { |
2 |
|
3 |
.column-#{$i} { |
4 |
width: 100% / $grid-columns * $i; |
5 |
}
|
6 |
|
7 |
}
|
अब, यदि हम कॉलम की संख्या बदलना चाहते हैं, तो हम केवल वेरिएबल को बदलते हैं और गणना हमारे लिए पूरी हो जाएगी! उदाहरण के लिए, $grid-columns को 4 में बदलकर हमें निम्न CSS दें:
1 |
@media only screen and (min-width: 30em) { |
2 |
.wrapper { |
3 |
width: 95%; |
4 |
max-width: 65em; } |
5 |
|
6 |
.column-1 { |
7 |
width: 25%; } |
8 |
|
9 |
.column-2 { |
10 |
width: 50%; } |
11 |
|
12 |
.column-3 { |
13 |
width: 75%; } |
14 |
|
15 |
.column-4 { |
16 |
width: 100%; } |
17 |
}
|
निष्कर्ष
हमारी अंतिम ग्रिड.scss एक मात्र 42 लाइन कोड है; हमारे प्रारंभिक CSS से कम तरह से।
1 |
@import "variables"; |
2 |
@import "mixins"; |
3 |
|
4 |
*, *:after, *:before { |
5 |
margin: 0; |
6 |
padding: 0; |
7 |
@include border-box; |
8 |
}
|
9 |
|
10 |
img { |
11 |
width: auto; |
12 |
max-width: 100%; |
13 |
height: auto !important; |
14 |
}
|
15 |
|
16 |
.wrapper { |
17 |
width: 100%; |
18 |
margin: 0 auto; |
19 |
}
|
20 |
|
21 |
.wrapper, .row { |
22 |
@extend %clearfix; |
23 |
}
|
24 |
|
25 |
[class*='column-'] { |
26 |
float: left; |
27 |
padding: 1em; |
28 |
width: 100%; |
29 |
min-height: 1px; |
30 |
}
|
31 |
|
32 |
@media #{$breakpoint-medium} { |
33 |
.wrapper { |
34 |
width: 95%; |
35 |
max-width: $grid-max-width; |
36 |
}
|
37 |
@for $i from 1 through $grid-columns { |
38 |
.column-#{$i} { |
39 |
width: 100% / $grid-columns * $i; |
40 |
}
|
41 |
}
|
42 |
}
|
इस प्रक्रिया के दौरान हमने सैस वेरिएबल्स, मिक्सिक्स, प्लेसहोल्डर्स, एक्सटेंड, लूप, ऑपरेटर और यहां तक कि इन्टरपोलेशन भी देखा है। यह सुविधाओं का एक अविश्वसनीय रूप से शक्तिशाली सेट और एक शानदार शुरुआत है, यदि आप बस Sass में मिल रहे हैं।
हमारे द्वारा बनाए गए ग्रिड में आप और सुधार कैसे कर सकते हैं? आप और क्या जोड़ेंगे या निकालेंगे? हमें टिप्पणियों में बताएं!
आगे की पढाई
