۴ فریم ورک برتر CSS در سال 2020

در این مقاله به معرفی 4 فریم ورک مطرح و برتر می‌پردازیم. با استفاده از این فریم ورک‌ها می‌توانید پروژه‌های با کیفیت و قابل اطمینان و در زمان کوتاه‌تر تولید کنید.

1-فریم ورک بوت استرپ Bootstrap

با محبوب ترین فریم ورک در جهان شروع می‌کنیم. در حالی که Bootstrap منحصرا یک فریمورک CSS نیست، ولی محبوب ترین ویژگی‌های آن مربوط به CSS است. نخستین نسخه از این فریم‌ورک در سال ۲۰۱۱ منتشر شد.

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

اگر با نحوه‌ی کار با چارچوبی مانند Bootstrap آشنا نیستید ، چند نمونه کد به شما کمک می کنند ، بنابراین می توانید با ویرایش HTML ، ببینید که ساختن رابط ها چقدر ساده است.

مثال دیگر برای نوبار :

همه این مؤلفه ها می توانند بدون نوشتن یک خط واحد CSS ساخته شوند. همچنین ساختار، سازگار با موبایل است . Bootstrap همچنین شامل ویژگی های پیشرفته ای برای طرح های ریسپانسیو است و همچنین روی Sass ساخته شده است ، بنابراین بسیار انعطاف پذیر و قابل تنظیم است.

2. فریم ورک Foundation

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

مثال جدول واکنش گرا:

3. فریم ورک UIkit

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

اول از همه ، اگر هنوز flexbox خیلی راحت نیستید ، می توانید بجای آن از UIkit با استفاده از HTML ساده استفاده کنید. مثال:

فریم ورک UIkit به دلیل امکانات بسیارش، ارزش امتحان کردن رو دارد و در زبان های less و Sass قابل استفاده است و شامل css هایی برای زبان های راست به چپ مثل فارسی می باشد.

4. فریم ورک Semantic UI

Semantic UI دارای در بسیاری از ویژگیهای مختلف با سایر فریم ورک های محبوب، همپوشانی دارد اما ویژگی خاص آن، نام گذاری کلاس ها براساس اسم هایی است که برای ما ملموس تر هستند.

مثال:

به  نام های کلاس توجه کنید. لزوماً برای هر یک از کلاسهای ذکر شده یک مجموعه css منحصر به فرد وجود ندارد ، اما در عوض کلاسها با هم کار می کنند. بنابراین ، تقریباً شبیه به زبانی که کلمات در متن معنا پیدا می کنند ، نام کلاس با یکدیگر برای ساختن اجزای منسجم و سازگار با موبایل کار می کند.

یک مثال دیگر ، که یک جدول داده ساده ایجاد می کند:

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *