فریم ورک مجموعه ای از کدها و کتابخانه هایی هستند که از قبل تهیه شده اند و طراحان و توسعه دهندگان می توانند آن ها را در پروژه های طراحی وب خود فراخوانی نمایند. دلیل به وجود آمدن فریم ورک ایجاد یک ساختار مشخص برای برنامه نویسان می باشد. این امر همچنین باعث می شود که از چند باره نوشتن این کدها جلوگیری شود که باعث سرعت در کدنویسی می شود و لازم نیست چرخ را از نو بسازیم و مسائل تکراری را انجام دهیم. فریم ورک ها به دو دسته frontend و backend تقسیم می شوند. فریم ورک فرانت اند از کدهای استاندارد شده زبان های JS، CSS، HTML و ... ساخته شده است که در این مطلب ما به بیان فریم ورک های UI می پردازیم.
انواع فریم ورک های UI
شاید بپرسید که انواع فریم ورک های UI چیست و چه مزایایی نسبت به یکدیگر دارند. در این قسمت ما بهترین فریم ورک های UI را به همراه مزایا و معایب آن ها شرح می دهیم تا با هر کدام از آن ها بیشتر آشنا شوید.
کتابخانه Bootstrap
یکی از محبوب ترین فریم ورک های UI بوت استرپ می باشد که در HTML و سی اس اس به صورت مشترک استفاده می گردد و توسط توسعه دهندگان شبکه اجتماعی توییتر ساخته شده است و از Less css استفاده می نماید. این فریم ورک تمامی استایل های پایه و کامپوننت های مورد نیاز یک طراح وب را فراهم می آورد و یک فریم ورک رایگان و متن باز می باشد. فریم ورک Bootstrap ساخته شده با طراحی واکنش گرا می باشد که با موبایل به صورت کامل سازگاری داشته و به همین دلیل می تواند سایت های باز شده را با دستگاه های کوچکی مانند موبایل بسیار زیبا ظاهر سازد. فریم ورک بوت استرپ برای تقسیم صفحه از سیستم Grids استفاده می کند به همین دلیل برای طراحی صفحات واکنش گرا یا ریسپانسیو مناسب می باشد.
مزایا:
- دارای محبوبیت فراوان در بین برنامه نویسان ایران و جهان
- این فریم ورک دارای بروزرسانی مداوم می باشد
- پشتیبانی از واکنش گرا بودن یا طراحی ریسپانسیو
- دارای مستندات کامل و جامع
- دارای طیف وسیعی از المان ها
معایب:
- تعداد فراوانی از کلاس های بی استفاده HTML
- دارای حجم نسبتا بالایی از فایل ها
- اینکه بوت استرپ جامع می باشد ممکن است باعث شود که یادگیری آن سخت شود
فریم ورک Semantic ui
یکی دیگر از فریم ورک های تازه وارد و محبوب در طراحی وب Semantic ui می باشد که دارای ویژگی های جالبی مانند انیمیشن های سه بعدی، تنظیم عناصر و ایجاد کامپوننت های مختلف UI می باشد. همچنین یکی دیگر از ویژگی های این فریم ورک تمرکز آن روی سادگی مفاهیم می باشد که تا جایی که ممکن است نام کلاس ها نزدیک به نحوه صحبت کردن شخص نام گذاری می شوند. شهرت اصلی این فریم ورک سادگی آن می باشد و سازندگان مدعی هستند که این فریم ورک برای برنامه نویسانی که در برنامه نویسی طراحی وب تازه کار هستند به راحتی قابل یادگیری است و می توانند از آن استفاده نمایند. کدهای به کار رفته در این فریم ورک دارای خوانایی بالا می باشند و خطایابی شان نیز به راحتی انجام می پذیرد. این فریم ورک حالت های سفارشی بیشتری را نسبت به بوت استرپ فراهم می نماید. فریم ورک Semantic ui به طور رسمی از تعدادی کتابخانه، فریم ورک و سیستم مدیریت محتوا مانند وردپرس و انگولار پشتیبانی می نماید.
مزایا:
- دارای قابلیت شخصی سازی آسان
- نامگذاری مانند گفتگو با مفهوم کلاس های Css که باعث یادگیری آسان آن شده است
- سازگاری با انواع فریم ورک ها مانند React
- در این فریم ورک هر کامپوننت فایل Css و JS خود را دارد به همین دلیل نیازی به بارگذاری کل فایل های فریم ورک برای استفاده از هر کامپوننت نیست
معایب:
- ممکن است این فریم ورک نیازهای پیچیده طراحان حرفه ای را برآورده نکند
- حجم پکیج ها در این فریم ورک نسبت به بوت استرپ بالا می باشد
فریم ورک Foundation
این فریم ورک یکی از فریم ورک های پیشرفته فرانت اند و طراحی رابط کاربری می باشد که به صورت ماژولار و شامل برگه های استایلی sass با ویژگی های واکنش گرا می باشد. از این فریم ورک برای ایجاد ایمیل هایی که در محتوای آن از کدهای HTML وجود دارد استفاده می شود. فریوم ورک Foundation دارای انعطاف پذیری می باشد که بتواند تمامی جزئیات خود را تغییر دهد. این فریم ورک برای افرادی که قصد ایجاد خلاقیت و طراحی حرفه ای را دارند مناسب می باشد. فاندیشن در بازار طراحی وب رقیب سر سخت بوت استرپ می باشد که توسط شرکت Zurb ساخته شد و برای تقسیم صفحه با Foundation از یک شبکه 12 ستونی استفاده می کند. فریم ورک فاندیشن توسط وب سایت هایی مانند فیسبوک، Ebay و موزیلا استفاده گردیده است. این فریم ورک دارای پیچیدگی می باشد و برای افراد تازه کار مناسب نیست.
مزایا:
- نیازی به تعریف سایز هر دستگاه نسیت به همین دلیل به جای پیکسل از REM استفاده شده است
- انعطاف پذیری در طراحی و استایل پذیری فوق العاده
معایب:
- با پیچیدگی های زیاد خود یادگیری را برای افراد سخت می نماید
- فایل های فریمورک دارای حجم زیادی می باشند
فریمورک Materialize
این فریم ورک بهترین فریمورک در زمینه طراحی رابط کاربری است که با HTML و CSS و جاوا اسکریپت طراحی و بر اساس طراحی گوگل متریال تولید گردیده است. فریمورک Materialize با انعطاف پذیری بالای خود یک نمای مدرن را در اختیار کاربر قرار می دهد، همچنین در طراحی متریال ها از آخرین ویژگی طراحی آن ها استفاده شده در نتیجه دارای المان هایی با زیباترین طراحی مربوط به طراحی متریال می باشند. در این فریمورک طراحی ریسپانسیو در Materialize CSS تعبیه شده است و با تغییر ابعاد صفحه نمایش، ظاهر سایت به هم ریخته نمی شود و همچنین به دلیل Cross Browser بودن در تمامی مرورگرهای دنیا به راحتی اجرا می گردد.
مزایا:
- درای قابلیت طراحی ریسپانسیو
- دارای تعداد زیادی از آیکون های پیش فرض
- دارای تعداد زیادی از کامپوننت های داخلی
معایب:
- از Flexbox پشتیبانی نمی کند
- دارای حجم بالایی از فایل ها می باشد
فریمورک Material UI
افرادی که به Material Design علاقه مندند باید ابتدا از فریم ورک Material UI استفاده نمایند زیرا در یادگیری Material Design کمک خواهد نمود. فریمورک Material UI نیز بر طراحی مبتنی بر گوگل متریال است و چند مورد از کامپوننت های React می باشد و همچنین دارای المان های تعاملی و انیمیشن های زیبا می باشد. این فریمورک دارای انعطاف پذیری و شخصی سازی بالایی می باشد و می توان به راحتی از آن استفاده نمود اما نمی تواند تمامی نیازهای پروژه را برطرف نماید.
مزایا:
- توسعه پذیری و شخصی سازی در آن به راحتی انجام می پذیرد
- این فریمورک ساده ترین راه برای یادگیری متریال دیزاین می باشد
معایب:
- برای شروع کار با آن باید از مباحث React درکی داشته باشید
- نمی تواند یک پروژه را از صفر طراحی نماید
فریمورک Pure CSS
حجم کمتر از 4 کیلوبایتی این فریمورک آن را در سبک ترین فریمورک های CSS قرار داده که توسط توسعه دهندگان یاهو ارائه گردیده است. همچنین به جز CSS نمی توان از دیگر کتابخانه ها و مواردی مانند جی کوئری یا جاوا اسکریپت در آن بهره برد. این تنها فریمورکی است که می تواند با رعایت موارد پایه ای و الزامی در کنار بوت استرپ مورد استفاده قرار گیرد. Pure CSS دارای ماژول های فراوانی می باشد که برای استفاده در هر پروژه ای به کار برده می شوند. این فریم ورک اصول مربوط به سئو را رعایت نموده است و استفاده از آن هیچ هزینه ای را در بر نخواهد داشت.
مزایا:
- Pure CSS تعداد مناسبی از المان ها را برای طراحی واکنش گرای صفحه وب در اختیار دارد
- دارای حجم بسیار کمی می باشد
- مناسب برای افرادی که تنها برای طراحی واکنش گرا از فریمورک استفاده می نمایند
معایب:
- عدم پشتیبانی از جاوا اسکریپت
فریمورک Skeleton
این یک فریمورک CSS می باشد که سبکی و سادگی از ویژگی های آن می باشد و دارای قابلیت های کمتری نسبت به دیگر فریمورک ها می باشد و نمایش آن در تمامی سایزهای مانیتور انجام می پذیرد. ویژگی های Skeleton شامل تعریف عناصر مختلف درون صفحه وب، سیستم گرید، المان های ضروری طراحی وب برای فرم ها و جداول و دکمه ها و همچنین طراحی برای موبایل می باشد و چیز دیگری به جز این ها ارائه نمی دهد. Skeleton تنها از حدود 400 خط کد تشکیل شده است و به دنبال نیازهای ضروری و حداقلی می باشد.
مزایا:
- دارای کارایی بالا در پروژه های کوچک می باشد
- این فریمورک از حجم کمی برخوردار است
معایب:
- تعداد المان های موجود در آن محدود می باشند
فریمورک UI Kit-8
UI Kit یکی دیگر از فریمورک های فرانت اند در CSS است که بسیار سبک و ماژولار برای طراحی رابط کاربری می باشد. المان های این فریمورک با استایل متفاوتی وجود دارند و علاوه بر داشتن انیمیشن های وب دارای قابلیت سفارشی سازی نیز می باشد. UI Kit دارای ساختارمندی بسیار خوبی می باشد و علی رغم طراحی رابط کاربری یک گزینه جدید می باشد اما انعطاف پذیری بالایی بهره مند است.
مزایا:
- دارای ساختار ماژولار است
- قابلیت اجرا شدن در پروژه های بزرگ را دارد
- دارای شخصی سازی فراوانی می باشد
معایب
- این فریمورک دارای منابع زیادی نمی باشد به دلیل اینکه این فریمورک جدید می باشد.
فریمورک Bulma
یکی دیگر از فریمورک های محبوب CSS می باشد که وابستگی اجزای آن به Flexbox زیاد است و همین باعث تبدیل شدن آن به یک چارچوب مدرن می گردد. این فریمورک دارای حجم 21 کیلوبایت است که روی نسخه بتا منتشر شده است. این فریم ساده و سریع می باشد و قابلیت شخصی سازی هم دارد که با بهره گیری از Flexbox باعث ایجاد انعطاف پذیری از طریق لایه بندی می گردد.
مزایا:
- ساده و سریع می باشد
- قابلیت انعطاف پذیری و ایجاد لایه بندی را دارد
معایب:
- این فریمورک بر روی نسخه بتا منتشر شده اما باز هم دارای ویژگی های خوبی می باشد
بیشتر بدانیم : آموزش اینستاگرام صفر تا صد
فریمورک Susy
این فریمورک تنها فریمورکی در CSS می باشد که از سیستم Natalie Down ساخته شده است و در طراحی سایت های وردپرس، استاتیک، داینامیک و ... کاربرد دارد. این فریمورک در واقع برای طراحی صفحه بندی های پیشرفته و پیچیده به کار می رود و می تواند محاسبات پیچیده برای تولید صفحات پیچیده و گریدها را مدیریت نماید و می توانید هر نوع صفحه ای که تصور کنید را با آن بسازید.
مزایا:
- در این فریمورک انجام محاسبات گریدبندی به ور اتوماتیک انجام می گیرد
- برای تولید گریدهای پیچیده دارای انعطاف می باشد
معایب:
- این فریمورک گرید از پیش تعریف شده ندارد
- نمی تواند تمامی نیازهای طراحی سایت را پوشش دهد
بیشتر بدانیم : آموزش سی اس اس
از این مطلب دریافتیم که فریمورک های متفاوتی با ویژگی ها و مزایا و معایب خاص خود وجود دارند که می توانند کار برنامه نویسی را برای طراحی صفحات وب راحت کنند. فریمورکی مانند بوت استرپ که یکی از معروفترین و پرکاربردترین فریمورک ها می باشد و هر برنامه نویسی نام آن را شنیده است تعداد زیادی کتابخانه و کدهای آماده دارد که در طراحی سایت به کار برده می شوند اما این ویژگی تنها به این فریمورک محدود نمی شود و همانطور که مشاهده نمودید فریمورک های دیگری با قابلیت های فراوان دیگر در این زمینه وجود دارند که بسته به نوع پروژه می توان یکی از آن را انتخاب نمود و در این مطلب به تعدادی از آن ها اشاره نمودیم.
آیا میشه از این کتابخانه های css در هر فریمورکی مثل ری اکت استفاده کرد؟
بله امکان استفاده در هر فریمورکی هست کافیه نحوه فراخوانی رو بلد باشید