در زمان های قبل شما CSS را برای هر عنصر به صورت دستی کدگذاری میکردید و با سختی های زیادی همراه بود و ساعت ها و حتی در بعضی موارد روز ها زمان میبرد که طرح مد نظر را پیاده کنید. CSS از زمان صفحات خام HTML راه درازی را پیموده است و یکی از مهم ترین پیشرفت ها ایجاد و گسترش فریمورک های CSS است. این ابزارها ساخت و راه اندازی پروژه های جدید، کوچک و بزرگ را برای توسعه دهندگان و طراحان بسیار آسان تر می کند.
این ابزارها همچنین تأثیر زیادی بر کاربران و نحوه تجربه ما از وب دارند. فریم‌ورک‌ها یک زبان مشترک برای UI و UX در وب‌سایت‌ها و برنامه‌های کاربردی ایجاد می‌کنند و تقریباً هر سایتی را برای درک، دسترسی و استفاده آسان‌تر می‌کند.
امروزه از هر 4 وب سایت در اینترنت، 1 مورد با استفاده ازفریمورک CSS ساخته می شود. در این مقاله، 6 مورد از محبوب‌ترین فریم‌ورک‌ها و نحوه استفاده از آن‌ها توسط همه افراد بررسی خواهیم کرد.
فریمورک CSS چیست؟
یک فریمورک CSS یک کتابخانه از پیش آماده شده از کدها است که برای کمک به پیاده سازی سریع و سازگار استایل و طرح بندی(layouts) وب سایت استفاده میشود.فریمورک ها شامل کدهای از پیش نوشته شده و قابل استفاده مجدد برای عناصر و اجزای طراحی هستند که می توانند به راحتی در HTML پایه برای ایجاد رابط های کاربری و سازگار با طراحی های وب سایت اعمال شوند.
فریمورک های CSS توسط توسعه‌دهندگان فرانت‌اند برای استقرار سریع مواردی مانند شبکه‌های رسپانسیو، فرم‌ها، دکمه‌ها یا دیگر عناصر مهم رابط کاربری در صفحات وب و برنامه‌ها استفاده می‌شوند.
آیا نمی توانید همه این موارد را خودتان بسازید؟ بله میشود ولی چرا از کد های آماده که قبلا نوشته و تست شده اند استفاده نکنیم تا در وقت و هزینه های خود صرفه جویی کنیم. در زیر تعدادی از بهترین فریمورک های css را آورده ایم.
1. Bootstrap
بوت استرپ به عنوان یک پروژه جانبی ساخته شده و توسط توسعه دهندگان در توییتر به اشتراک گذاشته شد. اکنون این ابزار پرکاربردترین فریم ورک CSS برای طراحی وب رسپانسیواست. میلیون‌ها نفر از Bootstrap برای ایجاد طرح‌بندی‌های(layouts) وب درست، سازگار و مطرح استفاده می‌کنند.
ویژگی های کلیدی:
-
سیستم شبکه رسپانسیو
-
اجزای UI از پیش ساخته شده
-
تم های قابل سفارشی سازی و توسعه پذیر
-
مستندات گسترده
بسیاری از شرکت ها، از جمله توییتر (بدیهی است)، Spotify و Udacity، از فریمورک بوت استرپ به طور جزئی یا کامل در وب سایت های خود استفاده کرده اند.
چرا مردم بوت استرپ را دوست دارند: دلایل دوست داشتن بوت استرپ دلایل دوست داشتن فریمورک ها هستند ساده، رایگان، پر کاربرد و استفاده آسان است. جامعه عظیمی از کارشناسان با تجربه از بوت استرپ استفاده کرده اند و برای تقریباً هر سؤالی که تصور کنید پاسخی وجود دارد.
آنچه تا کنون مردم در مورد بوت استرپ دوست ندارند، این است که همه سایت هایی که از آن استفاده می کنند یکسان به نظر می رسند. یکی دیگر از مواردی که باید از آن آگاه بود این است کهفریمورک به طور کلی ممکن است بسیار حجیم باشد. اندازه فایل ممکن است بزرگتر از آن چیزی باشد که برای یک وب سایت ساده انتظار دارید.
2. Bulma
بولما یک فریمورک سبک CSS بر اساس Flexbox است. سینتکس اینفریمورک به زبان ساده است، به این معنی که به شدت به کلاس های کاربردی توصیفی یا اصلاح کننده هایی مانند ".button" و ".is-large" متکی است.
ویژگی های کلیدی:
-
سیستم شبکه مبتنی بر Flexbox
-
معماری مدولار
-
دارای Sass برای سفارشی سازی آسان
-
حداقلی کد و طراحی
-
نمونه هایی از وب سایت های شناخته شده با استفاده از بولما: CSS Ninja و Signal.
چرا مردم بولما را دوست دارند: Bulma می تواند کمی شبیه مجموعه فریمورک های CSS لگو باشد. بسیار ساده و قابل درک است که برای مبتدیان یا افرادی که به دنبال یک راه حل سریع هستند بسیار عالی است. با استفاده از چند کلاس با نام های توصیفی، میتوانید ماژول بسازید، انیمیشن‌های CSS را اعمال کنید و استایل‌های پیشرفته‌تری ایجاد کنید. هیچ وابستگی جاوا اسکریپت وجود ندارد، بنابراین می توانید آن را در ترکیب با تقریباً هرفریمورک جاوا اسکریپت استفاده کنید.
آنچه مردم در مورد Bulma دوست ندارند: سادگی Bulma می تواند یک شمشیر دو لبه باشد. در حالی که به عنوان یک آموزش یا مقدمه برایفریمورک های CSS عالی است، توسعه دهندگان حرفه ای تر احتمالاً شکایت دارند که پیچیدگی یا توسعه پذیری گزینه های قوی تر را ندارد.
3. Foundation
در طرف مقابل Bulma، ما Foundation را داریم. هیچ تردیدی در مورد پیشرفته بودن Foundation و پیچیده بودن آن در مقایسه با گزینه های دیگر نیست. یک فریمورک فرانت‌اند واکنش‌گرا است که ابتدا برای توسعه در موبایل طراحی شده بود و سپس هم برای سایت‌ها و هم برای ایمیل‌ها استفاده شد و تقریباً 500000 وب‌سایت در سراسر جهان از آن استفاده می‌کنند.
ویژگی های کلیدی:
-
سیستم شبکه رسپانسیو
-
مجموعه ای جامع از اجزای UI
-
متغیرهای Sass قابل تنظیم
-
ادغام با ابزارها و کتابخانه های محبوب front-end
چرا مردم بنیاد را دوست دارند: بسیار قدیمی و ریشه دار است به این معنی که بسیاری از توسعه دهندگان به خوبی به Foundation آشنا هستند و با سینتکس و قراردادهای آن آشنا هستند. همچنین یک محصول بالغ با ویژگی های خاص، اسناد و منابع گسترده است. به علاوه، یکی از بهترینفریمورک‌ها برای دسترسی به حساب می‌آید.
آنچه مردم در مورد Foundation دوست ندارند: مانند بسیاری از محصولات بالغ، Foundation در مقایسه با فریمورکهای مدرن و سبک می‌تواند کمی حجیم باشد. بسیاری از ویژگی‌های درخواستی و گزینه‌های سفارشی‌سازی را به خود اختصاص داده است که پایگاه کد و اندازه فایل را کمی سنگین‌تر می‌کند. به علاوه، چون قراردادها تغییر کرده اند، نحوه یادگیری برای افراد مبتدی که به چیزی مانند Bootstrap عادت دارند کمی سخت است.
4. Semantic UI
همه چیز قابل تغییر است، این اساس Semantic UI است. این فریمورک برای کمک به ایجاد و مقیاس پذیری رابط‌های کاربری برای وب‌سایت‌ها و برنامه‌های کاربردی وب ساخته شده است.
ویژگی های کلیدی:
-
نام کلاس های بصری و مفهومی
-
طیف گسترده ای از اجزای رابط کاربری و طرح بندی(layouts)
-
تم ها و سبک های قابل تنظیم
-
ادغام با کتابخانه ها و فریم ورک های محبوب جاوا اسکریپت مانند Angular
-
بسیاری از سایت ها و شرکت ها مانند جمله Accenture و Snapchat از Semantic UI استفاده می کنند.
چرا مردم Semantic UI را دوست دارند: Semantic UI دارای یک سینتکس ساده برای درک کردن است که ساختن آن را از مجموعه گسترده اجزای UI، از جمله دکمه‌ها، shortcut ها ، کارت‌ها، فیلدهای متنی و موارد دیگر آسان می‌کند.
اما شاید محبوب ترین فریمورک در زمینه قالب و سفارشی سازی باشد. Semantic شامل یک کتابخانه با بیش از 3000 متغیر قابل تنظیم است و سپس در تمام اجزای رابط کاربری شما میتوانید از آن استفاده کنید.
آنچه مردم در مورد Semantic دوست ندارند: از آنجایی که Semantic بسیار متمرکز بر UI و بسیار گسترده است، ممکن است حاوی کدهای زیادی باشد که در پروژه شما استفاده نشود. بدان معنی که برخی افراد آن را برای پروژه‌های ساده‌تر در مقایسه با فریمورکهای دیگر بسیار حجیم می‌دانند.
5. Materialize
فریمورک CSS Materialize بر اساس اصول طراحی متریال گوگل است و بر طراحی بصری جسورانه و انیمیشن متمرکز UX تأکید دارد. Materialize با بیش از 38000 ستاره در GitHub بسیار محبوب است.
ویژگی های کلیدی:
-
اجزا و سبک های الهام گرفته از طراحی متریال
-
سیستم شبکه رسپانسیو
-
سفارشی سازی Sass-powered
-
افزونه های جاوا اسکریپت داخلی
Materialize توسط طیف گسترده ای از سایت ها استفاده می شود، اما بیشتر سایت های موجود مشاغل کوچک و پروژه های شخصی هستند.
چرا مردم Materialize را دوست دارند: Materialize یک راه حل ساده و کم اهمیت برای راه اندازی یک وب سایت شیک و قابل استفاده است.
آنچه مردم در مورد Materialize دوست ندارند: همانطور که همیشه صادق است، سادگی به معنای محدودیت نیز هست. Materialize به اندازه سایر فریمورک ها قوی یا توسعه پذیر نیست و برای حرکات خاص به جاوا اسکریپت متکی است.
6. UIkit
یکی دیگر ازفریمورک‌های مدولار متمرکز بر رابط‌های وب‌سایت و برنامه‌های وب، UIkit نسبت به Semantic UI محبوبیت کمتری دارد، اما این باعث نمی‌شود که ضعیف باشد. این فریمورک متمرکز بر رابط کاربری است که توسط بسیاری از سایت ها و برنامه های وب استفاده می شود.
ویژگی های کلیدی:
-
معماری مدولار با تنظیمات دلخواه
-
سیستم شبکه رسپانسیو
-
Sass متغیرها و mixins برای سفارشی سازی
-
کتابخانه های UI گسترده
چرا مردم UIkit را دوست دارند: UIkit از نظر سهم بازار کمی کوچکتر باشد، اما از نظر ردپا، اندازه فایل و پیچیدگی نیز کوچکتر است. بدون کاهش عملکرد، UIkit یک کتابخانه اجزای UI بسیار سبک و جامع ارائه می دهد. با راه اندازی ساده بسیار قابل تنظیم است.
آنچه مردم در مورد UIkit دوست ندارند: احتمالاً بزرگترین ایراد UIkit این است که نسبت به برخی از فریم ورک های بزرگتر و محبوب تر، کامیونیتی کوچک تری دارد.
در این آموزش 6 فریمورک محبوب CSS را معرفی کردیم توضیح دادیم. امیدواریم این مقاله آموزشی برای شما مفید بوده باشد، برای دیدن باقی آموزش ها میتوانید وارد منوی پشتیبانی بخش آموزش ها شوید، در صورتی که درباره این آموزش به مشکل یا سوالی برخورد کردید، میتوانید آن را در بخش دیدگاه بیان کنید.
