بهترین فریمورکهای CSS
فریمورکهای CSS کتابخانههای از پیش آمادهای هستند که توسعه فرانتاند را ساده و سریع میکنند. آنها سبکهای استاندارد، واکنشگرا و سازگار با مرورگرهای مختلف را برای عناصر رابط کاربری رایج مانند شبکهها و ستونها، دکمهها، فرمها و نوارهای ناوبری ارائه میدهند. با استفاده از یک چارچوب CSS، توسعهدهندگان از اختراع مجدد چرخ خودداری میکنند و زمان توسعه را کمتر میکنند.
فریمورکهای CSS ثبات طراحی را تضمین میکنند و اشکالات را به حداقل میرسانند. در محیطهای تولید، آنها همکاری تیمی را از طریق قراردادهای مشترک و پیشفرضهای واکنشگرا افزایش میدهند. این ویژگیها به استارتاپها کمک میکند تا در زمان کمتری، محصول مطمئنتری ایجاد کنند. هرچند ممکن است سازگاری کامل با ایدههای خلاقانه از این روش امکانپذیر نباشد.
در ادامه تعدادی از بهترین و محبوبترین فریمورکهای CSS را مرور میکنیم.
۱- Tailwind CSS
Tailwind CSS یک فریمورک سبک و قدرتمند برای طراحی رابط کاربری است که به جای ارائه کامپوننتهای آماده، مجموعهای از کلاسهای کاربردی (Utility classes) را فراهم میکند. این کلاسها به شما امکان میدهند بدون نوشتن CSS جدید، ظاهر عناصر را دقیق و سریع تنظیم کنید. ساختار آن ماژولار، قابل سفارشیسازی، و مناسب پروژههای ریسپانسیو است. مزیت اصلی Tailwind در سرعت توسعه، یکنواختی طراحی، و حذف وابستگی به فایلهای CSS پیچیده است؛ کافی است فقط با ترکیب چند کلاس، طرح دلخواه را بسازید.
برای مثال کد زیر یک دکمه با طرح و ابعاد دلخواه برنامهنویس ایجاد میکند. این کار با درج چندین کلاس انجام شده است:
|
1 |
<button class="bg-red-600 text-white px-4 py-2 rounded">ارسال</button> |
۲-فریم ورک بوت استرپ 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 ساخته شده است ، بنابراین بسیار انعطاف پذیر و قابل تنظیم است.
۳- Bulma
Bulma یک فریمورک CSS مدرن و سبک است که با Flexbox ساخته شده و ابزارهایی آماده برای ساخت رابطهای واکنشگرا ارائه میدهد. طراحی آن مبتنی بر کلاسهای معنایی و منظم است. به جای کدنویسی مستقیم CSS، ترکیب کلاسها ظاهر و ساختار صفحه را شکل میدهد. برخلاف فریمورکهایی که نیاز به جاوااسکریپت دارند، Bulma به طور کامل در سمت استایل عمل میکند. مزیت آن در سادگی، چیدمان سریع عناصر، و هماهنگی فوری میان اندازهها و رنگهاست. مثال زیر ویژگیها و شکل عملکرد آن را نشان میدهد:
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="columns"> <div class="column is-one-third has-background-info has-text-white p-4"> ستون ۱ </div> <div class="column has-background-light p-4"> ستون ۲ </div> <div class="column has-background-warning p-4"> ستون ۳ </div> </div> |
۴- فریم ورک Foundation
فریم ورک Foundation ، مانند Bootstrap ، بسیار محبوب شده است و به عنوان یک فریم ورک پیچیده تر با برخی از اجزای CSS پیشرفته اما با اجرای آسان شناخته می شود. فریم ورک Foundation روی Sass ساخته شده ، بنابراین مانند Bootstrap ، قابل تنظیم است. علاوه بر آن ، برخی از ویژگی های قدرتمندی آن ساخت طرح های مناسب برای موبایل را بسیار آسان کرده است.
مثال جدول واکنش گرا:
|
1 2 3 |
<table class="responsive-card-table unstriped"> <!-- ردیفهای جدول اینجا قرار میگیرند ... --> </table> |
۵- فریم ورک 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>ردیف ۱</div> <div>ردیف ۲</div> <div>ردیف ۳</div> <div>ردیف ۴</div> <div>ردیف ۵</div> <div>ردیف ۶</div> </div> |
فریم ورک UIkit به دلیل امکانات بسیارش، ارزش امتحان کردن رو دارد و در زبان های less و Sass قابل استفاده است و شامل css هایی برای زبان های راست به چپ مثل فارسی می باشد.
۶- 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"> <!-- ... کدهای جدول اینجا قرار میگیرند ... --> </table> |