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

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

 

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

با محبوب ترین فریم ورک در جهان شروع میکنیم. در حالی که Bootstrap منحصراً یک فریم ورک CSS نیست، ولی محبوب ترین ویژگی های آن مربوط به CSS است.سال 2011 که اولین نسخه عمومی فریم ورک بوت استرپ منتشر شد.

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

اگر با نحوه کار با چارچوبی مانند 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 منحصر به فرد وجود ندارد ، اما در عوض کلاسها با هم کار می کنند. بنابراین ، تقریباً شبیه به زبانی که کلمات در متن معنا پیدا می کنند ، نام کلاس با یکدیگر برای ساختن اجزای منسجم و سازگار با موبایل کار می کند.

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

 

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

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

مشاوره رایگان تلفنی
۶۵ ۸۹ ۹۶ ۸۸ - ۰۲۱
۹۱ ۸۴ ۹۶ ۸۸ - ۰۲۱