زمانی که صحبت از طراحی سایت می‌شود، اولین مفاهیمی که به ذهن ما می‌رسند HTML و CSS هستند. دو زبان نشانه گذاری که اولی اسکلت صفحات وب را ساخته و دومی مثل پوست و استخوان روی این بدن سوار می‌شود. هر چند HTML و CSS از شما متخصص برنامه نویس رابط کاربری نمی‌سازد، اما یادگیری آن‌ها برای حرفه‌ای شدن ضروری است. با اینکه CSS خالص (Pure CSS) به تنهایی بسیار قدرتمند است و تقریبا هر نوع تغییری در ظاهر سایت با آن امکان‌پذیر می‌باشد، اما گاهی به خاطر مسائلی مثل بالا بردن سرعت کار یا استاندارد کردن کدها سراغ فریم ورک‌های CSS می‌رویم. در این مطلب 6 مورد از برترین فریم ورک‌های CSS را با هم بررسی خواهیم کرد. همراه ما باشید.

آیا استفاده از فریم ورک‌های CSS پیشنهاد خوبی است؟

امروزه فریم ورک‌ها بسیار محبوب شده اند و استفاده از آنها تبدیل به یک استاندارد شده است. چون بسیاری از اجزا و اِلمان‌های طراحی سایت از قبل داخل کتابخانه‌ها تعریف شده اند و برنامه نویس می‌تواند به راحتی از آنها استفاده کند. به کمک فریم ورک دیگر لازم نیست چرخ را دوباره از نو بسازیم و درگیر مسائل تکراری بشویم. البته این فریم ورک‌ها مثل هر تکنولوژی دیگر معایبی هم دارند. برای مثال یک نمونه Landing Page ساده که از بوت استرپ فشرده شده استفاده می‌کند، ممکن است تا 90% فایل‌های CSS آن هیچ کاربردی در صفحه وب نداشته باشند. اما در حالت کلی مزایای فریم ورک‌ها بیشتر از معایبشان بوده و کفه ترازو به نفعشان سنگینی می‌کند.

بیشتر بخوانید: CSS چیست و چرا باید از آن استفاده کنیم؟

آشنایی با فریم ورک بوت استرپ

Bootstrap بزرگترین فریم ورک CSS برای طراحی صفحات سمت کاربر یا فرانت اند است. در بوت استرپ سه تکنولوژی HTML، CSS و جاوا اسکریپت در کنار هم قرار گرفته‌اند و به راحت‌ترین شکل ممکن می‌توانید از آنها در پروژه خود استفاده کنید. یعنی اگر با HTML و CSS آشنایی داشته باشید یادگیری بوت استرپ بسیار آسان خواهد بود. بوت استرپ رایگان و متن باز است. این فریم ورک از سیستم شبکه بندی (Grids) برای تقسیم صفحه استفاده می‌کند و به همین خاطر برای طراحی صفحات ریسپانسیو یا واکنش گرا گزینه خوبی به حساب می‌آید. از هر پارامتری برای مقایسه بوت استرپ یا سایر کتابخانه‌ها استفاده کنیم، باز هم بوت استرپ از رقیبان خودش یک قدم جلوتر است. از لحاظ تعداد سایت‌های ساخته شده، ترافیک سایت اصلی بوت استرپ بر اساس آمار الکسا، محبوبیت بین توسعه دهندگان با استناد به سایت گیت هاب و موارد دیگر.

معرفی و بررسی فریم ورک Foundation

نمی‌شود راجع به برترین فریم ورک‌های CSS صحبت کرد و نامی از فاندیشن نبرد. فاندیشن در بازار فریم ورک‌های فرانت اند رقیب اصلی و سرسخت بوت استرپ حساب می‌شود. یک فریم ورک اوپن سورس و رایگان برای طراحی واکنش گرا رابط کاربری می‌باشد که کامپوننت‌های آماده فراوانی در اختیار برنامه نویس قرار می‌دهد. شرکت Zurb سازنده این فریم ورک است که با Foundation از یک شبکه 12 ستونی برای تقسیم صفحه استفاده می‌کند. می‌توانید داخل این سیستم عرض عناصر صفحه را با % نشان دهید یا از مدیا کوئری‌ها استفاده کنید. به این ترتیب دیگر مهم نیست دستگاهی که سایت شما را نشان می‌دهد آیفون، بلک بری یا حتی یک تلویزیون هوشمند باشد. در هر حالت اندازه‌ها به درستی تغییر می‌کنند. چند پلاگین جاوا اسکریپت مثل Orbit و Reveal داخل Foundation تعریف شده اند تا کار با اسلایدرها و ماژول‌های تصویر را راحت‌تر کنند.

آشنایی با فریم ورک Semantic UI

سایت‌ها نقاط مشترک زیادی با هم دارند. فریم ورک‌ها کمک می‌کنند این نقاط مشترک را در کمترین زمان ممکن ساخته و زمان خود را روی مسائل مهم‌تر بگذارید. Semantic UI یکی از این فریم ورک‌ها است که به شما کمک می‌کند به جای اینکه تمام عناصر سایت را از اول بسازید، از کامپوننت‌های آماده استفاده کنید.  Semantic UI به آسانی قابل یادگیری است و سایت اصلی مستندسازی قدرتمندی برای آن انجام داده است. کدهای این فریم ورک بسیار خوانا هستند و خطایابی کدها نیز راحت می‌باشد. همچنین Semantic UI به خوبی با سایر فریم ورک‌ها مثل React یا Angular ادغام می‌شود.

بیشتر بخوانید: HTML چیست و چه کاربردی دارد؟ توضیح مفاهیم همراه با مثال

فریم ورک Pure.CSS ساخت شرکت یاهو

Pure.css یک فریم ورک CSS است که توسط شرکت یاهو طراحی و معرفی شده است. Pure.css بسیار سبک بوده و تنها 4 کیلوبایت حجم دارد. به عبارتی Pure.css مجموعه ای از ماژول‌های ریسپانسیو CSS است که بدون نیاز به نصب وابستگی‌ها (Dependencies) می‌توانید آن را به پروژه خود اضافه کنید. این فریم ورک اصول مربوط به سئو را رعایت کرده است و استفاده از آن مثل بیشتر رقبایش هیچ هزینه ای برای شما ندارد. برای کار با سایه‌ها و رنگ‌های روشن Pure.css انتخاب خوبی به نظر می‌رسد. این رنگ‌ها در سیستم عامل‌ها و دستگاه‌های مختلف کیفیت خود را حفظ می‌کنند. می‌توانید برای بهبود رابط کاربری خود یا اضافه کردن قابلیت‌های دیگر، Pure.css را در کنار بوت استرپ استفاده کنید و از قدرت هر دو فریم ورک بهره مند شوید.

فریم ورک سبک و قدرتمند UIKit

UIKit یک فریم ورک سبک و ماژولار است که به شما اجازه می‌دهد با سرعت بالا ظاهر سایت خود را بسازید. UIKit از پیش پردازنده‌های Sass و Less استفاده کرده، ساختار خوبی دارد و به خوبی قابل توسعه است. اگر دوست ندارید رابط کاربری شما تکراری باشد و شبیه به سایت‌های دیگر شود، UIKit به کمک Themeها این قابلیت را در اختیار شما می‌گذارد تا ظاهر اختصاصی خودتان را طراحی کنید. UIKit به خوبی در موبایل، تبلت، لپ تاپ و PC ظاهر خودش را حفظ می‌کند. این فریم ورک هماهنگی خوبی با وردپرس دارد و توصیه می‌کنیم توسعه دهندگان وردپرس از آن استفاده کنند. مثلا اگر پلاگینی برای وردپرس نوشته اید می‌توانید به جای بوت استرپ از UIKit استفاده کنید.

فریم ورک زیبا و حرفه ای Materialize CSS

یک کتابخانه طراحی رابط کاربری یا UI است که مثل بیشتر کتابخانه‌هایی که معرفی کردیم با HTML CSS و جاوا اسکریپت طراحی شده است. پشت Materialize CSS شرکت گوگل قرار دارد که به احتمال زیاد همین نکته شما را وسوسه می‌کند تا آن را امتحان کنید. طراحی ریسپانسیو به صورت داخلی در Materialize CSS تعبیه شده و تغییر ابعاد صفحه نمایش ظاهر سایت شما را به هم نمی‌ریزد. به خاطر Cross Browser بودن Materialize CSS سایت در تمام مرورگرهای مطرح دنیا به درستی رندر و اجرا می‌شود. همینطور این فریم ورک بسیار سبک و Flat است و استفاده از آن بار اضافه ای به پروژه شما اضافه نمی‌کند.

نتیجه گیری 

فریم ورک‌های متنوعی برای طراحی ظاهر سایت وجود دارند که کار را برای برنامه نویس‌ها راحت می‌کنند. می‌توانید به جای استفاده جداگانه از HTML، CSS و جاوا اسکریپت، آنها را با هم ترکیب کرده و کدهای خود را در قالب یک فریم ورک بنویسید. بیشتر برنامه نویس‌ها اسم بوت استرپ را شنیده و آن را می‌شناسند، اما به جز بوت استرپ تعداد زیادی فریم ورک و کتابخانه وجود دارد که در طراحی پوسته سایت به شما کمک می‌کنند. در این مطلب ما 6 مورد از برترین فریم ورک‌های CSS را معرفی کردیم و شما هم می‌توانید پیشنهادات خود را در بخش نظرات با ما و کاربران سون لرن به اشتراک بگذارید.