बेहतर दिखने वाली वेबसाइटों के लिए बूटस्ट्रैप सीएसएस को कैसे हैक करें

जब साइट बनाने की बात आती है तो बूटस्ट्रैप में बहुत सारे पूर्ण-स्टैक देवों के हाथ होते हैं। हम में से बहुत से लोग यह नहीं जानते हैं कि Figma का उपयोग कैसे किया जाता है, इस बारे में अनिश्चित हैं कि "डिज़ाइन" क्या अच्छा है, और CSS गुणों के साथ कुशल नहीं हैं।

लेकिन क्या हम डेटाबेस स्कीमा को तैयार करने, अपने नियंत्रकों और मॉडलों का निर्माण करने, हमारे विचारों में Google पर पाए गए बूटस्ट्रैप थीम को थप्पड़ मारने और इसे एक दिन बुलाने में अच्छे हैं।

अंतिम परिणाम आमतौर पर एक व्यक्ति को अपनी साइट बनाने की दक्षता से संतुष्ट लेकिन परिणाम से असंतुष्ट छोड़ देता है।

"यह ठीक दिखता है, लेकिन हाल ही में देखे गए कुछ अद्भुत डिजाइनर की उस भयानक साइट की तरह नहीं है" - सामान्य पूर्ण-स्टैक देव।

यह लेख आपके बूटस्ट्रैप-थीम वाली साइट के स्वरूप से संतुष्टि प्राप्त करने के लिए कार्रवाई योग्य डिज़ाइन युक्तियों पर एक ट्यूटोरियल है।

स्थापित करना

मैं इस मुफ्त बूटस्ट्रैप थीम के साथ शुरुआत करने जा रहा हूं। अब इसे सुधारें!

अपने रंगों का विस्तार करें

अपना रंग पैलेट अपडेट करें

बूटस्ट्रैप एक पूरे रंग के पैलेट के साथ आता है जिसके बारे में आप नहीं जानते होंगे। अन्य कुकी-कटर बूटस्ट्रैप साइटों से अलग दिखने के लिए इसका लाभ उठाएं।

इन रंगों तक पहुँच प्राप्त करने के लिए, हमें बस उन्हें अपनी scss/_variables.scss बूटस्ट्रैप फ़ाइल में जोड़ना होगा।

 $theme-colors: ( "primary": $teal-300, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark ) !default;

या यदि आप बूटस्ट्रैप के लिए npm सेटअप का उपयोग कर रहे हैं, तो अपनी कस्टम sass फ़ाइल को अपडेट करें जो संकलित हो जाती है।

 @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; $custom-colors: ( primary: $teal-300, ); $theme-colors: map-merge($theme-colors, $custom-colors); @import "../node_modules/bootstrap/scss/bootstrap";

अब हम उस ग्रॉस बूटस्ट्रैप प्राइमरी ब्लू को हमारे गेट स्टार्ट बटन के लिए एक अच्छे सॉफ्ट टील में अपडेट कर सकते हैं। हम text-white क्लास को हटाकर टेक्स्ट को सफेद से काले रंग में भी बदलना चाहेंगे। यह हल्के पृष्ठभूमि रंग पर पठनीयता के लिए है।

अपने नायक अनुभाग के शीर्ष पर एक रंग संकेत जोड़ें

हम सीमा-प्राथमिक के माध्यम से नए चैती प्राथमिक रंग के साथ अपने पृष्ठ पर कुछ अतिरिक्त जीवन लाने के लिए नौसेना के शीर्ष पर एक छोटी सी सीमा जोड़ सकते हैं।

मूलपाठ

लाइन-ऊंचाई को सामान्य तत्वों में बदलें

एक सूक्ष्म परिवर्तन जिसके बारे में बहुत से लोग नहीं जानते हैं, वह है आपकी लाइन की ऊंचाई को कम करना टेक्स्ट जितना बड़ा होगा। आइए हमारी सीएसएस फ़ाइल में सामान्य HTML तत्वों के लिए डिफ़ॉल्ट लाइन हाइट्स को ओवरराइड करें।

 h1 { line-height: 1.1; } h2 { line-height: 1.125; } h3 { line-height: 1.25; } p { line-height: 1.5; } 

अद्यतन पत्र रिक्ति

बड़े शीर्षकों में आमतौर पर डिफ़ॉल्ट रूप से बहुत अधिक अक्षर अंतर होते हैं। हमारी CSS फ़ाइल को अपडेट करके अपने h1 और h2 टैग के अक्षर रिक्ति को संक्षिप्त करें जैसा कि हमने लाइन की ऊंचाई के लिए किया था।

 h1 { line-height: 1.1; letter-spacing: -0.05em; } h2 { line-height: 1.125; letter-spacing: -0.025em; } 

भारी हेडलाइन सपोर्टिंग टेक्स्ट

अब हम नायक में सहायक पाठ को जोड़ सकते हैं। इसके और H1 टैग के बीच का अंतर चरम पर है। हम लीड क्लास को हटा देंगे और इसे fs-5 क्लास देंगे। यह मोटे फ़ॉन्ट वजन के साथ आता है।

सारांश

हम इतनी दूर कहाँ हैं...

मैं इस विषय को 1 ब्लॉग पोस्ट में रिफैक्टर करना चाहता था लेकिन यह बहुत अधिक सामग्री है। मैं इसे कई लेखों में विभाजित कर रहा हूं।

लेख 2 के लिए अगले सप्ताह वापस देखें या thefreelancedev.com पर मेरे न्यूज़लेटर की सदस्यता लें। मैं थीम के फीचर सेक्शन को अपडेट करता रहूंगा और आपके लिए कुछ टिप्स दूंगा।

मैं रिफैक्टरिंग यूआई की जांच करने की अत्यधिक अनुशंसा करता हूं। इसने एक देव के रूप में डिजाइन पर मेरे दृष्टिकोण को पूरी तरह से बदल दिया।

️

यहाँ भी प्रकाशित हो चुकी है।.