यह स्लिमलाइन फ्रेमवर्क बिना किसी परेशानी के आकर्षक वेब पेज प्राप्त करने का एक शानदार तरीका है।

सीएसएस एक सर्वव्यापी, शक्तिशाली स्टाइलिंग तकनीक है लेकिन इसके साथ काम करना मुश्किल हो सकता है। यही कारण है कि टेलविंडसीएसएस जैसे सीएसएस फ्रेमवर्क और लेस सीएसएस और सैस जैसे प्रीप्रोसेसर उपलब्ध हैं।

लेकिन कभी-कभी, जिस प्रोजेक्ट पर आप काम कर रहे हैं, उसके लिए ये फ्रेमवर्क या सीएसएस "फ्लेवर" अत्यधिक हो सकते हैं। कभी-कभी, आप एक ऐसा ढांचा चाहते हैं जो आपकी वेबसाइट को स्टाइल करने के लिए आवश्यक सुविधाएँ प्रदान करता हो। यहीं पर पिको सीएसएस आता है। पिको एक न्यूनतम सीएसएस ढांचा है जो मूल HTML तत्वों को स्टाइल करना आसान बनाता है।

अपने प्रोजेक्ट में पिको सीएसएस स्थापित करना

पिको सीएसएस को अपने प्रोजेक्ट में स्थापित करने और चलाने का सबसे आम तरीका इसका उपयोग करना है सामग्री वितरण नेटवर्क (सीडीएन). पिको सीएसएस jsDelivr CDN पर उपलब्ध है, इसलिए आपको बस इसे इंगित करना है pico.min.css फ़ाइल वहां होस्ट की गई:

<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>

वैकल्पिक रूप से, आप पिको सीएसएस स्थापित कर सकते हैं

instagram viewer
नोड पैकेज प्रबंधक. इस विधि के काम करने के लिए, सुनिश्चित करें कि आपने अपनी मशीन पर Node.js स्थापित किया है। आप निम्न चलाकर अपनी मशीन पर Node.js की उपलब्धता की पुष्टि कर सकते हैं:

node -v

यदि Node.js उपलब्ध है, तो टर्मिनल इसका संस्करण प्रदर्शित करेगा। यदि आपने इसे स्थापित नहीं किया है, आप सीख सकते हैं कि अपने कंप्यूटर पर Node.js को कैसे चालू करें। चलाकर पिको सीएसएस स्थापित करें:

npm install @picocss/pico

पिको सीएसएस के साथ एक वेबसाइट बनाना

अपनी वेबसाइट के लिए लेआउट सेट करते समय, पिको सीएसएस आपको दो कक्षाएं प्रदान करता है, CONTAINER और ग्रिड. एक नया फ़ोल्डर बनाएं और उस फ़ोल्डर में एक बनाएं Index.htm फ़ाइल और ए स्टाइल.सीएसएस फ़ाइल। में Index.htm फ़ाइल में निम्नलिखित बॉयलरप्लेट कोड जोड़ें:

html>
<htmllang="en">
<head>
<metacharset="utf-8" />
<metaname="viewport"content="width=device-width, initial-scale=1" />
<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
 />
<linkrel="stylesheet"href="style.css" />
<title>Pico Websitetitle>
head>
<body>
<divclass="container">
<h1>Articles Worth Reading...h1>
div>
body>
html>

पिको सीएसएस ग्रिड सिस्टम

पिको सीएसएस में ग्रिड प्रणाली बहुत कमज़ोर है। आप इसके साथ एक ग्रिड को परिभाषित कर सकते हैं ग्रिड कक्षा। पिको सीएसएस में, ग्रिड कॉलम 992px से कम चौड़ाई वाले उपकरणों पर ढह जाते हैं।

के ठीक नीचे एच 1 में टैग करें शरीर की Index.htm फ़ाइल, चार कॉलम के साथ एक ग्रिड बनाएं।

<divclass="grid">
<div>div>
<div>div>
<div>div>
<div>div>
div>

प्रत्येक डिव ग्रिड में दो वर्ग होने चाहिए: CONTAINER और कार्ड. CONTAINER क्लास एक मूल पिको सीएसएस क्लास है जो एक केंद्रित व्यूपोर्ट को सक्षम बनाता है। इसके बाद, ग्रिड को कुछ नमूना सामग्री से इस तरह भरें:

<divclass="grid">
<divclass="container card">
<img
 src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
 />
<h4class="title">Why do birds sing in the morning?h4>
<divclass="metadata">
<span>David Uzonduspan>
<span>13 Minutes agospan>
div>
div>
<divclass="container card">
<img
 src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
 />
<h4class="title">The Secret Life of Ducklingsh4>
<divclass="metadata">
<span>Sam Hollandspan>
<span>53 Minutes agospan>
div>
div>


<divclass="container card">
<img
 src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
 />
<h4class="title">NASA's New Mission: Sending Flat-Earthers to 
 Edge of Earth to Prove Them Wrongh4>
<divclass="metadata">
<span>Simon Petersonspan>
<span>1 hour agospan>
div>
div>
<divclass="container card">
<img
 src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
 />
<h4class="title">Local Grandma Wins International Hip-Hop Dance Battle, 
 Proves Age is Just a Numberh4>
<divclass="metadata">
<span>Anonymousspan>
<span>2 days agospan>
div>
div>
div>

