به جای Bootstrap از چه چیزی استفاده کنیم؟ اگر شما کار طراحی وب انجام میدید، حتماً با Bootstrap آشنایی دارید، کتابخانه ای مبتنی بر CSS و Javascript که امکانات زیادی برای طراحی صفحات وب در اختیار شما قرار میده. اما آیا تا به حال به جایگزینی برای Bootstrap فکر کردید؟ جایگزینی که نه تنها امکانات Bootstrap رو داشته باشه، بلکه امکانات بیشتری رو هم در اختیار شما بزاره. یکی از این جایگزین ها Semantic UI هست که با امکانات مختلفی که داره میتونه یک جایگزین عالی برای Bootstrap باشه. در این مطلب قصد داریم نگاهی به این کتابخانه و امکاناتش داشته باشیم و ببینیم چرا باید به جای Bootstrap از Semantic UI استفاده کنیم؟
وب سایت Semantic UI به عنوان اولین نکته، باید به پشتیبانی از Right to Left در Semantic UI اشاره کنیم. شما زمانی که قصد استفاده Semantic UI رو دارید باید از ابزاری به نام gulp برای build کردن semantic ui استفاده کنید که به شما این اجازه داده میشه تا بین دو نسخه Left to Right و Right to Left، گزینه مورد نظر خودتون رو انتخاب کنید که برای وب سایت هایی که زبانشون فارسی هست خیلی مناسبه. (البته Bootstrap هم نسخه های Right to Left داره که نسخه رسمی نیست و توسط افراد دیگه ای تبدیل شدن)این کتابخانه علاوه بر امکانات اولیه ای که هر طراح وبی به اون نیاز داره مثل Grid یا CSS های آماده برای یکسری امکانات جانبی رو هم شامل میشه که خیلی جاها می تونه سرعت کارتون رو به شدت افزایش بده. در ادامه به برخی از اون ها اشاره می کنیم:
1. مورد اولی که خیلی برای من جالب بود و کاربرد های بسیاری هم می تونه داشته باشه وجود کلاسی به نام loading هست. شما زمانی که کلاس loading رو به المان هایی مانند segment، form یا button میدید spinner ای بر روی المان مورد نظر که نشان دهنده انتظار برای انجام عملیاتی هست نمایش داده میشه که در تصویر زیر می تونید نمونه هاش رو ببینید. البته bootstrap هم از spinner ها پشتیبانی می کنه، اما گستردگی استفاده در Semantic UI بیشتر هست و روی خیلی از المان ها قابل اعمال.
2. مورد بعدی که استفاده های زیادی میشه ازش داشت، بخش label هست که میشه تو بخش های زیادی ازش استفاده کرد، مثل اضافه کردن ribbon به المان ها، نمایش ترکیبی با تصاویر و ... که تجربه جالبی هست.
3. مورد جالب بعدی placeholder ها هستند، فرض کنید بخشی از صفحه شما قرار هست به صورت lazy بارگذاری بشه، مثل بخش feed شبکه های اجتماعی که یک progress محو بر روی صفحه در قالب مورد نظر نمایش داده میشه، semantic ui این امکان رو به راحتی و بوسیله placeholder ها در اختیار شما قرار میده.
4. ویژگی reveal افکت های hover بر روی المان های مختلف رو در اختیار شما میزاره که مبتنی بر css هست. مانند زمانی که شما بر روی یک عکس hover می کنید و با hover کردن یک المان دیگه بر روی عکس نمایش داده میشه و به امکاناتی بیشتری می تونید دسترسی داشته باشید.
5. بخش بعدی که خیلی پرکاربرد هست و تقریباً میشه گفت در اکثر بخش های طراحی می تونید ازش استفاده کنید، segment ها هستند. بوسیله segment ها شما می تونید box هایی بر روی صفحه ایجاد کنید و محتویات مورد نظر رو داخلش نمایش بدید. اما موضوعی که این بین وجود داره حالت های مختلفی هست که می تونید segment ها رو ایجاد کنید. مثل placeholder segments که برای نمایش محتویات خاص مورد استفاده قرار میگیرن، یا stacked segment که می تونید در تصاویر زیر نمونه این مورد رو مشاهده کنید، حالت pilled که حالت قرار گیری چند کاغذ رو روی هم شبیه سازی میکنه و کلی قابلیت های دیگه که می تونید با مراجعه به وب سایت semantic ui این قابلیت ها رو مشاهده کنید.
6. قابلیت جالب بعدی step ها هستند که برای ایجاد wizard می تونید ازشون استفاده کنید. حالت هایی که کاربر در چندین مرحله قرار هست فرم هایی رو پر کنه یا عملیات هایی رو انجام بده که بوسیله step ها میشه اینکار رو به راحتی انجام داد.
7. میشه گفت یکی از ویژگی های بسیار پرکاربرد semantic ui، بخش card ها هستند. شما بوسیله card ها می تونید کارت هایی با محتویات مختلف ایجاد کنید، مثل نمایش پست های وبلاگ به صورت card view، نمایش کاربران و ...
8. کتابخانه semantic ui شامل یکسری حالت های نمایش آماده هست، مثل نمایش comment ها که می تونید از قالب پیش فرض موجود در semantic ui استفاده کنید، یا قالب نمایش feed ها در شبکه های اجتماعی، لیست مطالب و ... که همگی تنها با نوشتن چند خط html و استفاده از کلاس های css موجود، قابل استفاده هستند و کار شما رو برای ایجاد صفحات وب بسیار راحت می کنن.
9. اما می رسیم به بخش ماژول ها که شامل امکانات زیادی مانند dropdown ها، popup ها، modal ها و ... هستند و هر کدوم از این امکانات خودشون امکانات زیادی رو در اختیار شما قرار میدن. مثل بخش dropdown که شما نه تنها امکان ایجاد dropdown های ساده رو دارید، بلکه می تونید dropdown های پیچیده رو هم ایجاد کنید، مثل tokenize input که به شما امکان وارد کردن مقادیر رو به صورت جدگانه (مانند ورود تگ برای مطالب) میده، dropdown هایی با قابلیت جستجو در آیتم ها که خود این قابلیت جستجو تنظیمات زیادی مثل جستجوی full text رو داره. همچنین می تونید اطلاعات رو به صورت remote از سرور بخونید و برای کاربر نمایش بدید. برای آشنایی با کلیه ویژگی های dropdown ها می تونید مستندات داخل سایت semantic ui رو مشاهده کنید.
10. بخش progress bar هم ویژگی های زیادی در اختیار شما میزاره، مثل attach کردن progress bar ها به بخش هایی مثل segment ها ، progress bar های مرحله ای و ...
11. قابلیت rating هم یکی از اون قابلیت های خیلی جالب در semantic ui هست، اگر قصد دارید به محتوای سایتتون قابلیت rating اضافه کنید، حتماً به این بخش نگاهی بندازید، تنظیمات متنوع این بخش قابلیت ایجاد rating تو حالت های مختلف رو به شما میده.
12. قابلیت search هم خیلی می تونه براتون پر کاربرد باشه، اگر میخوایید برای سایتتون قابلیت search ایجاد کنید، می تونید از امکانات پیاده سازی search در semantic ui استفاده کنید. این بخش تنظیماتی برای گرفتن اطلاعات به صورت remote رو هم داره.
13. قابلیت shape هم خیلی جالبه. فرض کنید بخشی داخل صفحه دارید که با Mouse Hover قرار هست این بخش که به صورت یک کارت نمایش داده میشه برگرده و محتویات پشت کارت نمایش بده (به این قابلیت اصطلاحاً Flip Card) گفته میشه. بوسیله قابلیت shape می تونید محتویات مورد نظرتون رو با افکت Flip Card نمایش بدید.
14. قابلیت Sidebar به شما این امکان رو میده تا برای سایتتون Sidebar هایی رو به صورت های مختلف نمایش بدید. مورد جالبی که در Sidebar ها وجود داره، قابلیت Push Sidebar هست که با نمایش Sidebar، محتویات صفحه به جهت نمایش نوار کناری Push میشن.
15. ویژگی Sticky برای مواقعی هست که شما قصد دارید بخشی از صفحه در زمان Scroll کردن بر روی صفحه ثابت بمونه، نمونه پرکاربردش ثابت کردن Sidebar ها در زمان Scroll کردن صفحه هست که به صورت پیش فرض این قابلیت در Semantic UI وجود داره.
16. بخش بعدی که میتونید تو بخش هایی از سایتتون ازش استفاده کنید، Effect های آماده برای نمایش یا حذف المان ها از صفحه هستند که در بخش Transitions اطلاعات مربوط به این ویژگی به صورت کامل ذکر شده. کافیه بوسیله یک کد جاوا اسکریپت ساده Effect مورد نظرتون رو به المان ها اضافه کنید.
17. اما می رسیم به قابلیت API در Semantic UI. همیشه پیاده سازی قابلیت های سایت به صورت Ajax نیازمند نوشتن کدهای زیادی هست. اما شما بوسیله قابلیت API در Semantic UI می تونید به راحتی قابلیت های Ajax رو برای المان هایی مثل لینک ها یا Button پیاده سازی کنید. در زیر یک نمونه کد ساده در این باره می بینید که یک Button ایجاد شده و بوسیله قابلیت API عملیات مورد نظر برای Button اضافه میشه.
$('.add.friend')
.api({
url: 'http://yoursite?id={value}'
})
;
18. قابلیت بعدی Form Validation هست که به راحتی می تونید برای فرم هایی که در صفحه دارید Validation های مختلفی اعمال کنید. اعمال کردن Validation تماماً بوسیله کدهای Javascript انجام میشه. بخش Validation تنظیمات و امکانات زیادی داره که می تونید از داخل سایت Semantic UI با این امکانات و ویژگی ها آشنا بشید.
19. مورد آخری که باید بهش اشاره کنیم، قابلیت Visibility هست، کاربرد های Visibility رو میشه در مواردی مثل Lazy load کردن تصاویر، قابلیت Infinite scroll (بارگذاری محتویات صفحه با Scroll کردن)، تغییر ظاهر یا محتویات یک المان در زمان Scroll کردن و ... استفاده کرد. مواردی که در این بخش به اون ها اشاره شد بخشی از ویژگی های Semantic UI بودند که در Library های دیگه به این صورت وجود ندارن، اما قابلیت های دیگه مثل Modal ها، Popup ها، ایجاد فرم ها، ایجاد Input و ... وجود دارن که در این مطلب به اون اشاره ای نکردیم. امیدوارم این مطلب برای دوستانی که قصد انتخاب یک Library مناسب برای طراحی وب دارن مفید بوده باشه.