طراحی سایت

بهترین فریم ورک های CSS: معرفی ۹ فرم ورک برای طراحی سایت و UI

نویسنده: تحریریه آرسافت

حتما می دانید که برای طراحی UI سایت باید از زبان های برنامه نویسی HTML و CSS استفاده کنیم. کسانی که تجربه طراحی سایت با کدنویسی اچ تی ام ال و سی اس اس را دارند به خوبی می دانند که این کار تا چه اندازه خسته کننده است. این درد مشترک همه برنامه نویسان UI است. برای رفع این مشکل باید از فریم ورک های CSS استفاده کرد.

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

در ادامه پرکاربردترین فریم ورک های CSS برای طراحی فرانت اند سایت معرفی شده اند. با ما همراه باشید.

فریم ورک CSS چیست و چه کاری انجام می دهد؟

فریم ورک CSS مجموعه ای از کدهای CSS است که در قابل شیوه نامه (Style Sheet) ارائه می شود و توسعه دهنده با استفاده از آن می تواند طراحی از پیش تعیین شده را روی برچسب (Tag) های HTML پیاده سازی کرده یا طراحی خاصی را در صفحه وب خود پیاده سازی نماید. به عبارت دیگر توسعه دهنده وب تنها با استفاده از تگ یا کلاس های خاصی که در فریم ورک تعریف شده است می تواند طراحی مورد نظر خود را در صفحه وب قرار دهد.

اگر همچنان عملکرد فریم ورک های CSS برای شما مبهم است نگران نباشید، برای درک بهتر توضیحات دقیق تر می دهیم. فرض کنید شما می خواهید یک جدول در سایت خود قرار دهید که ظاهر مناسبی داشته باشد و مقادیر داخل آن به خوبی نمایش داده شود. برای ساخت این جدول با کدنویسی CSS و رفع اشکالات آن حداقل باید ۱ ساعت زمان صرف کنید. در حالی که طراحی چنین جدولی با فریم ورک های مربوطه تنها چند لحظه طول می کشد. کافیست کلاس مربوط به طراحی جدول را به تگ Table بدهید و تمام!

این تنها یک نمونه از قابلیت های فریم ورک های CSS است. در این فریم ورک ها عناصر و تگ های رایج و پرکاربرد مثل جدول، دکمه، پاراگراف، تصویر و ... از پیش در قالبی مناسب طراحی شده اند. همچنین امکانات پرکاربرد دیگر مثل فاصله عناصر، بوردر، ستون بندی، نسخه واکنش گرا و ... هم در این فریم ورک ها تعبیه شده که کار طراحی سایت را بسیار سریع می کند.

خلاصه این که فریم ورک های CSS ابزارهای بسیار پرکاربرد و مفیدی هستند که اگر کسی در یک پروژه از آنها استفاده کند دیگر به هیچ عنوان حاضر نیست آنها را کنار گذاشته و مجدد کدنویسی CSS انجام دهد.   

بهترین و مشهورترین فریم ورک های CSS

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

۱. فریم ورک Bootstrap (بوت استرپ)

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

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

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

۲. فریم ورک Tailwind CSS (تِیل ویند)

Tailwind CSS تقریبا شبیه به بوت استرپ است و کلاس های مشابه ای با آن دارد اما یک تفاوت اساسی با آن دارد. در تیل ویند طراحی های بسیار جزئی و گسترده ای از پیش انجام شده و روی کلاس های CSS پیاده شده اند. این طراحی ها به اندازه ای گسترده هستند که دست توسعه دهنده را برای ایجاد هر نوع طراحی با استفاده از کلاس های Tailwind باز گذاشته است. با تیل ویند شما می توانید طراحی بسیار اختصاصی انجام دهید بدون این که کمترین کدنویسی CSS را انجام دهید.

در Tailwind CSS هیچ طراحی پیش فرضی برای تگ ها انجام نشده است. یعنی با اضافه کردن این کتابخانه به تنهایی تغییری روی ظاهر عناصر رخ نمی دهد و حتما باید از کلاس های مخصوص برای طراحی استفاده شود. استفاده از این کتابخانه گسترده CSS بیشتر برای افرادی مناسب است که نیاز به طراحی جزئی و متنوع دارند و با کلاس های بوت استرپ نمی توانند این کار را انجام دهد.

دیگر فریم ورک های CSS

در بخش قبل بهترین و کاربردی ترین فریم ورک های CSS خدمت شما معرفی شد که از شهرت بالایی برخوردار بودند. اما این تمام فریم ورک های CSS نیست. تعداد دیگری فریم ورک هم وجود دارد که همچون موارد قبلی قوی و کاربردی نیستند و تقریبا همان خدمات را با کیفیت پایین تری ارائه می کنند.

۳. فریم ورک Bulma (بولما)

Bulma فریم ورکی است که شباهت کاملی به بوت استرپ دارد. به این معنی همچون bootstrap برای تغییر ظاهر هر عنصر یک کلاس مخصوصی در نظر گرفته شده است. لذا کارایی این فریم ورک تقریبا شبیه به بوت استرپ است و با توجه به شهرت و کیفیتی که بوت استرپ دارد عملا نیازی به استفاده از این فریم ورک وجود ندارد.

