در طراحی سایت، زبان نشانه‌گذاری html به منزله یک ساختمان و زبان css مانند لایه‌ای که طراحی و مسائل زیبایی شناختی را بر روی ساختمان اعمال می‌کند، است. یکی از اجزای اصلی طراحی و توسعه…
در طراحی سایت، زبان نشانه‌گذاری html به منزله یک ساختمان و زبان css مانند لایه‌ای که طراحی و مسائل زیبایی شناختی را بر روی ساختمان اعمال می‌کند، است. یکی از اجزای اصلی طراحی و توسعه وب مدرن، زبان برنامه نویسی css می‌باشد. به طور کلی این بخش از طراحی که با استفاده از css انجام می‌شود، توصیف کننده ظاهر و حالت فرانت اند سایت است. توسعه‌دهندگان وب در حال حاضر، به منظور افزایش بهره‌وری و سرعت عملکردشان، به جای استفاده مستقیم از css، فریم ورک‌های مختلف مربوط به این زبان را استفاده می‌کنند. هرکدام از این فریم ورک‌ها قابلیت‌ها و توانایی‌های ویژه‌ای دارند که طراحان، بنا به نیازشان، آنها را انتخاب و استفاده می‌کنند. در ادامه این مطلب با انواع فریم ورک های css و نحوه استفاده از آنها بیشتر آشنا خواهید شد.
فریم ورک ها چکیده کدهایی از پیش نوشته شده هستند که برای راحتی کدنویسی مورد استفاده قرار می‌گیرند که قابل تغییر توسط برنامه نویس بصورت انتخابی خواهد بود. فریم ورک‌ها دارای یک ساختار از پیش طراحی شده هستند که معمولا به عنوان ساختار اصلی در پروژه‌های مختلف مورد استفاده قرار می‌گیرد.
فریم ورک‌ها به دو نوع فریم ورک‌های back-end و front-end تقسیم می‌شوند.
فریم ورک‌هایی هستند که عموما از زبان برنامه نویسی PHP مشتق شده‌اند و جهت برنامه نویسی در پشت صحنه وب سایت‌ها مورد استفاده قرار می‌گیرند و نتیجه آن به کاربر نمایش داده می‌شود. از مهمترین این فریم ورک‌ها میتوان به Laravel ،React Django و Ruby on Rails اشاره کرد.
فریم ورک‌های front-end فریم ورک‌هایی هستند که طراحان وب سایت برای استایل دادن به وب سایت از آنها استفاده می‌کنند. از مهمترین آنها میتوان به Vue.js ،Angular نام برد. فریم ورک های css نوعی از فریم ورک های front-end هستند که طراحان وب سایت از آنها استفاده می‌کنند.
از مهمترین این نوع فریم ورک‌ها میتوان به Bootstrap ،UIKIT ،Foundation ،Bulma ،Semantic UI اشاره کرد که در ایران بوت استرپ محبوبیت بالایی دارد و اکثر برنامه نویسان از آن برای طراحی سایت استفاده می کنند.
هریک از فریم ورک‌هایی که تا به امروز برای زبان css طراحی شده‌اند، دارای نقاط قوت و ضعف ویژه به خود هستند. در ادامه قصد داریم چند مورد از بهترین آنها را معرفی کنیم تا در زمان انتخاب فریم ورک css با آگاهی کامل این کار را انجام دهید.
یکی از محبوب‌ترین گزینه‌های مربوط به فریم ورک های css در جهان، بوت استرپ نام دارد. این فریم ورک همه استایل‌های پایه و کامپوننت‌هایی که ممکن است یک طراح به آن نیاز داشته باشد را فراهم می‌کند. بیشتر مرورگرهای دنیا توسط بوت استرپ پشتیبانی می‌شوند. Bootstrap با استفاده از طراحی واکنش‌گرا ساخته شده و به طور کامل با موبایل سازگاری دارد.
برای استفاده از بوت استرپ نیازی نیست که شما حتما یک کدنویس حرفه‌ای باشید تا بتوانید سایت خود را توسعه دهید! این فریم ورک برای هر کامپوننت خود یک داکیومنت قدرتمند ارائه می‌کند تا با استفاده از آن بتوانید با حداکثر سرعت به ساخت سایت مورد نظرتان بپردازید. علاوه بر این، باتوجه به سهولت در کاربرد، به راحتی میتوان بدون اتلاف وقت به شیوه کارکرد Bootstrap پی ببرید.
برای بررسی عملکرد مناسب یک سایت بر روی تمامی مرورگرها و دستگاه‌های متفاوت، تست Cross Borwser بسیار حیاتی است. آخرین نسخه این فریم ورک با همه مرورگرهای جدید سازگار است و با استفاده از آن میتوان از سازگاری سایت خود با انواع مرورگر اطمینان حاصل کنید. علاوه بر موارد گفته شده، سایر مزایای Bootstrap که هر توسعه‌دهنده‌ای را ترغیب به استفاده از آن می‌کند، عبارتست از:
شرکت ZURB در سپتامبر سال 2011 فریم ورک محبوب Foundation را طراحی کرد. در مقایسه با سایر فریم ورک های سی اس اس، Foundation اینترفیس پیشرفته‌تر و برجسته‌تری دارد. به عنوان یکی از برترین قابلیت‌های آن میتوان به واکنش‌گرا بودن و سازگاری بالای آن با انواع مرورگر و دیوایس‌ها اشاره کرد. از دیگر ویژگی‌های قابل توجه این است که فرصت‌های زیادی را برای نشان دادن خلاقیت، در اختیار طراحان می‌گذارد. به دلیل قابلیت‌ها و مزایای بی‌نظیر این فریم ورک، طراحان می‌توانند کنترل خوبی بر روی پروژه و شخصی‌سازی آن داشته باشند.
با استفاده از Foundation می‌توانید سایت خود را به گونه‌ای طراحی کنید که از نظر ظاهری نسبت به سایر سایت‌هایی که از فریم ورک مشابه استفاده می‌کنند، منحصر به فرد باشد.
این فریم ورک، این اختیار را به شما می‌دهد که به راحتی بتوانید gutter را حذف کنید و ستون‌ها را با یکدیگر ادغام کنید. انجام این کارها تنها با استفاده از کلاس collapse انجام‌پذیر است. همچنین این امکان وجود دارد که ستون‌هایی به اندازه‌های برابر با کمک گرید blocked-size بسازید. باتوجه به تمامی این ویژگی‌ها، استفاده از فریم ورک Foundation، یک گرید انعطاف‌پذیر در اختیار شما می‌گذارد.
یکی دیگر از فریم ورک های معروف css، بولما است و ویژگی قابل توجه آن وابسته بودن اجزای آن به Flexbox می‌باشد. این موضوع باعث می‌شود تا این فریم ورک به یک چارچوب مدرن تبدیل شود. به طور کلی میتوان این‌طور گفت که بولما تا حدودی ترکیبی از بوت استرپ و Semantic ui است، اما از آنها ساده‌تر می‌باشد. حجم کلی بولما 21 کیلوبایت بوده و در حال حاضر بر روی نسخه بتا منتشر می‌شود.
بولما، ساخت و سفارشی‌سازی اپ‌های مختلف را بسیار آسان کرده است. ادغام واکنش‌گرایی از طریق فلکس باکس نیز قابلیت‌های متفاوت و نوآورانه‌ای را برای طراحان به همراه دارد.
بولما اسناد کاملا شفافی دارد و همین موضوع به توسعه‌دهندگان برای ساخت آسان‌تر پروژه‌هایشان کمک می‌کند.
با استفاده از قابلیت‌های فراوان این فریم ورک که در زمینه‌هایی مانند تایپوگرافی، فرم‌ها، دکمه‌ها، جدول و… است، قدرت بولما روز به روز در حال افزایش می‌باشد.
Tailwind CSS به گونه‌ای طراحی شده که سبک باشد و آزادی عمل را به توسعه‌دهندگان می‌دهد. درواقع این فریمورک، طراحی خاصی ندارد و همین موضوع سبب می‌شود تا بتوانید سبک موردنظر خودتان را در سریع‌ترین زمان ممکن در سایتتان پیاده‌سازی کنید. این فریمورک، هیچ نوع تم پیش فرضی ندارد و شما هیچ کامپوننت UI را به شکل built-in در آن پیدا نمی‌کنید. برای آن که کار شما در استفاده از Tailwind CSS راحت‌تر شود، ویجتهای از پیش طراحی شده‌ای را در آن قرار داده‌اند.
در این فریم ورک، اگر به هر دلیل تصمیم به تغییر یک المنت خاص بگیرید، دیگر جای نگرانی بابت تغییر سایر موارد وصل شده به آن المنت وجود ندارد و هیچ نوع بی‌نظمی و تغییرات ناخواسته ایجاد نمی‌شود.
زمانی که به طور کامل با سینتکس این فریم ورک آشنا شوید، استفاده از آن بسیار آسان خواهد شد و دیگر نیازی به سوییچ‌های مکرر بین css و html وجود ندارد. از دیگر مزیت‌های Tailwind CSS میتوان به قابلیت آن در سفارشی‌سازی و سرعت توسعه بالای آن اشاره کرد.
قبل از شروع استفاده از فریمو رک ابتدا باید آن را در پروژه خود وارد کنیم. برخی از فریم ورک‌ها فقط دارای فایل‌هایی با پسوند css هستند که برای استایل دادن به پروژه مورد استفاده قرار می‌گیرند. این فایل‌های css به دو صورت فشرده و معمولی وجود دارند که نسخه معمولی جهت استفاده توسعه دهندگان وب مورد استفاده قرار می‌گرد و فایل فشرده بیشتر برای طراحان استفاده می‌شود.
برخی دیگر از فریم ورک های css حاوی فایل‌هایی با فرمت‌های css و js هستند که علاوه بر استایل دادن به وب سایت جهت اضافه کردن از اسلاید شو و انیمیشن به وب سایت مورد استفاده قرار می‌گیرند که این نوع فایل‌ها هم شامل دو مدل فشرده و معمولی هستند.
به دو روش میتوان یک فریمورک را به پروژه اضافه کرد:
امروزه تعداد کمی از توسعه‌دهندگان هستند که در زمان استفاده از css به سراغ فریم ورک‌های آن نمی‌روند! به روی کار آمدن فریم ورک‌ها، کار طراحان و توسعه‌دهندگان را تا حد زیادی راحت‌تر کرده و باعث شده تا پروژه‌های طراحی سایت، با سرعت بالا و حداقل ایرادات انجام شود. در این مقاله، چند مورد از مهمترین و محبوب‌ترین فریم ورک های css را معرفی کردیم و با مفهوم کلی فریمورک و نحوه استفاده از آن ها نیز آشنا شدید.
HTML5 & CSS3 Markup
اولین گام برای ورود به دنیای برنامه نویسی
