Pico CSS – semantic HTML के लिए एक minimal CSS framework

• Pico CSS HTML टैग्स को सीधे style करता है, जिससे class के इस्तेमाल को न्यूनतम रखा जाता है
• बाहरी लाइब्रेरी या JavaScript के बिना, केवल pure CSS से साफ़-सुथरा UI अनुभव देता है
• मोबाइल सहित सभी डिवाइसों पर responsive स्क्रीन को अपने-आप support करता है
• यूज़र की environment settings के अनुसार light/dark mode अपने-आप लागू करता है
• 130 से अधिक CSS variables, कई custom themes और components के साथ आसानी से customize किया जा सकता है

---

परिचय

Pico CSS एक minimal CSS framework है जो सादगी और semantic markup को अधिकतम करता है। यह HTML के semantic elements को सीधे style करता है और कुल मिलाकर class के इस्तेमाल को 10 से कम रखता है, जिससे code maintain करना आसान होता है और readability बेहतर रहती है। इसका एक class-less version भी उपलब्ध है, इसलिए यह उन users के लिए भी उपयुक्त है जो pure HTML approach पसंद करते हैं।

मुख्य विशेषताएँ

Class-light & Semantic

• HTML tags पर सीधे styles लागू करके, ज़रूरी CSS classes की संख्या को काफ़ी कम करता है
• class-less version भी support करता है, जिससे item-based styling से आगे बढ़कर अधिक flexibility मिलती है

Just CSS, No Dependencies

• बाहरी libraries, package manager, JavaScript के बिना काम करता है
• सिर्फ़ HTML markup से ही आसानी से elegant styles लागू किए जा सकते हैं

Responsive design

• font size और spacing को screen size के अनुसार अपने-आप adjust करता है, जिससे हर डिवाइस पर एक जैसा और polished UI अनुभव मिलता है
• किसी अतिरिक्त class या setting के बिना अपने-आप अनुकूलित हो जाता है

Light/dark mode का automatic switching

• light theme और dark theme दोनों default रूप से उपलब्ध हैं
• browser या OS के prefers-color-scheme setting के अनुसार color theme अपने-आप लागू होती है
• JavaScript के बिना, सिर्फ़ CSS से लागू किया गया है

आसान customization

• 130 से अधिक CSS variables के साथ styles को आसानी से customize किया जा सकता है
• SASS के साथ advanced customization भी support करता है
• 20 handcrafted color themes और 30 से अधिक modular components देता है, जिससे brand-specific UI तक आसानी से बढ़ाया जा सकता है

Optimized performance

• HTML हल्का और संक्षिप्त बना रहता है, जिससे अनावश्यक code overhead और memory usage कम होता है
• ज़्यादा CSS duplication या JS loading के बिना तेज़ loading speed मिलती है

निष्कर्ष

Pico CSS बिना अनावश्यक dependencies के semantic, responsive और आसानी से customize होने वाली UI styling प्रदान करता है। यह तेज़ development environment के लिए आदर्श है और IT startups तथा developers के लिए एक प्रभावी framework विकल्प है।

[joyfui]

मैंने इसे पहले बहुत समय पहले देखा था, लेकिन तब की तुलना में अब यह काफ़ी बदल गया है।

[GN⁺]

Hacker News राय

• मैं इस साइट की सिफारिश करना चाहूँगा, यह cssbed.com है जहाँ class-less CSS themes को आसानी से switch/preview किया जा सकता है

  • मुझे यह resource पसंद है, लेकिन इसमें एक महत्वपूर्ण theme नहीं है: github-markdown-css. आजकल ज़्यादातर developers अक्सर Github Markdown पढ़ते हैं, इसलिए मुझे लगता है कि यह CSS system के लिए एक अच्छा starting point है। github-markdown-css
  • Tufte सच में बहुत elegant लगता है
  • अगर आप और ज़्यादा themes चाहते हैं, तो मैं dropin-minimal-css की भी सिफारिश करूँगा। इसमें sibling में बताए गए github-markdown-css भी शामिल है

• मुझे Pico बहुत पसंद है। लगभग हर side project में मैं इसे default starting point की तरह इस्तेमाल करता हूँ। कभी-कभी मैं और भी छोटा और हल्का Neat(neat.joeldare.com) भी इस्तेमाल करता हूँ

  • वाह, वह मेरा project है। इसका ज़िक्र करने के लिए धन्यवाद। मैं भी इसे लगभग हर चीज़ में इस्तेमाल कर रहा हूँ। अब मैं Pico से कुछ ideas लाते हुए भी Neat का size बहुत छोटा बनाए रखने की सोच रहा हूँ

• मैं बड़े projects में मुख्य रूप से Tailwind CSS इस्तेमाल करता हूँ, लेकिन छोटे और standalone cases में Pico CSS एकदम perfectly fit बैठता है। Pico CSS का usage scenarios page इसकी बात को बहुत अच्छे से summarize करता है। मैंने भी Pico CSS को बस पिछले हफ्ते ही खोजा था, और यह एक छोटे Hugo theme (govanity, Go module/package vanity URL देने के लिए: hugo-theme-govanity) के लिए बिल्कुल सही choice था। Pico को ढूँढने, docs पढ़ने और integration तक पहुँचने में मुझे सिर्फ़ दो घंटे लगे। एक और बात, एक point है जिसे अक्सर मिस कर दिया जाता है: CSS variables(css-variables) और colors(colors) का इस्तेमाल

  • url refresh कर दिया है

• मुझे Pico सच में बहुत बहुत पसंद है। यह एक शानदार starting point है और इसे कई दिशाओं में आसानी से customize किया जा सकता है। इसका feel Tailwind के बिल्कुल उलट है

• मैं एक नए project में Pico को LLM code generation के साथ इस्तेमाल कर रहा हूँ। LLMs में default रूप से Tailwind या complex enterprise styles निकालने की tendency होती है, इसलिए पूरी Pico documentation को context में डालकर और एक specific prompt (जैसे CLAUDE.md) के साथ उन्हें सिर्फ़ Pico इस्तेमाल करने की तरफ guide करना एक useful tip है

  • मैं जानना चाहूँगा कि पूरी Pico documentation को context में डालते समय आपने कोई खास तरीका अपनाया था या नहीं। Official docs कई pages में बँटे हुए लगते हैं, तो क्या आपने हर page को manually copy करके एक बड़ा prompt document बनाया? मैंने one-page format में documentation download ढूँढने की कोशिश की, लेकिन नहीं मिला

• मैं अपनी personal site(g5t.de) पर picocss इस्तेमाल कर रहा हूँ। मैंने हाल ही में plain html पर switch किया, और बहुत simple vanilla js से सभी pages के लिए common header और footer भी तुरंत बनाए जा सकते हैं। Markup तो वैसे भी चाहिए ही, तो फिर उसे अलग से क्यों लिखा जाए, सीधे html में ही लिख देता हूँ। picocss में dark mode built-in है, इसलिए मुझे यह और भी पसंद है

• buttons और form inputs मौजूदा desktop UI elements की तुलना में बहुत बड़े हैं

  • सही कहा। Browser में 75% zoom out करना पड़ता है, तब जाकर text कुछ हद तक natural दिखता है। लेकिन widgets फिर भी बड़े और अटपटे लगते हैं। लगता है शायद इसे सिर्फ़ mobile को ध्यान में रखकर design किया गया होगा

• CSS का इस्तेमाल मूल रूप से ऐसे ही होना चाहिए। मुझे समझ नहीं आता कि learning materials में class names में element का अर्थ भी बार-बार क्यों दोहराया जाता है

  • लगता है div element की वजह से एक पूरी पीढ़ी गलत दिशा में चली गई। इसका semantic meaning कमज़ोर है और इसका इस्तेमाल बहुत ज़्यादा हुआ है, इसलिए overall semantic structure पर भरोसा भी कम हो गया है

• पूरी तरह सहमत! एक downside यह है कि यह सिर्फ़ pixel units इस्तेमाल करता है, physical + relative units (pt/mm + em/ex/rem आदि) नहीं। फिर भी यह tailwind या bootstrap से कहीं बेहतर है

• मैं Pico का बहुत बड़ा fan हूँ… मैंने हाल ही में Pico का इस्तेमाल करके raku.org की आधिकारिक नई homepage launch की है

  • raku.org redesign के लिए बधाई! HTMX/PicoCSS और Cro का combination खास तौर पर दिलचस्प है