ضمنا فریم ورک بولما تنها مبتنی بر CSS است و برخلاف بوت استرپ دارای فایل JavaScript نیست و طبعا از قابلیت های مربوط به آن بی بهره می باشد. 

۴. فریم ورک Materialize (مَتریالایز)

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

فریم ورک متریالایز امکاناتی ترکیبی بر پایه CSS و JavaScript دارد که نیازهای ضروری توسعه دهندگان را بر طرف می کند. تنها کافیست تابع مربوط فراخوانی شود. 

۵. فریم ورک UIKit (یو آی کیت)

فریم ورک UIKit در نگاه اول بسیار خشک و سنتی به نظر می رسد و احساس می شود طراحی آن برای حداقل ۱۰ سال قبل است. اگر برنامه نویسی با فریم ورک های بوت استرپ و تیل ویند کار کرده باشد خیلی بعید است بتواند طراحی و UI فریم ورک یو آی کیت را تحمل کند و آن را جایگزین طراحی های مدرن کند. ضمن این که این نوع طراحی دیگر منسوخ شده و در وب سایت های مدرن به چشم نمی خورد. 

اما برگ برنده UIKit نسبت به آن دو فریم ورک مشهور امکاناتی است که آن را فراتر از یک فریم ورک CSS تبدیل می کند. در واقع UIKit در بر دارنده امکاناتی ترکیبی از CSS و JavaScript است. امکاناتی نظیر انیمیشن، اسلایدر، دکمه برو به بالا، دکمه آپلود فایل و ... که بسیار پرکاربرد هستند و بعضا برای استفاده از هر یک از آنها نیاز به اضافه کردن یک کتابخانه است. در حالی که تمام این ها در یو آی کیت جای گرفته است.

۶. فریم ورک Foundation (فوندیشن)

Foundation هم همچون موارد قبلی شبیه به بوت استرپ نوشته شده است و از CSS و JavaScript به صورت هم زمان بهره برده است. البته که طراحی های آن و کلاس های مربوط به آنها با Bootstrap تفاوت دارد اما کارکرد آن شبیه به همان است. در فوندیشن برای استفاده از قابلیت ها علاوه بر کلاس ها می توان از صفت ها (Attributes) هم استفاده کرد. 

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

۷. فریم ورک Semantic UI (سِمنتیک یو آی)

Semantic UI گرچه یک فریم ورک CSS است اما کاربردی فراتر از آن دارد. امکانات جانبی سمنتیک یو آی همچون Reveal (نمایش تصویر با موس هاور)، Step (مراحل خرید کالا)، رتبه بندی ستاره ای و ... آن را به جعبه ابزاری تبدیل کرده که چندیدن کتابخانه جاوااسکریپت در آن جای گرفته است. همان چیزی که در فریم ورک UIKit به چشم می خورد. 

نحوه استفاده از این قابلیت ها هم همچون جی کوئری (jQuery) است. هر یک از قابلیت ها برای خود یک تابع یا متد (Method) دارد. برای استفاده از آن باید با انتخابگر (Selector) عنصر مورد نظر را انتخاب کرده و تابع مربوط به قابلیت مورد نظر را اجرا کنید. فریم ورک Semantic هم همچون بسیاری از رقبای خود از ضعف طراحی و قدیمی بودن UI رنج می برد.

۸. فریم ورک Pure CSS (پیور سی اس اس)

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

۹. فریم ورک Skeleton (اسکلتن)

Skeleton همچون فریم ورک Pure فریم ورکی سبک و کم حجم برای طراحی پروژه های ساده و سبک است و در آن تنها امکانات بسیار ضروری و لازم در طراحی همچون شبکه بندی، ورودی فرم، دکمه ها و ... تعبیه شده است. شاید با این وضعیت اصلا نتوان آن را فریم ورک نامید. UI بکار رفته در این کتابخانه هم مثل دیگران ساده و تا حدی سنتی است. 

استفاده از کدام فریم ورک بهتر است؟

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

اما بسته به نیاز توسعه دهنده برای طراحی می توان استفاده از هر یک از فریم ورک ها را به او پیشنهاد کرد. بر همین اساس در ادامه فریم ورک های مناسب بر اساس نیاز افراد معرفی شده است.

  • اگر دنبال طراحی زیبا و بروز هستید: بهترین گزینه برای شما فریم ورک های Bootstrap و Tailwind است. به این دلیل که طراحی زیبا و مدرن در آنها بکار رفته و به صورت مداوم این طراحی بروز می شود.
  • اگر دنبال شخصی سازی زیاد هستید: فریم ورک مناسب Tailwind CSS است چراکه در میان تمام فریم ورک ها بالاترین میزان شخصی سازی را دارا می باشد. ضمن این که طراحی زیبا و بروزی دارد.
  • اگر دنبال امکانات زیاد هستید: فریم ورک های UIKit و Semantic UI و همچنین Materialize برای شما مناسب هستند. این فریم ورک ها مثل یک جعبه ابزار هستند که کتابخانه های پرکاربرد در آنها جای داده شده است و نیاز شما را تا حد زیادی رفع می کند. اگرچه طراحی سنتی و دلگیری دارند. 
  • اگر دنبال فریم ورک سبک هستید: فریم ورک های Pure و Skeleton برای شما مناسب است و امکانات پایه یک فریم ورک را در حجمی بسیار کم در اختیار شما قرار می دهند.

جمع بندی

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