Oshi स्टाइल गाइड

परिचय

इस शैली गाइड पर आधारित है ट्विटर बूटस्ट्रैप गाइड। यह कैसे Oshi प्रस्तुत किया जाना चाहिए के लिए एक सामान्य रूपरेखा के रूप में होती है।

ब्रांड कलाकृति

Oshi लोगो

Oshi शीर्षक-logo-बड़े काले रंग की पृष्ठभूमि Oshi-logo-बड़े काले पारदर्शी पृष्ठभूमि

थंबनेल, पूर्ण आकार की मीडिया फ़ाइलों को जोड़ने

लोगो में इस्तेमाल कन्वेंशनों

लोगो फ़ॉन्ट: उबंटू। इस फ़ॉन्ट से डाउनलोड किया जा सकता है: google.com/fonts/specimen/Ubuntu

#FF0C00 'मैं' है पर लाल बिंदी

लिखे कोण: 97 डिग्री

Oshi लोगो कोण
Oshi लोगो प्रकार कोण

'Oshi लड़का' शुभंकर

Oshi आदमी की पूर्ण आकार छवियों के लिए नीचे दिए गए लिंक छवियों।

characterposes_vector 1.0
Oshi पुरुष, प्रकाश पृष्ठभूमि
characterposes_vector 1-0 डार्क
Oshi पुरुष, काले रंग की पृष्ठभूमि

 

थंबनेल, पूर्ण आकार की मीडिया फ़ाइलों को जोड़ने

 

ब्रांड ध्वज और उपयोग

हल्की पृष्ठभूमि

पृष्ठभूमि का रंग: # FFFFFF

फ़ॉन्ट रंग: #000000

काले रंग की पृष्ठभूमि

पृष्ठभूमि का रंग: #13181C

फ़ॉन्ट रंग: # FFFFFF

टाइपोग्राफी

लिंक

बाहरी लिंक

डोमेन के भीतर के पृष्ठों के लिए सभी लिंक हो जाएगा

लिंक पाठ

एक लिंक एक बाहरी साइट के लिए चला जाता है, तो यह एक नए टैब में खुल जाएगा और इस के समान एक आइकन होगा:

लिंक पाठ

लिंक के लिए सीएसएस:

