هِه، CSS ساده برای تولید پنل، گزارش، لندینگ پیج و صفحات ریسپانسیو فارسی
پروژه کتابخانه CSS هِه برای رفع نیازهای پروژه استدیوی هروف با هدف ایجاد کتابخانه ای از شیوه نامه های مورد نیاز برای تولید گزارشها و پانلها و صفحات وب که در کنار چند زبانه بودن مخاطب فارسی زبان را مد نظر قرار داده و همچین به دور از امکانات کم مصرف با حجم بسیار کم بتواند جوابگوی نیازهای توسعه دهندگان فارسی زبان در بستر وب باشد.
کتابخانه شیوه نامه هِه از سه فایل اصلی he.css و he-variables.css تشکیل شده است، فایل he.css (یا نسخه فشرده he.min.css) نگهدارنده کتابخانه کلاس ها است و
فایل he-variables.css نگهدارنده مقادیر پیش فرض قابل تغییر است و
می توانید برای ساختن theme های جدید این مقادیر را به دلخواه خود تغییر دهید.
این مقادیر شامل حهت چیدمان صفحه، اطلاعات قلم و همچنین رنگهای پیش فرض در دو حالت عادی و وضعیت تاریک است.
برای آشتایی با مقادیر و تغاریف قابل تغییر کتابخانه HeCSS لطفا این موارد را به خاطر داشته باشید.
تعاریف چیدمان:
مقادیر ریشه شامل تعاریف قلم و جهات چیدمان صفحه است. مقادیر direction و align نشان دهنده سو و جهت صفحه است و rev_align و rev_direction به معنای مقدار معکوس برای جهت و سوی صفحه است.
رنگ های قالب شیوه نامه:
در این بخش از فایل he-variables.css رنگ های پیش فرض کتابخانه مشخص شده است که همه کلاس های این کتابخانه با استفاده از این رنگ ها ساخته می شوند.
این رنگها به ترتیب از بالا به پایین شامل مجموعه های زیر هستند:
- مجموعه رنگ 2 تایی برای پسزمینه ها شامل رنگ پایه و متفاوت
- مجموعه رنگ 2 تایی برای متن شامل رنگ پایه و متفاوت
- مجموعه رنگ 2 تایی برای تیتر شامل رنگ پایه و متفاوت
- مجموعه رنگ 2 تایی برای پیام ها و نشانه های غیرفعال شامل رنگ پایه و متفاوت
- مجموعه رنگ 2 تایی برای پس زمینه ها، متون و نشانه های تیره شامل رنگ پایه و متفاوت
- مجموعه رنگ 2 تایی برای دکمه های و نشانه های اصلی شامل رنگ تیره و روشن
- مجموعه رنگ 2 تایی برای دکمه های و نشانه های ثانوی شامل رنگ تیره و روشن
- مجموعه رنگ 2 تایی برای پیام ها و نشانه های هشدار شامل رنگ تیره و روشن
شما با تغییر این مقادیر می توانید theme و قالب خود را بسازید.
مقادیر وضعیت شب یا Dark Mode:
در بخش بعدی این فایل که با [data-theme="dark"] مشخص شده است شما می توانید تمامی مقادر بالا را برای وضعیت شب نیز مشخص کنید تا در صورتی که پروژه شما نیاز به تغییر وضعیت رنگ دارد، از این امکان استفاده کنید.
این مقادیر به صورت پیش فرض برای سهولت در تنظیمات به صورت hsl ثبت شده اند. برای اطلاعات بیشتر در مورد شیوه hsl اینجا کلیک کنید.
:root {
--he_direction: rtl;
--he_rev_direction: ltr;
--he_align: right;
--he_rev_align: left;
--he_font: Tahoma;
--he_font_size: 14px;
--he_back: #fff;
--he_back_alt: #f1f1f1;
--he_text: #000;
--he_text_alt: #666;
--he_title: #2f4d6d;
--he_title_alt: #456281;
--he_disabled: #aaa;
--he_disabled_alt: #ccc;
--he_dark: #2f2f2f;
--he_dark_alt: #444;
--he_primary: #005eff;
--he_primary_alt: #2b78fe;
--he_primary_light: #e6f7ff;
--he_secondary: #00ac6f;
--he_secondary_alt: #00C57F;
--he_secondary_light: #adffe2;
--he_alert: #f30000;
--he_alert_alt: #ff0000;
--he_alert_light: #ffabab;
}
[data-theme="dark"] {
--he_back: hsl(210, 20%, 12%);
--he_back_alt: hsl(236, 85%, 8%);
--he_text: hsl(210, 20%, 92%);
--he_text_alt: hsl(210, 5%, 62%);
--he_title: hsl(210, 20%, 65%);
--he_title_alt: hsl(210, 20%, 60%);
--he_disabled: hsl(210, 10%, 50%);
--he_disabled_alt: hsl(210, 10%, 42%);
--he_dark:hsl(0, 0%, 85%);
--he_dark_alt: hsl(0, 0%, 67%);
--he_primary: hsl(218, 100%, 52%);
--he_primary_alt: hsl(212, 100%, 50%);
--he_primary_light: hsl(213,26%,53%);
--he_secondary: hsl(115, 100%, 32%);
--he_secondary_alt: hsl(115, 86%, 42%);
--he_secondary_light: hsl(115, 100%, 80%);
--he_alert: hsl(0, 100%, 47%);
--he_alert_alt: hsl(0, 95%, 61%);
--he_alert_light: hsl(0, 100%, 87%);
}
در کتابخانه HeCSS بر خلاف کتابخانه های مرسوم عرض صفحه با % تقسیم بندی می شود، به این معنی که شما می توانید چهارچوب محتوا را در هر بخش به درصد های مورد نظر خود تقسیم کنید. این کار علاوه بر سهولت در استفاده و تصمیم گیری در بسیاری مواقع منعطف تر و با سرعت بیشتری قابل اجراست.
برای مشاهده عرض های تعریف شده لطفا بخش عرض و ارتفاع را مشاهده کنید.
<table class="he-w-100">
<tr>
<td class="he-w-20"> [ 20% ] </td>
<td class="he-w-50"> [ 50% ] </td>
<td class="he-w-30"> [ 30% ] </td>
</tr>
</table>
کتبخانه شیوه نامه های وب هِه حجم بسیار پایینی دارد و با قابلیتهایی که دارد می تواند به تنهایی پاسخ گوی نیازهای شما باشد ولی اگر به امکانات بیشتری نیاز داشتید این کتابخانه با سایر کتابخانه های شیوه نامه مانند Bootstrap, Bulma, Tailwind, SemanticUI, Fundation و... همخوانی داد و شما به راحتی می توانید برای تکمیل امکانات خود در کنار این کتابخانه ها از کتابخانه HeCSS استفاده کنید.
برای استفاده از کتابخانه HeCSS فایلهای بسته کتابخانه را در پوشه مورد نظر خود کپی کنید و سپس با قرار دادن لینک فایل he.css یا he.min.css مانند مثال بعدی در HTML صفحه پروژه، به امکانات کتابخانه دسترسی پیدا کنید.
<html>
<head>
[ header tags ]
<link rel="stylesheet" href="[ your path to HeCSS ]/he.min.css">
</head>
<body> ...
همچنین شما می توانید از آدرس CDN کتابخانه HeCSS استفاده کنید.
<link rel="stylesheet" href="https://he.horuph.com/dist?direction=[rtl OR ltr](&dark=auto)">
تنها تعداد کمی از خصوصیات اجزا صفحه به طور معمول در طراحی ظاهری صفحات مورد استفاده قرار می گیرند، ما از میان این خصوصیات، پر مصرف ترین ها را انتخاب کرده ایم و به صورت کلاس در این بسته با همان عنوان مقدار خصوصیت در این بسته جا داده ایم.
جهت و چیدمان:
کلاس های روبروی همان کاری را می کنند که شما از اسمشان انتظار دارید.
قرارگیری:
نمایش:
از این کلاس ها برای display استفاده کنید.
سایر کلاسهای پایه:
این کلاس ها نیز میتوانند در توسعه شما مفید واقع شوند.
نقل قول ها:
این نمونه تگ نقل قول است.
این هم یک خط اضافه برای بیشتر نوشتن.
This is an example for blockquote tag.
Here is another line to make it look bigger.
باز و بسته کردن محتوا:
بدون افکت
با افکت
با افکت و عرض 100%
در نامگذاری باقی کلاسها برای جلوگیری از تداخل با سایر کتابخانه هایی که ممکن است مورد استفاده قرار گیرد سعی شده منحصر باشند. این کلاس ها با "he-" آغار میشوند و سعی شده که نامگذاری ساده و قابل به خاطر سپاری داشته باشند.
شما همیشه می توانید از اینجا به مرجع این کتابخانه دسترسی داشته باشید و اطلاعات خود را به روز کنید.
چیدمان عمودی:
برای مشخص کردن vertical-align از این کلاس ها استفاده کنید.
چیدمان در وضعیت قرارگیری:
برای position های قابل چیدمان، این کلاس ها مقدار جهات را 0 می کنند.
برای position های قابل چیدمان، این کلاس ها مقدار مارجین را به درصد تنظیم می کنند.
عرض و ارتفاع:
این کلاس ها به % عرض چهارچوب را مشخص می کنند.
کلاس برای مشخص کردن عرض و ارتفاع 100%
کلاس های قابل استفاده برای مشخص کردن ارتفاع
این کلاس ها به pixel عرض چهارچوب را مشخص می کنند.
توجه داشته باشید که این کلاس باید کنار کلاس inline باشد.
شما مانند این نمونه کد می توانید برای ساخت بخشی از صفحه به صورت ریسپانسیو از این کلاس ها استفاده کنید.
<div class="center">
<div class="he-max-960 he-section">
[content]
</div>
</div>
اندازه قلم:
این کلاس ها با عددی 10 برابر اندازه قلم را به em مشخص می کنند.
سایر ویژگی های قلم:
همانطور که از نامشان مشخص است این کلاس ها خصوصیات قلم را تغییر میدهند.
فاصله ها:
توجه داشته باشید که واحد اعداد کلاس ها به em است.
.he-margin-vsides-half = margin: 0.5em 0
.he-margin-bottom-2 = margin-bottom: 2em
توجه داشته باشید که واحد اعداد کلاس ها به em است.
.he-space-vsides-half = padding: 0.5em 0
.he-space-bottom-2 = padding-bottom: 2em
ترتیب لایه:
ترتیب لایه های خود را می توانید با استفاده از این کلاس ها استفاده کنید.
وضوح:
فیلتر:
چرخش:
توجه داشته باشید که این کلاس باید کنار کلاس inline باشد.
نمایش ریسپانسیو:
ویژگی های چهارچوب ها:
آماده سازی چهارچوب ها:
نشانک ها:
پس زمینه:
رنگ ها در کتابخانه هِه به دو دسته رنگهای پایه که تعاریف ثابت دارند و رنگهای قابل تغییر که برای theme استفاده میشوند و مقادیر آنها در فایل he-variables.css ذخیره می شوند.
لطفا توجه داشته باشید که برای هر رنگ کلاس استفاده از رنگ در سمت چب و کلاس استفاده از رنگ پس زمینه در سمت راست نوشته شده است.
رنگ های پایه
رنگ های قابل تغییر
این کلاسها بر خلاف کلاسهای فبلی در شیوه نامه تنها خصوصیات اجزا و اشیا درون صفحه را تغییر نمی دهند بلکه ظاهر و ویژگی های خاص خود را دارند که میتوانند در توسعه و تولید صفحات مورد نظر شما مفید باشند.
ساختار table:
ساختار responsive table:
<div class="he-rtable he-w-100 he-border">
<div class="he-row">
<div class="he-rcell he-w-50 he-border-left center">
Cell A
</div>
<div class="he-rcell center">
Cell B
</div>
</div>
</div>
فهرست ها:
برای تغییر رنگ زیر شاخه های فهرست می توانید از کلاسهای ردیف دوم استفاده کنید
| آیتم 1 |
| آیتم 2 |
| آیتم 3 |
| آیتم 4 |
| آیتم 5 |
| آیتم 6 |
| آیتم 7 |
<table class="he-list">
<tr>
<td>
Item1
</td>
</tr>
<tr class="selected">
<td>
Item2
</td>
</tr>
</table>
دکمه های ساده:
<button class="he-button">Submit</button>
<a class="he-button"><i class="fas fa-paw"></i> <span>Pets</span></a>
<a class="he-button he-min-auto">
<i class="fas fa-paw"></i>
<span class="he-only-desktop">Pets</span>
</a>
دکمه های دایره:
<a class="he-button-circle"><i class="fas fa-paw"></i></a>
<a class="he-button-circle big"><i class="fas fa-paw"></i></a>
پیوند ها:
<a class="he-link">Click Here</a>
<a class="he-link"><i class="fas fa-paw"></i> <span>Pets</span></a>
نمایش badge:
نمایش تگ:
<div class="he-tag">[Tag Name]</div>
نمایش نوار نکته :
<div class="he-tooltip">
Hover me
<div class="he-tooltip-text he-tooltip-top-right">
Hello!
</div>
</div>
سه نقطه:
نشانه بارگزاری:
<i class="he-indicator"></i>
برای تغییر در اندازه نشانه بارگزاری می توانید از کلاس های اندازه قلم استفاده کنید.
<i class="he-indicator he-15"></i>
چرخش:
لرزش:
موشواره را روی مکعب ها نگهدارید.
چشمک زن:
حرکت نور:
پالس:
<a class="he-button-circle-secondary he-shadow-2 he-pulse">
<i class="fas fa-cube"></i>
</a>
منوها:
<div class="he-dropdown">
<ul>
<li>
<a>[ Menu ]</a>
<ul>
<li>
<a>[ Item 1 ]</a>
</li>
<li>
<a>[ Item 2 ]</a>
</li>
</ul>
</li>
</ul>
</div>
نمایش toast:
<div class="he-toast">[Notification Text]</div>
کلاس های تغییر ویژگی:
he-transition
ساختار table برای فرم ها:
این کلاس ها به صورت پیش فرض فرم را Responsive می کند.
<div class="he-form-header">Header</div>
<div class="he-table-form">
<div class="he-row">
<div class="he-cell-text he-w-20">
<span class="he-needed">Username</span>:
</div>
<div class="he-cell-input">
<input class="he-w-100">
</div>
</div>
</div>
<div class="he-form-buttons">[Buttons]</div>
ورودی داده:
<input class="he-input">
<input class="he-input he-rounded-less he-border-light">
<div class="he-floating-label-wrap">
<input class="he-floating-label-field" id="field_1" placeholder="Text">
<label class="he-floating-label" for="field_1">Text</label>
</div>
انتخاب کننده:
<div class="he-select">
<select>
<option value="option 1">option 1</option>
</select>
</div>
چک باکس:
<label class="he-checkbox">
<input autocomplete="off" id="someId" type="checkbox">
<span class="he-checkbox-key"></span>
some text
</label>
کلید رادیو:
<label class="he-radio">
<input autocomplete="off" id="someId" type="radio">
<span class="he-radio-key"></span>
some text
</label>
سوئیچ:
<label class="he-switch">
<input autocomplete="off" id="someId" type="checkbox">
<span class="he-switch-key"></span>
</label>
یکی از مهمترین ویژگی های کتابخانه شیوه نامه هِه سهولت و امکان ایجاد سریع وضعیت شب برای پروژه ها است. برای اینکه این قابلیت را در پروژه خود فعال کنید تنها نیاز دارید که با اسکریپت به تگ <html> ویژگی و مقدار data-theme="dark" را اضافه کنید.
<html data-theme="dark">
<head>...
نمایش اختصاصی در وضعیت:
تصاویر در شب و روز:
برای مشاهده نمونه تغییر وضعیت شب و روز با استفاده از سوئیچ بالا وضعیت را تغغیر دهید و به تصویر پایین و نشانه وضعیت شب و روز دقت کنید.
توجه داشته باشید که کتابخانه "هِه" با حدف کم حجم بودن و رفع حداقل نیاز ها و همخوانی با سایر کتابخانه های موجود طراحی شده است. در صورتی که نیاز به امکانات بیشتری دارید می توانید از سایر کتابخانه ها در کنار کتابخانه هِه استفاده کنید.
این کتابخانه علاوه بر زبان فارسی از سایر زبانها نیز پشتیبانی می کند و در کنار کتابخانه ها و فریم ورک های دیگر برای تولید رابطهای کاربری نظیر Bootstrap, Materilize و... قابل استفاده است.
همیشه آخرین نسخه شیوه نامه های هِه، کامل ترین و به روزترین نسخه خواهد بود و برای پروژه های جدید پیشنهاد می کنیم همیشه از آخرین نسخه استفاده کنید ولی در صورتی که نیاز به نسخه های قبلی دارید می توانید اینجا فهرست تمامی نسخه ها را در اختیار داشته باشید.
ساخته شده با تمام ❤️ در دنیا توسط علی پورناصح به سفارش استدیوی هروف.
آخرین نسخه کتابخانه هِه 1.2.400 است که می توانید از اینجا دریافت کنید.
