Tufte-css: बटन तत्व समर्थन

मैं इस विचार से उत्सुक हूं। मुझे उपयोग के मामलों के बारे में कुछ और सुनने में दिलचस्पी होगी - विशेष रूप से, एंकर कैसे पर्याप्त नहीं हैं - साथ ही साथ विचार और योगदान भी।

ImageQuilt का लाल "रजाई डाउनलोड करें" बटन (http://imagequilts.com, नीचे के पास) एक अच्छा कूदने का बिंदु हो सकता है।

लिंक अन्य सामग्री के लिए एक कनेक्शन और जंपिंग पॉइंट का प्रतिनिधित्व करते हैं (चाहे इन-पेज, एंकर के माध्यम से, या बंद, href गुणों के माध्यम से)। बटन वर्तमान सामग्री को प्रभावित करने वाली कार्रवाइयों के लिए ट्रिगर हैं। इस तरह के सम्मेलनों से चिपके हुए आईएमओ चीजों को स्पष्ट रखते हैं। IOW मुझे लगता है कि एक बटन की जरूरत है।

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

मुझे लगता है कि इस प्रश्न को सुलझाए जाने से पहले यह समय की बात है। इसे खुला छोड़ने की जरूरत नहीं है। मैं कुछ समय से अपनी साइट के लिए tufte-css का उपयोग कर रहा हूं और परिणामों से बहुत संतुष्ट हूं। मैं जल्द ही उस परियोजना के लिए बटनों की स्टाइलिंग को संबोधित करूंगा जिस पर मैं काम कर रहा हूं और या तो लिंक का उपयोग करने पर समझौता करूंगा या कुछ और प्रस्ताव (अनुरोध) का प्रस्ताव दूंगा।

मैं
यह जानने में रुचि है कि आप किस प्रकार के बटनों के साथ आते हैं। मुझे लगता है कि एक सामान्य समाधान विकसित करने में समस्या का एक हिस्सा यह है कि प्रत्येक विज़ुअलाइज़ेशन/टेबल/चार्ट की अपनी कस्टम स्टाइल होगी जो _a प्राथमिकता_ असाइन करना मुश्किल है।

मैं रेडियो के लिए निम्नलिखित शैलियों और एक ऐप के लिए नियमित बटन के साथ आया हूं, जो मैं लिख रहा हूं, मौजूदा ढांचे की शैली के साथ इरादे और सामंजस्य दोनों की स्पष्टता के लिए प्रयास कर रहा हूं।

नीचे स्क्रीनशॉट का जिक्र करते हुए:

• नियमित बटन, उदा, PLAY बटन में एक ठोस गहरा (#111) बॉर्डर होता है।
• रेडियो (विकल्प) बटन चयनित नहीं होने पर (9x9 बटन) डैश के साथ रेखांकित होते हैं और चुने जाने पर उलटे (#111 पृष्ठभूमि और #FFFFF8 रंग टेक्स्ट) (5x5 बटन)।

@gamecubate मैं अपने कार्यान्वयन में बटन के साथ एक ही काम करने के लिए हुआ। यह मेरे लिए काम करता है लेकिन एक सामान्य कार्यान्वयन के रूप में शैलियाँ ग्राफ़ के साथ संघर्ष कर सकती हैं जो प्रतिभागियों को लाइन में भिन्नता (धराशायी, बिंदीदार, ठोस, आदि) द्वारा नामित करती हैं। यदि किसी के पास एक बटन होता है जो किसी विशिष्ट प्रतिभागी के साथ जुड़ता है तो उसे मिलान करने के लिए स्टाइल करना सार्थक हो सकता है।

@frostbitten सच। कोई भी प्रतिभागियों के लिए रंग का उपयोग शुरू कर सकता है। मैं बटन के लिए मानक शैली को हार्ड-कोड करने के लिए @daveliepmann की झिझक को समझता हूं। बहुत सारे उपयोग के मामले हैं।

इस मुद्दे को पुनर्जीवित करने के लिए क्षमा करें, लेकिन मैं इसके बारे में भी उत्सुक था।

मेरे पास इसका उपयोग करने वाला एक प्रोजेक्ट है और ज्यादातर मानक सीएसएस के साथ बटन पूरी तरह से अस्थिर थे। स्पष्ट रूप से लागू की गई शैलियाँ "उपयोगकर्ता एजेंट स्टाइलशीट" से थीं। (यह मेरे द्वारा चलाए जा रहे Google Chrome के संस्करण की एक विचित्रता हो सकती है।)

मैंने इस सीएसएस को अच्छी तरह से काम करने के लिए जोड़ा:

button {
  font-family: inherit;
  font-size:   inherit;
  padding:     0.5em;
}

उदाहरण:

बटन एक बटन की तरह दिखता है, लेकिन इसमें (एरियल की तुलना में) अधिक सुखद फ़ॉन्ट है और अब बाकी स्टाइल सामग्री के साथ अच्छी तरह से फिट बैठता है।

मुझे उल्लिखित ImageQuilts पृष्ठ पर "रजाई डाउनलोड करें" बटन नहीं मिला। ऐसा लगता है कि यह Google Chrome एक्सटेंशन का हिस्सा है। लेकिन मुझे आम तौर पर लुक पसंद है। मुझे इस प्रोजेक्ट से मानक फ़ॉन्ट सीएसएस के साथ काम करने के लिए बोल्ड इटैलिक फ़ॉन्ट नहीं मिला।

मुझे @gamecubate का उदाहरण भी पसंद है। @gamecubate - क्या आप CSS साझा करना चाहेंगे?

@ केनी-एविट निश्चित बात। यहाँ यह अपने सभी वैभव में है। :)

.btn {
  border: 2.5px solid #111;
  color: #111;
  display: inline-block;
  font-size: 1.1rem;
  text-transform: uppercase;
  padding: 15px 10px;
  margin: 5px;
  min-width: 60px;
  text-align: center;
  cursor: pointer;
}

.btn.large {
  border: 3px solid #111;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 10px 5px;
  padding: 15px;
}

.btn.mini {
  border: 1px solid #111;
  color: #111;
  min-width: 40px;
  line-height: 40px;
  padding: 0 10px;
}

.btn.radio {
  border-style: dashed;
}

.btn.selected {
  background: #111;
  color: #FFFFF8;
}

.btn.white {
  background: #FFFFF8;
  color: #111;
}

.btn.flash {
  background: #EEE!important;
}

.btns {
  margin: 3px 0;
}

.btns .btn:first-child {
  margin-left: 0;
}

.btns .btn:last-child {
  margin-right: 0;
}

.btns.stack {
  margin: 15px 0 20px 0;
}

.btns.stack > .btn {
  display: block;
  margin: 5px 0;
}

a {
  font-size: 1.5rem;
  color: #111;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 2px solid #111;
}