🗻 ♎️ 🖖 अपने खुद के सीएसएस ढांचे 🔣 💝 👡

क्या आप CSS फ्रेमवर्क का उपयोग करते हैं?

जो लोग अपने काम में CSS - फ्रेमवर्क का उपयोग करते हैं, कृपया अपना अनुभव टिप्पणियों में साझा करें, यह बहुत उपयोगी और दिलचस्प होगा।

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

मैं आपको प्रत्येक CSS फ़ाइल के लिए कोड दिखाऊंगा।

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

आइए देखें कि मेरी रूपरेखा की शैली पत्रक कैसे काम करते हैं। सबसे पहले, चलो HTML के बारे में बात करते हैं - एक फाइल जो मेरी किसी भी परियोजना को पूरा करती है, मैं इसे index.html कहता हूं। Index.html फ़ाइल के अंदर उन तत्वों के लिए एक सरल रिक्त संरचना है जो मैं किसी भी परियोजना में उपयोग करने की योजना बना रहा हूं।

देखो और आनंद लो।

Index.html फ़ाइल:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Untitled</title> <!-- [if gte IE 7]><!--> <link rel="stylesheet" type="text/css" media="screen, projection" href="css/screen.css" /> <!--<! [endif]--> </head> <body> <div id="wrap"> <div id="header" class="group"> <div id="logo"> LOGO </div> <ul id="nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> <!-- /header --> <hr /> <div class="group"> <div id="main"> Main </div> <!-- /main --> <hr /> <div id="secondary"> Secondary </div> <!-- /secondar --> </div> <!-- /.group --> <hr /> <div id="footer"> Fotter </div> <!-- /footer --> </div> <!-- /wrap --> <!-- c(yats) --> </body> </html>

अगला, हम उन चार सीएसएस फ़ाइलों में से प्रत्येक पर देखेंगे जो मैं उपयोग करता हूं। आइए स्क्रीन से शुरू करें। एसके , मुख्य स्टाइलशीट। यह अन्य स्टाइल शीट की एक सूची है। आयात आदेश महत्वपूर्ण है।

Screen.css फ़ाइल

 /* Title: Imported style sheets are used in the project Author: author@yats.com.ua */ /* import stylesheets */ @import url ("reset.css"); @import url ("master.css"); @import url ("ie.css"); /* end import */

पहला स्टाइलशीट जो कि स्क्रीन.एक्सएस फाइल में इम्पोर्ट किया गया है, रीसेट है । एससीएस स्टाइलशीट। यह डिफ़ॉल्ट शैलियों को रीसेट करता है जो ब्राउज़र डिफ़ॉल्ट रूप से उपयोग करते हैं।

फ़ाइल रीसेट करें

 /* Title: Reset default browser styles Author: author@yats.com.ua */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; border: 0; outline: 0; background: transparent; } ol, ul { list-style: none; } blockquote, q { quotes: none; } :focus { outline: 0; } table { border-collapse: collapse; border-spacing: 0; }

सभी प्रोजेक्ट्स को बनाते समय रीसेट . css फ़ाइल, जिसका मैं उपयोग करता हूं, मोटे तौर पर एरिक मेयर से उधार ली गई थी। डिफ़ॉल्ट ब्राउज़र सेटिंग्स को रीसेट करने के बाद, हम मुख्य डिज़ाइन की शैलियों को जोड़ते हैं। मुख्य Master.css फ़ाइल में इस साइट के डिज़ाइन के लिए सभी शैलियाँ हैं। डिजाइन की प्रक्रिया को तेज करने के लिए, मैंने कुछ बुनियादी तत्वों को जोड़ा।

Master.css फ़ाइल

 /* Title: Master styles for screen media Author: author@yats.com.ua */ body{ font-family: "Helvetica neue", Helvetica,Arial, sans-serif; color: #444; font-size: 62.5%; background: #fff; } /* links */ a:link, a:visited { color: #369; outline: none; } a:hover{ color: #39c; } /* Page structure ------------------------------*/ #wrap{ margin: auto; max-width: 62.5em } #main{ } #secondary{ } #footer{ } /* Header ------------------------------*/ #logo{ } /* nav */ #nav{ } /* Main styles ------------------------------*/ /* Secondary styles ------------------------------*/ /* Footer styles ------------------------------*/ #footer{ } /* Misc. ------------------------------*/ hr, .hide { display: none; } a img { border: none; } /* self-clear floats */ .group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

अंत में, हम ie.css फ़ाइल आयात करते हैं, जिसमें इंटरनेट एक्सप्लोरर के लिए सभी अतिरिक्त कोड होते हैं। मैं इन नियमों को एक अलग स्टाइलशीट में अलग करना पसंद करता हूं ताकि मास्टर.केएस स्वच्छ रहें और कुरूपता से मुक्त रहें जो IE में होता है।

Ie.css फ़ाइल

 /* Title: IE patches Author: author@yats.com.ua */ /* PNG fix */ * html #selector { /* for IE<6 */ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='img/image.png'); background-image: none; background-repeat: no-repeat; background-color: transparent; } /* self-clear floats */ * html .group { /* IE6 */ height: 1%; } *:first-child+html .group { /* IE7 */ min-height: 1px; }

मैंने सिर्फ अपने छोटे ढांचे की संरचना का वर्णन किया है। इसका मतलब यह नहीं है कि मैं इसे सबसे अच्छा मानता हूं। इसके बजाय, मुझे उम्मीद है कि अपनी खुद की रूपरेखा तैयार करने में आपकी रुचि जागृत होगी (यदि आपके पास पहले से कोई नहीं है)।

अपने खुद के सीएसएस ढांचे

More articles: