به عنوان یک توسعه دهنده ی فرانت اند بعضی وقتا لازم میشه که عناصر رو به شکل های خاصی کنار هم بچینیم. سختی این کار بسته به قوه تخیل طراح UI تون میتونه متفاوت باشه ولی در کل چینش عناصر اگر با مفاهیم و اصول آشنا نباشی کار واقعا سختیه.
معمول ترین شکل چینش که من زیاد توی پروژه هام باهاش درگیر بودم و توی خیلی از طرح ها دیدم شکل قوس است. برای مثال چینش به شکل یک نیم دایره، یا دایره کامل، یا چینش به شکل نیم بیضی و یا بیضی کامل؛ که برای پیاده سازیش حتما باید با معادلات ریاضی سر و کله بزنید تا آخر سر بتونید چیزی که میخواهید رو درست کنید.
قسمت جالبش اینجاست که از این به بعد کارمون راحته و از میزان WTF/S (بخونید، این چیه آخه بر ثانیه) که نثار طراح میکنیم کم میشه. چون دقیقا برای این کار یعنی چینش عناصر روی منحنی بدون درگیر شدن با کدهای ریاضی یک ابزار کوچولو توسعه دادم به اسم ellipsis-html.
با استفاده از ellipsis-html دو کیلوبایتی می تونید آیتم های داخل یک عنصر رو به شکل بیضی (کامل و یا یک قسمت از بیضی و البته دایره که یک نوع از بیضی هست) کنار هم بچینید. توی شکل پایین نمونه ای از چینش هایی که با این ابزار درست کردم رو میتونید ببینید.
استفاده از این ابزار خیلی راحته. با اینکه توضیحات کامل توی صفحه Github موجود هست ولی من اینجا هم خیلی خلاصه بهش اشاره میکنم.
اگر از npm استفاده میکنید، با دستور npm install ellipsis-html ابزار رو به پروژتون اضافه کنید و یا اینکه تگ اسکریپت زیر رو در پروژتون کپی کنید.
<script src="http://unpkg.com/ellipsis-html/lib/ellipsis-html.min.js">
در کد زیر هم یک مثال کامل رو مشاهده می کنید. نتیجه این کد رو در تصویر اصلی مطلب می بینید که آواتارهای داخل عنصر avatars به صورت مرتب کنار هم چیده میشن.
تنظیمات ابزار بهتون این امکان رو میده که عناصر را در هر شکل از زیر مجموعه بیضی کنار هم بچینید و در هر موقعیتی از عنصر مادرتون که میخواید قرار بدید. مستنداتی توی صفحه گیت هاب نوشتم رو حتما مطالعه کنید.
اگر سوالی داشتید من در خدمتم. اگر ایده ای برای تکمیل تر شدن ابزار دارید و یا باگی دیدین خیلی خوشحال میشن توی پروژه مشارکت کنید و یا می تونید در قسمت issues مطرح کنید.
اگر از پروژه خوشتون اومد با Star دادن توی گیت هاب شادم کنید ??.
در ادامه هم چند تا از مقالاتم رو لینک میکنم شاید خوشتون اومد:
