فریمورک های css و نحوه استفاده از آن ها


در طراحی سایت، زبان نشانه‌گذاری html به منزله یک ساختمان و زبان css مانند لایه‌ای که طراحی و مسائل زیبایی شناختی را بر روی ساختمان اعمال می‌کند، است. یکی از اجزای اصلی طراحی و توسعه…

در طراحی سایت، زبان نشانه‌گذاری html به منزله یک ساختمان و زبان css مانند لایه‌ای که طراحی و مسائل زیبایی شناختی را بر روی ساختمان اعمال می‌کند، است. یکی از اجزای اصلی طراحی و توسعه وب مدرن، زبان برنامه نویسی css می‌باشد. به طور کلی این بخش از طراحی که با استفاده از css انجام می‌شود، توصیف کننده ظاهر و حالت فرانت اند سایت است. توسعه‌دهندگان وب در حال حاضر، به منظور افزایش بهره‌وری و سرعت عملکردشان، به جای استفاده مستقیم از css، فریم ورک‌های مختلف مربوط به این زبان را استفاده می‌کنند. هرکدام از این فریم ورک‌ها قابلیت‌ها و توانایی‌های ویژه‌ای دارند که طراحان، بنا به نیازشان، آن‌ها را انتخاب و استفاده می‌کنند. در ادامه این مطلب با انواع فریم ورک‌ های css و نحوه استفاده از آن‌ها بیشتر آشنا خواهید شد.

فریم ورک چیست؟

فریم ورک ها چکیده کدهایی از پیش نوشته شده هستند که برای راحتی کدنویسی مورد استفاده قرار می‌گیرند که قابل تغییر توسط برنامه نویس بصورت انتخابی خواهد بود. فریم ورک‌ها دارای یک ساختار از پیش طراحی شده هستند که معمولا به عنوان ساختار اصلی در پروژه‌های مختلف مورد استفاده قرار می‌گیرد.

فریم ورک های زبان های برنامه نویسی

انواع فریم ورک

فریم ورک‌ها به دو نوع فریم ورک‌های back-end و front-end تقسیم می‌شوند.

فریمورک های back-end

فریم ورک‌هایی هستند که عموما از زبان برنامه نویسی PHP مشتق شده‌اند و جهت برنامه نویسی در پشت صحنه وب سایت‌ها مورد استفاده قرار می‌گیرند و نتیجه آن به کاربر نمایش داده می‌شود. از مهمترین این فریم ورک‌ها می‌توان به Laravel ،React Django و Ruby on Rails اشاره کرد.

فریم ورک بک اند

فریم ورک‌های front-end

فریم ورک‌های front-end فریم ورک‌هایی هستند که طراحان وب سایت برای استایل دادن به وب سایت از آنها استفاده می‌کنند. از مهمترین آن‌ها می‌توان به Vue.js ،Angular نام برد. فریم ورک‌ های css نوعی از فریم ورک های front-end هستند که طراحان وب سایت از آن‌ها استفاده می‌کنند.

از مهم‌ترین این نوع فریم ورک‌ها میتوان به Bootstrap ،UIKIT ،Foundation ،Bulma ،Semantic UI اشاره کرد که در ایران بوت استرپ محبوبیت بالایی دارد و اکثر برنامه نویسان از آن برای طراحی سایت استفاده می کنند.

فریم ورک فرانت اند

معرفی بهترین فریم ورک‌ های css

هریک از فریم ورک‌هایی که تا به امروز برای زبان css طراحی شده‌اند، دارای نقاط قوت و ضعف ویژه به خود هستند. در ادامه قصد داریم چند مورد از بهترین آن‌ها را معرفی کنیم تا در زمان انتخاب فریم ورک css با آگاهی کامل این کار را انجام دهید.

 

حتما بخوانید: css چیست و چه کاربردی دارد؟

 

فریم ورک Bootstrap

یکی از محبوب‌ترین گزینه‌های مربوط به فریم ورک‌ های css در جهان، بوت استرپ نام دارد. این فریم ورک همه استایل‌های پایه و کامپوننت‌هایی که ممکن است یک طراح به آن نیاز داشته باشد را فراهم می‌کند. بیشتر مرورگرهای دنیا توسط بوت استرپ پشتیبانی می‌شوند. Bootstrap با استفاده از طراحی واکنش‌گرا ساخته شده و به طور کامل با موبایل سازگاری دارد.

مزایای فریمورک Bootstrap

صرفه‌جویی در زمان

