بهترین Framework های CSS در سال ۲۰۲۰ - بخش دوم

در بخش اول این مقاله، ۶مورد از بهترین Framework های CSS در سال ۲۰۲۰ را بررسی کردیم. در این بخش به باقی این Framework ها می‌پردازیم. به امید این‌که در پایان این مقاله Framework مورد علاقه خود را بیابید و دلیل انتخاب خود را نیز به خوبی در ذهن داشته باشید.

۷- Foundation

ZURB در سپتامبر ۲۰۱۱ Foundation را طراحی کرد. در مقایسه با دیگر Framework‌ های مشهور در سال ۲۰۲۰ می‌توان گفت که Foundation اینترفیس پیشرفته‌تر و برجسته‌تری را نسبت به بقیه ارائه می‌دهد. یکی از بهترین قابلیت‌های آن منوی واکنش‌گرا یا ریسپانسیو و همچنین سازگاری بالای آن با مرورگرها و دیوایس‌های مختلف است.

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

آمار استفاده از فریمورک Foundation:

• رنک شماره‌ دو بهترین Framework‌ های سی اس اسی سال ۲۰۲۰ میلادی از نظر محبوبیت در نظر سنجی State of CSS.
• ۱۴.۱ درصد از توسعه‌دهندگان CSS از این Framework استفاده کرده‌اند و قصد استفاده‌ی مجدد از آن را دارند.
• ۲۸.۶ هزار ستاره در گیت‌هاب، ۵.۸ هزار فورک و ۹۸۴ همکار (contributor)

چرا باید از Framework سی اس اسی Foundation استفاده کنیم؟

• منحصر به فردی بالا:

فریمورک Foundation شما را قادر می‌سازد تا سایتتان را به نحوی طراحی کنید که از نظر ظاهری نسبت به دیگر سایت‌هایی که از همین Framework استفاده می‌کنند نیز منحصر به فرد بماند.

• CSS اضافی کم‌تر:

با توجه به نحوه‌ی طراحی درونی این Framework، CSS های اضافی زیادی در HTML خود نخواهید داشت.

• انعطاف بیش‌تر در گریدها:

شما به سادگی می‌توانید gutter‌ ها را حذف کنید و ستون‌ها را با هم ادغام کنید و این کار تنها با استفاده از کلاس collapse امکان پذیر است. شما می‌توانید ستون‌هایی با اندازه‌های برابر نیز با کمک گرید blocked-size بسازید. با توجه به مجموع این ویژگی‌ها می‌توان گفت که یک گرید انعطاف‌پذیر خواهید داشت.

• ویجت‌ها:

Foundation به شما امکان قرار دادن نویگیشن (nav) هایی را در گوشه‌ی صفحه‌ی وب‌تان می‌دهد. همچنین شما یک کتا‌ب‌خانه‌ برای اعتبارسنجی فرم‌ها و قابلیت‌های زیادی برای شخصی‌سازی تجربه‌ی کابری سایتتان نیز در اختیار خواهید داشت.

نقاط ضعف فریمورک Foundation چیست؟

• وقت‌گیر بودن:

مبتدیان مدت زمان زیادی برای یادگیری این Framework صرف خواهند کرد و فرآیند یادگیری این ابزار کمی طولانی است.

• پشتیبانی نامناسب:

پشتیبانی توسط کامیونیتی، سایت‌های پرسش و پاسخ و انجمن‌ها منبع اصلی پشتیبانی از توسعه‌دهندگان اند؛ اما درباره‌ی این Framework باید گفت که در این زمینه ضعف دارد. یکی از دلایل این اتفاق برای Framework‌ هایی به غیر از بوت استرپ، محبوبیت بالای بوت استرپ است که اکثر پشتیبانی جامعه‌ی توسعه‌دهندگان را به خود اختصاص داده است.

• پیچیدگی در شخصی‌سازی:

توسعه‌دهندگان این Framework کار سختی برای منحصفر به فرد سازی وب‌سایت خود به نسبت دیگر Framework‌های css دارند.

چه کسانی از Foundation استفاده می‌کنند؟

EA, Amazon, eBay, Adobe, and Mozilla

۸- Semantic UI

Semantic UI یکی از بهترین Framework‌ های CSS در سال ۲۰۲۰ است که توسط Jack Lukie توسعه یافته است. وی یک توسعه دهنده‌ی فول استک است که از قواعد زبان طبیعی برای ساخت این Framework استفاده کرده است. Semantic UI که از LESS و jQuery قدرت گرفته است، ظاهری براق، لطیف و هموار برای وب‌سایت شما به ارمغان خواهد آورد و همچنین یک تجربه‌ی کاربری سبک نیز خواهید داشت.

در قیاس با دیگر Framework‌ها، این Framework جامعه‌ی کوچک‌تری دارد ولی اعضای آن وفادار و مشتاق هستند. هدف آن‌ها نیز ساخت یک زبان برای به اشتراک‌گذاری رابط کاربری و قدرت بخشیدن به توسعه دهندگان و همچنین طراحان است. جامعه‌ی Semantic UI تا به امروز توانسته اند بیش از سه هزار تم مختلف بسازند.

آمار کاربرد Framework سی اس اسی Semantic UI

• سهولت در استفاده:

بهترین هدیه‌ی سمنتیک برای شما، راحتی استفاده از آن است. تنها نیاز است که چیزی را که می‌خواهید تایپ کنید و آن‌گاه می‌توانید به سادگی آن را به طرح وب‌سایت دلخواهتان در آورید.

• تم‌های فراوان در دسترس آن:

یکی از نقاط قوت Semantic UI تنوع زیادی layout های آن است. با توجه به این موضوع، شما می‌توانید به راحتی چیزی‌‌هایی که برای پروژه‌تان قابل استفاده باشند را بیابید.

• طراحی یک صفحه زمان کم‌تری خواهد برد:

کلاس‌های این Framework نام‌های معناداری دارند و به همین دلیل منحنی یادگیری این Framework کوتاه است؛ نتیجتا سرعت توسعه‌ی پروژه‌هایتان نیز با استفاده از این Framework افزایش پیدا خواهد کرد.

نقاط ضعف فریمورک Semantic UI چیست؟

• ناسازگاری قابلیت‌های آزمایشی در مرورگرها:

از آن‌جایی که Semantic UI از اینترنت اکسپلورر ۷ پشتیبانی نمی‌کند، می‌توان گفت که سازگاری این Framework با مرورگرها، ایده‌آل نیست. البته که شاید این مشکل تنها بر گردن سمنتیک نباشد و مقداری نیز بر عهده‌ی مرورگرهاست.

• آپدیت‌های اندک:

حدود یک‌ سال است که هیچ بروزرسانی برای این Framework عرضه نشده است. (از سال ۲۰۱۸ تا سال ۲۰۱۹) این نیز می‌تواند یکی از مشکلات Semantic باشد چرا که دیگر رقیبانش سریعا در حال عرضه‌ی بروزرسانی های متعدد از Framework‌ های خود هستند.

• مشکلاتی در واکنش‌گرایی:

از آن‌جایی که امروزه وب‌سایت‌ها در دستگاه‌های مختلفی در معرض نمایش قرار می‌گیرند، نیاز است که روی واکنش‌گرایی این Framework بیش‌از پیش کار شود.

چه‌ کسانی از فریمورک Semantic UI استفاده می‌کنند؟

Snapchat, Accenture, Kmong, Samsviran, Ristoranti

۹- UIKit

UIKit یک Framework ماژولار و سبک فرانت اند و css است. اگر شما هدفتان ساخت رابط‌های کاربری سریع و قدرتمند است، UIKit می‌تواند گزینه‌ مناسبی برایتان باشد. این Framework مجموعه‌ای از کامپوننت‌های CSS, HTML, JS ای است. این امر باعث می‌شود که این Framework فرانت اند به سادگی سفارشی شود و به راحتی نیز قابل استفاده باشد.

یو آی کیت یکی از پر استفاده‌ترین ابزارها برای توسعه‌ی اپ‌های iOS است. این Framework کامپوننت‌های اصلی مانند دکمه‌، لیبل، جدول و ... را در خود جای داده است. می‌توان گفت که UIKit آینده‌ی توسعه‌ی اپ‌ پلتفرم‌های اپل را در درست خواهد داشت.

آمار استفاده از Framework UIKit

• رتبه‌ی ششم در بهترین Framework‌ های CSS در سال ۲۰۲۰ میلادی طبق نظر سنجی State of CSS.
• ۳.۲۷ درصد توسعه‌دهندگان CSS از این Framework استفاده کرده‌اند و قصد استفاده‌ی مجدد از آن را دارند.
• ۱۵ هزار ستاره در گیت‌هاب، ۲.۲ هزار فورک و ۲۸ همکار

چرا از فریمورک UIKit استفاده‌ کنیم؟

• معماری واضح:

یو آی کیت قراردادها و کدهای تمیزی در خود جای داده که باعث یک معماری تمیز و خوانا شده اند.

• دسترسی به تم‌های آماده:

شما می‌توانید تم مورد‌ علاقه‌تان را انتخاب کنید و فایل LESS یا SASS آن را نیز دانلود کنید.

• ماژولار:

طراحی تمامی جنبه‌های UIKt به نحوی انجام شده که طراحان به سادگی کامپوننت‌های مختلف را برای افزودن به استایل شیت خود انتخاب کنند. به لطف این Framework فرانت اند که کاملا ماژولار است، طراحان نگرانی بابت بر هم خوردن استایل کلی سایتشان نخواهند داشت.

