تولید شده برای استدیوی هروف
HeCSS Library Logo

هِه، CSS ساده برای تولید پنل، گزارش، لندینگ پیج و صفحات ریسپانسیو فارسی

پروژه کتابخانه CSS هِه برای رفع نیازهای پروژه استدیوی هروف با هدف ایجاد کتابخانه ای از شیوه نامه های مورد نیاز برای تولید گزارشها و پانلها و صفحات وب که در کنار چند زبانه بودن مخاطب فارسی زبان را مد نظر قرار داده و همچین به دور از امکانات کم مصرف با حجم بسیار کم بتواند حوابگوی نیازهای توسعه دهندگان فارسی زبان در بستر وب باشد.

salam

ساختار شیوه نامه

کتابخانه شیوه نامه هِه از سه فایل اصلی he.css و he-colors.css و he-variables.css تشکیل شده است، فایل he.css (یا نسخه فشرده he.min.css) نگهدارنده کتابخانه کلاس ها است و فایل he-colors.css معرفی رنگهای پایه است که شما نیازی به تغییر این دو فایل ندارید.

فایل he-variables.css نگهدارنده مقادیر پیش فرض قابل تغییر است و می توانید برای ساختن theme های جدید این مقادیر را به دلخواه خود تغییر دهید.
این مقادیر شامل حهت چیدمان صفحه، اطلاعات قلم و همچنین رنگهای پیش فرض در دو حالت عادی و وضعیت تاریک است.

برای آشتایی با مقادیر و تغاریف قابل تغییر کتابخانه HeCSS لطفا این موارد را به خاطر داشته باشید.

مقادیر ریشه یا root:

مقادیر ریشه شامل تعاریف قلم و جهات چیدمان صفحه است. مقادیر direction و align نشان دهنده سو و جهت صفحه است و rev_align و rev_direction به معنای مقدار معکوس برای جهت و سوی صفحه است.

مقادیر صفحه یا html:

در این بخش از فایل he-variables.css رنگ های پیش فرض کتابخانه مشخص شده است که همه کلاس های این کتابخانه با استفاده از این رنگ ها ساخته می شوند.

این رنگها به ترتیب از بالا به پایین شامل مجموعه های زیر هستند:

  • 2 مجموعه رنگ 2 تایی برای متن شامل رنگ تیره و روشن
  • مجموعه رنگ 2 تایی برای دکمه های و نشانه های پایه شامل رنگ تیره و روشن
  • مجموعه رنگ 2 تایی برای دکمه های و نشانه های متفاوت شامل رنگ تیره و روشن
  • مجموعه رنگ 2 تایی برای پیام ها و نشانه های هشدار شامل رنگ تیره و روشن
  • مجموعه رنگ 2 تایی برای پیام ها و نشانه های غیرفعال شامل رنگ تیره و روشن
  • مجموعه رنگ 2 تایی برای پسزمینه ها شامل رنگ تیره و روشن
  • مجموعه رنگ 2 تایی برای بخش های تیره شامل رنگ تیره و روشن

شما با تغییر این مقادیر می توانید theme و قالب خود را بسازید.

مقادیر وضعیت شب یا Dark Mode:

در بخش بعدی این فایل که با [data-theme="dark"] مشخص شده است شما می توانید تمامی مقادر بالا را برای وضعیت شب نیز مشخص کنید تا در صورتی که پروژه شما نیاز به تغییر وضعیت رنگ دارد، از این امکان استفاده کنید.

این مقادیر به صورت پیش فرض برای سهولت در تنظیمات به صورت hsl ثبت شده اند. برای اطلاعات بیشتر در مورد شیوه hsl اینجا کلیک کنید.

نمونه تغییر وضعیت:
برای تغییر وضعیت نمایش روی دکمه زیر کلیک کنید:
                                    
:root {
    --he_font: Tahoma;
    --he_font_size: 14px;
    --he_direction: rtl;
    --he_rev_direction: ltr;
    --he_align: right;
    --he_rev_align: left;
}
                                

html {
    --he_text: #000; 
    --he_text_light: #666;
    --he_text_alt: #2f4d6d;
    --he_text_alt_light: #456281;
    --he_base: #2b78fe; 
    --he_base_light: #0099ff;
    --he_alt: #00ac6f;
    --he_alt_light: #00C57F;
    --he_alert: hsl(0, 100%, 47%); 
    --he_alert_light: #ffabab;
    --he_disabled: #aaa; 
    --he_disabled_light: #ccc;
    --he_selected: #e6f7ff;
    --he_back: #fff;
    --he_back_alt: #f1f1f1;
    --he_dark: #2f2f2f; 
    --he_dark_alt: #3f3f3f;
}
                                

/* @media (prefers-color-scheme: dark) { html { }
                                

در کتابخانه HeCSS بر خلاف کتابخانه های مرسوم عرض صفحه با % تقسیم بندی می شود، به این معنی که شما می توانید چهارچوب محتوا را در هر بخش به درصد های مورد نظر خود تقسیم کنید. این کار علاوه بر سهولت در استفاده و تصمیم گیری در بسیاری مواقع منعطف تر و با سرعت بیشتری قابل اجراست.

نمونه:
.he-w-20
.he-w-50
.he-w-30
20%
50%
30%

برای مشاهده عرض های تعریف شده لطفا بخش عرض و ارتفاع را مشاهده کنید.

                                
<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>
                                
                            

شروع کار با 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> ...
                
            

پایه و بدون تغییر

تنها تعداد کمی از خصوصیات اجزا صفحه به طور معمول در طراحی ظاهری صفحات مورد استفاده قرار می گیرند، ما از میان این خصوصیات، پر مصرف ترین ها را انتخاب کرده ایم و به صورت کلاس در این بسته با همان عنوان مقدار خصوصیت در این بسته جا داده ایم.

جهت و چیدمان:

کلاس های روبروی همان کاری را می کنند که شما از اسمشان انتظار دارید.

قرارگیری:

برای مشخص کردن position از این کلاس ها استفاده کنید.

نمایش:

از این کلاس ها برای display استفاده کنید.

سایر کلاسهای پایه:

این کلاس ها نیز میتوانند در توسعه شما مفید واقع شوند.

نقل قول ها:
این تگ به صورت پیش فرض تعریف شده و در کنار تعریف جهت، نقل قول را نمایش می دهد
نمونه:
این نمونه تگ نقل قول است.
این هم یک خط اضافه برای بیشتر نوشتن.
This is an example for blockquote tag.
Here is another line to make it look bigger.
Blockquotes .rtl .ltr
            
<blockquote class="rtl">[Some quotation]</blockquote>
            
        
علاوه بر این کلاس ها تعدادی از رنگ ها نیز برای استفاده به همین صورت نامگذاری شده اند که تحت عنوان رنگ های پایه در بخش پالت رنگ ها در دسترس شما قرار گرفته است.

شیوه نامه های هِه

در نامگذاری باقی کلاسها برای جلوگیری از تداخل با سایر کتابخانه هایی که ممکن است مورد استفاده قرار گیرد سعی شده منحصر باشند. این کلاس ها با "he-" آغار میشوند و سعی شده که نامگذاری ساده و قابل به خاطر سپاری داشته باشند.

شما همیشه می توانید از اینجا به مرجع این کتابخانه دسترسی داشته باشید و اطلاعات خود را به روز کنید.

چیدمان عمودی:

برای مشخص کردن vertical-align از این کلاس ها استفاده کنید.

چیدمان در وضعیت قرارگیری:

برای position های قابل چیدمان، این کلاس ها مقدار جهات را 0 می کنند.

برای position های قابل چیدمان، این کلاس ها مقدار مارجین را به درصد تنظیم می کنند.

عرض و ارتفاع:

این کلاس ها به % عرض چهارچوب را مشخص می کنند.

برای مثال: .he-w-33 = width: 33%

کلاس برای مشخص کردن عرض و ارتفاع 100%

کلاس های قابل استفاده برای مشخص کردن ارتفاع

این کلاس ها به pixel عرض چهارچوب را مشخص می کنند.

برای مثال: .he-w-p42 = width: 42px
حداکثر عرض برای چهارچوب را به واحد پیکسل می توانید با این کلاس ها مشخص کنید.

توجه داشته باشید که این کلاس باید کنار کلاس inline باشد.

برای مثال: .he-max-400 = max-width: 400px

شما مانند این نمونه کد می توانید برای ساخت بخشی از صفحه به صورت ریسپانسیو از این کلاس ها استفاده کنید.

اندازه قلم:

این کلاس ها با عددی 10 برابر اندازه قلم را به em مشخص می کنند.

برای مثال: .he-12 = font-size: 1.2em
سایر ویژگی های قلم:

همانطور که از نامشان مشخص است این کلاس ها خصوصیات قلم را تغییر میدهند.

فاصله ها:
کلاس های تغییر margin در این کتابخانه به شما کمک می کنند که حداقل نیازهای خود را در فاصله گذاری بخش های صفحه رفع کنید.

توجه داشته باشید که واحد اعداد کلاس ها به em است.

برای مثال: .he-margin-sides = margin: 0 1em
.he-margin-vsides-half = margin: 0.5em 0
.he-margin-bottom-2 = margin-bottom: 2em
همچنین برای تغییر فاصله درونی یا padding از این سری کلاس ها می توانید استفاده کنید.

توجه داشته باشید که واحد اعداد کلاس ها به em است.

برای مثال: .he-space-sides = padding: 0 1em
.he-space-vsides-half = padding: 0.5em 0
.he-space-bottom-2 = padding-bottom: 2em
وضوح:
برای تغییر وضوح یا opacity اجزا صفحه این کلاس ها قابل استفاده هستند.
برای مثال: .he-alpha-5 = opacity: 0.5
چرخش:
برای چرخاندن و تغییر زاویه بخش های درون صفحه این کلاس ها وجود دارند.

توجه داشته باشید که این کلاس باید کنار کلاس inline باشد.

نمونه:
Ɀ -> Ɀ
Ɀ -> Ɀ
Ɀ -> Ɀ
Ɀ -> Ɀ
نمایش ریسپانسیو:
در صورتی که اشیا صفحه تنها در سایز خاصی اجازه نمایش دارند این کلاس ها به شما کمک می کنند.
destop width > 920px > Tablet width > 640px > Mobile width
ویژگی های چهارچوب ها:
برای تغییر نحوه نمایش مرز چهارچوب ها این کلاس ها به شما کمک می کنند.
نمونه:
سلام
سلام
برای تغییر انحنای چهار چوب ها این کلاس ها وجود دارند.
این کلاس ها می توانند به اجزا صفحه سایه اضافه کنند.
نمونه:
a a a a
آماده سازی چهارچوب ها:
چیدمان و جهت پیش فرض صفحه
کم و زیاد کردن line-height برای پاراگراف ها
کوتاه کردن متن برای جا شدن در چهارچوب
نشانک ها:
برای تغییر cursor یا نشانک روی اشیا درون مرورگر می توانید از این کلاس ها استفاده کنید.
پس زمینه:
با استفاده از این کلاس ها می توانید اندازه تصویر پس زمینه را مشخص نمایید.

پالت رنگ ها

رنگ ها در کتابخانه هِه به دو دسته رنگهای پایه که تعاریف ثابت دارند و تغریف آنها در فایل he-colors.css ذخیره شده است و رنگهای قابل تغییر که برای theme استفاده میشوند و مقادیر آنها در فایل he-variables.css ذخیره می شوند.

لطفا توجه داشته باشید که برای هر رنگ کلاس استفاده از رنگ در سمت چب و کلاس استفاده از رنگ پس زمینه در سمت راست نوشته شده است.

در صورتی که در حالت شب (Dark Mode) رنگهای استفاده شده در قالب نیاز به بهینه سازی داشت بخش [data-theme="dark"] در فایل he-colors.css را متناسب نیاز خود تغییر دهید.

ابزار محتوا

این کلاسها بر خلاف کلاسهای فبلی در شیوه نامه تنها خصوصیات اجزا و اشیا درون صفحه را تغییر نمی دهند بلکه ظاهر و ویژگی های خاص خود را دارند که میتوانند در توسعه و تولید صفحات مورد نظر شما مفید باشند.

ساختار table:
به وسیه این کلاس ها می توانید چهارچوب های صفحه را مطابق میل خود همانند table بسازید.
نمونه:
Cell A
Cell B
he-table he-row he-cell
            
<div class="he-table he-w-100 he-border">
    <div class="he-row">
        <div class="he-cell he-w-50 he-border-left center">
            Cell A
        </div>
        <div class="he-cell center">
            Cell B
        </div>
    </div>
</div>
            
        
ساختار responsive table:
این کلاس مانند کلاس قبلی چهارچوب ها را همانند table می سازد ولی در سایز موبایل هر cell و row مرتبط را به block تبدیل می کند.
نمونه:
Cell A
Cell B
.he-rtable .he-row .he-rcell .he-rtable-tablet .he-rcell-tablet
            
<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>
            
        
فهرست ها:
به وسیله این کلاس می توانید فهرست خود را مشخص کنید، این کلاس با کلاس های he-table و تگ های table و ul می تواند کار کند.
برای تغییر رنگ زیر شاخه های فهرست می توانید از کلاسهای ردیف دوم استفاده کنید
نمونه:
آیتم 1
آیتم 2
آیتم 3
آیتم 4
آیتم 5
آیتم 6
آیتم 7
.he-list
            
<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>
        
دکمه های دایره:
این کلاس ها هم به شما کمک می کند دکمه های گرد برای نرم افزار خود تولید کنید.
نمونه:
.he-button-circle .he-button-circle-alt .he-button-circle-alert .he-button-circle-cancel .he-button-circle-clear .he-button-circle-clear-base .he-button-circle-clear-alt .he-button-circle-clear-alert
            
<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>
        
پیوند ها:
این کلاس ها در ساختن پیوند با رنگ و ویژگی های متفاوت به شما کمک می کنند.
نمونه:
کلیک کنید
.he-link .he-link-base .he-link-alt .he-link-alert
            
<a class="he-link">Click Here</a>
        
            
<a class="he-link"><i class="fas fa-paw"></i> <span>Pets</span></a>
        
نمایش badge:
برای نمایش Notification badge ها می توانید از این کلاس استفاده کنید.
نمونه:
تماس ها10
.he-badge
            
<div class="he-badge">[Number]</div>
            
        
نمایش تگ:
برای نمایش تگ ها در صفحات می توانید از این کلاس ها استفاده کنید.
نمونه:
سلام سلام سلام سلام سلام سلام سلام سلام
سه نقطه:
برای ساخت ایندیکاتور سه نقطه می توانید از این کلاس استفاده کنید.
نمونه:
و
و
.he-dots .he-dots-animated
            
<i class="he-dots-animated"></i>
            
        
چرخش:
برای ساخت ایندیکاتور ها می توانید از این کلاس ها استفاده کنید.
نمونه:
.he-spin .he-spin-reverse .he-spin-hourglass
            
<i class="fas fa-sync he-spin"></i>
            
        
چشمک زن:
این کلاس ها به شما امکان نمایش چراغ چشمک زن را فراهم می کند.
نمونه:
.he-blink-green .he-blink-red .he-blink-gray
            
<i class="he-blink-green"></i>
            
        
پالس:
این کلاس ها به شما کمک می کند که مهمترین دکمه را مشخص کنید.
نمونه:
.he-pulse
            
<a class="he-button-circle-alt he-shadow-2 he-pulse">
    <i class="fas fa-cube"></i>
</a>
            
        
منوها:
برای ساختن منو های مختلف در پروژه خود می توانید از این کلاس برای ساختن چهارچوب نگهدارنده ساختار تگ های نام برده شده مانند این مثال استفاده کنید.
.he-dropdown
ul li 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:
این کلاس در صفحه toast نمایش می دهد.
.he-toast
            
<div class="he-toast">[Notification Text]</div>
            
        
نشانه های متن:
این کلاس ها برای نمایش علایم بدون اضافه شدن به محتوای متنی استفاده می شوند.
نمونه:
.he-pipe .he-arrow-right .he-arrow-left
            
<i class="he-pipe"></i>
            
        
نمایش کد:
به وسیه این کلاس ها می توانید کد خود را نمایش دهید.

ورودی های داده

ساختار table برای فرم ها:
این کلاس ها به صورت پیش فرض برای ساختن table برای فرم های ورودی داده استفاده کرد.
این کلاس ها به صورت پیش فرض فرم را Responsive می کند.
فرم نمونه:
نام کاربری:
he-table-form he-row he-cell-text he-cell-input he-table-form-tablet he-cell-text-tablet he-cell-input-tablet
            
<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>
            
        
برای فرمها و یا توضیحات می توانید با این کلاس محل نمایش عنوان ایجاد کنید.
با این کلاس میشود نشانه اجباری بودن فیلد را اضافه کرد.
ورودی داده:
برای ساختن ورودی داده ای ساده ولی زیبا میتوانید از این کلاس ها استفاده کنید.
نمونه:
.he-input
            
<input class="he-input">
<input class="he-input he-rounded-less he-border-light">
            
        
انتخاب کننده:
برای ساختن انتخاب کننده به جای select به عنوان ورودی داده می توانید از این کلاس استفاده کنید.
نمونه:
.he-select
            
<div class="he-select">
    <select>
        <option value="option 1">option 1</option>
    </select>
</div>
            
        
چک باکس:
برای ساختن چک باکس ویژه به جای checkbox پیش فرض به عنوان ورودی داده می توانید از این کلاس استفاده کنید.
نمونه:
.he-checkbox .he-checkbox-key
            
<label class="he-checkbox">
    <input autocomplete="off" id="someId" type="checkbox">
    <span class="he-checkbox-key"></span>
    some text
</label>
            
        
کلید رادیو:
برای ساختن کلید رادیو ویژه به جای radio پیش فرض به عنوان ورودی داده می توانید از این کلاس استفاده کنید.
نمونه:
.he-radio .he-radio-key
            
<label class="he-radio">
    <input autocomplete="off" id="someId" type="radio">
    <span class="he-radio-key"></span>
    some text
</label>
            
        
سوئیچ:
برای ساختن سوئیچ به جای checkbox به عنوان ورودی داده می توانید از این کلاس استفاده کنید.
نمونه:
.he-switch .he-switch-key
            
<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 و... قابل استفاده است.

نسخه های قبلی

همیشه آخرین نسخه شیوه نامه های هِه، کامل ترین و به روزترین نسخه خواهد بود و برای پروژه های جدید پیشنهاد می کنیم همیشه از آخرین نسخه استفاده کنید ولی در صورتی که نیاز به نسخه های قبلی دارید می توانید اینجا فهرست تمامی نسخه ها را در اختیار داشته باشید.

فهرست نسخ شیوه نامه هِه - HeCSS:
کتابخانه شیوه نامه های هِه به صورت کدِ باز در اختیار شما قرار گرفته است، شما هم می توانید به کمک به این پروژه به بهتر شدن کیفیت کتابخانه کمک کنید.

ساخته شده با تمام ❤️ در دنیا توسط علی پورناصح به سفارش استدیوی هروف.

آخرین نسخه کتابخانه هِه 1.0.818 است که می توانید از اینجا دریافت کنید.

Code licensed MIT, docs CC BY 3.0.

تولید شده برای