2012-06-19 14 views
9

क्या किसी को एक साधारण एचटीएमएल 5/CSS3 ढांचे के बारे में पता है जो कस्टम वर्ग नामों की आवश्यकता के बिना कम से कम स्वरूपण लागू करता है? आदर्श रूप से यह केवल उचित रूप से निर्धारित एचटीएमएल 5 ले जाएगा, और साइडबार चौड़ाई और इसी तरह के सामान्य नियमों का उपयोग करके कम से कम लचीलापन वाले तत्वों को स्थिति देगा।एचटीएमएल 5/CSS3 वर्गीकृत ढांचे

एचटीएमएल 5 वहाँ कस्टम वर्ग नाम के लिए बहुत कम जरूरत, header, nav या aside जैसे तत्वों के साथ साथ

, लेकिन मैं अभी तक एक framwork कि का पूरा लाभ उठा नहीं देखा है। कोई विचार?

स्पष्टीकरण: मैं सभी सामान्य संदिग्धों (बूटस्ट्रैप, एचटीएमएल% बॉयलरप्लेट, शिम और की तरह) के माध्यम से किया गया है, और उनमें से कोई मेरी खुजली खरोंच। और यह खुजली सादे एचटीएमएल 5 संरचना का एक सरल कॉम्बो है जो डिजाइन के बारे में कुछ भी नहीं मानती है, लेकिन वास्तविक लेआउट को परिभाषित करने वाली एक साधारण CSS3 स्टाइलशीट के साथ सब कुछ अर्थपूर्ण रूप से परिभाषित करती है। मैं इसे कई स्टाइलशीट का उपयोग करके कल्पना कर सकता हूं, आधारभूत तत्वों के लेआउट को परिभाषित करने वाले मूल आधार और वास्तविक डिज़ाइन के लिए अलग-अलग एक। इसे विभिन्न परियोजनाओं के लिए एक सरल प्रारंभिक बिंदु के रूप में उपयोग किया जाएगा, जिसे बाद में व्यक्तिगत रूप से अनुकूलित किया जा सकता है।

जाहिर है, मैं आप से दूर एचटीएमएल 5 बॉयलरप्लेट के साथ अपने एचटीएमएल 5 आवेदन शुरू कर सकते हैं जिस तरह से वेस्ले द्वारा प्रस्तावित जाने के लिए और अपने आप को एक लिखने के लिए आवश्यकता हो सकती है ...

+0

आप वर्गों के बिना सीएसएस ढांचे करना चाहते हैं? –

+1

व्यक्तिगत रूप से मैं ट्विटर बूटस्ट्रैप का उपयोग करता हूं, यह मेरी राय में बहुत अच्छी तरह से डिज़ाइन किया गया है, और बहुत लचीला http://twitter.github.com/bootstrap/ – Dale

+1

मुझे लगता है कि यह बच्चे और भाई चयनकर्ताओं के साथ संभव है, लेकिन यह जल्द ही कार्ड का एक घर है आपको अपना एचटीएमएल बदलना होगा। –

उत्तर

3

यह आप क्या चाहते हैं की तरह लगता है एक सीएसएस ढांचे, लेकिन सिर्फ एक सरल कस्टम स्टाइलशीट नहीं है।

पहले से मौजूद किसी चीज़ की तलाश में अपने प्रयास को हतोत्साहित न करें, लेकिन आप इसे स्वयं लिखने से बेहतर हैं। शायद कई मौजूदा reset.css में से एक के साथ शुरू करें। कक्षा के नामों के माध्यम से (या बाहर) में हुक करने की क्षमता के बिना डिफ़ॉल्ट शैलियों बहुत लचीली नहीं हैं।

आपको वाकई कक्षाओं से बचना नहीं चाहिए, आपको उनका लाभ उठाना चाहिए। कोई ढांचा नहीं पता चल रहा है कि आपके एचटीएमएल तत्व कहां और कैसे टैग किए गए नाम के आधार पर दिखने वाले हैं, यही कारण है कि हम आमतौर पर कक्षाओं का उपयोग करते हैं।

यदि आप नए HTML5 तत्वों के अर्थशास्त्र पर बारीकी से ध्यान देते हैं, तो आप देखेंगे कि header हमेशा "आपके लोगो के साथ अपने पृष्ठ का शीर्ष" नहीं है, footer केवल नीचे के लिए एक तत्व नहीं है आपका पूरा पृष्ठ, और aside हमेशा "साइडबार" के बराबर नहीं होता है।

+1

आप सही हैं, "स्टाइलशीट" "ढांचे" से अधिक सटीक शब्द है। –

1

मुझे इसके साथ ज्यादा अनुभव नहीं है, लेकिन आपको Twitter Bootstrap सहायक मिल सकता है। यह एक ग्रिड सिस्टम का उपयोग करता है जो आपको पृष्ठ पर तत्वों को आसानी से स्थानांतरित करने की अनुमति देता है। यह विशेष रूप से पृष्ठों पर साइडबार और अन्य सामान्य सुविधाओं के लिए क्षेत्र बनाने के लिए उपयोगी हो सकता है।

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

+0

मैं वही बात सोच रहा था। यह बेहद भारी है, लेकिन यह महान यूआई घटकों की पेशकश करता है। –

1

https://github.com/herrshuster/style.css

यह मेरे वर्तमान परियोजना है। यह अभी तक तैनाती के लिए तैयार नहीं है, लेकिन यह वही है जो आप खोज रहे हैं। मुझे आपके पास कोई सुझाव पसंद आएगा या आप इसके बारे में बात करना चाहते हैं। This is a test page where you can see the semantic layout

+0

धन्यवाद, यह एक महान परियोजना की तरह लगता है, मैं इसे और अधिक देख लूंगा! –

1

इस विषय में रुचि किसी के लिए, मैं articles by Heydon Pickering, जो किसी भी कक्षा का उपयोग किए बिना his blog विषय बनाया पढ़ने की सलाह।


मैं भी my project देने वाले ब्लॉग और ब्लॉग जैसी वेबसाइटों के लिए एक fundamental classless HTML template (एक शीर्षक और एक लेखक, पृष्ठ, पोस्ट और वर्गों के साथ साथ हर वेबसाइट) शीर्ष पर शुद्ध सीएसएस विषयों बना सकते हैं और जोड़ने के लिए करना है बाहर की जाँच की सिफारिश इसका टेम्पलेट एचटीएमएल 5 सेक्शनिंग, हेडर और फूटर का भारी उपयोग करता है और इस अनुभाग में आपको प्रत्येक वेबसाइट की सामग्री को किस अनुभाग में रखना चाहिए। themes इंटरनेट पर अन्य ढांचे-विशिष्ट विषयों के बंदरगाह हैं।

एक playground है जहां आप मौलिक टेम्पलेट के आधार पर विभिन्न HTML पृष्ठों पर विषयों का परीक्षण कर सकते हैं (बस बॉक्स पर विषय का नाम लिखें, या एक सीएसएस यूआरएल पेस्ट करें)। इस विषय के बारे में सोचने के दौरान मैंने लिखा bad old article भी लिखा है।

3

मैं एक बहुत ही इसी तरह की जरूरत मिल गया है और मेरी अपनी परियोजना बनाने समाप्त हो गया: https://github.com/oxalorg/sakura

तुम बस sakura.css में ड्रॉप करने की जरूरत है और आप के लिए तैयार हैं, कोई बदलाव नहीं HTML करने के लिए आवश्यक।

यहाँ एक डेमो: https://oxal.org/projects/sakura/demo/

संबंधित मुद्दे