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

1. ‫بر‬ ‫مروری‬CSS Framework‫ها‬
‫محمدی‬ ‫جان‬ ‫رضا‬

2. ‫مشلک‬:
•‫بسازم؟‬ ‫را‬ ‫صفحات‬ ‫قالب‬ ‫چطور‬
•‫گرا‬ ‫واکنش‬ ‫سایت‬ ‫یک‬ ‫چطور‬(Responsive)‫بسازم؟‬
•‫در‬ ‫را‬ ‫سایت‬ ‫چطور‬‫اکثر‬‫گر‬ ‫مرور‬‫ها‬‫دهم؟‬ ‫نمایش‬ ‫درستی‬ ‫به‬
•‫کنم؟‬ ‫طراحی‬ ‫را‬ ‫سایت‬ ‫های‬ ‫دکمه‬ ‫چطور‬
•‫کنم؟‬ ‫طراحی‬ ‫را‬ ‫سایت‬ ‫منوی‬ ‫چطور‬
•‫چطور‬...

3. ‫حل‬ ‫راه‬:
1-‫د‬ ‫را‬ ‫حل‬ ‫راه‬ ‫بهترین‬ ‫و‬ ‫باشیم‬ ‫مناسب‬ ‫حلی‬ ‫راه‬ ‫دنبال‬ ‫به‬ ‫کدام‬ ‫هر‬ ‫برای‬‫کنیم‬ ‫استفاده‬ ‫ها‬ ‫پروژه‬ ‫ر‬.
1.1-‫صفحه‬ ‫اجزا‬ ‫یکپارچگی‬ ‫حفظ‬.
1.2-‫صفحه‬ ‫در‬ ‫مختلف‬ ‫اجزا‬ ‫تداخل‬.
1.3-‫مختلف‬ ‫های‬ ‫پروژه‬ ‫در‬ ‫ها‬ ‫کد‬ ‫توسعه‬ ‫و‬ ‫تکرار‬.
2-‫از‬CSS Framework‫کنیم‬ ‫استفاده‬.

4. CSS Framework‫چیست‬‫؟‬
‫دهنداگن‬ ‫توسعه‬ ‫از‬ ‫برخی‬‫وب‬(‫افراد‬ ‫و‬ ‫ها‬ ‫شرکت‬)‫رفته‬ ‫را‬ ‫شده‬ ‫مطرح‬ ‫مشالکت‬‫رف‬‫ته‬‫کرده‬ ‫حل‬ ‫ها‬ ‫سال‬ ‫طی‬
‫اند‬‫عنوان‬ ‫به‬ ‫را‬ ‫خود‬ ‫های‬ ‫حل‬ ‫راه‬ ‫و‬،‫چهارچوب‬ ‫یک‬‫داده‬ ‫ارائه‬ ‫و‬ ‫کرده‬ ‫مستند‬‫اند‬.‫که‬ ‫ها‬ ‫حل‬ ‫راه‬ ‫این‬ ‫به‬
‫میباشند‬ ‫نیز‬ ‫شده‬ ‫سازی‬ ‫پیاده‬ ‫های‬ ‫کد‬ ‫شامل‬ ‫عموما‬CSS Framework‫شود‬ ‫می‬ ‫گفته‬.
‫دیگر‬ ‫عبارتی‬ ‫به‬:
‫یک‬CSS Framework‫از‬ ‫ای‬ ‫مجموعه‬‫س‬ ‫که‬ ‫است‬ ‫اماکنات‬ ‫و‬ ‫ها‬ ‫تکنیک‬‫یستم‬‫ی‬‫جهت‬
‫صفحات‬ ‫ساخت‬‫وب‬‫میدهد‬ ‫ارائه‬ ‫را‬.

5. ‫از‬ ‫نمونه‬ ‫چند‬CSS Framework‫ها‬:

6. ‫انواع‬CSS Framework‫ها‬:
1-‫تک‬‫منظوره‬:‫دارند‬ ‫نظر‬ ‫در‬ ‫را‬ ‫خاص‬ ‫موردی‬ ‫که‬.‫مثال‬:‫ا‬ ‫چیدمان‬ ‫یا‬ ‫ها‬ ‫متن‬ ‫بندی‬ ‫قالب‬‫صفحه‬ ‫جزا‬.
http://getskeleton.com/
2-‫جامع‬:‫دارند‬ ‫نظر‬ ‫در‬ ‫را‬ ‫صفحه‬ ‫ظاهری‬ ‫های‬ ‫نیاز‬ ‫اکثر‬.‫مثال‬:‫ج‬ ،‫ها‬ ‫دکمه‬ ،‫صفحه‬ ‫چیدمان‬‫ها‬ ‫فرم‬ ‫و‬ ‫داول‬...
http://gumbyframework.com/
3-UI Framework:‫م‬ ‫ارائه‬ ‫را‬ ‫صفحات‬ ‫رفتاری‬ ‫های‬ ‫نیاز‬ ‫از‬ ‫برخی‬ ‫و‬ ‫ظاهری‬ ‫ها‬ ‫نیاز‬ ‫تمام‬‫یدهند‬.
‫مثال‬:‫فوق‬ ‫موارد‬ ‫تمامی‬+JS‫و‬HTML‫صفحه‬ ‫در‬ ‫استفاده‬ ‫برای‬ ‫آماده‬.
http://getbootstrap.com/
http://foundation.zurb.com/

7. ‫عمل‬ ‫در‬:
▪‫فرم‬ ‫یک‬ ‫خواهیم‬ ‫می‬ ‫نمونه‬ ‫برای‬Login‫از‬ ‫استفاده‬ ‫با‬ ‫ساده‬Foundation‫و‬Bootstrap‫بسازیم‬.

8. ‫از‬ ‫استفاده‬ ‫مزایای‬CSS/UI Framework:
▪‫توسعه‬ ‫زمان‬ ‫اکهش‬
▪‫خطاها‬ ‫اکهش‬
–‫مخت‬ ‫های‬ ‫بخش‬ ‫استایل‬ ‫تداخل‬‫صفحه‬ ‫ل‬
–‫مختلف‬ ‫مرورگرهای‬ ‫در‬ ‫نمایش‬
▪‫صفح‬ ‫اجزا‬ ‫یکپارچگی‬ ‫حفظ‬‫ه‬
▪‫استاندا‬ ‫اساس‬ ‫بر‬ ‫طراحی‬ ‫به‬ ‫کمک‬‫ها‬ ‫رد‬
‫مثال‬:‫اساس‬ ‫بر‬ ‫طراحی‬Grid System‫ها‬
▪‫گروهی‬ ‫اکر‬ ‫انجام‬ ‫توان‬ ‫افزایش‬
▪‫و‬ ‫نگهداری‬ ‫کردن‬ ‫ساده‬‫آینده‬ ‫در‬ ‫توسعه‬

9. ‫از‬ ‫استفاده‬ ‫مشالکت‬CSS/UI Framework:
▪‫است‬ ‫دشوار‬ ‫نسبتا‬ ‫ظاهر‬ ‫کردن‬ ‫سفارشی‬
▪‫اکر‬ ‫نحوه‬ ‫با‬ ‫نبودن‬ ‫آشنا‬CSS Framework‫ها‬
▪‫شده‬ ‫پروژه‬ ‫در‬ ‫که‬ ‫اضافی‬ ‫اماکناتی‬‫اند‬‫شد‬ ‫نخواهند‬ ‫استفاده‬ ‫هرگز‬ ‫و‬(80/20)
▪‫برنامه‬ ‫خالقیت‬ ‫اکهش‬‫نویسان‬
▪‫برنامه‬ ‫دانش‬ ‫ارتقا‬ ‫و‬ ‫یادگیری‬ ‫از‬ ‫جلوگیری‬‫نویسان‬

10. ‫از‬ ‫باید‬ ‫آیا‬CSS/UI Framework‫کرد؟‬ ‫استفاده‬

11. ‫از‬ ‫باید‬ ‫آیا‬CSS/UI Framework‫کرد؟‬ ‫استفاده‬
‫خاص‬ ‫های‬ ‫طراحی‬‫رایج‬ ‫های‬ ‫طراحی‬
‫استفاده‬‫میزان‬

12. ‫یک‬ ‫چطور‬Framework‫کنیم؟‬ ‫انتخاب‬ ‫مناسب‬
▪‫اهداف‬ ‫کردن‬ ‫بندی‬ ‫اولویت‬
▪‫کردن‬ ‫سفارشی‬ ‫قابلیت‬Framework
▪‫آموزشی‬ ‫منابع‬ ‫میزان‬ ‫بررسی‬Framework‫نظر‬ ‫مد‬
▪‫تیم‬ ‫دهنداگن‬ ‫توسعه‬ ‫تجربه‬ ‫و‬ ‫توانایی‬

13. ‫سواالت‬:
janmohammadi.reza@gmail.com