स्टाइलिंग को संभालने के लिए, खोलें स्टाइल.सीएसएस फ़ाइल करें और निम्नलिखित जोड़ें:

img {
width: 100%;
background-size: cover;
border-radius: 10px;
height: 200px;
}
.card {
background-color: rgb(244, 244, 244);
border-radius: 10px;
padding: 10px;
cursor: pointer;
margin-top: 10px;
}


.card:hover {
transform: scale(1.03);
}


.metadata {
margin-top: -30px;
margin-bottom: 10px;
}


.title {
margin-top: 10px;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}


.metadata {
font-size: 14px;
}
span:nth-child(1)::after {
content: " -";
}

जब आप ब्राउज़र में पेज खोलते हैं, तो आपको निम्नलिखित देखना चाहिए:

पिको सीएसएस में बटन का उपयोग कैसे करें

पिको सीएसएस पूर्व-शैली वाले HTML तत्वों और घटकों की एक विस्तृत विविधता प्रदान करता है। किसी भी वेबसाइट में सबसे आम तत्वों में से एक बटन है।

परंपरागत रूप से, अलग-अलग ब्राउज़र बटनों को थोड़ा अलग ढंग से प्रस्तुत करते हैं। बटन पिको सीएसएस में तत्व ब्राउज़रों में लगातार स्टाइल के साथ एक बटन बनाता है। इसका उपयोग करने के लिए, बस इसे जोड़ें बटन तत्व हमेशा की तरह:

<button>This is a buttonbutton>

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

<ahref="https.//www.google.com"role="button">Go To Googlea>

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

<ahref="#"aria-busy="true">Generating One-Time Password, please wait…a>

उपरोक्त कोड का परिणाम निम्नलिखित होगा:

टूलटिप्स को लागू करना मुश्किल हो सकता है, लेकिन पिको सीएसएस इसका ख्याल रखता है। यह किसी भी फैंसी जावास्क्रिप्ट की आवश्यकता के बिना किसी भी तत्व पर टूलटिप बनाना आसान बनाता है। पिको सीएसएस में टूलटिप बनाते समय, आपको दो विशेषताओं का उपयोग करने की आवश्यकता होती है:

  • डेटा-टूलटिप: यह टूलटिप की सामग्री को परिभाषित करता है।
  • डेटा-प्लेसमेंट: यह टूलटिप की स्थिति को परिभाषित करता है। आप इस विशेषता को चार मानों में से एक पर सेट कर सकते हैं: "शीर्ष", "दाएं", "नीचे", और "बाएं"।

निम्नलिखित कोड आपको दिखाता है कि इस उपयोगिता का उपयोग कैसे करें:

<buttondata-tooltip="Top"data-placement="top">Topbutton>
<buttondata-tooltip="Right"data-placement="right">Rightbutton>
<buttondata-tooltip="Bottom"data-placement="bottom">Bottombutton>
<buttondata-tooltip="Left"data-placement="left">Leftbutton>

जब आप इसे ब्राउज़र में चलाते हैं, तो आपको निम्नलिखित देखना चाहिए:

पिको सीएसएस में अकॉर्डियन

अकॉर्डियन उपयोगकर्ताओं को सामग्री अनुभागों को विस्तारित या संक्षिप्त करके उनकी दृश्यता को चालू करने देता है, ठीक उसी तरह जैसे एक अकॉर्डियन संगीत वाद्ययंत्र फैलता है और सिकुड़ता है। पिको सीएसएस में इस कार्यक्षमता को लागू करने के लिए, का उपयोग करें विवरण तत्व:

<details>
<summary>This is an accordionsummary>
<p>
 Taciti ac condimentum dapibus luctus volutpat ligula nec et mattis
 arcu ridiculus? Non posuere bibendum libero diam tempus nec odio non
 mauris elit! Euismod suspendisse pellentesque donec vestibulum dapibus
 iaculis. Cursus mollis quis praesent purus pulvinar pellentesque
 vulputate integer elit sodales? Egetnunc pellentesque eu eget
 consequat condimentum praesent nec auctor sapien luctus at, donec ac
 ex sit magna amet in.
p>
details>

जब कोई ब्राउज़र इस मार्कअप को प्रदर्शित करता है, तो उसे सामग्री को दिखाने या छिपाने का एक साधन प्रदान करना चाहिए, इस मामले में, एक ड्रॉप-डाउन तीर:

आपको CSS फ्रेमवर्क का उपयोग कब करना चाहिए?

सीएसएस फ्रेमवर्क आपको वेब एप्लिकेशन बनाने और स्टाइल करने की प्रक्रिया को सुव्यवस्थित करने में मदद कर सकता है। यदि आप दोहराए जाने वाले कार्यों पर समय बचाना चाहते हैं और पूर्व-निर्मित घटकों का लाभ उठाना चाहते हैं तो आपको सीएसएस ढांचे का उपयोग करने पर विचार करना चाहिए।

फ्रेमवर्क पूर्व-डिज़ाइन किए गए सीएसएस शैलियों, लेआउट ग्रिड और घटकों का एक सेट प्रदान करते हैं, जिससे आप एप्लिकेशन के तर्क और कार्यक्षमता पर ध्यान केंद्रित कर सकते हैं। कई सीएसएस फ्रेमवर्क व्यापक दस्तावेज़ीकरण और सामुदायिक समर्थन के साथ आते हैं जो आपके कभी फंसने की स्थिति में काम आएंगे।