برای استفاده از بوت استرپ نیازی نیست که شما حتما یک کدنویس حرفه‌ای باشید تا بتوانید سایت خود را توسعه دهید! این فریم ورک برای هر کامپوننت خود یک داکیومنت قدرتمند ارائه می‌کند تا با استفاده از آن بتوانید با حداکثر سرعت به ساخت سایت مورد نظرتان بپردازید. علاوه بر این، باتوجه به سهولت در کاربرد، به راحتی می‌توان بدون اتلاف وقت به شیوه کارکرد Bootstrap پی ببرید.

جلوگیری از هرگونه ناسازگاری بین مرورگرها برای ویژگی‌های تستی

برای بررسی عملکرد مناسب یک سایت بر روی تمامی مرورگرها و دستگاه‌های متفاوت، تست Cross Borwser بسیار حیاتی است. آخرین نسخه این فریم ورک با همه مرورگرهای جدید سازگار است و با استفاده از آن می‌توان از سازگاری سایت خود با انواع مرورگر اطمینان حاصل کنید. علاوه بر موارد گفته شده، سایر مزایای Bootstrap که هر توسعه‌دهنده‌ای را ترغیب به استفاده از آن می‌کند، عبارتست از:

  • ثبات و کار تیمی بهتر به دلیل سازگاری با تمامی دیوایس‌ها
  • منحنی یادگیری پایین (learning curve)
  • نگهداری مناسب از پایگاه کد

فریمورک Foundation – فریمورک واکنش‌گرا فرانت-اند

شرکت ZURB در سپتامبر سال 2011 فریم ورک محبوب Foundation را طراحی کرد. در مقایسه با سایر فریم ورک‌ های سی اس اس، Foundation اینترفیس پیشرفته‌تر و برجسته‌تری دارد. به عنوان یکی از برترین قابلیت‌های آن می‌توان به واکنش‌گرا بودن و سازگاری بالای آن با انواع مرورگر و دیوایس‌ها اشاره کرد. از دیگر ویژگی‌های قابل توجه این است که فرصت‌های زیادی را برای نشان دادن خلاقیت، در اختیار طراحان می‌گذارد. به دلیل قابلیت‌ها و مزایای بی‌نظیر این فریم ورک، طراحان می‌توانند کنترل خوبی بر روی پروژه و شخصی‌سازی آن داشته باشند.

 

پیشنهاد ویژه: آموزش برنامه نویسی جامع 

 

مزایای Foundation

منحصر به فردی بالا

با استفاده از Foundation می‌توانید سایت خود را به گونه‌ای طراحی کنید که از نظر ظاهری نسبت به سایر سایت‌هایی که از فریم ورک مشابه استفاده می‌کنند، منحصر به فرد باشد.

انعطاف بالا در گریدها

این فریم ورک، این اختیار را به شما می‌دهد که به راحتی بتوانید gutter را حذف کنید و ستون‌ها را با یکدیگر ادغام کنید. انجام این کارها تنها با استفاده از کلاس collapse انجام‌پذیر است. همچنین این امکان وجود دارد که ستون‌هایی به اندازه‌های برابر با کمک گرید blocked-size بسازید. باتوجه به تمامی این ویژگی‌ها، استفاده از فریم ورک Foundation، یک گرید انعطاف‌پذیر در اختیار شما می‌گذارد.

فریم ورک Bulma

یکی دیگر از فریم ورک های معروف css، بولما است و ویژگی قابل توجه آن وابسته بودن اجزای آن به Flexbox می‌باشد. این موضوع باعث می‌شود تا این فریم ورک به یک چارچوب مدرن تبدیل شود. به طور کلی می‌توان این‌طور گفت که بولما تا حدودی ترکیبی از بوت استرپ و Semantic ui است، اما از آن‌ها ساده‌تر می‌باشد. حجم کلی بولما 21 کیلوبایت بوده و در حال حاضر بر روی نسخه بتا منتشر می‌شود.

مزایای Bulma

طراحی آسان و خلاقانه

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

داکیومنت کامل

بولما اسناد کاملا شفافی دارد و همین موضوع به توسعه‌دهندگان برای ساخت آسان‌تر پروژه‌هایشان کمک می‌کند.

همه کاره بودن

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

فریمورک Tailwind CSS

