farsi/styleGuide.html at main · M-Hatami/farsi · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html dir="rtl" lang="fa">

<head>
    <link href="styleGuide.css" type="text/css" rel="stylesheet">
</head>

<body>
    <header>
        <h1>الگوی راهنمای/سامانه طراحی قالب تارنما برای طراحان و مهندسین سمت کاربر</h1>
        <div class="tooltip">این چیست؟<span
                data-tooltip="همیشه قبل از ساخت یک تارنما با مشتری روی مواردی که در زیر میاید به توافق برسید و آنرا بعنوان یک مرجع برای خودتان و مشتری مستند کنید!"
                data-tooltip-position="left" class="circle">&#33;</span></div>
    </header>
    <section>
        <h2>رنگها:</h2>
        <div class="tooltip">این چیست؟<span
                data-tooltip="رنگهایی که در تارنما در ترکیب یا جدا از یکدیگر میتوانند استفاده شوند را مشخص کنید، آنها نباید تعداد زیادی باشند!"
                data-tooltip-position="left" class="circle">&#33;</span></div>
        <div class="flex-container">
            <div style="background: #006600; color:#ffff; padding: 00.25em;">سبز <br><code dir="ltr"
                    style="color: initial;">#006600</code><br>با قلم سفید
            </div>
            <div style="background: #F1F1F1; Color:1A1A1A; padding: 00.25em;">خاکستری <br><code
                    dir="ltr">#F1F1F1</code><br>با قلم
                <code>#1A1A1A</code>
            </div>
            <div style="color: #1A1A1A; padding: 00.25em;">سفید <br><code dir="ltr">#FFFFFF</code><br>با قلم
                <code>#1A1A1A</code>
            </div>
            <div style="background: #FF001E; padding: 00.25em;">قرمز &#9888;
                <br><code dir="ltr">#FF001E</code><br>فقط برای
                حاشیه‌ها
                و علائم خطا بدون متن
            </div>
            <div style="background: #80000F; color:#F1F1F1; padding: 00.25em;">زرشکی <br><code dir="ltr"
                    style="color: initial;">#80000F</code><br>با قلم خاکستری</div>
        </div>
    </section>
    <section>
        <h2>قلمها:</h2>
        <div class="tooltip">این چیست؟<span
                data-tooltip="قلمی که خوانا باشد و حروف فارسی و اعداد فارسی را بدرستی ترسیم کند را انتخاب کنید. از انتخاب تعداد بیش از دو یا سه قلم پرهیز کنید چراکه تاثیر بدی روی سرعت و پیامرسانی سامانه میگذارد!"
                data-tooltip-position="left" class="circle">&#33;</span></div>
        <div class="flex-container">
            <div style="font-family: 'Iran Sans'">
                <h3>قلم <em>ایران سنس وب</em> <code dir="ltr">Iran Sans</code> و <em>
                        ایران سنس وب بُلد</em> <code dir="ltr">" bold</code></h3>
                هنوز نقاشان قَدَر این صُفه گچ اندود صف آسمان را پرده
                لاژوردی نکشیده بودند ۵۶۳<br><span style="font-family: 'Iran Sans-bold'">
                    هنوز نقاشان قَدَر این صُفه گچ اندود صف آسمان را پرده
                    لاژوردی نکشیده بودند ۵۶۳</span><br><i style="font-family: 'Iran Sans'">
                    هنوز نقاشان قَدَر این صُفه گچ اندود صف آسمان را پرده
                    لاژوردی نکشیده بودند ۵۶۳</i>
            </div>

            <div>
                <h3>قلم <em>یکان</em> <code dir="ltr">Yekan</code></h3>
                هنوز نقاشان قَدَر این صُفه گچ اندود صف آسمان را پرده
                لاژوردی نکشیده بودند۵۶۳<br><b>
                    هنوز نقاشان قَدَر این صُفه گچ اندود صف آسمان را پرده
                    لاژوردی نکشیده بودند ۵۶۳</b><br><i>
                    هنوز نقاشان قَدَر این صُفه گچ اندود صف آسمان را پرده
                    لاژوردی نکشیده بودند ۵۶۳</i>
            </div>

            <div style="font-family: Tahoma; font-style: normal; font-weight: normal;">
                <h3>قلم <em>طه‌ُما</em> <code dir="ltr">Tahoma</code></h3>
                هنوز نقاشان قَدَر این صُفه گچ اندود صف آسمان را پرده
                لاژوردی نکشیده بودند۵۶۳<br><b style="font-family: Tahoma">
                    هنوز نقاشان قَدَر این صُفه گچ اندود صف آسمان را پرده
                    لاژوردی نکشیده بودند ۵۶۳</b><br><i style="font-family: Tahoma">
                    هنوز نقاشان قَدَر این صُفه گچ اندود صف آسمان را پرده
                    لاژوردی نکشیده بودند ۵۶۳</i>
            </div>
        </div>
    </section>
    <section>
        <h2>قالب متنی:</h2>
        <div class="tooltip">این چیست؟<span
                data-tooltip="نوع، اندازه، و کلفتی قلم و همچنین محلهای بکارگیری آنها را مشخص کرده و خود را محدود به آنها کنید!"
                data-tooltip-position="left" class="circle">&#33;</span></div>
        <div class="flex-container">
            <div>
                عنوان سرخط <code>H1</code>:
                <ul>
                    <li>قلم ایران سنس بُلد</li>
                    <li>وزن قلم: پیش فرض</li>
                    <li>اندازه قلم: پیش فرض</li>
                </ul>
            </div>
            <div>
                عنوان درجه دو <code>H2</code>:
                <ul>
                    <li>قلم: ایران سنس بُلد</li>
                    <li>وزن قلم: پیش فرض</li>
                    <li>اندازه قلم: پیش فرض</li>
                </ul>
            </div>
            <div>
                متن بند <code>P</code>:
                <ul>
                    <li>قلم: ایران سنس </li>
                    <li>وزن قلم: معمولی</li>
                    <li>اندازه قلم: ۱۶</li>
                </ul>
            </div>
        </div>
    </section>
    <section>
        <h2>نشان تجاری:</h2>
        <div class="tooltip">این چیست؟<span
                data-tooltip="مشخصات، اندازه، احیاناً اندازه قابهای عمودی و افقی، فضای خالی حاشیه‌های نشان تجاری باید مشخص گردد، تا در طراح و همچنین مسؤولین تولید محتوی دچار بی‌نظمی نشوند!"
                data-tooltip-position="left" class="circle">&#33;</span></div>
        <div class="flex-container">
            <div>
                <figure>
                    <img src="img/guides/LogoStandard.png" width="100%" height="auto" alt="طراحی لوگو برای وب سایت">
                    <figcaption>طراحی، مستندسازی، و نحوه استفاده از نشان‌تجاری</figcaption>
                </figure>
            </div>
        </div>
    </section>
    <footer>
        <ul style="padding: 0 5em;">
            <li>شما میتوانید به راهنمای قالب سامانه خود مواردی مثل قالب‌بندی کلیدها و دکمه‌ها، پیوندها و عناصر دیگر را
                اضافه کنید</li>
            <li>
                برای مشاهده و بررسی یک مثال دیگر میتوانید به <a
                    href="https://www.lightningdesignsystem.com/utilities/text/">راهنمای قالب متن</a>
                سامانه طراحی صاعقه (لایتنینگ) شرکتی بنام سِیْلزفورس مراجعه کنید.
            </li>
        </ul>

    </footer>

</body>

</html>