स्टाइलिंग एक कोड रिव्यू प्लेटफॉर्म स्टाइलस के साथ | मूल, AI द्वारा अनुवादित

Home PDF English 中文 日本語 Español हिंदी Français Deutsch العربية 繁體中文

---

जब एक आधुनिक वेब एप्लिकेशन बनाते हैं, स्टाइलिंग केवल अच्छे दिखने के लिए नहीं है—यह एक इंट्यूटिव, रिस्पॉन्सिव और एंगेजिंग यूजर एक्सपीरियंस बनाना है। मैंने हाल ही में एक Vue.js-पावर्ड कोड रिव्यू प्लेटफॉर्म की Stylus-आधारित स्टाइलशीट का पता लगाया, और इसका CSS आर्किटेक्चर कई तकनीकों का खजाना है जो खोलने के लिए है। चलिए, इस एप्लिकेशन को देखते हैं कि यह Stylus का उपयोग कैसे करता है अपने पॉलिश्ड UI को बनाना, लेआउट स्ट्रक्चरिंग से होवर इफेक्ट्स तक, जबकि कोड को बनाए रखते हुए बनाए रखते हैं और स्केलेबल।

क्यों Stylus? एक तेज़ प्राइमर

Stylus एक CSS प्रीप्रोसेसर है जो पारंपरिक CSS के वरबोसिटी को हटा देता है (कुर्ली ब्रेस या सेमिकोलन की आवश्यकता नहीं है) और शक्तिशाली फीचर्स जैसे वेरिएबल्स, मिक्सिन्स और नैस्टिंग को जोड़ता है। प्रदान की गई कोड variables.styl से वेरिएबल्स और base.styl से एक बेस स्टाइलशीट को इम्पोर्ट करता है, एकसंगत और पुन: उपयोग करने योग्य स्टाइल्स के लिए मंच तैयार करता है। उदाहरण के लिए, प्राइमरी रंग #1CB2EF variables.styl में परिभाषित है और बटन और बैकग्राउंड के माध्यम से पुन: उपयोग किया जाता है।

लेआउट का स्ट्रक्चर: सेक्शंस और कंटेनर्स

एप्लिकेशन का होमपेज अलग-अलग सेक्शनों में विभाजित है—.slide, .feature, .reviewer, .example, और .contact—हर एक के अपने स्टाइलिंग स्ट्रैटेजी के साथ। यहाँ .slide (हिरो) सेक्शन को कैसे स्टाइल किया जाता है:

.slide
  height 800px
  position relative
  color #fff
  width 100%
  overflow hidden
  .bg
    background url("../img/home/hero.jpg") no-repeat
    background-size cover
    background-position-y 40%
    position 200% 200%
    width 100%
    height 100%
    padding-top 280px

मुख्य तकनीकें:

• फुल-स्क्रीन हिरो: height 800px और width 100% एक बॉल्ड, फुल-विड्थ बैनर बनाते हैं। overflow hidden सुनिश्चित करता है कि कोई भी सामग्री बाहर नहीं निकलती।
• बैकग्राउंड इमेज: .bg क्लास background-size cover का उपयोग करता है कि हिरो इमेज को अनुपात में स्केल करता है, जबकि background-position-y 40% इसके वर्टिकल एलाइनमेंट को विसुअल इम्पैक्ट के लिए फाइन-ट्यून करता है।
• नैस्टिंग: Stylus का नैस्टिंग संबंधित स्टाइल्स को समूहित रखता है, प्लेट CSS की तुलना में पढ़ने में सुधार करता है।

रिस्पॉन्सिव ग्रिड्स के साथ Flexbox और clearfix

.feature सेक्शन एक तीन-कोलम लेआउट प्रदर्शित करता है:

.feature
  height 450px
  padding 125px 0
  background white
  .list
    width 1160px
    margin 0 auto
    display flex
    flex-direction row
    li
      height 200px
      padding-left 50px
      flex-grow 1
      &:first-child
        padding-left 0
      .short
        width 235px
        height 200px
        margin 0 auto

हाइलाइट्स:

• Flexbox: display flex और flex-direction row लिस्ट आइटम्स को क्षैतिज रूप से लाइन करता है, जबकि flex-grow 1 सुनिश्चित करता है कि वे कंटेनर को भरने के लिए समान रूप से विस्तारित हों।
• सेंटरिंग: width 1160px margin 0 auto के साथ जोड़ा गया है, फिक्स्ड-विड्थ लेआउट के लिए क्लासिक तकनीक के लिए सामग्री को सेंटर करता है।
• प्स्यूडो-क्लास मैजिक: &:first-child सेलेक्टर पहले आइटम से पैडिंग को हटा देता है, अजीब स्पेसिंग को रोकने के लिए।

.example सेक्शन इस को आगे बढ़ाता है एक रिव्यू कार्ड्स के ग्रिड के साथ, clearfix() मिक्सिन का उपयोग करते हुए:

.example
  .list
    clearfix()
    .row
      clearfix()
      li:first-child
        margin-left 0
    li
      height 354px
      margin-left 48px
      pull-left()
      margin-bottom 48px

• Clearfix: यह मिक्सिन (शायद base.styl में परिभाषित) फ्लोट क्लियरिंग का प्रबंधन करता है, सुनिश्चित करता है कि रोज़ पुराने ब्राउज़र्स या कस्टम लेआउट में सही ढंग से स्टैक होते हैं।
• फ्लोट-आधारित ग्रिड: pull-left() (एक अन्य यूटिलिटी मिक्सिन) आइटम्स को बाएं फ्लोट करता है, margin-left 48px गटर जोड़ता है। यह फ्लेक्सबॉक्स के साथ ब्रॉडर कम्पैटिबिलिटी के लिए एक्सपैंड करता है।

इंटरैक्टिव स्टाइलिंग: होवर इफेक्ट्स और ट्रांजिशंस

.example में रिव्यू कार्ड होवर इंटरैक्शंस के साथ चमकते हैं:

li
  .info
    position relative
    height 354px
    width 100%
    color white
    box-shadow 0 4px 4px 1px rgba(135,135,135,.1)
    overflow hidden
    cursor pointer
    &:hover
      img
        transform scale(1.2,1.2)
        -webkit-filter brightness(0.6)
      .title
        -webkit-transform translate(0, -20px)
        opacity 1.0
      .tips
        -webkit-transform translate(0, -10px)
        opacity 0.8
    img
      height 100%
      -webkit-filter brightness(0.4)
      transition all 0.35s ease 0s

ब्रेकडाउन:

• होवर इफेक्ट्स: होवर पर, इमेज स्केल अप (transform scale(1.2,1.2)) और ब्राइटनेस (-webkit-filter brightness(0.6)) में बढ़ जाता है, जबकि टेक्स्ट आइटम्स translate के साथ ऊपर शिफ्ट करते हैं और ओपेसिटी को सेट करते हैं।
• ट्रांजिशंस: transition all 0.35s ease 0s सुनिश्चित करता है कि सभी प्रॉपर्टी के लिए स्लूथ एनिमेशन हैं, 350ms ड्यूरेशन और ईज़िंग कर्व के साथ।
• लेयरिंग: .text पर position absolute इसे इमेज के ऊपर रखता है, z-index 2 दृश्यता सुनिश्चित करता है।

.author बटन भी प्रतिक्रिया देता है:

.author
  position absolute
  background black
  margin-left 30px
  margin-top 30px
  height 30px
  padding-left 20px
  padding-right 20px
  transition all 0.35s ease 0s
  &:hover
    background #1cb2ef

एक सरल रंग स्वैप से काला से ब्रांड रंग #1CB2EF होवर पर एक मज़ेदार स्पर्श जोड़ता है।

विजुअल पॉलिश: शैडोज, बटन और आइकन

शैडोज गहराई को बढ़ाते हैं, जैसे .info में box-shadow 0 4px 4px 1px rgba(135,135,135,.1) में देखा गया है। बटन, जैसे .contact में, ध्यान से स्टाइल किए गए हैं:

.contact
  .rightbtn
    .more
      width 127px
      height 50px
      color #1CB2EF
      background white
      border-radius 3px
      border 1px solid #00A3E6
      -webkit-box-shadow 0px 1px 0px rgba(255,255,255,0.15) inset, 0px 1px 2px rgba(0,0,0,0.15)

• इन्सेट शैडो: एक नाजुक इन्सेट शैडो (inset) एक बाहरी ड्रॉप शैडो के साथ जोड़ा गया है, एक दबे हुए बटन प्रभाव बनाता है।
• संगतता: बॉर्डर रंग #00A3E6 ब्रांड पेलेट में शामिल होता है।

आइकन, जैसे .icon_crown, बैकग्राउंड इमेज का उपयोग करते हैं:

.icon_crown
  background url("../img/icon/crown@2x.png") no-repeat
  background-size contain
  width 49px
  height 52px

@2x सफिक्स रेटिना-रेडी एसेट्स का सुझाव देता है, background-size contain सही स्केलिंग सुनिश्चित करता है।

बेस्ट प्रैक्टिस और टेकअवे

इस Stylus इम्प्लीमेंटेशन से किसी भी CSS प्रोजेक्ट के लिए पाठ हैं:

1. प्रीप्रोसेसर का उपयोग करें: Stylus का नैस्टिंग और मिक्सिन्स (जैसे clearfix()) जटिल लेआउट को सरल बनाते हैं।
2. लेआउट को संतुलित करें: Flexbox के साथ आधुनिक ब्राउज़र्स के लिए फ्लोट-आधारित फॉलबैक के साथ संतुलित करें।
3. UX को बढ़ाएं: स्लूथ ट्रांजिशंस और होवर इफेक्ट्स UI को जीवंत महसूस कराते हैं।
4. यह बनाए रखें: वेरिएबल्स और इम्पोर्ट्स का उपयोग करके बड़े कोडबेस के माध्यम से एकसंगतता बनाए रखें।

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

---

Back 2025.04.02 Donate