Tailwind CSS به گونه‌ای طراحی شده که سبک باشد و آزادی عمل را به توسعه‎دهندگان می‌دهد. درواقع این فریمورک، طراحی خاصی ندارد و همین موضوع سبب می‌شود تا بتوانید سبک موردنظر خودتان را در سریع‌ترین زمان ممکن در سایتتان پیاده‌سازی کنید. این فریمورک، هیچ نوع تم پیش فرضی ندارد و شما هیچ کامپوننت UI را به شکل built-in در آن پیدا نمی‌کنید. برای آن که کار شما در استفاده از Tailwind CSS راحت‌تر شود، ویجت‎های از پیش طراحی شده‌ای را در آن قرار داده‌اند.

مزایای Tailwind CSS

عدم ایجاد بی‌نظمی با اعمال تغییرات

در این فریم ورک، اگر به هر دلیل تصمیم به تغییر یک المنت خاص بگیرید، دیگر جای نگرانی بابت تغییر سایر موارد وصل شده به آن المنت وجود ندارد و هیچ نوع بی‌نظمی و تغییرات ناخواسته ایجاد نمی‌شود.

سهولت در استفاده

زمانی که به طور کامل با سینتکس این فریم ورک آشنا شوید، استفاده از آن بسیار آسان خواهد شد و دیگر نیازی به سوییچ‌های مکرر بین css و html وجود ندارد. از دیگر مزیت‌های Tailwind CSS می‌توان به قابلیت آن در سفارشی‌سازی و سرعت توسعه بالای آن اشاره کرد.

 

پیشنهاد ویژه: آموزش طراحی سایت صفر تا صد به صورت پروژه محور

 

نحوه کار با فریم ورک های CSS

قبل از شروع استفاده از فریمو رک ابتدا باید آن را در پروژه خود وارد کنیم. برخی از فریم ورک‌ها فقط دارای فایل‌هایی با پسوند css هستند که برای استایل دادن به پروژه مورد استفاده قرار می‌گیرند. این فایل‌های css به دو صورت فشرده و معمولی وجود دارند که نسخه معمولی جهت استفاده توسعه دهندگان وب مورد استفاده قرار می‌گرد و فایل فشرده بیشتر برای طراحان استفاده می‌شود.

برخی دیگر از فریم ورک‌ های css حاوی فایل‌هایی با فرمت‌های css و js هستند که علاوه بر استایل دادن به وب سایت جهت اضافه کردن از اسلاید شو و انیمیشن به وب سایت مورد استفاده قرار می‌گیرند که این نوع فایل‌ها هم شامل دو مدل فشرده و معمولی هستند.

آموزش طراحی سایت با استفاده از فریمورکهای css

نحوه اضافه کردن فریمورک به پروژه

به دو روش می‌توان یک فریمورک را به پروژه اضافه کرد:

  1. روش اول بدین صورت است که فایل مربوط به پروژه را از وب‌سایت دریافت کرده و بسته به نوع پروژه از میان دو نوع فایل فشرده و معمولی یکی را انتخاب کرده پروژه آدرس دهی کنیم.
  2. روش دوم بدین صورت می‌باشد که آدرس فایل‌های css و js مربوط به فریم ورک را از وب‌سایت cdnjs پیدا کرده و به پروژه اضافه می‌کنیم. فرق این روش با روش قبل این است که هربار فایل‌های فریم ورک مربوطه در هر لود شدن وبسایت دانلود خواهند شد.

جمع بندی

امروزه تعداد کمی از توسعه‌دهندگان هستند که در زمان استفاده از css به سراغ فریم ورک‌های آن نمی‌روند! به روی کار آمدن فریم ورک‌ها، کار طراحان و توسعه‌دهندگان را تا حد زیادی راحت‌تر کرده و باعث شده تا پروژه‌های طراحی سایت، با سرعت بالا و حداقل ایرادات انجام شود. در این مقاله، چند مورد از مهم‌ترین و محبوب‌ترین فریم ورک‌ های css را معرفی کردیم و با مفهوم کلی فریمورک و نحوه استفاده از آن ها نیز آشنا شدید.

 

پیشنهاد ویژه: آموزش html و css

 

 

مدیر سایت

دوره آموزشی پیشنهادی

آموزش کدنویسی HTML5 و CSS3

HTML5 & CSS3 Markup

اولین گام برای ورود به دنیای برنامه نویسی

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

نشانی ایمیل شما منتشر نخواهد شد.




مشاوره رایگان بگیرید 05138820500 9:00 تا 16:00

×
roshdana aparat roshdana instagram roshdana twitter roshdana telegram roshdana linkedin