• قابلیت سفارشی سازی بالا:

طراحان به سادگی قادر به تولید ظواهر جدید با استفاده از این Framework هستند. همچنین انیمیشن‌های درونی این ابزار نیز به خلاقیت سایتتان می افزایند.

نقاط ضعف Framework سی اس اسی UIKit چیست؟

• کمبود منابع آموزشی:

به دلیل پایین بودن محبوبیت یو آی کیت در بین توسعه‌دهندگان فرانت اند، پیدا کردن منابع آموزشی متفاوت برای این Framework کار دشواری است. تنها منبع قابل استفاده برای این Framework، داکیومنت اصلی آن است.

• توسعه‌ی کند و محدود:

چرخه‌ی توسعه‌ی این Framework طولانی است و رفع باگ‌های آن زمان‌بر هستند. این Framework به شکل عمومی توسعه نمی‌یابد و توسط افراد محدودی این کار انجام می‌گیرد.

• کد کلاس‌ها پیچیده است:

کلاس‌های تودرتو (nested) می‌توانند خوانایی پایینی داشته باشند و برای سفارشی‌سازی‌شان نیز زمان زیادی را نیاز داشته باشند.

چه کسانی از  فریمورک UIKit استفاده می‌کنند؟

LiteTube, AskNicely, Crunchyroll, SolarWinds, Nedwave

۱۰- Tailwind

Tailwind یک Framework بر پایه‌‌ی utility است که می‌تواند برای خلق سریع رابط کاربری به کار آید. Tailwind یک کتاب‌خانه‌ی سی اس اسی utility-base است که سرعت را بر HTML تمیز و معنایی ترجیح داده است. با استفاده از این Framework احتمالا دیگر نیاز به نوشتن CSS های زیادی نخواهید داشت.

Tailwind تم پیش‌فرضی ندارد. شما هیچ کامپوننت UI را به شکل built-in در این Framework پیدا نخواهید کرد. اما ویجت‌های از پیش طراحی شده ای وجود دارد که می‌توانید با استفاده از آن‌ها سایت خود را بسازید.

آمار استفاده از Framework سی اس اسی Tailwind

• رتبه ۸ ام بهترین فریمورک CSS در سال ۲۰۲۰ طبق نظرسنجی State of CSS.
• ۴.۹ درصد توسعه‌دهندگان CSS از این Framework استفاده کرده اند و قصد استفاده‌ دوباره از آن را نیز دارند.
• ۶۹ ستاره در گیت‌هاب، ۱۳ فورک و ۲ همکار

چرا از Framework سی اس اسی Tailwind استفاده کنیم؟

• سایتتان با تغییرات اشخاص مختلف به هم نریزد:

اگر یک المنت را تغییر دهید، دیگر نگران نخواهید بود که دیگر موارد وصل شده به آن المنت نیز تغییر کنند.

• راحتی در استفاده:

هنگامی که با سینتکس این کتاب‌خانه آشنا شوید، استفاده‌ از این Framework بسیار آسان خواهد بود. همچنین نیاز نیست که دیگر مرتبا بین فایل css و html خود سوییچ کنید.

• قابلیت سفارشی‌سازی بالا:

این Framework گزینه‌های سفارشی سازی بسیار زیادی دارد؛ همچنین بر خلاف دیگر فریم ورک‌های مشهور این مقاله، Tailwind به شما تحمیل نمی‌کند که سایتتان به چه شکل باشد؛ بلکه ابزاریست کاملا در اختیار شما برای سفارشی‌سازی کامل پروژه‌تان.

• سرعت توسعه‌ی بالا:

از آن‌جایی که هدف اصلی فریمورک Tailwind، حذف کدنویسی CSS است، سرعت توسعه‌ی فرانت اند پروژه‌هایتان را به شدت بالا خواهد برد.

نقاط ضعف فریمورک Tailwind

• ناکافی بودن برای حرفه‌ای‌ها:

این Framework می‌تواند انتخابی مناسب برای توسعه‌دهندگان تازه‌کار یا کسانی باشد که قصد نوشتن هیچ‌ CSS ای ندارند؛ اما برای افراد حرفه‌ای در CSS ممکن است کمی سطح پایین باشد و تمامی نیازهایشان را برطرف نکند.

• از grid layout پشتبانی نمی‌کند:

Tailwind از هیچ grid layout ای پشتیبانی نمی‌کند.

چه کسانی از Framework سی اس اسی Tailwind استفاده می‌کنند؟

BlaBlaCar, otto-now, Website, Clarisights, JetThoughts, EXR

۱۱- Tachyons

