۴ فریم ورک برتر CSS در سال 2020
در این مقاله به معرفی 4 فریم ورک مطرح و برتر می‌پردازیم. با استفاده از این فریم ورک‌ها می‌توانید پروژه‌های با کیفیت و قابل اطمینان و در زمان کوتاه‌تر تولید کنید.
1-فریم ورک بوت استرپ Bootstrap
با محبوب ترین فریم ورک در جهان شروع می‌کنیم. در حالی که Bootstrap منحصرا یک فریمورک CSS نیست، ولی محبوب ترین ویژگیهای آن مربوط به CSS است. نخستین نسخه از این فریمورک در سال ۲۰۱۱ منتشر شد.
فریم ورک بوت استرپ شامل یک سیستم شبکه قدرتمند، دکمه‌ها، کامپوننت‌ها، نوبارها و بسیاری امکانات و بخش‌های دیگر است.
اگر با نحوه‌ی کار با چارچوبی مانند Bootstrap آشنا نیستید ، چند نمونه کد به شما کمک می کنند ، بنابراین می توانید با ویرایش HTML ، ببینید که ساختن رابط ها چقدر ساده است.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="container"> <div class="row"> <div class="col-sm"> Column 1 </div> <div class="col-sm"> Column 2 </div> <div class="col-sm"> Column 3 </div> </div> </div> |
مثال دیگر برای نوبار :
|
1 2 3 4 5 6 7 8 9 |
<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav> |
همه این مؤلفه ها می توانند بدون نوشتن یک خط واحد CSS ساخته شوند. همچنین ساختار، سازگار با موبایل است . Bootstrap همچنین شامل ویژگی های پیشرفته ای برای طرح های ریسپانسیو است و همچنین روی Sass ساخته شده است ، بنابراین بسیار انعطاف پذیر و قابل تنظیم است.
2. فریم ورک Foundation
فریم ورک Foundation ، مانند Bootstrap ، بسیار محبوب شده است و به عنوان یک فریم ورک پیچیده تر با برخی از اجزای CSS پیشرفته اما با اجرای آسان شناخته می شود. فریم ورک Foundation روی Sass ساخته شده ، بنابراین مانند Bootstrap ، قابل تنظیم است. علاوه بر آن ، برخی از ویژگی های قدرتمندی آن ساخت طرح های مناسب برای موبایل را بسیار آسان کرده است.
مثال جدول واکنش گرا:
|
1 2 3 |
<table class="responsive-card-table unstriped"> <!-- table rows code goes here... --> </table> |
3. فریم ورک UIkit
UIkit یکی دیگر از فریم ورک های محبوب در ظاهر است و شاید از نظر ویژگی های CSS کمتر مورد تحسین قرار گیرد. علاوه بر بسیاری از ویژگی های مشابه با ویژگی های موجود در سایر فریم ورک های معروف، چند جزء تخصصی مفید نیز وجود دارد.
اول از همه ، اگر هنوز flexbox خیلی راحت نیستید ، می توانید بجای آن از UIkit با استفاده از HTML ساده استفاده کنید. مثال:
|
1 2 3 4 5 6 7 8 |
<div class="uk-flex uk-flex-wrap uk-flex-wrap-around"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> <div>Item 6</div> </div> |
فریم ورک UIkit به دلیل امکانات بسیارش، ارزش امتحان کردن رو دارد و در زبان های less و Sass قابل استفاده است و شامل css هایی برای زبان های راست به چپ مثل فارسی می باشد.
4. فریم ورک Semantic UI
Semantic UI دارای در بسیاری از ویژگیهای مختلف با سایر فریم ورک های محبوب، همپوشانی دارد اما ویژگی خاص آن، نام گذاری کلاس ها براساس اسم هایی است که برای ما ملموس تر هستند.
مثال:
|
1 2 3 4 5 6 |
<div class="ui grid"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div> |
به نام های کلاس توجه کنید. لزوماً برای هر یک از کلاسهای ذکر شده یک مجموعه css منحصر به فرد وجود ندارد ، اما در عوض کلاسها با هم کار می کنند. بنابراین ، تقریباً شبیه به زبانی که کلمات در متن معنا پیدا می کنند ، نام کلاس با یکدیگر برای ساختن اجزای منسجم و سازگار با موبایل کار می کند.
یک مثال دیگر ، که یک جدول داده ساده ایجاد می کند:
|
1 2 3 |
<table class="ui celled table"> <!-- ... rest of the table code here... --> </table> |