सफेद पृष्ठभूमि (#fff)
एक {रंग: #1A0DAB; पाठ सजावट: कोई नहीं;} एक: मंडराना {पाठ सजावट: रेखांकित;} एक: दौरा {रंग: #609;} बाहरी लिंक 'बाहर जोड़ने के' आइकन होगा।

डार्क पृष्ठभूमि (#13181C)

Oshi पृष्ठभूमि रंग
Oshi पृष्ठभूमि रंग #13181C

एक: {रंग: #FF9800; पाठ सजावट: रेखांकित;} एक: मंडराना {पाठ सजावट: कोई नहीं;} एक: दौरा {रंग: #FFC107; पाठ सजावट: रेखांकित; } बाहरी लिंक 'बाहर जोड़ने के' आइकन होगा।

2016 05 - 20_133310

शीर्षकों

सभी HTML शीर्षकों, <h1> के माध्यम से <h6>, उपलब्ध हैं। .h1 के माध्यम से .h6 कक्षाएं भी उपलब्ध हैं, के लिए जब आप एक शीर्ष के फॉन्ट की स्टाइल से मेल करना चाहते हैं, लेकिन अभी भी अपने पाठ इनलाइन प्रदर्शित करना चाहते हैं।

h1। Oshi शीर्षक

SemiBold 36px

h2। Oshi शीर्षक

SemiBold 30px

h3। Oshi शीर्षक

SemiBold 24px

h4। Oshi शीर्षक

SemiBold 18px
h5। Oshi शीर्षक
SemiBold 14px
h6। Oshi शीर्षक
SemiBold 12px
प्रतिलिपि
<h1> h1। Oshi के मुखिया </ h1> <h2> h2। Oshi के मुखिया </ h2> <h3> h3। Oshi के मुखिया </ h3> <h4> h4। Oshi के मुखिया </ h4> <h5> h5। Oshi के मुखिया </ h5> <h6> h6। Oshi शीर्षक </ h6>

एक सामान्य के साथ किसी भी शीर्षक में लाइटर, माध्यमिक पाठ बनाएं <Small> टैग या .Small वर्ग.

h1। Oshi शीर्षक माध्यमिक पाठ

h2। Oshi शीर्षक माध्यमिक पाठ

h3। Oshi शीर्षक माध्यमिक पाठ

h4। Oshi शीर्षक माध्यमिक पाठ

h5। Oshi शीर्षक माध्यमिक पाठ
h6। Oshi शीर्षक माध्यमिक पाठ

माध्यमिक पाठ के लिए सीएसएस।

.h1 .Small, .h1 छोटे, .h2 .Small, .h2 छोटे, .h3 .Small, .h3 छोटे, h1 .Small, h1 छोटे, h2 .Small, h2 छोटे, h3 .Small, h3 छोटे { font-size: 65%; } .h1 .Small, .h1 छोटे, .h2 .Small, .h2 छोटे, .h3 .Small, .h3 छोटे, .h4 .Small, .h4 छोटे, .h5 .Small, .h5 छोटे, .h6 .Small, .h6 छोटे, h1 .Small, h1 छोटे, h2 .Small, h2 छोटे, h3 .Small, h3 छोटे, h4 .Small, h4 छोटे, h5 .Small, h5 छोटे, h6 .Small, h6 छोटे { फ़ॉन्ट वजन: 400; रेखा से ऊंचाई: 1; }

 

प्रतिलिपि
<h1> h1। Oshi के मुखिया <small> माध्यमिक पाठ </ Small> </ h1> <h2> h2। Oshi के मुखिया <small> माध्यमिक पाठ </ Small> </ h2> <h3> h3। Oshi के मुखिया <small> माध्यमिक पाठ </ Small> </ h3> <h4> h4। Oshi के मुखिया <small> माध्यमिक पाठ </ Small> </ h4> <h5> h5। Oshi के मुखिया <small> माध्यमिक पाठ </ Small> </ h5> <h6> h6। Oshi के मुखिया <small> माध्यमिक पाठ </ Small> </ h6>

शरीर की नकल

Oshi के वैश्विक डिफ़ॉल्ट फ़ॉन्ट आकार is 14px, एक साथ ऊंची लाईन of 1.62। यह करने के लिए लागू किया जाता है <body> और सभी अनुच्छेदों। इसके साथ - साथ, <P> (पैराग्राफ) आधा उनकी गणना रेखा से ऊंचाई के नीचे मार्जिन (10px डिफ़ॉल्ट रूप से) प्राप्त करते हैं।

Nullam Mollis RISUS quis Eget ornare कलश यूरोपीय संघ लियो वेल। सह sociis natoque penatibus एट magnis जिले तुरंत ब्यानेवाला पहाड़ों nascetur ridiculus मुस। Nullam आईडी आईडी nibh ultricies दर्द बता देते हैं।

सह sociis natoque penatibus एट magnis जिले तुरंत ब्यानेवाला पहाड़ों nascetur ridiculus मुस। Donec metus ullamcorper सोता गैर fringilla auctor। Duis Mollis, commodo गैर luctus, प्रारंभिक erat porttitor ligula, Elit Eget SEM घृणा lacinia NEC है। Donec metus ullamcorper सोता गैर fringilla auctor।

दानशील मनुष्य RISUS Eget varius SED diam blandit गैर amet मैग्ना बैठते हैं। Donec आईडी Elit गैर मील पोर्टा gravida Eget metus पर। Duis Mollis, commodo गैर luctus, प्रारंभिक erat porttitor ligula, Elit Eget SEM घृणा lacinia NEC है।

प्रतिलिपि
<p> ... </ p>

लीड शरीर की नकल

पैरा जोड़कर एक स्टैंड बनाने के बाहर सीसा..

Vivamus sagittis Lacus augue वेल laoreet rutrum faucibus auctor दर्द। Duis Mollis, गैर स्था commodo luctus।

प्रतिलिपि
<p class = "नेतृत्व"> ... </ p>

कम से निर्मित

मुद्रण पैमाने में दो कम चर पर आधारित है variables.less: @ Font-size आधार तथा @ रेखा से ऊंचाई आधार। पहले बेस फ़ॉन्ट आकार भर में इस्तेमाल किया है और दूसरे आधार रेखा से ऊंचाई है। हम उन चर और कुछ सरल गणित का उपयोग मार्जिन, paddings, और हमारे सभी प्रकार के और अधिक की लाइन-ऊंचाइयों बनाने के लिए। उन्हें और Oshi adapts बनाइए।

इनलाइन पाठ तत्वों

उल्लेखनीय पाठ

दूसरे संदर्भ में इसकी प्रासंगिकता के कारण पाठ का एक रन उजागर करने के लिए, का उपयोग करें <मार्क> टैग।

आप के लिए मार्क टैग का उपयोग कर सकते हैं पर प्रकाश डाला पाठ।

प्रतिलिपि
आप <मार्क> उजागर </ मार्क> पाठ करने के लिए मार्क टैग का उपयोग कर सकते हैं।

हटाए गए पाठ

पाठ के ब्लॉक है कि प्रयोग के संकेत के लिए हटा दिया गया है <Del> टैग।

पाठ की यह पंक्ति हटाए गए पाठ के रूप में इलाज के लिए होती है।

प्रतिलिपि
<del> पाठ की यह पंक्ति हटाए गए पाठ के रूप में इलाज के लिए होती है। </ डेल>

स्ट्राइकथ्रू पाठ

पाठ के ब्लॉक संकेत के लिए है कि अब कोई प्रासंगिक उपयोग कर रहे हैं <S> टैग।

पाठ की यह पंक्ति अब कोई सटीक रूप में इलाज के लिए होती है।

प्रतिलिपि
<s> पाठ की यह पंक्ति अब कोई सटीक रूप में इलाज के लिए होती है। </ s>

डाला पाठ

दस्तावेज़ के लिए अतिरिक्त संकेत के लिए उपयोग करें <आईएनएस> टैग।

पाठ की यह पंक्ति दस्तावेज़ के लिए एक अतिरिक्त के रूप में इलाज के लिए होती है।

प्रतिलिपि
<आईएनएस> पाठ की यह पंक्ति दस्तावेज़ के लिए एक अतिरिक्त के रूप में इलाज के लिए होती है। </ आईएनएस>

रेखांकित पाठ

रेखांकित करने के लिए पाठ का उपयोग <u> टैग।

पाठ की यह पंक्ति के रूप में रेखांकित प्रस्तुत करना होगा

प्रतिलिपि
<u> के रूप में रेखांकित पाठ की यह पंक्ति प्रस्तुत करना होगा </ u>

हल्के शैलियों के साथ HTML के डिफ़ॉल्ट जोर टैग का उपयोग करें।

छोटे पाठ

de-बल दे इनलाइन या पाठ के ब्लॉक के लिए, का उपयोग करें <Small> टैग 85% पर माता-पिता के आकार के पाठ की स्थापना करेगा। शीर्षक तत्वों को अपने स्वयं प्राप्त फ़ॉन्ट आकार नेस्ट के लिए <Small> तत्वों।

आप वैकल्पिक रूप से एक इनलाइन तत्व का उपयोग कर सकते हैं .Small किसी भी जगह में <Small>.

पाठ की यह पंक्ति ठीक प्रिंट के रूप में इलाज के लिए होती है।

प्रतिलिपि
<small> पाठ की यह पंक्ति ठीक प्रिंट के रूप में इलाज के लिए होती है। </ Small>

बोल्ड

एक भारी वजन फ़ॉन्ट के साथ पाठ का एक टुकड़ा के लिए बल।

पाठ के निम्नलिखित टुकड़ा है बोल्ड पाठ के रूप में प्रदान की गई है.

प्रतिलिपि
<strong> बोल्ड पाठ के रूप में प्रदान की गई </ strong>

इटैलिक

इटैलिक के साथ पाठ का एक टुकड़ा के लिए बल।

पाठ के निम्नलिखित टुकड़ा है इटैलिक पाठ के रूप में प्रदान की गई है.

प्रतिलिपि
<em> italicized पाठ के रूप में प्रदान की गई </ em>

वैकल्पिक तत्वों

उपयोग करने के लिए स्वतंत्र महसूस करें <b> तथा <i> HTML5 में। <b> संदेश जबकि मतलब है अतिरिक्त महत्व के बिना शब्दों या वाक्यांशों को उजागर करने के लिए <i> ज्यादातर आवाज, तकनीकी शब्दों, आदि के लिए है

संरेखण कक्षाएं

आसानी से कक्षाओं के लिए पाठ संरेखण घटकों के साथ पाठ फिर से संगठित करना।

गठबंधन पाठ वाम।

केंद्र पाठ गठबंधन।

सही पाठ गठबंधन।

उचित पाठ।

कोई चादर का पाठ।

प्रतिलिपि
<p class = "text-बाएँ"> वाम गठबंधन पाठ। </ p> <p class = "text-केंद्र"> केंद्र गठबंधन पाठ। </ p> <p class = "text-सही"> सही गठबंधन पाठ। </ p> <p class = "text-औचित्य साबित"> उचित पाठ। </ p> <p class = "text-nowrap"> नहीं की चादर के पाठ। </ p>

परिवर्तन कक्षाएं

पाठ पूंजीकरण वर्गों के साथ घटकों में पाठ रूपांतरण।

लोवरकेस पाठ।

UPPERCASED पाठ।

पूंजीकृत पाठ।

प्रतिलिपि
<p class = "text-छोटे अक्षरों"> लोवरकेस पाठ। </ p> <p class = "text-अपरकेस"> Uppercased पाठ। </ p> <p class = "text-भुनाने"> कैपिटल में पाठ। </ p>

लघुरूप

एचटीएमएल के कार्यान्वयन शैली <Abbr> संक्षिप्त और acronyms के लिए तत्व हॉवर पर विस्तारित संस्करण को दिखाने के लिए। एक साथ संकेताक्षर शीर्षक विशेषता, एक प्रकाश बिंदीदार नीचे सीमा और मंडराना पर एक मदद कर्सर मंडराना पर और सहायक प्रौद्योगिकियों के उपयोगकर्ताओं के लिए अतिरिक्त संदर्भ प्रदान करते हैं।

बेसिक संक्षिप्त नाम

शब्द विशेषता का एक संक्षिप्त नाम है attr.

प्रतिलिपि
<abbr title = "विशेषता"> attr </ abbr>

initialism

जोड़ना .initialism एक थोड़ा छोटे फ़ॉन्ट आकार के लिए एक संक्षिप्त करने के लिए।

एचटीएमएल कटा हुआ ब्रेड के बाद से सबसे अच्छी बात है।

प्रतिलिपि
<title abbr = "हाइपरटेक्स्ट मार्कअप लैंग्वेज" वर्ग = "initialism"> HTML </ abbr>

पते

निकटतम पूर्वज या काम के पूरे शरीर के लिए वर्तमान संपर्क जानकारी। साथ सभी लाइनों के खत्म होने से स्वरूपण रक्षित <br>.

ट्विटर, इंक।
1355 मार्केट स्ट्रीट, सुइट 900
सैन फ्रांसिस्को, सीए 94103
P: (123) 456 - 7890
पूरा नाम
first.last@example.com
प्रतिलिपि
<पता> <strong> ट्विटर, इंक </ strong> 1355 मार्केट स्ट्रीट <br>, सुइट 900 सैन फ्रांसिस्को हिन्दी, सीए 94103 <br> <abbr title = "फ़ोन"> पी: </ abbr> (123 ) 456-7890 </ पता> <पता> <strong> पूरा नाम </ strong> <br> <a "mailto:#"> first.last@example.com </a> href= </ पता>

ब्लॉक उद्धरण

अपने दस्तावेज़ में किसी अन्य स्रोत से सामग्री के ब्लॉक उद्धृत के लिए।

डिफ़ॉल्ट ब्लॉककोट

लपेटें <Blockquote> किसी भी चारों ओर एचटीएमएल बोली के रूप में। सीधे उद्धरण के लिए, हम अनुशंसा करते हैं एक <P>.

Lorem ipsum मातम, amet consectetur adipiscing Elit बैठते हैं। पूर्णांक erat पूर्व करने के लिए posuere।

प्रतिलिपि
<blockquote> <p> Lorem ipsum मातम amet बैठो, consectetur adipiscing elit। पूर्णांक एक पूर्व erat पूछताछ। </ p> </ blockquote>

Blockquote विकल्पों

एक मानक पर साधारण रूपों के लिए शैली और सामग्री में परिवर्तन <Blockquote>.

एक स्रोत का नामकरण

एक जोड़ें <पाद> स्रोत की पहचान करने के लिए। में स्रोत काम के नाम पर लपेटें <Cite>.

Lorem ipsum मातम, amet consectetur adipiscing Elit बैठते हैं। पूर्णांक erat पूर्व करने के लिए posuere।

में प्रसिद्ध किसी स्रोत शीर्षक
प्रतिलिपि
<blockquote> <p> Lorem ipsum मातम amet बैठो, consectetur adipiscing elit। पूर्णांक एक पूर्व erat पूछताछ। </ p> <पाद> किसी <अदालत में तलब title = "स्रोत शीर्षक"> स्रोत शीर्षक </ तलब> </ पाद लेख> </ blockquote> में प्रसिद्ध

वैकल्पिक प्रदर्शित करता है

जोड़ना .blockquote-रिवर्स सही गठबंधन सामग्री के साथ एक ब्लॉककोट के लिए।

Lorem ipsum मातम, amet consectetur adipiscing Elit बैठते हैं। पूर्णांक erat पूर्व करने के लिए posuere।

में प्रसिद्ध किसी स्रोत शीर्षक
प्रतिलिपि
<blockquote वर्ग = "blockquote रिवर्स"> ... </ blockquote>

सूचियाँ

अक्रमित

जो करता है क्रम में आइटम्स की सूची नहीं स्पष्ट रूप से कोई फर्क।

  • Lorem Ipsum मातम बैठो अमेट
  • Consectetur adipiscing Elit
  • Lorem मस्सा में पूर्णांक molestie
  • Pretium Nisl aliquet में Facilisis
  • सोता velit volutpat aliquam
    • Phasellus iaculis neque
    • Purus ultricies sodales
    • Vestibulum SEM porttitor laoreet
    • Libero एसी volutpat पर Tristique
  • Faucibus पोर्टा Lacus वेल fringilla
  • Aenean erat amet Nunc बैठने
  • Lorem Eget porttitor
प्रतिलिपि
<ul> <li> ... </ li> </ ul>

आदेशित

मदों की एक सूची जिसमें आदेश कर देता है स्पष्ट रूप से कोई फर्क।

  1. Lorem Ipsum मातम बैठो अमेट
  2. Consectetur adipiscing Elit
  3. Lorem मस्सा में पूर्णांक molestie
  4. Pretium Nisl aliquet में Facilisis
  5. सोता velit volutpat aliquam
  6. Faucibus पोर्टा Lacus वेल fringilla
  7. Aenean erat amet Nunc बैठने
  8. Lorem Eget porttitor
प्रतिलिपि
<ol> <li> ... </ li> </ ol>

Unstyled

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

  • Lorem Ipsum मातम बैठो अमेट
  • Consectetur adipiscing Elit
  • Lorem मस्सा में पूर्णांक molestie
  • Pretium Nisl aliquet में Facilisis
  • सोता velit volutpat aliquam
    • Phasellus iaculis neque
    • Purus ultricies sodales
    • Vestibulum SEM porttitor laoreet
    • Libero एसी volutpat पर Tristique
  • Faucibus पोर्टा Lacus वेल fringilla
  • Aenean erat amet Nunc बैठने
  • Lorem Eget porttitor
प्रतिलिपि
<उल वर्ग = "सूची-unstyled"> <li> ... </ li> </ ul>

इनलाइन

के साथ एक एकल लाइन पर सभी सूची आइटम प्लेस प्रदर्शन: इनलाइन-ब्लॉक; और कुछ प्रकाश पैडिंग।

  • Lorem Ipsum
  • Phasellus iaculis
  • सोता volutpat
प्रतिलिपि
<उल वर्ग = "सूची-इनलाइन"> <li> ... </ li> </ ul>

विवरण

उनके विवरण के साथ जुड़े शब्दों की सूची।

विवरण सूचियों
एक विवरण सूची शर्तों को परिभाषित करने के लिए एकदम सही है।
Euismod
Ligula Vestibulum आईडी फेलिस पोर्टा सेम्पर lacinia euismod NEC Elit Eget SEM घृणा।
Donec आईडी Elit गैर मील पोर्टा gravida Eget metus पर।
Malesuada पोर्टा
Etiam malesuada Mollis पोर्टा मैग्ना euismod सप्ताह।
प्रतिलिपि
<डीएल> <डीटी> ... </ डीटी> <डीडी> ... </ डीडी> </ डीएल>

क्षैतिज विवरण

में नियम और विवरण बनाओ <dl> पक्ष द्वारा साइड लाइन। बंद डिफ़ॉल्ट की तरह खड़ी शुरू होता है <dl>एस, लेकिन जब नेवबार फैलता है, इसलिए इन करो।

विवरण सूचियों
एक विवरण सूची शर्तों को परिभाषित करने के लिए एकदम सही है।
Euismod
Ligula Vestibulum आईडी फेलिस पोर्टा सेम्पर lacinia euismod NEC Elit Eget SEM घृणा।
Donec आईडी Elit गैर मील पोर्टा gravida Eget metus पर।
Malesuada पोर्टा
Etiam malesuada Mollis पोर्टा मैग्ना euismod सप्ताह।
Euismod सेम्पर Eget फेलिस lacinia
Fusce dapibus, commodo एसी Cursus Elit, tortor mauris condimentum nibh, केन्द्र शासित प्रदेशों सिर्फ RISUS fermentum मस्सा amet बैठो।
प्रतिलिपि
<डीएल वर्ग = "DL-क्षैतिज"> <डीटी> ... </ डीटी> <डीडी> ... </ डीडी> </ डीएल>

ऑटो को काटे

क्षैतिज विवरण सूचियों शर्तों वह भी साथ छोड़ दिया कॉलम में फिट करने के लिए लंबे होते हैं काटना होगा पाठ-अतिप्रवाह। संकरा viewports में, वे डिफ़ॉल्ट खड़ी लेआउट में बदल जाएगा।

संबंधित आलेख