Tachyons یکی Framework‌ های رو به رشد سی اس اس در سال ۲۰۲۰ میلادی است. بر خلاف دیگر Framework‌ های محبوب فرانت اند مانند Bootstrap و Foundation، شما هیچ کامپوننت ظاهری از پیش‌ساخته ‌شده‌ای ندارید. در مقابل قصد این Framework شکستن قواعد CSS به قسمت‌های کوچیک و قابل مدیریت و قابل استفاده‌ی مجدد است. (چیزی شبیه به کاری که Tailwind می‌کند)

این Framework با این هدف قصد دارد تا به کمک شما برای ساخت وب‌سایت‌هایی سریع و با خوانایی بالا و همچنین واکنش‌گرا، بدون نیاز به نوشتن CSS های سنگین کند.

آمار استفاده از Framework سی اس اسی Techyons

• رتبه‌ی دهم در بین بهترین Framework های CSS در سال ۲۰۲۰ طبق نظرسنجی State of CSS
• ۴.۱۳ درصد از توسعه‌دهندگان از این Framework استفاده کرده‌اند و قصد استفاده‌ی مجدد از آن را نیز دارند.
• ۹.۷ هزار ستاره، ۶۱۱ فورک و ۶۴ همکار

چرا از فریمورک Techyons استفاده کنیم؟

• یادگیری آسان:

این Framework شیب تندی برای یادگیری ندارد و حتی برای تازه‌واردها بسیار راحت است.

• قابل سفارشی‌سازی کامل:

Techyons مجموعه‌ی بزرگی از ماژول‌های قابل ویرایش CSS به همراه دارد. از آن‌جایی که هیچ dependency یا همان وابستگی پیچیده‌ای درون این ماژول‌ها وجود ندارد، سفارشی‌سازی آن‌ها نیز بسیار آسان است.

• هیچ اجباری برای استفاده از استایل‌های پیش فرض نیست:

کلاس‌های مختلف درون صفحه نمایش‌هایی با سایزهای گوناگون، متفاوت می‌شوند. این باعث کنترل بالای توسعه‌دهندگان بر روی layout می‌شود. همچنین نیاز نیست که دیگر به اجبار از استایل‌های پیش فرض استفاده کنند.

• مناسب برای نمونه‌سازی اولیه:

از آن‌جایی که این Framework با حداقل عملیات‌های طراحی باعث ساخت یک طرح زیبا می‌شود، می‌توان از آن برای پروتوتایپینگ یا نمونه سازی اولیه استفاده کرد.

• داکیومنت قوی:

توسعه دهندگان در حین استفاده از Teckyons به داکیومنت‌های بی نقصی دسترسی دارند تا با این Framework آشنا شوند.

نقاط ضعف Framework سی اس اسی Techyons

• کمبود خلاقیت:

این Framework از کمبود خلاقیت رنج می‌برد. به نحوی که احتمالا شما یک وب‌سایت منحصر به فرد با آن نخواهید داشت. موارد پیش‌فرض آن به قدری نیستند که باعث منحصر به فرد شدن سایتتان شوند.

• سرعت پایین:

اگر نحوه‌ی نام گذاری کلاس‌ها و ساختار آن‌ها را به خوبی به یاد نسپرده‌ باشید، در حین استفاده از این Framework وقتتان گرفته خواهد شد.

چه کسانی از فریمورک Techyons استفاده می‌کنند؟

Everlane, CrewFire, Agema, guac. live

جمع‌بندی

اگر بگوییم که CSS زبانی است که تا سال‌های سال در طراحی وب استفاده خواهد شد، حرف بی‌جایی نزده‌ایم. هر یک از Framework‌ های بیان شده در این مقاله مزایا و معایب مختص به خود را دارند. پس محیط بیزینس شما می‌توان تاثیر زیادی در انتخاب شما از بین این لیست بلند باشد. شما می‌توانید با توجه به نیازمندی‌های هر کدام از پروژه‌هایتان، یکی از این Framework‌ ها را برای استفاده در آن استفاده کنید. البته باید همیشه مراقب ناسازگاری ویژگی‌های آزمایشی جدید CSS و HTML بر روی مرورگرهای مختلف باشید و همیشه پروژه‌هایتان را در مرورگرهای مختلف و دستگاه‌های متفاوت تست کنید تا علاوه بر موارد آزمایشی، واکنش‌گرایی وب‌سایتتان را نیز امتحان کرده باشید.

آیا به نظر شما این رتبه‌بندی برای بهترین Framework‌ های CSS در سال ۲۰۲۰ میلادی درست بوده است؟

اگر فکر می‌کنید که Framework دیگری نیز باید در این لیست قرار بگیرد یا رتبه‌ی بهتری داشته باشد، در بخش نظرات بیان کنید و به ما در یافتن بهترین فریمورک CSS ای حال حاضر کمک کنید.

منبع